docs: Add trailing icon story

lifeomic · Oct 12, 2023 · fa39849 · fa39849
1 parent f7cf808
commit fa39849
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/src/components/List/List.stories.tsx b/src/components/List/List.stories.tsx
@@ -4,7 +4,7 @@ import { List } from './List';
 import { ListItem } from './ListItem';
 import { ListGroupHeading } from './ListGroupHeading';
 import { Avatar } from '../Avatar';
-import { Database, HeartCircle } from '@lifeomic/chromicons';
+import { Database, HeartCircle, ChevronRight } from '@lifeomic/chromicons';
 import Avatar1 from '../../assets/example-avatar-1.jpg';
 import Avatar2 from '../../assets/example-avatar-2.jpg';
 
@@ -118,6 +118,23 @@ export const Icons: Story = {
   },
 };
 
+export const TrailingIcons: Story = {
+  args: {
+    'aria-label': 'List with trailing icons',
+    items: [
+      <ListItem key="1" trailingIcon={ChevronRight}>
+        Option 1
+      </ListItem>,
+      <ListItem key="2" trailingIcon={ChevronRight}>
+        Option 2
+      </ListItem>,
+      <ListItem key="3" trailingIcon={ChevronRight}>
+        Option 3
+      </ListItem>,
+    ],
+  },
+};
+
 export const Avatars: Story = {
   args: {
     'aria-label': 'List with avatars',