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

Merged in fix/BOOK-293-button-variants (pull request #3371)

Browse Source 
fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): inherit color for icon


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-12-19 12:32:52 +00:00
committed by Bianca Widstam
parent 2197ab2137
commit 3f632e6031
169 changed files with 665 additions and 944 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
packages/design-system/lib/components/ButtonLink/ButtonLink.stories.tsx
View File

@@ -1,11 +1,9 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { expect } from 'storybook/test'
import { expect, fn } 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'
import buttonMeta from '../Button/Button.stories'
const meta: Meta<typeof ButtonLink> = {
title: 'Core Components/ButtonLink',
@@ -13,64 +11,24 @@ const meta: Meta<typeof ButtonLink> = {
argTypes: {
onClick: {
table: {
disable: true,
type: { summary: 'function' },
defaultValue: { summary: 'undefined' },
},
description: 'Callback function to handle link click events.',
},
typography: {
control: 'select',
options: Object.keys(typographyConfig.variants.variant),
},
variant: {
control: 'select',
options: Object.keys(buttonConfig.variants.variant),
default: 'Primary',
variant: buttonMeta.argTypes?.variant,
color: buttonMeta.argTypes?.color,
size: buttonMeta.argTypes?.size,
wrapping: buttonMeta.argTypes?.wrapping,
leadingIconName: buttonMeta.argTypes?.leadingIconName,
trailingIconName: buttonMeta.argTypes?.trailingIconName,
fullWidth: buttonMeta.argTypes?.fullWidth,
href: {
table: {
defaultValue: {
summary: buttonConfig.defaultVariants.variant,
},
type: {
summary: 'string',
detail: Object.keys(buttonConfig.variants.variant).join(' | '),
},
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
},
},
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.',
description: 'The URL that the link points to.',
},
},
}
@@ -84,13 +42,9 @@ type Story = StoryObj<typeof ButtonLink>
export const Default: Story = {
args: {
onClick: (event) => {
event.preventDefault()
alert('Button link clicked!')
},
onClick: fn(),
href: '#',
children: 'Button link',
typography: 'Body/Paragraph/mdBold',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
@@ -103,7 +57,7 @@ export const PrimaryLarge: Story = {
args: {
...Default.args,
variant: 'Primary',
size: 'Large',
size: 'lg',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
@@ -115,7 +69,7 @@ export const PrimaryLarge: Story = {
export const PrimaryMedium: Story = {
args: {
...PrimaryLarge.args,
size: 'Medium',
size: 'md',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
@@ -127,8 +81,7 @@ export const PrimaryMedium: Story = {
export const PrimarySmall: Story = {
args: {
...PrimaryLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
size: 'sm',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
@@ -142,7 +95,7 @@ export const PrimaryOnDarkBackground: Story = {
args: {
...Default.args,
variant: 'Primary',
size: 'Large',
size: 'lg',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
@@ -157,7 +110,7 @@ export const PrimaryInvertedLarge: Story = {
...Default.args,
variant: 'Primary',
color: 'Inverted',
size: 'Large',
size: 'lg',
},
play: async ({ canvasElement }) => {
@@ -171,9 +124,8 @@ export const PrimaryInvertedMedium: Story = {
globals: globalStoryPropsInverted,
args: {
...PrimaryInvertedLarge.args,
size: 'Medium',
size: 'md',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -185,10 +137,8 @@ export const PrimaryInvertedSmall: Story = {
globals: globalStoryPropsInverted,
args: {
...PrimaryInvertedLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
size: 'sm',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -200,9 +150,8 @@ export const SecondaryLarge: Story = {
args: {
...Default.args,
variant: 'Secondary',
size: 'Large',
size: 'lg',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -213,9 +162,8 @@ export const SecondaryLarge: Story = {
export const SecondaryMedium: Story = {
args: {
...SecondaryLarge.args,
size: 'Medium',
size: 'md',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -226,10 +174,8 @@ export const SecondaryMedium: Story = {
export const SecondarySmall: Story = {
args: {
...SecondaryLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
size: 'sm',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -243,9 +189,8 @@ export const SecondaryInvertedLarge: Story = {
...Default.args,
variant: 'Secondary',
color: 'Inverted',
size: 'Large',
size: 'lg',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -257,9 +202,8 @@ export const SecondaryInvertedMedium: Story = {
globals: globalStoryPropsInverted,
args: {
...SecondaryInvertedLarge.args,
size: 'Medium',
size: 'md',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -271,10 +215,8 @@ export const SecondaryInvertedSmall: Story = {
globals: globalStoryPropsInverted,
args: {
...SecondaryInvertedLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
size: 'sm',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -286,9 +228,8 @@ export const TertiaryLarge: Story = {
args: {
...Default.args,
variant: 'Tertiary',
size: 'Large',
size: 'lg',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -299,9 +240,8 @@ export const TertiaryLarge: Story = {
export const TertiaryMedium: Story = {
args: {
...TertiaryLarge.args,
size: 'Medium',
size: 'md',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -312,10 +252,8 @@ export const TertiaryMedium: Story = {
export const TertiarySmall: Story = {
args: {
...TertiaryLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
size: 'sm',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -327,9 +265,8 @@ export const TextLarge: Story = {
args: {
...Default.args,
variant: 'Text',
size: 'Large',
size: 'lg',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -340,9 +277,8 @@ export const TextLarge: Story = {
export const TextMedium: Story = {
args: {
...TextLarge.args,
size: 'Medium',
size: 'md',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -353,10 +289,8 @@ export const TextMedium: Story = {
export const TextSmall: Story = {
args: {
...TextLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
size: 'sm',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -383,9 +317,8 @@ export const TextInvertedLarge: Story = {
...Default.args,
variant: 'Text',
color: 'Inverted',
size: 'Large',
size: 'lg',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -397,9 +330,8 @@ export const TextInvertedMedium: Story = {
globals: globalStoryPropsInverted,
args: {
...TextInvertedLarge.args,
size: 'Medium',
size: 'md',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -411,10 +343,8 @@ export const TextInvertedSmall: Story = {
globals: globalStoryPropsInverted,
args: {
...TextInvertedLarge.args,
typography: 'Body/Supporting text (caption)/smBold',
size: 'Small',
size: 'sm',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
if (!link) throw new Error('Link not found')
@@ -426,12 +356,8 @@ export const TextWithIcon: Story = {
args: {
...Default.args,
variant: 'Text',
children: (
<>
Text with icon
<MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
</>
),
children: 'Text with icon',
trailingIconName: 'chevron_right',
},
play: async ({ canvasElement }) => {
const link = canvasElement.querySelector('a')
@@ -445,12 +371,6 @@ export const TextWithIconInverted: Story = {
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')