scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(BOOK-113): Synced hover/focus states for buttons and added better examples to storybook

Browse Source 
* fix(BOOK-113): Updated hover colors after blend/mix has been removed

Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-12-03 10:45:34 +00:00
parent 60f4b8d878
commit 6730575f7a
24 changed files with 1143 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

441
packages/design-system/lib/components/Button/Button.stories.tsx
View File

@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { expect, fn } from 'storybook/test'
import { expect } from 'storybook/test'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { config as typographyConfig } from '../Typography/variants'
@@ -24,42 +24,69 @@ const meta: Meta<typeof Button> = {
control: 'select',
options: Object.keys(buttonConfig.variants.variant),
default: 'Primary',
table: {
defaultValue: {
summary: buttonConfig.defaultVariants.variant,
},
type: {
summary: 'string',
detail: Object.keys(buttonConfig.variants.variant).join(' | '),
},
},
},
color: {
control: 'select',
options: Object.keys(buttonConfig.variants.color),
type: 'string',
description:
'The color variant, only applies to the variants `Primary`, `Secondary` and `Text`. Defaults to `Primary`.',
table: {
type: {
summary: 'string',
detail: Object.keys(buttonConfig.variants.color).join(' | '),
},
defaultValue: {
summary: buttonConfig.defaultVariants.color,
},
},
},
size: {
control: 'select',
options: Object.keys(buttonConfig.variants.size),
type: 'string',
description: 'The size of the button. Defaults to `Large`.',
table: {
type: {
summary: 'string',
detail: Object.keys(buttonConfig.variants.size).join(' | '),
},
defaultValue: {
summary: buttonConfig.defaultVariants.size,
},
},
},
wrapping: {
control: 'radio',
options: Object.keys(buttonConfig.variants.wrapping),
type: 'boolean',
table: {
defaultValue: {
summary: buttonConfig.defaultVariants.wrapping.toString(),
},
},
description:
'Only applies to variant `Text`. If `true`, the button will keep the default padding set on the buttons. Defaults to `true`.',
'Only applies to variant `Text`. If `false`, the button will use smaller padding.',
},
},
}
const globalStoryPropsInverted = {
backgrounds: { value: 'scandicPrimaryDark' },
}
export default meta
type Story = StoryObj<typeof Button>
export const PrimaryDefault: Story = {
export const Default: Story = {
args: {
onPress: fn(),
children: 'Primary button',
onPress: () => alert('Primary button pressed!'),
children: 'Button',
typography: 'Body/Paragraph/mdBold',
variant: 'Primary',
isDisabled: false,
isPending: false,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
@@ -67,31 +94,10 @@ export const PrimaryDefault: Story = {
},
}
export const PrimaryDisabled: Story = {
args: {
...PrimaryDefault.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const PrimaryLoading: Story = {
args: {
...PrimaryDefault.args,
isPending: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const PrimaryLarge: Story = {
args: {
...PrimaryDefault.args,
...Default.args,
variant: 'Primary',
size: 'Large',
},
play: async ({ canvas, userEvent, args }) => {
@@ -102,7 +108,7 @@ export const PrimaryLarge: Story = {
export const PrimaryMedium: Story = {
args: {
...PrimaryDefault.args,
...PrimaryLarge.args,
size: 'Medium',
},
play: async ({ canvas, userEvent, args }) => {
@@ -113,7 +119,8 @@ export const PrimaryMedium: Story = {
export const PrimarySmall: Story = {
args: {
...PrimaryDefault.args,
...PrimaryLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
},
play: async ({ canvas, userEvent, args }) => {
@@ -122,12 +129,44 @@ export const PrimarySmall: Story = {
},
}
export const PrimaryInvertedDefault: Story = {
export const PrimaryDisabled: Story = {
args: {
onPress: fn(),
children: 'Primary inverted button',
typography: 'Body/Paragraph/mdBold',
variant: 'Primary',
...PrimaryLarge.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const PrimaryLoading: Story = {
args: {
...PrimaryLarge.args,
isPending: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const PrimaryOnDarkBackground: Story = {
globals: globalStoryPropsInverted,
args: {
...PrimaryLarge.args,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const PrimaryInvertedLarge: Story = {
globals: globalStoryPropsInverted,
args: {
...Default.args,
size: 'Large',
color: 'Inverted',
},
play: async ({ canvas, userEvent, args }) => {
@@ -136,9 +175,35 @@ export const PrimaryInvertedDefault: Story = {
},
}
export const PrimaryInvertedDisabled: Story = {
export const PrimaryInvertedMedium: Story = {
globals: globalStoryPropsInverted,
args: {
...PrimaryInvertedDefault.args,
...PrimaryInvertedLarge.args,
size: 'Medium',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const PrimaryInvertedSmall: Story = {
globals: globalStoryPropsInverted,
args: {
...PrimaryInvertedLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const PrimaryInvertedDisabled: Story = {
globals: globalStoryPropsInverted,
args: {
...PrimaryInvertedLarge.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
@@ -148,8 +213,9 @@ export const PrimaryInvertedDisabled: Story = {
}
export const PrimaryInvertedLoading: Story = {
globals: globalStoryPropsInverted,
args: {
...PrimaryInvertedDefault.args,
...PrimaryInvertedLarge.args,
isPending: true,
},
play: async ({ canvas, userEvent, args }) => {
@@ -158,50 +224,35 @@ export const PrimaryInvertedLoading: Story = {
},
}
export const PrimaryInvertedLarge: Story = {
export const SecondaryLarge: Story = {
args: {
...PrimaryInvertedDefault.args,
...Default.args,
variant: 'Secondary',
size: 'Large',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const PrimaryInvertedMedium: Story = {
export const SecondaryMedium: Story = {
args: {
...PrimaryInvertedDefault.args,
...SecondaryLarge.args,
size: 'Medium',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const PrimaryInvertedSmall: Story = {
export const SecondarySmall: Story = {
args: {
...PrimaryInvertedDefault.args,
...SecondaryLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const SecondaryDefault: Story = {
args: {
onPress: fn(),
children: 'Secondary button',
typography: 'Body/Paragraph/mdBold',
variant: 'Secondary',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -210,7 +261,7 @@ export const SecondaryDefault: Story = {
export const SecondaryDisabled: Story = {
args: {
...SecondaryDefault.args,
...SecondaryLarge.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
@@ -221,85 +272,9 @@ export const SecondaryDisabled: Story = {
export const SecondaryLoading: Story = {
args: {
...SecondaryDefault.args,
...SecondaryLarge.args,
isPending: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const SecondaryLarge: Story = {
args: {
...SecondaryDefault.args,
size: 'Large',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const SecondaryMedium: Story = {
args: {
...SecondaryDefault.args,
size: 'Medium',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const SecondarySmall: Story = {
args: {
...SecondaryDefault.args,
size: 'Small',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const SecondaryInvertedDefault: Story = {
args: {
onPress: fn(),
children: 'Secondary inverted button',
typography: 'Body/Paragraph/mdBold',
variant: 'Secondary',
color: 'Inverted',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const SecondaryInvertedDisabled: Story = {
args: {
...SecondaryInvertedDefault.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const SecondaryInvertedLoading: Story = {
args: {
...SecondaryInvertedDefault.args,
isPending: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
@@ -307,11 +282,13 @@ export const SecondaryInvertedLoading: Story = {
}
export const SecondaryInvertedLarge: Story = {
globals: globalStoryPropsInverted,
args: {
...SecondaryInvertedDefault.args,
...Default.args,
variant: 'Secondary',
color: 'Inverted',
size: 'Large',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -319,11 +296,11 @@ export const SecondaryInvertedLarge: Story = {
}
export const SecondaryInvertedMedium: Story = {
globals: globalStoryPropsInverted,
args: {
...SecondaryInvertedDefault.args,
...SecondaryInvertedLarge.args,
size: 'Medium',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -331,60 +308,48 @@ export const SecondaryInvertedMedium: Story = {
}
export const SecondaryInvertedSmall: Story = {
globals: globalStoryPropsInverted,
args: {
...SecondaryInvertedDefault.args,
...SecondaryInvertedLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const TertiaryDefault: Story = {
export const SecondaryInvertedDisabled: Story = {
globals: globalStoryPropsInverted,
args: {
onPress: fn(),
children: 'Tertiary button',
typography: 'Body/Paragraph/mdBold',
variant: 'Tertiary',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const TertiaryDisabled: Story = {
args: {
...TertiaryDefault.args,
...SecondaryInvertedLarge.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const TertiaryLoading: Story = {
export const SecondaryInvertedLoading: Story = {
globals: globalStoryPropsInverted,
args: {
...TertiaryDefault.args,
...SecondaryInvertedLarge.args,
isPending: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const TertiaryLarge: Story = {
args: {
...TertiaryDefault.args,
...Default.args,
variant: 'Tertiary',
size: 'Large',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -393,10 +358,9 @@ export const TertiaryLarge: Story = {
export const TertiaryMedium: Story = {
args: {
...TertiaryDefault.args,
...TertiaryLarge.args,
size: 'Medium',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -405,36 +369,32 @@ export const TertiaryMedium: Story = {
export const TertiarySmall: Story = {
args: {
...TertiaryDefault.args,
...TertiaryLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const TextDefault: Story = {
export const TertiaryDisabled: Story = {
args: {
onPress: fn(),
children: 'Text button',
typography: 'Body/Paragraph/mdBold',
variant: 'Text',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const TextDisabled: Story = {
args: {
...TextDefault.args,
...TertiaryLarge.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const TertiaryLoading: Story = {
args: {
...TertiaryLarge.args,
isPending: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
@@ -443,10 +403,10 @@ export const TextDisabled: Story = {
export const TextLarge: Story = {
args: {
...TextDefault.args,
...Default.args,
variant: 'Text',
size: 'Large',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -455,7 +415,7 @@ export const TextLarge: Story = {
export const TextMedium: Story = {
args: {
...TextDefault.args,
...TextLarge.args,
size: 'Medium',
},
@@ -467,7 +427,8 @@ export const TextMedium: Story = {
export const TextSmall: Story = {
args: {
...TextDefault.args,
...TextLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
},
@@ -477,10 +438,20 @@ export const TextSmall: Story = {
},
}
export const TextDisabled: Story = {
args: {
...TextLarge.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const TextNoWrapping: Story = {
args: {
...TextDefault.args,
children: 'Text button with wrapping false',
...TextLarge.args,
wrapping: false,
},
play: async ({ canvas, userEvent, args }) => {
@@ -489,39 +460,14 @@ export const TextNoWrapping: Story = {
},
}
export const TextInvertedDefault: Story = {
export const TextInvertedLarge: Story = {
globals: globalStoryPropsInverted,
args: {
onPress: fn(),
children: 'Text inverted button',
typography: 'Body/Paragraph/mdBold',
...Default.args,
variant: 'Text',
color: 'Inverted',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const TextInvertedDisabled: Story = {
args: {
...TextInvertedDefault.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const TextInvertedLarge: Story = {
args: {
...TextInvertedDefault.args,
size: 'Large',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -529,11 +475,11 @@ export const TextInvertedLarge: Story = {
}
export const TextInvertedMedium: Story = {
globals: globalStoryPropsInverted,
args: {
...TextInvertedDefault.args,
...TextInvertedLarge.args,
size: 'Medium',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -541,28 +487,39 @@ export const TextInvertedMedium: Story = {
}
export const TextInvertedSmall: Story = {
globals: globalStoryPropsInverted,
args: {
...TextInvertedDefault.args,
...TextInvertedLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)
},
}
export const TextInvertedDisabled: Story = {
globals: globalStoryPropsInverted,
args: {
...TextInvertedLarge.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const TextWithIcon: Story = {
args: {
onPress: fn(),
...TextLarge.args,
children: (
<>
Text with icon
<MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
</>
),
typography: 'Body/Paragraph/mdBold',
variant: 'Text',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
@@ -574,19 +531,11 @@ export const TextWithIcon: Story = {
}
export const TextWithIconInverted: Story = {
globals: globalStoryPropsInverted,
args: {
onPress: fn(),
children: (
<>
Text with icon
<MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
</>
),
typography: 'Body/Paragraph/mdBold',
variant: 'Text',
...TextWithIcon.args,
color: 'Inverted',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(await canvas.findByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(1)