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
54 lines
1.3 KiB
TypeScript
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',
|
|
},
|
|
}
|