From 7cf14596f20d4ef0b6806e808bcafe838ea2fe7b Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Wed, 9 Oct 2024 20:27:59 +0100
Subject: [PATCH] fix: use full classes for shadow stories

---
 src/core/styles/Shadows.stories.tsx | 32 ++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/core/styles/Shadows.stories.tsx b/src/core/styles/Shadows.stories.tsx
index 45471961..01ff2804 100644
--- a/src/core/styles/Shadows.stories.tsx
+++ b/src/core/styles/Shadows.stories.tsx
@@ -4,16 +4,38 @@ export default {
   title: "CSS/Shadows",
 };
 
-const sizes = ["xs", "sm", "md", "lg", "xl"];
+const shadowClasses = {
+  soft: [
+    "ui-shadow-xs-soft",
+    "ui-shadow-sm-soft",
+    "ui-shadow-md-soft",
+    "ui-shadow-lg-soft",
+    "ui-shadow-xl-soft",
+  ],
+  medium: [
+    "ui-shadow-xs-medium",
+    "ui-shadow-sm-medium",
+    "ui-shadow-md-medium",
+    "ui-shadow-lg-medium",
+    "ui-shadow-xl-medium",
+  ],
+  strong: [
+    "ui-shadow-xs-strong",
+    "ui-shadow-sm-strong",
+    "ui-shadow-md-strong",
+    "ui-shadow-lg-strong",
+    "ui-shadow-xl-strong",
+  ],
+};
 
 const shadowRow = (weight: "soft" | "medium" | "strong") => (
   <div className="flex gap-32">
-    {sizes.map((size) => (
+    {shadowClasses[weight].map((shadowClass) => (
       <div
-        key={size}
-        className={`${weight === "strong" ? "bg-neutral-1100 text-white" : "bg-white"} rounded-lg w-64 h-64 ui-shadow-${size}-${weight} flex items-center justify-center ui-text-p1`}
+        key={shadowClass}
+        className={`${weight === "strong" ? "bg-neutral-1100 text-white" : "bg-white"} rounded-lg w-64 h-64 ${shadowClass} flex items-center justify-center ui-text-p1`}
       >
-        {size}
+        {shadowClass.split("-")[2]}
       </div>
     ))}
   </div>