feat: number icon list story

chanzuckerberg · Jun 10, 2022 · 2f320a7 · 2f320a7
1 parent a0c05f4
commit 2f320a7
Showing 1 changed file with 35 additions and 1 deletion.
diff --git a/.storybook/recipes/NumberIconList/NumberIconList.stories.tsx b/.storybook/recipes/NumberIconList/NumberIconList.stories.tsx
@@ -2,13 +2,47 @@ import { Story, Meta } from '@storybook/react';
 import React from 'react';
 
 import { NumberIconList, Props } from './NumberIconList';
+import { NumberIcon } from '../../../src';
 
 export default {
   title: 'Recipes/NumberIconList',
   component: NumberIconList,
 } as Meta;
 
-const Template: Story<Props> = (args) => <NumberIconList {...args} />;
+const Template: Story<Props> = (args) => (
+  <NumberIconList>
+    <NumberIcon aria-label="Item 1" number={1} size="sm" />
+    <NumberIcon
+      aria-label="Item 2"
+      incomplete={true}
+      number={2}
+      numberIconTitle={`incomplete step 2`}
+      size="sm"
+    />
+    <NumberIcon aria-label="Item 3" number={3} size="sm" />
+    <NumberIcon
+      aria-label="Item 4"
+      incomplete={true}
+      number={4}
+      numberIconTitle={`incomplete step 4`}
+      size="sm"
+    />
+    <NumberIcon
+      aria-label="Item 5"
+      incomplete={true}
+      number={5}
+      numberIconTitle={`incomplete step 5`}
+      size="sm"
+    />
+    <NumberIcon
+      aria-label="Item 6"
+      incomplete={true}
+      number={6}
+      numberIconTitle={`incomplete step 6`}
+      size="sm"
+    />
+  </NumberIconList>
+);
 
 export const Default = Template.bind({});
 Default.args = {};