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

A React UI Library by RetailMeNot

// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { RootTheme } from '../../src/theme';
import { Button } from '../Button';
import { Typography } from '../Typography';
import { Adapt } from './Adapt.component';
import { object } from '@storybook/addon-knobs';
const StyledStory = styled('div') `
    padding: 2rem;
    color: text.base;
    font-family: base;
`;
storiesOf('Components/Adapt', module)
    .add('Default', () => {
    return (React.createElement(ThemeProvider, { theme: RootTheme },
        React.createElement(StyledStory, null,
            React.createElement(Adapt, { forEach: object('forEach', {
                    xs: 'apple',
                    md: 'strawberry',
                    lg: 'blueberry',
                }) }, (value, breakpoint) => (React.createElement("div", { key: breakpoint },
                React.createElement("p", null,
                    "Value: ",
                    value),
                React.createElement("p", null,
                    "Breakpoint: ",
                    breakpoint)))))));
})
    .add('Button Example', () => (React.createElement(ThemeProvider, { theme: RootTheme },
    React.createElement(StyledStory, null,
        React.createElement(Adapt, { forEach: object('forEach', {
                xs: 'xs',
                sm: 'sm',
                md: 'md',
                lg: 'lg',
            }) }, (size, breakpoint) => (React.createElement(Button, { size: size, margin: "0", key: breakpoint },
            "Hello at ",
            breakpoint))),
        React.createElement(Typography, { as: "p", mt: "2rem" }, "It should look like the button is resizing based on the breakpoint")))));
//# sourceMappingURL=Adapt.stories.js.map