@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
130 lines • 7.78 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { boolean, select, number, text } from '@storybook/addon-knobs';
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { Button, Typography } from '..';
import { RootTheme } from '../theme';
// SUBJECT
import * as README from './README.md';
import { Modal, BaseModalBackground, ModalProvider, } from './Modal.component';
const { useState } = React;
const { Close, Header, Content, Footer } = Modal;
const StyledStory = styled('div') `
background: white;
width: 100vw;
height: 120vh;
`;
const sizeOptions = ['sm', 'lg'];
storiesOf('Components/Modal', module)
.addParameters({ readme: { sidebar: README } })
.add('Default', () => {
const OpenModalButton = () => {
const [isOpen, setIsOpen] = useState(true);
return (React.createElement(React.Fragment, null,
React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal"),
React.createElement(Modal, { size: select('size', sizeOptions, 'lg'), isOpen: isOpen, onBackgroundClick: () => setIsOpen(false), onEscapeKeydown: () => setIsOpen(false), allowScroll: boolean('allowScroll', false) },
React.createElement(Header, { title: "It's dangerous to go alone." },
React.createElement(Close, { onClick: () => setIsOpen(false) })),
React.createElement(Content, null,
React.createElement(Typography, null, "Stuff in the middle")),
React.createElement(Footer, null,
React.createElement(Button, { block: true, onClick: () => setIsOpen(false), variant: "outline" }, "Decline"),
React.createElement(Button, { block: true, onClick: () => setIsOpen(false) }, "Accept")))));
};
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ModalProvider, null,
React.createElement(StyledStory, null,
React.createElement(Typography, { as: "h5" }, "Click this button!"),
React.createElement(OpenModalButton, null)))));
})
.add('Blank', () => {
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ModalProvider, null,
React.createElement(StyledStory, null,
React.createElement(Modal, { size: select('size', sizeOptions, 'sm'), isOpen: true })))));
})
.add('Content', () => {
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ModalProvider, null,
React.createElement(StyledStory, null,
React.createElement(Modal, { size: select('size', sizeOptions, 'sm'), isOpen: true },
React.createElement(Close, null),
React.createElement(Content, null,
React.createElement(Typography, null, "Content Area")))))));
})
.add('Header + Content', () => {
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ModalProvider, null,
React.createElement(StyledStory, null,
React.createElement(Modal, { size: select('size', sizeOptions, 'sm'), isOpen: true },
React.createElement(Header, { title: "Header Area" },
React.createElement(Close, null)),
React.createElement(Content, null,
React.createElement(Typography, null, "Content Area")))))));
})
.add('Content + Footer', () => {
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ModalProvider, null,
React.createElement(StyledStory, null,
React.createElement(Modal, { size: select('size', sizeOptions, 'sm'), isOpen: true },
React.createElement(Close, null),
React.createElement(Content, null,
React.createElement(Typography, null, "Content Area")),
React.createElement(Footer, null,
React.createElement(Typography, null, "Footer Area")))))));
})
.add('Oversized', () => {
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ModalProvider, null,
React.createElement(StyledStory, null,
React.createElement(Modal, { isOpen: true, height: text('height', '100rem'), size: select('size', sizeOptions, 'lg'), backgroundProps: {
padding: text('background padding', '2rem 1rem'),
} },
React.createElement(Header, { title: "Oversized Modal" },
React.createElement(Close, null)),
React.createElement(Content, null,
React.createElement(Typography, null, "Psst... down below!")),
React.createElement(Footer, null,
React.createElement(Typography, null, "Psst... up above!")))))));
})
.add('Custom Background', () => {
const CustomBackground = styled(BaseModalBackground) `
background-color: rgba(255, 0, 0, 0.6);
`;
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ModalProvider, { backgroundComponent: CustomBackground },
React.createElement(StyledStory, null,
React.createElement(Modal, { size: select('size', sizeOptions, 'sm'), isOpen: true },
React.createElement(Close, null),
React.createElement(Header, { title: "Modal with Custom Background" }))))));
})
.add('Customized', () => {
const OpenModalButton = () => {
const [isOpen, setIsOpen] = useState(true);
const pinkColorScheme = {
base: '#DF206C',
light: '#E665A1',
dark: '#B81D5B',
};
return (React.createElement(React.Fragment, null,
React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal"),
React.createElement(Modal, { isOpen: isOpen, size: select('size', sizeOptions, 'sm'), height: text('height', '25rem'), width: text('width', '30rem'), margin: text('margin', 'auto'), background: "linear-gradient(170deg, #DF206C 0%, #F16667 50%, white calc(50% + 1.25px))", color: text('color', 'white'), backgroundProps: {
opacity: number('backgroundProps.opacity', 0.2),
}, allowScroll: boolean('allowScroll', false), shadow: text('shadow', '0 0.375rem 0.5rem 0.25rem rgba(0,0,0,0.13)'), onBackgroundClick: () => setIsOpen(false), onEscapeKeydown: () => setIsOpen(false) },
React.createElement(Close, { reverse: true, onClick: () => setIsOpen(false) }),
React.createElement(Content, null,
React.createElement(Typography, { as: "h2", scale: 24, weight: 600, align: "center" }, "Customized Example"),
React.createElement(Typography, { as: "p", align: "center" }, "With some other text")),
React.createElement(Footer, null,
React.createElement(Button, { block: true, circular: true, variant: "minimal", colorTheme: pinkColorScheme, onClick: () => setIsOpen(false) }, "Decline"),
React.createElement(Button, { block: true, circular: true, colorTheme: pinkColorScheme, onClick: () => setIsOpen(false) }, "Accept")))));
};
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(ModalProvider, null,
React.createElement(StyledStory, null,
React.createElement(OpenModalButton, null)))));
});
//# sourceMappingURL=Modal.stories.js.map