From 0aa9428bf8bb951888291f480607b5a58923e5ca Mon Sep 17 00:00:00 2001 From: April Smith Date: Thu, 19 Dec 2024 15:02:35 +0000 Subject: [PATCH 1/2] 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, ) => { - const { leftIcon, rightIcon, children } = props; + const { leftIcon, rightIcon, iconColor, children } = props; return ( <> - {leftIcon ? : null} + {leftIcon ? : null} {children} - {rightIcon ? : null} + {rightIcon ? : null} ); }; @@ -98,6 +103,7 @@ const Button: React.FC> = ({ rightIcon, children, className, + iconColor, ...rest }) => { return ( @@ -105,7 +111,7 @@ const Button: React.FC> = ({ {...commonButtonProps({ variant, size, leftIcon, rightIcon, className })} {...(rest as React.ButtonHTMLAttributes)} > - {commonButtonInterior({ leftIcon, rightIcon, children })} + {commonButtonInterior({ leftIcon, rightIcon, iconColor, children })} ); }; 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) => void; + iconColor?: ColorClass | ColorThemeSet; } & React.AnchorHTMLAttributes; const LinkButton: React.FC = ({ @@ -20,6 +22,7 @@ const LinkButton: React.FC = ({ className, disabled, onClick, + iconColor, ...rest }) => { const handleClick = (e: React.MouseEvent) => { @@ -46,7 +49,7 @@ const LinkButton: React.FC = ({ onClick={handleClick} {...(rest as React.AnchorHTMLAttributes)} > - {commonButtonInterior({ leftIcon, rightIcon, children })} + {commonButtonInterior({ leftIcon, rightIcon, iconColor, children })} ); }; 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} 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 = { From b5638ad7153d1ce0631b5687991d20dcd642842e Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Fri, 20 Dec 2024 16:45:37 +0000 Subject: [PATCH 2/2] chore: bump ably-ui to 15.1.11 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2d31340b9..9e3dfe9c3 100644 --- a/package.json +++ b/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",