@retailmenot/anchor/ts/Collapse/Collapse.stories.js

A React UI Library by RetailMeNot

// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { text, select, boolean } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// COMPONENTS
import { Collapse, DEFAULT_OPENED_TEXT, DEFAULT_CLOSED_TEXT, } from './Collapse.component';
import { CollapseGroup } from './CollapseGroup/CollapseGroup.component';
import * as Icon from '../Icon';
import { RootTheme } from '../theme';
import { Typography } from '../Typography/Typography.component';
// README
import * as README from './README.md';
const TEXT = 'text';
const StyledComfortableStory = styled('div') `
    padding: 2rem 5rem;
`;
const TextContent = () => (React.createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eros ante, lacinia at imperdiet consectetur, ultrices in elit. Vivamus vehicula nisl id congue pulvinar."));
const ListContent = () => (React.createElement("ul", null,
    React.createElement("li", null,
        React.createElement("a", null, "List Item 1")),
    React.createElement("li", null,
        React.createElement("a", null, "List Item 2")),
    React.createElement("li", null,
        React.createElement("a", null, "List Item 3")),
    React.createElement("li", null,
        React.createElement("a", null, "List Item 4"))));
storiesOf('Components/Collapse', module)
    .addParameters({
    readme: {
        sidebar: README,
    },
})
    .add('Default', () => {
    const content = select('Example Content', [TEXT, 'list'], TEXT);
    const iconOpenedPick = select('iconOpened', Object.keys(Icon), 'ChevronUp');
    const iconClosedPick = select('iconClosed', Object.keys(Icon), 'ChevronDown');
    return (React.createElement(ThemeProvider, { theme: RootTheme },
        React.createElement(StyledComfortableStory, null,
            React.createElement(Collapse, { variant: select('variant', ['compact', 'comfortable', 'none'], 'comfortable'), isOpen: boolean('isOpen', false), removeInactive: boolean('removeInactive', true), openedText: text('openedText', DEFAULT_OPENED_TEXT), closedText: text('closedText', DEFAULT_CLOSED_TEXT), hasBottomBorder: boolean('hasBottomBorder', true), openedIcon: React.createElement(Icon[iconOpenedPick], {
                    color: 'accent.base',
                }), closedIcon: React.createElement(Icon[iconClosedPick], {
                    color: 'accent.base',
                }) }, content === TEXT ? React.createElement(TextContent, null) : React.createElement(ListContent, null)))));
})
    .add('CollapseGroup', () => {
    const content = select('Example Content', [TEXT, 'list'], TEXT);
    const iconOpenedPick = select('iconOpened', Object.keys(Icon), 'ChevronUp');
    const iconClosedPick = select('iconClosed', Object.keys(Icon), 'ChevronDown');
    const Content = content === TEXT ? TextContent : ListContent;
    return (React.createElement(ThemeProvider, { theme: RootTheme },
        React.createElement("section", null,
            React.createElement(Typography, { as: "h2" }, "CollapseGroup Example"),
            React.createElement(Typography, { as: "p" }, "Adjusting Knobs for CollapseGroup will apply settings to Collapse child components."),
            React.createElement(CollapseGroup, { variant: select('variant', ['compact', 'comfortable', 'none'], 'comfortable'), accordion: boolean('accordion', false), removeInactive: boolean('removeInactive', true), openIndex: 0, openedIcon: React.createElement(Icon[iconOpenedPick], {
                    color: 'accent.base',
                }), closedIcon: React.createElement(Icon[iconClosedPick], {
                    color: 'accent.base',
                }) },
                React.createElement(Collapse, null,
                    React.createElement(Content, null)),
                React.createElement(Collapse, null,
                    React.createElement(Content, null)),
                React.createElement(Collapse, null,
                    React.createElement(Content, null))))));
});
//# sourceMappingURL=Collapse.stories.js.map