feat(icons): add all icons in story

1024pix · Oct 8, 2024 · bb4afd3 · bb4afd3
1 parent d7e3bfd
commit bb4afd3
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/app/stories/pix-icon.mdx b/app/stories/pix-icon.mdx
@@ -7,12 +7,12 @@ import * as ComponentStories from './pix-icon.stories';
 
 > Permet d'utiliser les icônes disponible du Design System.
 
-<Story of={ComponentStories.icon} height={60} />
+<Story of={ComponentStories.allIcons} height={300} />
 
 ## Usage
 
 ```html
-  <PixIcon @name="powerSettings", @plainIcon={{true}} />
+<PixIcon @name="powerSettings" , @plainIcon="{{true}}" />
 ```
 
 ## Arguments

diff --git a/app/stories/pix-icon.stories.js b/app/stories/pix-icon.stories.js
@@ -49,3 +49,31 @@ export const icon = (args) => ({
 />`,
   context: args,
 });
+
+const icons = Object.entries(ICONS).flatMap(([name, icon]) =>
+  icon.plainIcon
+    ? [
+        { iconName: name, variant: false },
+        { iconName: name, variant: true },
+      ]
+    : { iconName: name, variant: false },
+);
+
+export const allIcons = (args) => {
+  return {
+    template: hbs`
+  <ul>
+  {{#each args.icons as |icon|  }}
+  <li>
+    <PixIcon @name={{icon.iconName}} @plainIcon={{icon.variant}} @alternativeText={{icon.iconName}} @ariaHidden={{true}} />
+    <span>{{icon.iconName}}</span>
+  </li>
+  {{/each}}
+  </ul>
+`,
+    context: args,
+  };
+};
+
+allIcons.bind({});
+allIcons.args = { icons };