feat(icons): add all icons in story

1024pix · Oct 9, 2024 · 435c183 · 435c183
1 parent d7e3bfd
commit 435c183
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 4 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,3 +1,5 @@
+import '../app/styles/global.css';
+
 const preview = {
   parameters: {
     layout: 'centered',
@@ -33,11 +35,11 @@ const preview = {
             'Breaking changes',
             'Faire une release',
             'Architecture',
-            'Storybook'
+            'Storybook',
           ],
         ],
       },
     },
-  }
+  },
 };
 export default preview;
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={1050} />
 
 ## 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 class='icon-list'>
+  {{#each this.icons as |icon|}}
+    <li class='icon-list__cell'>
+      <PixIcon
+        @name={{icon.iconName}}
+        @plainIcon={{icon.variant}}
+        @alternativeText={{icon.iconName}}
+        @ariaHidden={{true}}
+      />
+      <p class='icon-name'>{{icon.iconName}}&nbsp;{{if icon.variant '(plain)'}}</p>
+    </li>
+  {{/each}}
+</ul>`,
+    context: args,
+  };
+};
+
+allIcons.bind({});
+allIcons.args = { icons };
diff --git a/app/styles/global.css b/app/styles/global.css
@@ -0,0 +1,24 @@
+/* on utilise un fichier css car on a pas de loader scss */
+.icon-list {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  gap: .4rem;
+}
+
+.icon-list__cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height:60px;
+  padding-bottom: .3rem;
+}
+
+.icon-list__cell svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.icon-name {
+  color:var(--pix-neutral-800);
+  font-size: .75rem
+}