71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectSeparator,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@konobangu/design-system/components/ui/select';
|
|
|
|
/**
|
|
* Displays a list of options for the user to pick from—triggered by a button.
|
|
*/
|
|
const meta: Meta<typeof Select> = {
|
|
title: 'ui/Select',
|
|
component: Select,
|
|
tags: ['autodocs'],
|
|
argTypes: {},
|
|
render: (args) => (
|
|
<Select {...args}>
|
|
<SelectTrigger className="w-96">
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>Fruits</SelectLabel>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
<SelectItem value="grapes">Grapes</SelectItem>
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
|
</SelectGroup>
|
|
<SelectSeparator />
|
|
<SelectGroup>
|
|
<SelectLabel>Vegetables</SelectLabel>
|
|
<SelectItem value="aubergine">Aubergine</SelectItem>
|
|
<SelectItem value="broccoli">Broccoli</SelectItem>
|
|
<SelectItem value="carrot" disabled>
|
|
Carrot
|
|
</SelectItem>
|
|
<SelectItem value="courgette">Courgette</SelectItem>
|
|
<SelectItem value="leek">Leek</SelectItem>
|
|
</SelectGroup>
|
|
<SelectSeparator />
|
|
<SelectGroup>
|
|
<SelectLabel>Meat</SelectLabel>
|
|
<SelectItem value="beef">Beef</SelectItem>
|
|
<SelectItem value="chicken">Chicken</SelectItem>
|
|
<SelectItem value="lamb">Lamb</SelectItem>
|
|
<SelectItem value="pork">Pork</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
),
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
} satisfies Meta<typeof Select>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
/**
|
|
* The default form of the select.
|
|
*/
|
|
export const Default: Story = {};
|