@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
99 lines • 6.19 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
import { text, select, boolean } from '@storybook/addon-knobs';
import { DropDown } from './DropDown.component';
import { Button } from '../Button';
import { List, Item as ListItem } from '../List';
import { Typography } from '../Typography';
import { Cell, Grid } from '../Grid';
// THEME
import { RootTheme } from '../theme';
// README
import * as README from './README.md';
const StyledStory = styled('div') `
padding: 2rem 5rem;
`;
const listItemArray = [
{ key: 1, label: 'List Item 1' },
{ key: 2, label: 'List Item 2' },
{ key: 3, label: 'List Item 3' },
{ key: 4, label: 'List Item 4' },
{ key: 5, label: 'List Item 5' },
];
const positions = [
'topStart',
'top',
'topEnd',
'rightStart',
'right',
'rightEnd',
'bottomStart',
'bottom',
'bottomEnd',
'leftStart',
'left',
'leftEnd',
];
const MockList = () => (React.createElement(List, null, listItemArray.map(({ key, label }) => (React.createElement(ListItem, { background: "transparent", key: key, onClick: () => {
/* eslint-disable-next-line */
console.log(`${label} has been clicked`);
} }, label)))));
storiesOf('Components/DropDown', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Default', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Grid, { gap: "2rem" },
React.createElement(Cell, { width: 3 },
React.createElement("div", null,
React.createElement(Typography, { as: "h1" }, "DropDown Default"),
React.createElement(DropDown, { overlay: React.createElement(MockList, null) },
React.createElement("span", null,
React.createElement("span", null,
React.createElement("span", null,
React.createElement("a", null, "DropDown Link"))))))),
React.createElement(Cell, { width: 3, top: 2 },
React.createElement("div", null,
React.createElement(Typography, { as: "h1" }, "DropDown Right"),
React.createElement(DropDown, { overlay: React.createElement(MockList, null), position: "right" },
React.createElement("a", null, "DropDown Link Right")))),
React.createElement(Cell, { width: 3, top: 3 },
React.createElement("div", null,
React.createElement(Typography, { as: "h1" }, "DropDown Left"),
React.createElement(DropDown, { overlay: React.createElement(MockList, null), position: "left" },
React.createElement("a", null, "DropDown Link Left")))),
React.createElement(Cell, { width: 3, top: 4 },
React.createElement("div", null,
React.createElement(Typography, { as: "h1" }, "DropDown Top"),
React.createElement(DropDown, { overlay: React.createElement(MockList, null), position: "top", trigger: "click" },
React.createElement("a", null, "DropDown Link Top")))))))))
.add('Knobs Demo', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Grid, null,
React.createElement(Cell, null,
React.createElement("div", null,
React.createElement(Typography, { as: "h1" }, "DropDown"),
React.createElement(DropDown, { overlay: React.createElement(MockList, null), position: select('position', positions, 'bottom'), trigger: select('trigger', ['click', 'hover', 'both'], 'click'), showArrow: boolean('showArrow', true), shadow: text('shadow', '') || undefined, background: text('background', '') || undefined, border: text('border', '') || undefined, borderRadius: text('borderRadius', '') || undefined, arrowIndent: text('arrowIndent', '') || undefined, arrowSize: text('arrowSize', '') || undefined, spacing: text('spacing', '') || undefined, debug: boolean('Debug', false) },
React.createElement(Button, null, text('Text', 'Dropdown'))))))))))
.add('Controlled Demo', () => React.createElement(() => {
const [isOpen, setIsOpen] = React.useState(false);
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement("div", null,
React.createElement(Typography, { as: "h1" }, "DropDown"),
React.createElement(DropDown, { open: isOpen, onClick: () => setIsOpen(true), onEscapeKey: () => setIsOpen(false), onOutsideClick: () => setIsOpen(false), overlay: React.createElement(MockList, null), position: select('position', positions, 'bottom'), showArrow: boolean('showArrow', true), spacing: text('spacing', '') || undefined, debug: boolean('Debug', false) },
React.createElement(Button, null, text('Text', 'Dropdown')))))));
}))
.add('Resize Demo', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Typography, { as: "h1" }, "DropDown"),
React.createElement(DropDown, { overlay: React.createElement(MockList, null), position: select('position', positions, 'bottom'), trigger: select('trigger', ['click', 'hover', 'both'], 'hover'), showArrow: boolean('showArrow', true), shadow: text('shadow', '') || undefined, background: text('background', '') || undefined, border: text('border', '') || undefined, borderRadius: text('borderRadius', '') || undefined, arrowIndent: text('arrowIndent', '') || undefined, arrowSize: text('arrowSize', '') || undefined, spacing: text('spacing', '') || undefined, debug: boolean('Debug', false) },
React.createElement("textarea", { defaultValue: text('Text', 'Resize me') }))))));
//# sourceMappingURL=DropDown.stories.js.map