Dennis Simon
78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import OptionSelect from '../app/components/OptionSelect';
|
|
|
|
const meta: Meta<typeof OptionSelect> = {
|
|
title: 'Components/OptionSelect',
|
|
component: OptionSelect,
|
|
tags: ['autodocs'],
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof OptionSelect>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
placeholder: 'Select an option',
|
|
className: 'w-[256px]',
|
|
options: [
|
|
{ value: '1', label: 'Option 1' },
|
|
{ value: '2', label: 'Option 2' },
|
|
{ value: '3', label: 'Option 3' },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const WithLabel: Story = {
|
|
args: {
|
|
placeholder: 'Select an option',
|
|
className: 'w-[256px]',
|
|
label: 'Label',
|
|
options: [
|
|
{ value: '1', label: 'Option 1' },
|
|
{ value: '2', label: 'Option 2' },
|
|
{ value: '3', label: 'Option 3' },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const WithHiddenLabel: Story = {
|
|
args: {
|
|
placeholder: 'Select an option',
|
|
className: 'w-[256px]',
|
|
label: 'Label',
|
|
hiddenLabel: true,
|
|
options: [
|
|
{ value: '1', label: 'Option 1' },
|
|
{ value: '2', label: 'Option 2' },
|
|
{ value: '3', label: 'Option 3' },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const WithError: Story = {
|
|
args: {
|
|
placeholder: 'Select an option',
|
|
className: 'w-[256px]',
|
|
error: 'This is an error',
|
|
options: [
|
|
{ value: '1', label: 'Option 1' },
|
|
{ value: '2', label: 'Option 2' },
|
|
{ value: '3', label: 'Option 3' },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const WithErrorAndLabel: Story = {
|
|
args: {
|
|
placeholder: 'Select an option',
|
|
className: 'w-[256px]',
|
|
error: 'This field is required',
|
|
label: 'Please select an option',
|
|
options: [
|
|
{ value: '1', label: 'Option 1' },
|
|
{ value: '2', label: 'Option 2' },
|
|
{ value: '3', label: 'Option 3' },
|
|
],
|
|
},
|
|
};
|