@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
25 lines (24 loc) • 2.79 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Chip, Text } from '../..';
import { Menu } from './menu';
const story = {
title: 'Navigation/Menu',
component: Menu,
};
export default story;
const Template = args => (_jsxs(Menu, { ...args, children: [_jsx(Menu.Item, { value: "1", padding: false, children: "List item text" }), _jsx(Menu.Item, { value: "2", padding: false, children: "List item text" }), _jsx(Menu.Item, { value: "3", padding: false, children: "List item text List item text List item text List item text List item text" }), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { value: "4", padding: false, children: "List item text" }), _jsx(Menu.Item, { value: "5", padding: false, subtext: "Hint text", children: "List item text with subtext" }), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { value: "6", padding: false, children: _jsxs("span", { children: [_jsx(Text, { variant: "heading-6", children: "Custom item" }), _jsx(Text, { variant: "body-3", children: "Custom sub text example" })] }) })] }));
export const Default = Template.bind({});
export const WithMaxHeight = Template.bind({});
WithMaxHeight.args = {
maxHeight: '100px',
};
const WithIconsTemplate = args => (_jsxs(Menu, { ...args, children: [_jsx(Menu.Item, { value: "1", icon: "user", children: "List item text" }), _jsx(Menu.Item, { value: "2", icon: "message", children: "List item text List item" }), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { value: "3", children: "List item text" }), _jsx(Menu.Item, { value: "4", icon: "bell", children: "List item text" })] }));
export const WithIcons = WithIconsTemplate.bind({});
const WithCheckboxTemplate = (args) => {
const [isChecked, setIsChecked] = useState(false);
return (_jsxs(Menu, { ...args, children: [_jsx(Menu.ItemCheckbox, { value: "1", checked: isChecked, icon: isChecked ? 'check' : undefined, onClick: () => setIsChecked(val => !val), children: "Checkable item" }), _jsx(Menu.Item, { value: "2", icon: "compass", decoration: _jsx(Chip, { dimension: "small", color: "blue", children: "Decoration" }), children: "List item text" })] }));
};
export const WithCheckboxes = WithCheckboxTemplate.bind({});
const LinksTemplate = args => (_jsxs(Menu, { ...args, children: [_jsx(Menu.Item, { value: "1", as: "a", href: "https://design.wonderflow.ai", target: "_blank", icon: "user", children: "List item text as Link in new Tab" }), _jsx(Menu.Item, { value: "2", icon: "message", children: "List item text" }), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { value: "3", children: "List item text" }), _jsx(Menu.Item, { value: "4", as: "a", href: "https://design.wonderflow.ai", icon: "bell", children: "List item text as Link" })] }));
export const AsLink = LinksTemplate.bind({});