overleaf/services/web/frontend/stories/ui/badge-bs5.stories.tsx
Antoine Clausse 4a8b79080b [storybook] Update Storybook and add a control for BS3/BS5 (#20948)
* [storybook] Update Storybook to version 8.3.5

* [storybook] Run storybook with `--no-open`. Fixes xdg-utils issue

* [storybook] Create decorator for BS3/BS5

* [storybook] Add `bsVersionDecorator` to stories

* [storybook] Fix bugs in stories

* [storybook] Fixup `useMeta` type. Use `DeepPartial`

* [storybook] Fix types

GitOrigin-RevId: 48c0f0fefb1ab2d4863ab59051b900b1908a613c
2024-10-14 11:07:40 +00:00

63 lines
1.2 KiB
TypeScript

import Badge from '@/features/ui/components/bootstrap-5/badge'
import Icon from '@/shared/components/icon'
import type { Meta, StoryObj } from '@storybook/react'
import classnames from 'classnames'
const meta: Meta<typeof Badge> = {
title: 'Shared / Components / Badge / Bootstrap 5',
component: Badge,
parameters: {
bootstrap5: true,
},
args: {
children: 'Badge',
},
argTypes: {
bg: {
options: ['light', 'info', 'primary', 'warning', 'danger'],
control: { type: 'radio' },
},
prepend: {
table: {
disable: true,
},
},
className: {
table: {
disable: true,
},
},
},
}
export default meta
type Story = StoryObj<typeof Badge>
export const BadgeDefault: Story = {
render: args => {
return (
<Badge
className={classnames({ 'text-dark': args.bg === 'light' })}
{...args}
/>
)
},
}
BadgeDefault.args = {
bg: meta.argTypes!.bg!.options![0],
}
export const BadgePrepend: Story = {
render: args => {
return (
<Badge
className={classnames({ 'text-dark': args.bg === 'light' })}
prepend={<Icon type="star" fw />}
{...args}
/>
)
},
}
BadgePrepend.args = {
bg: meta.argTypes!.bg!.options![0],
}