Merge pull request #495 from ably/more-pricing-stuff

Pricing copy updates and smooth anchor links
ably · Sep 26, 2024 · 5048a02 · 5048a02
2 parents 6fc8583 + 8222a6c
commit 5048a02
Show file tree

Hide file tree

Showing 9 changed files with 417 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.6.2",
+  "version": "14.6.3",
   "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/FeaturedLink.tsx b/src/core/FeaturedLink.tsx
@@ -13,6 +13,7 @@ type FeaturedLinkProps = {
   additionalCSS?: string;
   newWindow?: boolean;
   onClick?: () => void;
+  disabled?: boolean;
 };
 
 type TargetProps = { target?: string; rel?: string };
@@ -46,13 +47,14 @@ const FeaturedLink = ({
   newWindow = false,
   onClick = undefined,
   children,
+  disabled = false,
 }: FeaturedLinkProps) => {
   const targetAndRel = buildTargetAndRel(url, newWindow);
 
   return (
     <a
-      href={url}
-      className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${
+      {...(onClick ? {} : { href: url })}
+      className={`font-sans font-bold block ${disabled ? "text-gui-unavailable pointer-events-none" : "text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus"} group ui-${textSize} ${
         flush ? "" : "py-8"
       } ${additionalCSS}`}
       style={
@@ -72,7 +74,7 @@ const FeaturedLink = ({
             name="icon-gui-link-arrow"
             size={`calc(var(--featured-link-icon-size) * 1.25)`}
             color={iconColor}
-            additionalCSS="align-middle mr-8 relative -top-1 -right-4 transition-[right] group-hover:right-0 transform rotate-180"
+            additionalCSS={`align-middle mr-8 relative -top-1 -right-4 transition-[right] ${disabled ? "" : "group-hover:right-0"} transform rotate-180`}
           />
           {children}
         </>
@@ -83,7 +85,7 @@ const FeaturedLink = ({
             name="icon-gui-link-arrow"
             size={`calc(var(--featured-link-icon-size) * 1.25)`}
             color={iconColor}
-            additionalCSS="align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+            additionalCSS={`align-middle ml-8 relative -top-1 -left-4 transition-[left] ${disabled ? "" : "group-hover:left-0"}`}
           />
         </>
       )}

diff --git a/src/core/FeaturedLink/FeaturedLink.stories.tsx b/src/core/FeaturedLink/FeaturedLink.stories.tsx
@@ -41,3 +41,9 @@ export const Pink = {
     additionalCSS: "text-pink-800",
   },
 };
+
+export const Disabled = {
+  args: {
+    disabled: true,
+  },
+};
diff --git a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
@@ -15,6 +15,21 @@ exports[`JS Components/Featured Link Default smoke-test 1`] = `
 </a>
 `;
 
+exports[`JS Components/Featured Link Disabled smoke-test 1`] = `
+<a href="#"
+   class="font-sans font-bold block text-gui-unavailable pointer-events-none group ui-text-p2 py-8 "
+   style="--featured-link-icon-size: var(--fs-p2);"
+>
+  Featured link
+  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] "
+       style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+  >
+    <use xlink:href="#sprite-icon-gui-link-arrow">
+    </use>
+  </svg>
+</a>
+`;
+
 exports[`JS Components/Featured Link Large smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p1 py-8 "

diff --git a/src/core/Pricing/PricingCards.stories.tsx b/src/core/Pricing/PricingCards.stories.tsx
@@ -41,3 +41,7 @@ export const ConsumptionLightMode = {
     <Template data={consumptionData} theme="light" delimiter="icon-gui-plus" />
   ),
 };
+
+export const ConsumptionNoDelimiter = {
+  render: () => <Template data={consumptionData} delimiter="blank" />,
+};
diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
@@ -9,7 +9,7 @@ import { IconName } from "../Icon/types";
 export type PricingCardsProps = {
   data: PricingDataFeature[];
   theme?: Theme;
-  delimiter?: IconName;
+  delimiter?: IconName | "blank";
 };
 
 const PricingCards = ({
@@ -22,12 +22,16 @@ const PricingCards = ({
 
   const delimiterColumn = (index: number) =>
     delimiter && index % 2 === 1 ? (
-      <div className="flex items-center justify-center w-full m-8 @[920px]:w-20">
-        <Icon
-          name={delimiter}
-          size="20"
-          additionalCSS={t("text-neutral-500")}
-        />
+      <div
+        className={`flex items-center justify-center w-full @[920px]:w-20 ${delimiter !== "blank" ? "m-8" : ""}`}
+      >
+        {delimiter !== "blank" ? (
+          <Icon
+            name={delimiter}
+            size="20"
+            additionalCSS={t("text-neutral-500")}
+          />
+        ) : null}
       </div>
     ) : null;
 
@@ -71,16 +75,17 @@ const PricingCards = ({
                   <p
                     className={`ui-text-title font-medium tracking-tight leading-none ${t("text-neutral-000")}`}
                   >
-                    {Number.isNaN(Number(price.amount)) ? "" : "$"}
                     {price.amount}
                   </p>
                   <div className={t("text-neutral-000")}>{price.content}</div>
                 </div>
                 {cta ? (
                   <div className="group">
                     <FeaturedLink
-                      additionalCSS={`text-center ui-btn ${t("bg-neutral-000")} ${t("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className ?? ""}`}
+                      additionalCSS={`text-center ui-btn ${t("bg-neutral-000")} ${t("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className ?? ""} cursor-pointer`}
                       url={cta.url}
+                      onClick={cta.onClick}
+                      disabled={cta.disabled}
                     >
                       {cta.text}
                     </FeaturedLink>
@@ -139,8 +144,9 @@ const PricingCards = ({
                           •••
                         </div>
                         <FeaturedLink
-                          url={cta.url ?? "#"}
-                          additionalCSS={`sm:hidden group-hover:block font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} transition-colors`}
+                          url={cta.url}
+                          additionalCSS={`sm:hidden group-hover:block font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} transition-colors cursor-pointer`}
+                          onClick={cta.onClick}
                         >
                           {cta.text}
                         </FeaturedLink>