Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@Qs-F
Qs-F committed Nov 1, 2023
1 parent 3d7303e commit f7287b5
Show file tree
Hide file tree
Showing 8 changed files with 860 additions and 807 deletions.
94 changes: 51 additions & 43 deletions packages/for-ui/src/badge/Badge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ import {
MdPersonOutline,
MdPriorityHigh,
} from 'react-icons/md';
import { Meta, Story } from '@storybook/react/types-6-0';
import { Meta, StoryObj } from '@storybook/react';
import { Badge } from './Badge';

type Story = StoryObj<typeof Badge>

const sampleIcons = {
undefined,
MdDeleteOutline: <MdDeleteOutline />,
Expand All @@ -29,58 +31,64 @@ export default {
mapping: sampleIcons,
},
},
} as Meta;
} satisfies Meta<typeof Badge>;

export const Playground = {
export const Playground: Story = {
args: {
label: 'バッジ',
variant: 'text',
intention: 'subtle',
icon: MdDeleteOutline,
icon: <MdDeleteOutline />,
},
};

export const Constant: Story = () => (
<div className="flex flex-row gap-8">
<div className="flex flex-col gap-4">
<Badge variant="constant" intention="subtle" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="shade" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="primary" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="secondary" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="positive" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="negative" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="notice" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="informative" label="注意書き" icon={<MdPriorityHigh />} />
export const Constant: Story = {
render: () => (
<div className="flex flex-row gap-8">
<div className="flex flex-col gap-4">
<Badge variant="constant" intention="subtle" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="shade" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="primary" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="secondary" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="positive" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="negative" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="notice" label="注意書き" icon={<MdPriorityHigh />} />
<Badge variant="constant" intention="informative" label="注意書き" icon={<MdPriorityHigh />} />
</div>
</div>
</div>
);
)
}

export const Text: Story = () => (
<div className="flex flex-row gap-8">
<div className="flex flex-col gap-4">
<Badge variant="text" intention="subtle" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="shade" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="primary" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="secondary" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="positive" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="negative" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="notice" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="informative" label="神田 柚奈" icon={<MdPersonOutline />} />
export const Text: Story = {
render: () => (
<div className="flex flex-row gap-8">
<div className="flex flex-col gap-4">
<Badge variant="text" intention="subtle" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="shade" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="primary" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="secondary" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="positive" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="negative" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="notice" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="text" intention="informative" label="神田 柚奈" icon={<MdPersonOutline />} />
</div>
</div>
</div>
);
)
}

export const Outlined: Story = () => (
<div className="flex flex-row gap-8">
<div className="flex flex-col gap-4">
<Badge variant="outlined" intention="subtle" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="shade" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="primary" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="secondary" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="positive" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="negative" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="notice" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="informative" label="神田 柚奈" icon={<MdPersonOutline />} />
export const Outlined: Story = {
render: () => (
<div className="flex flex-row gap-8">
<div className="flex flex-col gap-4">
<Badge variant="outlined" intention="subtle" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="shade" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="primary" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="secondary" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="positive" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="negative" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="notice" label="神田 柚奈" icon={<MdPersonOutline />} />
<Badge variant="outlined" intention="informative" label="神田 柚奈" icon={<MdPersonOutline />} />
</div>
</div>
</div>
);
)
};
Loading

0 comments on commit f7287b5

Please sign in to comment.