@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
36 lines (35 loc) • 2.61 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Chip, Text } from '../..';
import { Menu } from '..';
const story = {
title: 'Navigation/Menu/Menu Item',
component: Menu.Item,
args: {
dimension: 'regular',
padding: true,
iconPosition: 'left',
subtext: '',
description: '',
},
argTypes: {
dimension: {
options: ['small', 'regular'],
control: { type: 'radio' },
},
iconPosition: {
options: ['left', 'right'],
control: { type: 'inline-radio' },
},
},
};
export default story;
const TemplateItem = args => (_jsxs(_Fragment, { children: [_jsx(Menu.Item, { ...args, icon: "compass", value: "1", children: "List item text" }), _jsx(Menu.Item, { ...args, icon: "compass", decoration: _jsx(Chip, { dimension: "small", color: "blue", children: "Decoration" }), value: "2", children: "List item text" })] }));
export const DefaultItem = TemplateItem.bind({});
const WithCheckboxTemplate = (args) => {
const [checked, setChecked] = useState('1');
return (_jsxs(_Fragment, { children: [`Selected: ${checked ?? 'none'}`, _jsx(Menu.ItemCheckbox, { ...args, icon: checked === '1' ? 'check' : undefined, onClick: (_, value) => setChecked(value), value: "1", checked: checked === '1', children: "Checkable item" }), _jsx(Menu.ItemCheckbox, { ...args, onClick: (_, value) => setChecked(value), value: "2", icon: checked === '2' ? 'check' : undefined, decoration: _jsx(Chip, { dimension: "small", color: "blue", children: "Decoration" }), checked: checked === '2', children: "List item text" })] }));
};
export const WithCheckboxes = WithCheckboxTemplate.bind({});
const WithDecoratorsTemplate = args => (_jsxs(_Fragment, { children: [_jsx(Menu.Item, { ...args, value: "1", decoration: _jsx(Chip, { dimension: "small", color: "yellow", children: "Good" }), icon: "user", children: "List item text" }), _jsx(Menu.Item, { ...args, value: "2", decoration: _jsx(Chip, { dimension: "small", color: "blue", children: "Example" }), icon: "message", children: "List item text List item" }), _jsx(Menu.Item, { ...args, value: "3", decoration: _jsx(Text, { variant: "body-3", color: "danger", children: "Warning" }), icon: "compass", children: "List item text" }), _jsx(Menu.Item, { ...args, value: "4", decoration: _jsx(Chip, { dimension: "small", color: "purple", children: "Decoration" }), icon: "bell", children: "List item text" })] }));
export const WithDecorations = WithDecoratorsTemplate.bind({});