From ba36023ae6674c2d22e739a7c216ce74d4a92b4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 16:30:01 +0200
Subject: [PATCH] :sparkles: Revamp RawSvg stories and update prop name

---
 .../ui/ds/foundations/assets/icon.stories.jsx | 21 +++++-----
 .../ui/ds/foundations/assets/raw_svg.cljs     |  4 +-
 .../ds/foundations/assets/raw_svg.stories.jsx | 34 ++++++++++------
 .../typography/heading.stories.jsx            |  8 ++--
 .../foundations/typography/text.stories.jsx   | 40 ++++++++++---------
 5 files changed, 61 insertions(+), 46 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 8cd62c291..c6b93f266 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
@@ -16,17 +16,17 @@ export default {
   argTypes: {
     id: {
       options: iconList,
-      control: { type: "select" }
+      control: { type: "select" },
     },
     size: {
       options: ["m", "s"],
-      control: { type: "radio" }
-    }
-  }
+      control: { type: "radio" },
+    },
+  },
 };
 
 export const All = {
-  render: ({size}) => (
+  render: ({ size }) => (
     <StoryWrapper theme="default">
       <StoryHeader>
         <h1>All Icons</h1>
@@ -55,7 +55,7 @@ export const All = {
 };
 
 export const Default = {
-  render: ({id, ...args}) => (
+  render: ({ id, ...args }) => (
     <StoryWrapper theme="default">
       <Icon id={id} {...args} />
     </StoryWrapper>
@@ -64,12 +64,12 @@ export const Default = {
     id: "pin",
   },
   parameters: {
-    controls: { exclude: ["size"] }
-  }
+    controls: { exclude: ["size"] },
+  },
 };
 
 export const CustomSize = {
-  render: ({id, size, ...args}) => (
+  render: ({ id, size, ...args }) => (
     <StoryWrapper theme="default">
       <Icon id={id} size={size} {...args} />
     </StoryWrapper>
@@ -77,6 +77,5 @@ export const CustomSize = {
   args: {
     id: "pin",
     size: "m",
-  }
+  },
 };
-
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
index f6e09ad9f..afc691f1f 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
@@ -32,6 +32,6 @@
 
 (mf/defc raw-svg*
   {::mf/props :obj}
-  [{:keys [asset] :rest props}]
+  [{:keys [id] :rest props}]
   [:> "svg" props
-   [:use {:href (dm/str "#asset-" asset)}]])
+   [:use {:href (dm/str "#asset-" id)}]])
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
index b73e6b56e..dcdf6e509 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
@@ -6,41 +6,51 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
   Components.storybook;
 const { svgs } = Components.meta;
 
-export default {
-  title: "Foundations/RawSvg",
-  component: Components.RawSvg,
-};
-
 const assetList = Object.entries(svgs)
   .map(([_, value]) => value)
   .sort();
 
-export const AllAssets = {
-  render: () => (
+export default {
+  title: "Foundations/Assets/RawSvg",
+  component: Components.RawSvg,
+  argTypes: {
+    id: {
+      options: assetList,
+      control: { type: "select" },
+    },
+  },
+};
+
+export const All = {
+  render: ({}) => (
     <StoryWrapper theme="light">
       <StoryHeader>
-        <h1>All assets</h1>
-        <p>Hover on a asset to see its id.</p>
+        <h1>All SVG Assets</h1>
+        <p>Hover on an asset to see its ID.</p>
       </StoryHeader>
 
       <StoryGrid size="200">
         {assetList.map((x) => (
           <StoryGridCell key={x} title={x}>
-            <RawSvg asset={x} style={{ maxWidth: "100%" }} />
+            <RawSvg id={x} style={{ maxWidth: "100%" }} />
           </StoryGridCell>
         ))}
       </StoryGrid>
     </StoryWrapper>
   ),
   parameters: {
+    controls: { exclude: ["id"] },
     backgrounds: { values: [{ name: "debug", value: "#ccc" }] },
   },
 };
 
 export const Default = {
-  render: () => (
+  render: ({ id, ...args }) => (
     <StoryWrapper theme="default">
-      <RawSvg asset={svgs.BrandGitlab} width="200" />
+      <RawSvg id={id} {...args} width="200" />
     </StoryWrapper>
   ),
+  args: {
+    id: "brand-gitlab",
+  },
 };
diff --git a/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
index 28336b90f..30e592e88 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
@@ -24,13 +24,15 @@ export default {
 
 export const AnyHeading = {
   name: "Heading",
-  render: ({level, typography, ...args}) => (
+  render: ({ level, typography, ...args }) => (
     <StoryWrapper theme="default">
-      <Heading level={level} typography={typography} {...args}>Lorem ipsum</Heading>
+      <Heading level={level} typography={typography} {...args}>
+        Lorem ipsum
+      </Heading>
     </StoryWrapper>
   ),
   args: {
     level: 1,
     typography: "display",
-  }
+  },
 };
diff --git a/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
index 31cceaa5d..1eaec1b8e 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
@@ -14,29 +14,33 @@ export default {
     typography: {
       options: typographyIds,
       control: { type: "select" },
-    }
-  }
+    },
+  },
 };
 
 export const Default = {
-  render: ({typography, ...args}) => (
+  render: ({ typography, ...args }) => (
     <StoryWrapper theme="default">
-      <Text typography={typography} {...args}>Lorem ipsum</Text>
-    </StoryWrapper>
-  ),
-  args: {
-    typography: "display"
-  }
-};
-
-export const CustomTag = {
-  render: ({typography, ...args}) => (
-    <StoryWrapper theme="default">
-      <Text typography={typography} {...args}>Lorem ipsum</Text>
+      <Text typography={typography} {...args}>
+        Lorem ipsum
+      </Text>
     </StoryWrapper>
   ),
   args: {
     typography: "display",
-    as: "li"
-  }
-}
+  },
+};
+
+export const CustomTag = {
+  render: ({ typography, ...args }) => (
+    <StoryWrapper theme="default">
+      <Text typography={typography} {...args}>
+        Lorem ipsum
+      </Text>
+    </StoryWrapper>
+  ),
+  args: {
+    typography: "display",
+    as: "li",
+  },
+};