feat(icons): add all icons in story

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

Hide file tree

Showing 2 changed files with 33 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,34 @@ 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 @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 };