🥧[WEB-4164] - Adding Pricing Card CTA Arrow Icon

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.1.10",
+  "version": "15.1.11",
   "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",

src/core/Button.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from "react";
 import { IconName } from "./Icon/types";
 import Icon from "./Icon";
 import cn from "./utils/cn";
+import { ColorClass, ColorThemeSet } from "./styles/colors/types";
 
 export type ButtonType = "priority" | "primary" | "secondary";
 
@@ -28,6 +29,10 @@ export type ButtonPropsBase = {
    * Optional classes to add to the button element.
    */
   className?: string;
+  /**
+   * Optional color to apply to the icon on either left and/or right side of the button.
+   */
+  iconColor?: ColorClass | ColorThemeSet;
 };
 
 type ButtonProps = ButtonPropsBase &
@@ -81,12 +86,12 @@ export const commonButtonProps = (props: ButtonPropsBase) => {
 export const commonButtonInterior = (
   props: PropsWithChildren<ButtonPropsBase>,
 ) => {
-  const { leftIcon, rightIcon, children } = props;
+  const { leftIcon, rightIcon, iconColor, children } = props;
   return (
     <>
-      {leftIcon ? <Icon name={leftIcon} /> : null}
+      {leftIcon ? <Icon name={leftIcon} additionalCSS={iconColor} /> : null}
       {children}
-      {rightIcon ? <Icon name={rightIcon} /> : null}
+      {rightIcon ? <Icon name={rightIcon} additionalCSS={iconColor} /> : null}
     </>
   );
 };
@@ -98,14 +103,15 @@ const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
   rightIcon,
   children,
   className,
+  iconColor,
   ...rest
 }) => {
   return (
     <button
       {...commonButtonProps({ variant, size, leftIcon, rightIcon, className })}
       {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
     >
-      {commonButtonInterior({ leftIcon, rightIcon, children })}
+      {commonButtonInterior({ leftIcon, rightIcon, iconColor, children })}
     </button>
   );
 };

src/core/LinkButton.tsx

@@ -5,10 +5,12 @@ import {
   commonButtonProps,
 } from "./Button";
 import cn from "./utils/cn";
+import { ColorClass, ColorThemeSet } from "./styles/colors/types";
 
 export type LinkButtonProps = ButtonPropsBase & {
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  iconColor?: ColorClass | ColorThemeSet;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
 const LinkButton: React.FC<LinkButtonProps> = ({
@@ -20,6 +22,7 @@ const LinkButton: React.FC<LinkButtonProps> = ({
   className,
   disabled,
   onClick,
+  iconColor,
   ...rest
 }) => {
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -46,7 +49,7 @@ const LinkButton: React.FC<LinkButtonProps> = ({
       onClick={handleClick}
       {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
     >
-      {commonButtonInterior({ leftIcon, rightIcon, children })}
+      {commonButtonInterior({ leftIcon, rightIcon, iconColor, children })}
     </a>
   );
 };

src/core/Pricing/PricingCards.tsx

@@ -192,6 +192,8 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
                         href={cta.url}
                         onClick={cta.onClick}
                         disabled={cta.disabled}
+                        rightIcon="icon-gui-arrow-right"
+                        iconColor={cta.iconColor}
                       >
                         {cta.text}
                       </LinkButton>

src/core/Pricing/data.tsx

@@ -14,7 +14,11 @@ export const planData: PricingDataFeature[] = [
       color: "text-neutral-800 dark:text-neutral-500",
     },
     price: { amount: "$0" },
-    cta: { text: "Start for free", url: "/sign-up" },
+    cta: {
+      text: "Start for free",
+      url: "/sign-up",
+      iconColor: "text-neutral-700 dark:text-neutral-600",
+    },
     sections: [
       {
         title: "Limits",
@@ -69,6 +73,7 @@ export const planData: PricingDataFeature[] = [
     cta: {
       text: "Get started",
       url: "/users/paid_sign_up?package=standard",
+      iconColor: "text-blue-600 dark:text-blue-400",
     },
     sections: [
       {
@@ -120,7 +125,11 @@ export const planData: PricingDataFeature[] = [
         </>
       ),
     },
-    cta: { text: "Get started", url: "/users/paid_sign_up?package=pro" },
+    cta: {
+      text: "Get started",
+      url: "/users/paid_sign_up?package=pro",
+      iconColor: "text-blue-600 dark:text-blue-400",
+    },
     sections: [
       {
         title: "Limits",

src/core/Pricing/types.ts

@@ -14,6 +14,7 @@ type PricingDataFeatureCta = {
   className?: string;
   disabled?: boolean;
   onClick?: () => void;
+  iconColor?: ColorClass | ColorThemeSet;
 };
 
 export type PricingDataFeatureSection = {