Merge pull request #627 from ably/idents-touchup

[WEB-4144] Tweak unavailable product styling on ProductTile
ably · Jan 31, 2025 · d1c9f32 · d1c9f32
2 parents 44659b5 + 71374bd
commit d1c9f32
Show file tree

Hide file tree

Showing 4 changed files with 274 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.3.4",
+  "version": "15.3.5",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

diff --git a/src/core/ProductTile/ProductLabel.tsx b/src/core/ProductTile/ProductLabel.tsx
@@ -23,23 +23,31 @@ const ProductLabel = ({
     return null;
   }
 
+  const dynamicFontSize = numericalSize / LABEL_FONT_SIZE_RATIO;
+
   return (
     <div className="flex flex-col justify-center">
       {unavailable ? (
         <div>
-          <div className="table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-widen-0.04 font-bold text-[8px] leading-snug">
+          <div
+            className="table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug"
+            style={{
+              fontSize: dynamicFontSize * 0.6,
+              padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`,
+            }}
+          >
             COMING SOON
           </div>
         </div>
       ) : (
         <p
           className={cn(
-            "font-bold uppercase ui-text-p2",
+            "font-bold uppercase ui-text-p2 leading-snug",
             { "text-neutral-500 dark:text-neutral-700": selected },
             { "text-neutral-700 dark:text-neutral-500": !selected },
           )}
           style={{
-            fontSize: numericalSize / LABEL_FONT_SIZE_RATIO,
+            fontSize: dynamicFontSize,
             letterSpacing: "0.06em",
           }}
         >
@@ -51,18 +59,18 @@ const ProductLabel = ({
           "ui-text-p2 font-bold",
           {
             "text-neutral-000 dark:text-neutral-1300":
-              selected !== false && !unavailable,
+              selected === true && !unavailable,
           },
           {
             "text-neutral-1000 dark:text-neutral-300":
               selected === false && !unavailable,
           },
           {
-            "text-neutral-700 dark:text-neutral-600":
-              selected === false && unavailable,
+            "text-neutral-1300 dark:text-neutral-000":
+              selected === undefined && !unavailable,
           },
           {
-            "text-neutral-1300 dark:text-neutral-000": selected === undefined,
+            "text-neutral-700 dark:text-neutral-600": unavailable,
           },
           { "mt-[-3px]": !unavailable },
         )}

diff --git a/src/core/ProductTile/ProductTile.stories.tsx b/src/core/ProductTile/ProductTile.stories.tsx
@@ -30,7 +30,27 @@ export const ProductTiles = {
     docs: {
       description: {
         story:
-          "Example usage: `<ProductTile name='pubsub' />`. Click on a tile to select it.",
+          "Example usage: `<ProductTile name='pubsub' selected={...} />`. Click on a tile to select it (`selected` must be controlled for selection to be enabled).",
+      },
+    },
+  },
+};
+
+export const StaticProductTiles = {
+  render: () => {
+    return (
+      <div className="grid sm:grid-cols-3 gap-32">
+        {Object.keys(products).map((product) => (
+          <ProductTile key={product} name={product as ProductName} />
+        ))}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When `selected` is not controlled, the tiles are not selectable and show default styling.",
       },
     },
   },