@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
20 lines (19 loc) • 1.47 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Chip, List } from '../..';
import { Autocomplete } from './autocomplete';
const story = {
title: 'Inputs/Autocomplete',
component: Autocomplete,
args: {
invalid: false,
},
};
export default story;
const Template = args => (_jsxs(_Fragment, { children: [_jsxs(Autocomplete, { onChange: value => console.log(value), style: { maxWidth: '300px' }, icon: "magnifying-glass", ...args, 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(List, { children: [_jsxs(List.Li, { children: ["Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus non laboriosam facere?", ' '] }), _jsx(List.Li, { children: "Eum, assumenda ad sunt dolorum aspernatur quia sit! Mollitia eligendi accusantium alias non enim quaerat quidem fugiat architecto." })] })] }));
export const Default = Template.bind({});
const BusyTemplate = args => (_jsx(Autocomplete, { onChange: value => console.log(value), style: { maxWidth: '300px' }, icon: "magnifying-glass", busy: true, ...args }));
export const Busy = BusyTemplate.bind({});
export const WithValue = Template.bind({});
WithValue.args = {
value: '1',
};