docs: add stories for icon in alert

nl-design-system · Nov 3, 2023 · d08e09c · d08e09c
1 parent a91da02
commit d08e09c
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 1 deletion.
diff --git a/packages/storybook-css/src/Alert.stories.tsx b/packages/storybook-css/src/Alert.stories.tsx
@@ -38,6 +38,15 @@ const AlertStory = ({ children, icon, ...props }: AlertStoryProps) => {
   );
 };
 
+interface AlertStoryProps extends Omit<AlertProps, 'icon'> {
+  icon: string;
+}
+
+const AlertStory = ({ icon, ...restProps }: PropsWithChildren<AlertStoryProps>) => {
+  const IconElement = icon;
+  return <Alert {...restProps} icon={icon ? <IconElement></IconElement> : undefined}></Alert>;
+};
+
 const meta = {
   title: 'CSS Component/Alert',
   id: 'css-alert',
@@ -46,6 +55,11 @@ const meta = {
     children: {
       description: 'HTML content of the alert',
     },
+    icon: {
+      description: 'Icon',
+      control: { type: 'select' },
+      options: ['', ...iconSet.map(({ id }) => id)],
+    },
     type: {
       description: 'Type',
       control: { type: 'select' },
@@ -68,6 +82,7 @@ const meta = {
         laborum.
       </Paragraph>,
     ],
+    icon: '',
   },
   tags: ['autodocs'],
   parameters: {
@@ -108,6 +123,24 @@ export const Info: Story = {
   },
 };
 
+export const InfoIcon: Story = {
+  args: {
+    icon: 'utrecht-icon-alleen',
+    type: 'info',
+  },
+  name: 'Info with icon',
+  parameters: {
+    docs: {
+      description: {
+        story: 'De gemeente Utrecht gebruikt zelf nog geen icoon bij de alert, het icoon is een voorbeeld.',
+      },
+    },
+    status: {
+      type: 'ALPHA',
+    },
+  },
+};
+
 export const OK: Story = {
   args: {
     type: 'ok',
@@ -119,6 +152,24 @@ export const OK: Story = {
   },
 };
 
+export const OKIcon: Story = {
+  args: {
+    icon: 'utrecht-icon-checkmark',
+    type: 'ok',
+  },
+  name: 'OK with icon',
+  parameters: {
+    docs: {
+      description: {
+        story: 'De gemeente Utrecht gebruikt zelf nog geen icoon bij de alert, het icoon is een voorbeeld.',
+      },
+    },
+    status: {
+      type: 'ALPHA',
+    },
+  },
+};
+
 export const Warning: Story = {
   args: {
     type: 'warning',
@@ -130,6 +181,24 @@ export const Warning: Story = {
   },
 };
 
+export const WarningIcon: Story = {
+  args: {
+    icon: 'utrecht-icon-melding',
+    type: 'warning',
+  },
+  name: 'Warning with icon',
+  parameters: {
+    docs: {
+      description: {
+        story: 'De gemeente Utrecht gebruikt zelf nog geen icoon bij de alert, het icoon is een voorbeeld.',
+      },
+    },
+    status: {
+      type: 'ALPHA',
+    },
+  },
+};
+
 export const Error: Story = {
   args: {
     type: 'error',
@@ -141,6 +210,24 @@ export const Error: Story = {
   },
 };
 
+export const ErrorIcon: Story = {
+  args: {
+    icon: 'utrecht-icon-melding',
+    type: 'error',
+  },
+  name: 'Error with icon',
+  parameters: {
+    docs: {
+      description: {
+        story: 'De gemeente Utrecht gebruikt zelf nog geen icoon bij de alert, het icoon is een voorbeeld.',
+      },
+    },
+    status: {
+      type: 'ALPHA',
+    },
+  },
+};
+
 export const CallToActionLinks: Story = {
   parameters: {
     docs: {

diff --git a/packages/storybook-css/src/Alert.tsx b/packages/storybook-css/src/Alert.tsx
@@ -3,7 +3,7 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren, ReactNode } from 'react';
 
-export interface AlertProps extends PropsWithChildren {
+export interface AlertProps {
   actions?: ReactNode;
   icon?: ReactNode;
   type?: string;