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

A UI component library from Xandr.

import { map } from 'lodash';
import React from 'react';
import * as d3Scale from 'd3-scale';
import VerticalTabs from './VerticalTabs';
import Lines from '../Lines/Lines';
import SuccessIcon from '../Icon/SuccessIcon/SuccessIcon';
import WarningIcon from '../Icon/WarningIcon/WarningIcon';
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
export default {
    title: 'Navigation/VerticalTabs',
    component: VerticalTabs,
    parameters: {
        docs: {
            description: {
                component: VerticalTabs.peek.description,
            },
        },
    },
    args: VerticalTabs.defaultProps,
};
//👇 Destructure any child components that we will need
const { Tab, Title } = VerticalTabs;
//👇 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(VerticalTabs, { ...args })));
};
//👇 Each story then reuses that template
/** Default: Title as Prop */
export const Basic = Template.bind({});
Basic.args = {
    children: addKeys([
        React.createElement(Tab, { Title: 'One' }, "One content"),
        React.createElement(Tab, { Title: 'Two' }, "Two content"),
        React.createElement(Tab, { Title: 'Three' }, "Three content"),
        React.createElement(Tab, { Title: 'Four' }, "Four content"),
    ]),
};
/** Title as Child */
export const TitleAsChild = Template.bind({});
TitleAsChild.args = {
    children: addKeys([
        React.createElement(Tab, null,
            React.createElement(Title, null, "One"),
            "One content"),
        React.createElement(Tab, null,
            React.createElement(Title, null, "Two"),
            "Two content"),
        React.createElement(Tab, null,
            React.createElement(Title, null, "Three"),
            "Three content"),
        React.createElement(Tab, null,
            React.createElement(Title, null, "Four"),
            "Four content"),
    ]),
};
/** Complex Title as Child */
export const ComplexTitleAsChild = Template.bind({});
const dataSet = [
    { x: 'OR', y: 1 },
    { x: 'CA', y: 0 },
    { x: 'WA', y: 3 },
    { x: 'NY', y: 2 },
    { x: 'TX', y: 1 },
    { x: 'WV', y: 3 },
];
const width = 200;
const height = 50;
const xScale = d3Scale.scalePoint().domain(map(dataSet, 'x')).range([0, width]);
const yScale = d3Scale.scaleLinear().domain([0, 4]).range([height, 0]);
const titleThree = (React.createElement("span", null,
    React.createElement("h2", { style: { margin: 0 } }, "Performance"),
    React.createElement("svg", { width: width, height: height },
        React.createElement(Lines, { data: dataSet, xScale: xScale, yScale: yScale }))));
ComplexTitleAsChild.args = {
    children: addKeys([
        React.createElement(VerticalTabs.Tab, null,
            React.createElement(Title, null,
                React.createElement("h2", { style: { margin: 0 } }, "One"),
                React.createElement(SuccessIcon, null),
                React.createElement("span", { style: {
                        fontWeight: 'normal',
                        marginLeft: '5px',
                    } }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")),
            "One content"),
        React.createElement(VerticalTabs.Tab, null,
            React.createElement(VerticalTabs.Title, null,
                React.createElement("h2", { style: { margin: 0 } }, "Two"),
                React.createElement(WarningIcon, null),
                React.createElement("span", { style: {
                        fontWeight: 'normal',
                        marginLeft: '5px',
                    } }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),
            "Two content"),
        React.createElement(VerticalTabs.Tab, null,
            React.createElement(VerticalTabs.Title, null, titleThree),
            "Three content"),
        React.createElement(VerticalTabs.Tab, null,
            React.createElement(VerticalTabs.Title, null, "Four"),
            "Four content"),
    ]),
};
//# sourceMappingURL=VerticalTabs.stories.js.map