From 7e61acc4da1d2384477d8abdad0fae3860606c01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 15:56:32 +0200
Subject: [PATCH] :lipstick: Update icon prop name

---
 .../main/ui/ds/foundations/assets/icon.cljs   |  4 +--
 .../main/ui/ds/foundations/assets/icon.mdx    |  6 ++--
 .../ui/ds/foundations/assets/icon.stories.jsx | 28 +++++++++++--------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
index fb901789c..d1578d401 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
@@ -279,10 +279,10 @@
 
 (mf/defc icon*
   {::mf/props :obj}
-  [{:keys [icon size class] :rest props}]
+  [{:keys [id size class] :rest props}]
   (let [class (dm/str (or class "") " " (stl/css :icon))
         props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
         size-px (cond (= size "s") icon-size-s :else icon-size-m)
         offset (/ (- icon-size-m size-px) 2)]
     [:> "svg" props
-     [:use {:href (dm/str "#icon-" icon) :width size-px :height size-px :x offset :y offset}]]))
+     [:use {:href (dm/str "#icon-" id) :width size-px :height size-px :x offset :y offset}]]))
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
index fc36208dc..140b897a2 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
@@ -47,7 +47,7 @@ Assuming the namespace is required as `i`:
 You can now use the icon IDs defined in the namespace:
 
 ```clj
-[:> i/icon* {:icon i/pin}]
+[:> i/icon* {:id i/pin}]
 ```
 
 ### Customizing colors
@@ -59,7 +59,7 @@ If you need to override this behavior, you can use a `class` in the `<Icon>`
 component and set `color` to whatever value you prefer:
 
 ```clj
-[:> i/icon* {:icon i/add :class (stl/css :toolbar-icon)}]
+[:> i/icon* {:id i/add :class (stl/css :toolbar-icon)}]
 ```
 
 ```scss
@@ -74,7 +74,7 @@ By default, icons do not have any accessible text attached to them. You should
 add an `aria-label` attribute to set a proper text:
 
 ```clj
-[:> i/icon* {:icon i/add :aria-label (tr "foo.bar")}]
+[:> i/icon* {:id i/add :aria-label (tr "foo.bar")}]
 ```
 
 ## Usage guidelines for design
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 4735b1d1f..8cd62c291 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
@@ -14,7 +14,7 @@ export default {
   title: "Foundations/Assets/Icon",
   component: Components.Icon,
   argTypes: {
-    icon: {
+    id: {
       options: iconList,
       control: { type: "select" }
     },
@@ -25,12 +25,12 @@ export default {
   }
 };
 
-export const AllIcons = {
-  render: () => (
+export const All = {
+  render: ({size}) => (
     <StoryWrapper theme="default">
       <StoryHeader>
         <h1>All Icons</h1>
-        <p>Hover on an icon to see its ID</p>
+        <p>Hover on an icon to see its ID.</p>
       </StoryHeader>
       <StoryGrid>
         {iconList.map((iconId) => (
@@ -39,39 +39,43 @@ export const AllIcons = {
             key={iconId}
             style={{ color: "var(--color-accent-primary)" }}
           >
-            <Icon icon={iconId} />
+            <Icon id={iconId} size={size} />
           </StoryGridCell>
         ))}
       </StoryGrid>
     </StoryWrapper>
   ),
+  args: {
+    size: "m",
+  },
   parameters: {
+    controls: { exclude: ["id", "size"] },
     backgrounds: { disable: true },
   },
 };
 
 export const Default = {
-  render: ({icon, ...args}) => (
+  render: ({id, ...args}) => (
     <StoryWrapper theme="default">
-      <Icon icon={icon} />
+      <Icon id={id} {...args} />
     </StoryWrapper>
   ),
   args: {
-    icon: "pin",
+    id: "pin",
   },
   parameters: {
-    controls: { exclude: "size" }
+    controls: { exclude: ["size"] }
   }
 };
 
 export const CustomSize = {
-  render: ({icon, size, ...args}) => (
+  render: ({id, size, ...args}) => (
     <StoryWrapper theme="default">
-      <Icon icon={icon} size={size} />
+      <Icon id={id} size={size} {...args} />
     </StoryWrapper>
   ),
   args: {
-    icon: "pin",
+    id: "pin",
     size: "m",
   }
 };