lucid-ui/dist/esm/components/VerticalListMenu/VerticalListMenu.stories.js

A UI component library from Xandr.

import { map, times, partial } from 'lodash';
import React, { useState } from 'react';
import VerticalListMenu from './VerticalListMenu';
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
export default {
    title: 'Navigation/VerticalListMenu',
    component: VerticalListMenu,
    parameters: {
        docs: {
            description: {
                component: VerticalListMenu.peek.description,
            },
        },
    },
    args: VerticalListMenu.defaultProps,
};
//👇 Add a key prop to each child element of the array
function addKeys(children) {
    return map(children, (child, index) => ({ ...child, key: index }));
}
//👇 Create a “template” of how args map to rendering
const Template = (args) => {
    return (React.createElement("section", null,
        React.createElement(VerticalListMenu, { ...args, style: { width: 250 } })));
};
//👇 Each story then reuses that template
/** Basic VerticalListMenu */
export const Basic = Template.bind({});
Basic.args = {
    children: addKeys([
        React.createElement(VerticalListMenu.Item, null, "Level one"),
        React.createElement(VerticalListMenu.Item, null, "Level one"),
        React.createElement(VerticalListMenu.Item, null, "Level one"),
    ]),
};
/** Nested With Expander */
export const NestedWithExpander = (args) => {
    const [currentList, setCurrentList] = useState('one');
    const [selectedIndices, setSelectedIndices] = useState([0]);
    const handleSelect = (currentList, index) => {
        setCurrentList(currentList);
        setSelectedIndices([index]);
    };
    return (React.createElement(VerticalListMenu, { ...args, style: { width: 250 }, onSelect: partial(handleSelect, 'one'), selectedIndices: currentList === 'one' ? selectedIndices : [] },
        React.createElement(VerticalListMenu.Item, null, "Level one"),
        React.createElement(VerticalListMenu.Item, { hasExpander: true },
            "Level one with VerticalListMenu",
            React.createElement(VerticalListMenu, { onSelect: partial(handleSelect, 'two'), selectedIndices: currentList === 'two' ? selectedIndices : [] },
                React.createElement(VerticalListMenu.Item, null, "Level two"),
                React.createElement(VerticalListMenu.Item, { hasExpander: true },
                    "Level two with VerticalListMenu and lots of text. Lorem quos natus mollitia nihil quasi! Necessitatibus corporis aliquam quam laborum nesciunt quaerat. Nostrum distinctio officiis adipisci nulla unde repellat. Soluta eaque ex obcaecati molestiae provident aspernatur sit! Expedita et.",
                    React.createElement(VerticalListMenu, { onSelect: partial(handleSelect, 'three'), selectedIndices: currentList === 'three' ? selectedIndices : [] }, times(20, (n) => {
                        return (React.createElement(VerticalListMenu.Item, { key: n }, "Level three"));
                    }))),
                React.createElement(VerticalListMenu.Item, null, "Level two"))),
        React.createElement(VerticalListMenu.Item, null, "Level one")));
};
/** Nested Full Width */
export const NestedFullWidth = (args) => {
    const [currentList, setCurrentList] = useState('one');
    const [selectedIndices, setSelectedIndices] = useState([0]);
    const handleSelect = (currentList, index) => {
        setCurrentList(currentList);
        setSelectedIndices([index]);
    };
    return (React.createElement(VerticalListMenu, { ...args, onSelect: partial(handleSelect, 'one'), selectedIndices: currentList === 'one' ? selectedIndices : [] },
        React.createElement(VerticalListMenu.Item, null, "Level one"),
        React.createElement(VerticalListMenu.Item, { isExpanded: true },
            "Level one with VerticalListMenu",
            React.createElement(VerticalListMenu, { onSelect: partial(handleSelect, 'two'), selectedIndices: currentList === 'two' ? selectedIndices : [] },
                React.createElement(VerticalListMenu.Item, null, "Level two"),
                React.createElement(VerticalListMenu.Item, null, "Level two"))),
        React.createElement(VerticalListMenu.Item, { isExpanded: true },
            "Level one with VerticalListMenu",
            React.createElement(VerticalListMenu, { onSelect: partial(handleSelect, 'three'), selectedIndices: currentList === 'three' ? selectedIndices : [] },
                React.createElement(VerticalListMenu.Item, null, "Level two"),
                React.createElement(VerticalListMenu.Item, { isExpanded: false },
                    "Level two with closed VerticalListMenu",
                    React.createElement(VerticalListMenu, { onSelect: partial(handleSelect, 'four'), selectedIndices: currentList === 'four' ? selectedIndices : [] },
                        React.createElement(VerticalListMenu.Item, null, "Level three"),
                        React.createElement(VerticalListMenu.Item, null, "Level three"),
                        React.createElement(VerticalListMenu.Item, null, "Level three"))),
                React.createElement(VerticalListMenu.Item, null, "Level two"))),
        React.createElement(VerticalListMenu.Item, null, "Level one")));
};
/** No Animations */
export const NoAnimations = Template.bind({});
NoAnimations.args = {
    children: addKeys([
        React.createElement(VerticalListMenu.Item, null, "Level one"),
        React.createElement(VerticalListMenu.Item, { Collapsible: {
                isAnimated: false,
                isMountControlled: false, // don't remove items from the dom when they are hidden
            }, hasExpander: true },
            "Level one with VerticalListMenu",
            React.createElement(VerticalListMenu, null, times(20, (n) => {
                return (React.createElement(VerticalListMenu.Item, { key: n }, "Level two"));
            }))),
        React.createElement(VerticalListMenu.Item, null, "Level one"),
    ]),
};
//# sourceMappingURL=VerticalListMenu.stories.js.map