From 15c234ebaa5fa730e2a39cc09db79bda753de6cc Mon Sep 17 00:00:00 2001
From: April Smith <april.smith@ably.com>
Date: Thu, 19 Dec 2024 15:02:35 +0000
Subject: [PATCH] chore: Add IconColor for the LinkButton and  add rightIcon on
 all Pricing Cards CTA

---
 src/core/Button.tsx               | 14 ++++++++++----
 src/core/LinkButton.tsx           |  5 ++++-
 src/core/Pricing/PricingCards.tsx |  2 ++
 src/core/Pricing/data.tsx         | 13 +++++++++++--
 src/core/Pricing/types.ts         |  1 +
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/core/Button.tsx b/src/core/Button.tsx
index 89dbbc278..70c5d6246 100644
--- a/src/core/Button.tsx
+++ b/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,6 +103,7 @@ const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
   rightIcon,
   children,
   className,
+  iconColor,
   ...rest
 }) => {
   return (
@@ -105,7 +111,7 @@ const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       {...commonButtonProps({ variant, size, leftIcon, rightIcon, className })}
       {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
     >
-      {commonButtonInterior({ leftIcon, rightIcon, children })}
+      {commonButtonInterior({ leftIcon, rightIcon, iconColor, children })}
     </button>
   );
 };
diff --git a/src/core/LinkButton.tsx b/src/core/LinkButton.tsx
index bb54a90e0..168923fb6 100644
--- a/src/core/LinkButton.tsx
+++ b/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>
   );
 };
diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
index 2b05d162b..82559918c 100644
--- a/src/core/Pricing/PricingCards.tsx
+++ b/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>
diff --git a/src/core/Pricing/data.tsx b/src/core/Pricing/data.tsx
index 360e0b6c8..9dacfa22f 100644
--- a/src/core/Pricing/data.tsx
+++ b/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",
diff --git a/src/core/Pricing/types.ts b/src/core/Pricing/types.ts
index c25a668c1..6eee9bd0a 100644
--- a/src/core/Pricing/types.ts
+++ b/src/core/Pricing/types.ts
@@ -14,6 +14,7 @@ type PricingDataFeatureCta = {
   className?: string;
   disabled?: boolean;
   onClick?: () => void;
+  iconColor?: ColorClass | ColorThemeSet;
 };
 
 export type PricingDataFeatureSection = {