Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OPHJOD-340: Update button styles #39

Merged
merged 1 commit into from
Apr 22, 2024
Merged

OPHJOD-340: Update button styles #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 23 additions & 4 deletions lib/components/Button/Button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,23 +57,42 @@ 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,
},
args: {
label: 'Poista',
onClick: fn(),
variant: 'delete',
variant: 'white-delete',
},
};

Expand Down
19 changes: 11 additions & 8 deletions lib/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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';
};

Expand All @@ -65,11 +67,11 @@ const getButtonClassName = ({
rightIcon,
disabled,
}: Partial<ButtonProps> & { 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();
Expand All @@ -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]' : ''}`
Expand Down
26 changes: 13 additions & 13 deletions lib/components/Button/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

exports[`Button > calls the onClick function when clicked 1`] = `
<button
class="flex items-center gap-4 rounded-[30px] select-none text-button-md px-6 text-primary-gray bg-bg-gray 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"
class="flex items-center gap-4 rounded-[30px] select-none group text-button-md px-6 text-primary-gray bg-bg-gray 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"
type="button"
>
<span
class="py-[10px]"
class="group-hover:underline group-active:no-underline group-focus-visible:no-underline py-[10px]"
>
Click me
</span>
Expand All @@ -15,7 +15,7 @@ exports[`Button > calls the onClick function when clicked 1`] = `

exports[`Button > renders the button as disabled 1`] = `
<button
class="flex items-center gap-4 rounded-[30px] select-none text-button-md px-6 text-primary-gray bg-bg-gray disabled:text-inactive-gray disabled:cursor-not-allowed"
class="flex items-center gap-4 rounded-[30px] select-none group text-button-md px-6 text-primary-gray bg-bg-gray disabled:text-inactive-gray disabled:cursor-not-allowed"
disabled=""
type="button"
>
Expand All @@ -29,7 +29,7 @@ exports[`Button > renders the button as disabled 1`] = `

exports[`Button > renders the button with an icon on the left side 1`] = `
<button
class="flex items-center gap-4 rounded-[30px] select-none text-button-md px-6 pl-4 text-primary-gray bg-bg-gray 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"
class="flex items-center gap-4 rounded-[30px] select-none group text-button-md px-6 pl-4 text-primary-gray bg-bg-gray 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"
type="button"
>
<span
Expand All @@ -39,7 +39,7 @@ exports[`Button > renders the button with an icon on the left side 1`] = `
add
</span>
<span
class="py-[10px]"
class="group-hover:underline group-active:no-underline group-focus-visible:no-underline py-[10px]"
>
Click me
</span>
Expand All @@ -48,11 +48,11 @@ exports[`Button > renders the button with an icon on the left side 1`] = `

exports[`Button > renders the button with an icon on the right side 1`] = `
<button
class="flex items-center gap-4 rounded-[30px] select-none text-button-md px-6 pr-4 text-primary-gray bg-bg-gray 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"
class="flex items-center gap-4 rounded-[30px] select-none group text-button-md px-6 pr-4 text-primary-gray bg-bg-gray 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"
type="button"
>
<span
class="py-[10px]"
class="group-hover:underline group-active:no-underline group-focus-visible:no-underline py-[10px]"
>
Click me
</span>
Expand All @@ -67,11 +67,11 @@ exports[`Button > renders the button with an icon on the right side 1`] = `

exports[`Button > renders the button with the correct label 1`] = `
<button
class="flex items-center gap-4 rounded-[30px] select-none text-button-md px-6 text-primary-gray bg-bg-gray 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"
class="flex items-center gap-4 rounded-[30px] select-none group text-button-md px-6 text-primary-gray bg-bg-gray 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"
type="button"
>
<span
class="py-[10px]"
class="group-hover:underline group-active:no-underline group-focus-visible:no-underline py-[10px]"
>
Click me
</span>
Expand All @@ -80,11 +80,11 @@ exports[`Button > renders the button with the correct label 1`] = `

exports[`Button > renders the button with the correct size 1`] = `
<button
class="flex items-center gap-4 rounded-[30px] select-none text-button-sm px-6 text-primary-gray bg-bg-gray 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"
class="flex items-center gap-4 rounded-[30px] select-none group text-button-sm px-6 text-primary-gray bg-bg-gray 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"
type="button"
>
<span
class="py-[10px]"
class="group-hover:underline group-active:no-underline group-focus-visible:no-underline py-[10px]"
>
Click me
</span>
Expand All @@ -93,11 +93,11 @@ exports[`Button > renders the button with the correct size 1`] = `

exports[`Button > renders the button with the correct variant 1`] = `
<button
class="flex items-center gap-4 rounded-[30px] select-none text-button-md px-6 text-primary-gray bg-bg-gray 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"
class="flex items-center gap-4 rounded-[30px] select-none group text-button-md px-6 text-primary-gray bg-bg-gray 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"
type="button"
>
<span
class="py-[10px]"
class="group-hover:underline group-active:no-underline group-focus-visible:no-underline py-[10px]"
>
Click me
</span>
Expand Down