Files
web/packages/design-system/lib/components/InfoBox/InfoBox.stories.tsx
Joakim Jäderberg db30588f63 Merged in feature/SW-3595-sas-info-boxes (pull request #3177)
Feature/SW-3595 Add info boxes to SAS start page & Eurobonus alert to select-hotel page on SAS

* wip

* feat(SW-3595): Add info boxes to SAS start page

* Add InfoBox to design-system
* Add background gradient to SAS start page

* update variable naming and conditionalize the eurobonus message on select-hotel

* SAS startpage update default message

* make select-hotel a bit more generic with slot={} instead of alert={}


Approved-by: Anton Gunnarsson
2025-11-19 10:50:04 +00:00

54 lines
1.3 KiB
TypeScript

import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { expect } from 'storybook/test'
import { InfoBox, Props } from './InfoBox'
import { IconName } from '../Icons/iconName'
const meta: Meta<typeof InfoBox> = {
title: 'Components/InfoBox',
component: InfoBox,
parameters: {
layout: 'padded',
},
tags: ['autodocs'],
}
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
theme: 'Default',
icon: IconName.Accessibility,
heading: 'Heading',
text: 'This is an informational message',
},
argTypes: {
icon: {
control: { type: 'select' },
options: Object.values(IconName),
},
theme: {
control: { type: 'select' },
options: ['Default', 'SAS-Blue'] satisfies Props['theme'][],
},
},
play: async ({ canvas, args }) => {
const article = await canvas.findByRole('article')
await expect(article).toBeVisible()
const heading = await canvas.findByRole('heading', { name: args.heading })
await expect(heading).toBeVisible()
const paragraph = await canvas.findByText(args.text)
await expect(paragraph).toBeVisible()
},
}
export const WithoutIcon: Story = {
args: {
heading: 'Heading',
text: 'This is an informational message',
},
}