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

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

Approved-by: Christel Westerberg

packages/design-system/lib/components/ButtonLink/ButtonLink.stories.tsx

@@ -0,0 +1,460 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { expect } from 'storybook/test'
+
+import ButtonLink from '.'
+import { config as buttonConfig } from '../Button/variants'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { config as typographyConfig } from '../Typography/variants'
+
+const meta: Meta<typeof ButtonLink> = {
+  title: 'Components/ButtonLink',
+  component: ButtonLink,
+  argTypes: {
+    onClick: {
+      table: {
+        disable: true,
+      },
+    },
+    typography: {
+      control: 'select',
+      options: Object.keys(typographyConfig.variants.variant),
+    },
+    variant: {
+      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),
+      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),
+      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 `false`, the button will use smaller padding.',
+    },
+  },
+}
+
+const globalStoryPropsInverted = {
+  backgrounds: { value: 'scandicPrimaryDark' },
+}
+export default meta
+
+type Story = StoryObj<typeof ButtonLink>
+
+export const Default: Story = {
+  args: {
+    onClick: (event) => {
+      event.preventDefault()
+      alert('Button link clicked!')
+    },
+    href: '#',
+    children: 'Button link',
+    typography: 'Body/Paragraph/mdBold',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryLarge: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Primary',
+    size: 'Large',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryMedium: Story = {
+  args: {
+    ...PrimaryLarge.args,
+    size: 'Medium',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimarySmall: Story = {
+  args: {
+    ...PrimaryLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryOnDarkBackground: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...Default.args,
+    variant: 'Primary',
+    size: 'Large',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryInvertedLarge: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...Default.args,
+    variant: 'Primary',
+    color: 'Inverted',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryInvertedMedium: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...PrimaryInvertedLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryInvertedSmall: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...PrimaryInvertedLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryLarge: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Secondary',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryMedium: Story = {
+  args: {
+    ...SecondaryLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondarySmall: Story = {
+  args: {
+    ...SecondaryLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryInvertedLarge: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...Default.args,
+    variant: 'Secondary',
+    color: 'Inverted',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryInvertedMedium: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...SecondaryInvertedLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryInvertedSmall: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...SecondaryInvertedLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TertiaryLarge: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Tertiary',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TertiaryMedium: Story = {
+  args: {
+    ...TertiaryLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TertiarySmall: Story = {
+  args: {
+    ...TertiaryLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextLarge: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Text',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextMedium: Story = {
+  args: {
+    ...TextLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextSmall: Story = {
+  args: {
+    ...TextLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextNoWrapping: Story = {
+  args: {
+    ...TextLarge.args,
+    children: 'Text button with wrapping false',
+    wrapping: false,
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextInvertedLarge: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...Default.args,
+    variant: 'Text',
+    color: 'Inverted',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextInvertedMedium: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...TextInvertedLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextInvertedSmall: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...TextInvertedLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextWithIcon: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Text',
+    children: (
+      <>
+        Text with icon
+        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+      </>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextWithIconInverted: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...TextWithIcon.args,
+    color: 'Inverted',
+    children: (
+      <>
+        Text with icon
+        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+      </>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}