@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
38 lines (37 loc) • 3.24 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Autocomplete } from '../autocomplete';
import { Chip } from '../chip';
import { IconButton } from '../icon-button';
import { Menu, MenuItem } from '../menu';
import { Popover } from '../popover';
import { Disclosure } from './disclosure';
const story = {
title: 'Actions/Disclosure',
component: Disclosure,
args: {
padding: true,
expandable: true,
dimension: 'regular',
summary: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
open: false,
},
argTypes: {
expandable: {
options: [true, false],
control: { type: 'inline-radio' },
},
padding: {
options: [true, false],
control: { type: 'inline-radio' },
},
dimension: {
options: ['small', 'regular', 'big'],
control: { type: 'inline-radio' },
},
},
};
export default story;
const Template = args => (_jsxs(Disclosure, { ...args, children: [_jsxs(Autocomplete, { style: { maxWidth: '300px', padding: '0.5rem 0' }, icon: "magnifying-glass", label: "Fruits", children: [_jsx(Autocomplete.Option, { value: "apple", children: "Apple" }), _jsx(Autocomplete.Option, { value: "banana", decoration: _jsx(Chip, { dimension: "small", color: "green", children: "110 Cal" }), children: "Banana" }), _jsx(Autocomplete.Option, { value: "cherry", children: "Cherry" })] }), _jsxs("div", { children: ["Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus corporis nobis ipsum natus laudantium dolorem sapiente, sint adipisci at asperiores quia ex voluptatum veniam! Quos rerum natus eos excepturi atque!", ' ', _jsx(Popover, { trigger: _jsx(IconButton, { icon: "circle-info", dimension: "small", kind: "flat" }), children: _jsx(Menu, { style: { maxWidth: '300px' }, children: _jsx(MenuItem, { value: "1", children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus corporis nobis ipsum natus laudantium dolorem sapiente, sint adipisci at asperiores quia ex voluptatum veniam! Quos rerum natus eos excepturi atque!" }) }) })] })] }));
export const Default = Template.bind({});
const NestedTemplate = args => (_jsxs(Disclosure, { ...args, children: [_jsxs(Autocomplete, { style: { maxWidth: '300px', padding: '0.5rem 0' }, icon: "magnifying-glass", label: "Fruits", children: [_jsx(Autocomplete.Option, { value: "apple", children: "Apple" }), _jsx(Autocomplete.Option, { value: "banana", decoration: _jsx(Chip, { dimension: "small", color: "green", children: "110 Cal" }), children: "Banana" }), _jsx(Autocomplete.Option, { value: "cherry", children: "Cherry" })] }), "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus corporis nobis ipsum natus laudantium dolorem sapiente, sint adipisci at asperiores quia ex voluptatum veniam! Quos rerum natus eos excepturi atque!", _jsx(Disclosure, { summary: "Nested", children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus corporis nobis ipsum natus laudantium dolorem sapiente, sint adipisci at asperiores quia ex voluptatum veniam! Quos rerum natus eos excepturi atque!" })] }));
export const Nested = NestedTemplate.bind({});