From 180c4e4ce242acac738ae296ef76a1ba104851f7 Mon Sep 17 00:00:00 2001
From: Arnau Giralt <arnau.giralt@ingrammicro.com>
Date: Fri, 17 May 2024 13:07:27 +0200
Subject: [PATCH] Make icons smaller in storybook to prevent Chromatic not
 being able to capture the story

---
 .storybook/stories.css                 |  2 +-
 components/src/stories/Icon.stories.js | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.storybook/stories.css b/.storybook/stories.css
index f5466d2e..6ff62356 100644
--- a/.storybook/stories.css
+++ b/.storybook/stories.css
@@ -7,7 +7,7 @@
 
 .sb-icon-wrapper {
   width: calc(33% - 10px);
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   margin-right: 10px;
   display: flex;
   align-items: center;
diff --git a/components/src/stories/Icon.stories.js b/components/src/stories/Icon.stories.js
index 1d97dfcd..6c301d7b 100644
--- a/components/src/stories/Icon.stories.js
+++ b/components/src/stories/Icon.stories.js
@@ -51,7 +51,7 @@ export const Animated = {
       Object.keys(iconsAnimated)
         .map(
           (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="24"/> <span>${icon}</span></div>`,
         )
         .join('') +
       '</div>',
@@ -75,7 +75,7 @@ export const Baseline = {
       Object.keys(iconsBaseline)
         .map(
           (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="24"/> <span>${icon}</span></div>`,
         )
         .join('') +
       '</div>',
@@ -99,7 +99,7 @@ export const Outline = {
       Object.keys(iconsOutline)
         .map(
           (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="24"/> <span>${icon}</span></div>`,
         )
         .join('') +
       '</div>',
@@ -123,7 +123,7 @@ export const Round = {
       Object.keys(iconsRound)
         .map(
           (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="24"/> <span>${icon}</span></div>`,
         )
         .join('') +
       '</div>',
@@ -147,7 +147,7 @@ export const Sharp = {
       Object.keys(iconsSharp)
         .map(
           (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="24"/> <span>${icon}</span></div>`,
         )
         .join('') +
       '</div>',
@@ -171,7 +171,7 @@ export const Twotone = {
       Object.keys(iconsTwotone)
         .map(
           (icon) =>
-            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="24"/> <span>${icon}</span></div>`,
         )
         .join('') +
       '</div>',