Merge pull request #470 from ably/14.5.1

[WEB-3979] 14.5.1 - ProductTile props, Code lines, Color stories
ably · Sep 9, 2024 · 9cad39b · 9cad39b
2 parents 4f7732e + 5d7a6c1
commit 9cad39b
Show file tree

Hide file tree

Showing 12 changed files with 1,662 additions and 92 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -38,6 +38,12 @@ const preview = {
       theme,
       container: docsContainer,
     },
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: ["CSS", "JS Components", "Brand"],
+      },
+    },
   },
   loaders: [mswLoader],
   tags: ["autodocs"],

diff --git a/src/core/Code.tsx b/src/core/Code.tsx
@@ -14,6 +14,8 @@ type CodeProps = {
   textSize?: string;
   padding?: string;
   additionalCSS?: string;
+  showLines?: boolean;
+  lineCSS?: string;
 };
 
 const Code = ({
@@ -22,15 +24,30 @@ const Code = ({
   textSize = "ui-text-code",
   padding = "p-32",
   additionalCSS = "",
+  showLines,
+  lineCSS,
 }: CodeProps) => {
   const HTMLraw = highlightSnippet(language, `${snippet}`.trim()) ?? "";
   const className = `language-${language} ${textSize}`;
+  const lineCount = snippet.split(/\r\n|\r|\n/).length;
 
   return (
     <div
-      className={`hljs overflow-auto ${padding} ${additionalCSS}`}
+      className={`hljs overflow-auto flex ${padding} ${additionalCSS}`}
       data-id="code"
     >
+      {showLines ? (
+        <div>
+          {[...Array(lineCount)].map((_, i) => (
+            <p
+              className={`mr-24 font-mono text-neutral-800 ${lineCSS ?? ""}`}
+              key={i}
+            >
+              {i + 1}
+            </p>
+          ))}
+        </div>
+      ) : null}
       <pre lang={language}>
         <code
           className={className}

diff --git a/src/core/Code/Code.stories.tsx b/src/core/Code/Code.stories.tsx
@@ -69,3 +69,17 @@ val exampleConstraints = DefaultResolutionConstraints(
 )`,
   },
 };
+
+export const CodeWithLines = {
+  args: {
+    showLines: true,
+    language: "javascript",
+    snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH');
+var channel = ably.channels.get('web-pal');
+    
+// Subscribe to messages on channel
+channel.subscribe('greeting', function(message) {
+  alert(message.data);
+});`,
+  },
+};
diff --git a/src/core/Code/__snapshots__/Code.stories.tsx.snap b/src/core/Code/__snapshots__/Code.stories.tsx.snap
@@ -1,7 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`JS Components/Code CodeWithLines smoke-test 1`] = `
+<div class="hljs overflow-auto flex p-32 "
+     data-id="code"
+>
+  <div>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      1
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      2
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      3
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      4
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      5
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      6
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      7
+    </p>
+  </div>
+  <pre lang="javascript">
+    <code class="language-javascript ui-text-code">
+      <span class="hljs-keyword">
+        var
+      </span>
+      ably =
+      <span class="hljs-keyword">
+        new
+      </span>
+      <span class="hljs-title class_">
+        Ably
+      </span>
+      .
+      <span class="hljs-title class_">
+        Realtime
+      </span>
+      (
+      <span class="hljs-string">
+        '1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'
+      </span>
+      );
+      <span class="hljs-keyword">
+        var
+      </span>
+      channel = ably.
+      <span class="hljs-property">
+        channels
+      </span>
+      .
+      <span class="hljs-title function_">
+        get
+      </span>
+      (
+      <span class="hljs-string">
+        'web-pal'
+      </span>
+      );
+      <span class="hljs-comment">
+        // Subscribe to messages on channel
+      </span>
+      channel.
+      <span class="hljs-title function_">
+        subscribe
+      </span>
+      (
+      <span class="hljs-string">
+        'greeting'
+      </span>
+      ,
+      <span class="hljs-keyword">
+        function
+      </span>
+      (
+      <span class="hljs-params">
+        message
+      </span>
+      ) {
+      <span class="hljs-title function_">
+        alert
+      </span>
+      (message.
+      <span class="hljs-property">
+        data
+      </span>
+      );
+});
+    </code>
+  </pre>
+</div>
+`;
+
 exports[`JS Components/Code Java smoke-test 1`] = `
-<div class="hljs overflow-auto p-32 "
+<div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
   <pre lang="java">
@@ -82,7 +180,7 @@ channel.subscribe(
 `;
 
 exports[`JS Components/Code Javascript smoke-test 1`] = `
-<div class="hljs overflow-auto p-32 "
+<div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
   <pre lang="javascript">
@@ -157,7 +255,7 @@ exports[`JS Components/Code Javascript smoke-test 1`] = `
 `;
 
 exports[`JS Components/Code Kotlin smoke-test 1`] = `
-<div class="hljs overflow-auto p-32 "
+<div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
   <pre lang="kotlin">
@@ -212,7 +310,7 @@ exports[`JS Components/Code Kotlin smoke-test 1`] = `
 `;
 
 exports[`JS Components/Code Swift smoke-test 1`] = `
-<div class="hljs overflow-auto p-32 "
+<div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
   <pre lang="swift">

diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx
@@ -10,7 +10,7 @@ type IconProps = {
 };
 
 const convertTailwindClassToVar = (className: string) =>
-  className.replace(/text-([a-z0-9-]+)/gi, "var(--color-$1)");
+  className.replace(/(text|bg)-([a-z0-9-]+)/gi, "var(--color-$2)");
 
 const Icon = ({
   name,

diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx
@@ -7,14 +7,23 @@ type ProductTileProps = {
   name: ProductName;
   selected?: boolean;
   currentPage?: boolean;
+  className?: string;
+  onClick?: () => void;
 };
 
-const ProductTile = ({ name, selected, currentPage }: ProductTileProps) => {
+const ProductTile = ({
+  name,
+  selected,
+  currentPage,
+  className,
+  onClick,
+}: ProductTileProps) => {
   const { icon, label, description, link, unavailable } = products[name] ?? {};
 
   return (
     <div
-      className={`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected ? "bg-neutral-300" : "bg-neutral-1200 hover:bg-neutral-1100"}`}
+      className={`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected ? "bg-neutral-300" : "bg-neutral-1200 hover:bg-neutral-1100"} ${className ?? ""}`}
+      onClick={onClick}
     >
       <div className="flex gap-12">
         {icon ? <Icon name={icon} size="48" /> : null}

diff --git a/src/core/ProductTile/ProductTile.stories.tsx b/src/core/ProductTile/ProductTile.stories.tsx
@@ -47,3 +47,22 @@ export const SelectedProductTiles = {
     },
   },
 };
+
+export const ProductTileWithOverriddenStylesAndClick = {
+  render: () => (
+    <ProductTile
+      key="pubsub"
+      name="pubsub"
+      className="bg-pink-800 hover:bg-pink-600 cursor-pointer"
+      onClick={() => alert("yo congrats on the click")}
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`className` is overridden to change the background color and cursor. `onClick` is also overridden to show an alert on click.",
+      },
+    },
+  },
+};
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -1,8 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = `
+<div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 bg-pink-800 hover:bg-pink-600 cursor-pointer">
+  <div class="flex gap-12">
+    <svg class=" "
+         style="width: 48px; height: 48px;"
+    >
+      <use xlink:href="#sprite-icon-product-pubsub-encapsulated">
+      </use>
+    </svg>
+    <div class="flex flex-col justify-center ">
+      <p class="ui-text-p3 text-neutral-500 font-medium">
+        Ably
+      </p>
+      <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+        PubSub
+      </p>
+    </div>
+  </div>
+  <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    Low-level APIs to build any realtime experience
+  </p>
+</div>
+`;
+
 exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-32">
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -23,7 +47,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Low-level APIs to build any realtime experience
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -44,7 +68,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Rapidly build chat features and roll-out at scale
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -65,7 +89,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Create collaborative environments in a few lines of code
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -86,7 +110,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Sync database changes with frontend clients
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -107,7 +131,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Simple APIs to build realtime tracking applications
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <div class="flex flex-row items-center gap-4 ">
         <p class="ui-text-p2 text-neutral-500 font-medium">
@@ -132,7 +156,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
 
 exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
 <div class="grid grid-cols-3 gap-32">
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -165,7 +189,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </svg>
     </a>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -186,7 +210,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       Rapidly build chat features and roll-out at scale
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -219,7 +243,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </svg>
     </a>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -240,7 +264,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       Sync database changes with frontend clients
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -273,7 +297,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </svg>
     </a>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <div class="flex flex-row items-center gap-4 ">
         <p class="ui-text-p2 text-neutral-500 font-medium">