From 87febfc77bcec407ee8d37fcde5d7165ed26e92a Mon Sep 17 00:00:00 2001
From: LionelB <lionel@lumographe.fr>
Date: Tue, 8 Oct 2024 16:11:03 +0200
Subject: [PATCH] feat(icons): add all icons in story

---
 .storybook/preview.js           |  6 ++++--
 app/stories/pix-icon.mdx        |  4 ++--
 app/stories/pix-icon.stories.js | 31 +++++++++++++++++++++++++++++++
 app/styles/global.css           | 24 ++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 app/styles/global.css

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 737404b2f..094b92bf3 100644
--- 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
index 904233ba5..11e640491 100644
--- 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="playCircle" @plainIcon="{{true}}" />
 ```
 
 ## Arguments
diff --git a/app/stories/pix-icon.stories.js b/app/stories/pix-icon.stories.js
index 535ef17cf..a149951d3 100644
--- 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
new file mode 100644
index 000000000..deebb4d51
--- /dev/null
+++ 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
+}