From f2b49dba1cd87b36efe7546f1189731f021dc5bc Mon Sep 17 00:00:00 2001 From: Sauli Anto Date: Thu, 18 Apr 2024 14:51:23 +0300 Subject: [PATCH] OPHJOD-340: Update button styles --- lib/components/Button/Button.stories.ts | 27 ++++++++++++++++--- lib/components/Button/Button.tsx | 19 +++++++------ .../Button/__snapshots__/Button.test.tsx.snap | 26 +++++++++--------- 3 files changed, 47 insertions(+), 25 deletions(-) diff --git a/lib/components/Button/Button.stories.ts b/lib/components/Button/Button.stories.ts index cb42cc9..615aab1 100644 --- a/lib/components/Button/Button.stories.ts +++ b/lib/components/Button/Button.stories.ts @@ -57,15 +57,34 @@ export const White: Story = { }, }; -export const Delete: Story = { +export const GrayDelete: Story = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=729%3A8099', + url: 'https://www.figma.com/file/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=842%3A7302', }, docs: { description: { - story: 'This is a delete button component for triggering an action.', + story: 'This is a gray delete button component for triggering an action.', + }, + }, + }, + args: { + label: 'Poista', + onClick: fn(), + variant: 'gray-delete', + }, +}; + +export const WhiteDelete: Story = { + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=842%3A7301', + }, + docs: { + description: { + story: 'This is a white delete button component for triggering an action.', }, }, backgrounds, @@ -73,7 +92,7 @@ export const Delete: Story = { args: { label: 'Poista', onClick: fn(), - variant: 'delete', + variant: 'white-delete', }, }; diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx index b2409c2..c91cb6b 100644 --- a/lib/components/Button/Button.tsx +++ b/lib/components/Button/Button.tsx @@ -6,7 +6,7 @@ export interface ButtonProps { /** Size of the button */ size?: 'sm' | 'md' | 'lg'; /** Button variant */ - variant?: 'gray' | 'white' | 'delete'; + variant?: 'gray' | 'white' | 'gray-delete' | 'white-delete'; /** Button disabled for any actions */ disabled?: boolean; /** Icon shown on the button */ @@ -45,16 +45,18 @@ const getVariantClassName = (variant: ButtonProps['variant']) => { return 'text-primary-gray bg-bg-gray'; case 'white': return 'text-primary-gray bg-white'; - case 'delete': - return 'text-alert hover:text-alert focus-visible:text-alert active:text-alert bg-white focus-visible:outline-0 active:bg-white'; + case 'gray-delete': + return 'text-alert bg-bg-gray hover:text-alert active:text-white active:bg-alert focus-visible:text-alert'; + case 'white-delete': + return 'text-alert bg-white hover:text-alert active:text-white active:bg-alert focus-visible:text-alert'; default: return ''; } }; -const getDisabledClassName = (disabled: ButtonProps['disabled'], variant: ButtonProps['variant']) => { - return disabled === false && (variant === 'gray' || variant === 'white') - ? 'hover:text-accent focus-visible:text-accent active:bg-accent focus-visible:outline-accent focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-[1.5px] active:text-white' +const getDisabledClassName = (disabled: ButtonProps['disabled']) => { + return disabled === false + ? 'hover:text-accent focus-visible:text-accent active:bg-accent focus-visible:outline-accent focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-[1.5px] active:text-white active:outline-0' : 'disabled:text-inactive-gray disabled:cursor-not-allowed'; }; @@ -65,11 +67,11 @@ const getButtonClassName = ({ rightIcon, disabled, }: Partial & { leftIcon: boolean; rightIcon: boolean }) => { - return `flex items-center gap-4 rounded-[30px] select-none + return `flex items-center gap-4 rounded-[30px] select-none group ${getSizeClassName(size)} ${getIconClassName(size, leftIcon, rightIcon)} ${getVariantClassName(variant)} - ${getDisabledClassName(disabled, variant)} + ${getDisabledClassName(disabled)} ` .replace(/\s+/g, ' ') .trim(); @@ -95,6 +97,7 @@ export const Button = ({ .replace(/\s+/g, ' ') .trim(); const spanClassName = ` + ${!disabled ? 'group-hover:underline group-active:no-underline group-focus-visible:no-underline' : ''} ${size === 'sm' ? 'py-[10px]' : ''} ${size === 'md' ? 'py-[10px]' : ''} ${size === 'lg' ? 'py-[20px]' : ''}` diff --git a/lib/components/Button/__snapshots__/Button.test.tsx.snap b/lib/components/Button/__snapshots__/Button.test.tsx.snap index 40c449e..b1ad8b6 100644 --- a/lib/components/Button/__snapshots__/Button.test.tsx.snap +++ b/lib/components/Button/__snapshots__/Button.test.tsx.snap @@ -2,11 +2,11 @@ exports[`Button > calls the onClick function when clicked 1`] = `