@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
55 lines (54 loc) • 2.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Select } from './select';
const story = {
title: 'Inputs/Select',
component: Select,
argTypes: {
onChange: {
action: 'changed',
table: {
disable: true,
},
},
kind: {
options: ['single', 'multiple'],
control: { type: 'radio' },
},
dimension: {
options: ['small', 'regular', 'big'],
control: { type: 'radio' },
},
disabled: {
options: [true, false],
control: { type: 'inline-radio' },
},
invalid: {
options: [true, false],
control: { type: 'inline-radio' },
},
},
args: {
dimension: 'regular',
label: '',
message: '',
},
};
export default story;
const SingleTemplate = args => (_jsxs(Select, { defaultValue: "placeholder", ...args, children: [_jsx("option", { value: "placeholder", hidden: true, disabled: true, children: "Pick an option" }), _jsxs("optgroup", { label: "Option Group One", children: [_jsx("option", { value: "1", children: "This is a very long option selected" }), _jsx("option", { value: "2", children: "Option 2" })] }), _jsxs("optgroup", { label: "Option Group Two", children: [_jsx("option", { value: "3", children: "Option 1" }), _jsx("option", { value: "4", children: "Option 2" }), _jsx("option", { value: "5", children: "Option 3" })] })] }));
const MultipleTemplate = args => (_jsxs(Select, { ...args, kind: "multiple", children: [_jsxs("optgroup", { label: "Option Group", children: [_jsx("option", { children: "Option 1" }), _jsx("option", { children: "Option 2" }), _jsx("option", { children: "Option 3" })] }), _jsxs("optgroup", { label: "Option Group 2", children: [_jsx("option", { children: "Option 4" }), _jsx("option", { children: "Option 5" }), _jsx("option", { children: "Option 6" })] })] }));
export const Single = SingleTemplate.bind({});
Single.args = {
disabled: false,
kind: 'single',
};
export const Multiple = MultipleTemplate.bind({});
Multiple.args = {
kind: 'multiple',
};
export const WithLabel = SingleTemplate.bind({});
WithLabel.args = {
disabled: false,
kind: 'single',
label: 'Label',
message: 'Sample hint text',
};