@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
52 lines • 2.54 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { number } from '@storybook/addon-knobs';
// VENDOR
import styled from '@xstyled/styled-components';
import { ThemeProvider } from '@xstyled/styled-components';
// COMPONENT
import { Adaptor } from './Adaptor.component';
import { ResponsiveContext, ResponsiveProvider } from '../ResponsiveProvider';
import { RootTheme } from '../../theme';
import { Typography } from '../../index';
// README
import * as README from './README.md';
const StyledStory = styled('div') `
padding: 2rem 5rem;
`;
const Test = () => {
const { current, innerWidth } = React.useContext(ResponsiveContext);
return (React.createElement(React.Fragment, null,
React.createElement(Typography, { as: "h2" }, "ResponsiveContext"),
React.createElement(Typography, { pr: "2" }, current),
" |",
React.createElement(Typography, { pl: "2" }, innerWidth)));
};
storiesOf('Components/Grid/Adaptor', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Adaptor, Custom Breakpoints', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Typography, { as: "h4" }, "Use knobs to set custom breakpoints"),
React.createElement(Adaptor, { minWidth: number('Minimum Width', 1), maxWidth: number('Maximum Width', 99999) },
React.createElement(Typography, { as: "p", pt: "3" }, "My dimensions are defined by knobs."))))))
.add('Adaptor, From & To', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ResponsiveProvider, { debug: true },
React.createElement(Typography, { as: "h2" }, "Resize the Window"),
React.createElement(Adaptor, { from: "xs", to: "md" },
React.createElement(Typography, null, "I only show up between the xs and md breakpoints.")),
React.createElement(Adaptor, { from: "md", to: "xl" },
React.createElement(Typography, null, "I only show up between the md and xl breakpoints.")),
React.createElement(Adaptor, { from: "xl" },
React.createElement(Typography, null, "I only show up at xl breakpoint and up."))))))
.add('Responsive Context', () => {
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ResponsiveProvider, null,
React.createElement(Test, null))));
});
//# sourceMappingURL=Adaptor.stories.js.map