From d7ca4d49dc97c4caf63dca601d6f3c92f720d727 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 15:53:27 +0200
Subject: [PATCH] :sparkles: Revamp icon stories

---
 .../ui/ds/foundations/assets/icon.stories.jsx | 41 ++++++++++++++-----
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
index 52bb1076c..4735b1d1f 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
@@ -6,15 +6,25 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
   Components.storybook;
 const { icons } = Components.meta;
 
-export default {
-  title: "Foundations/Icons",
-  component: Components.Icon,
-};
-
 const iconList = Object.entries(icons)
   .map(([_, value]) => value)
   .sort();
 
+export default {
+  title: "Foundations/Assets/Icon",
+  component: Components.Icon,
+  argTypes: {
+    icon: {
+      options: iconList,
+      control: { type: "select" }
+    },
+    size: {
+      options: ["m", "s"],
+      control: { type: "radio" }
+    }
+  }
+};
+
 export const AllIcons = {
   render: () => (
     <StoryWrapper theme="default">
@@ -41,17 +51,28 @@ export const AllIcons = {
 };
 
 export const Default = {
-  render: () => (
+  render: ({icon, ...args}) => (
     <StoryWrapper theme="default">
-      <Icon icon={icons.Pin} />
+      <Icon icon={icon} />
     </StoryWrapper>
   ),
+  args: {
+    icon: "pin",
+  },
+  parameters: {
+    controls: { exclude: "size" }
+  }
 };
 
-export const Small = {
-  render: () => (
+export const CustomSize = {
+  render: ({icon, size, ...args}) => (
     <StoryWrapper theme="default">
-      <Icon icon={icons.Pin} size="s" />
+      <Icon icon={icon} size={size} />
     </StoryWrapper>
   ),
+  args: {
+    icon: "pin",
+    size: "m",
+  }
 };
+