105 lines
1.5 KiB
TypeScript
105 lines
1.5 KiB
TypeScript
import 'react-material-symbols/rounded'
|
|
|
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import { Spinner } from './Spinner'
|
|
|
|
const meta: Meta<typeof Spinner> = {
|
|
title: 'Components/Spinner',
|
|
component: Spinner,
|
|
argTypes: {},
|
|
}
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof Spinner>
|
|
|
|
function Wrapper({
|
|
children,
|
|
backgroundColor,
|
|
}: {
|
|
children: React.ReactNode
|
|
backgroundColor?: string
|
|
}) {
|
|
return (
|
|
<div
|
|
style={{
|
|
height: '200px',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
color: 'Accent',
|
|
size: 'Medium',
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<Wrapper>
|
|
<Story />
|
|
</Wrapper>
|
|
),
|
|
],
|
|
}
|
|
|
|
export const Inverted: Story = {
|
|
args: {
|
|
color: 'Inverted',
|
|
size: 'Medium',
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<Wrapper backgroundColor="var(--Icon-Interactive-Default)">
|
|
<Story />
|
|
</Wrapper>
|
|
),
|
|
],
|
|
}
|
|
|
|
export const Small: Story = {
|
|
args: {
|
|
size: 'Small',
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<Wrapper>
|
|
<Story />
|
|
</Wrapper>
|
|
),
|
|
],
|
|
}
|
|
|
|
export const Medium: Story = {
|
|
args: {
|
|
size: 'Medium',
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<Wrapper>
|
|
<Story />
|
|
</Wrapper>
|
|
),
|
|
],
|
|
}
|
|
|
|
export const Large: Story = {
|
|
args: {
|
|
size: 'Large',
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<Wrapper>
|
|
<Story />
|
|
</Wrapper>
|
|
),
|
|
],
|
|
}
|