@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
79 lines • 4.07 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// COMPONENTS
import { Menu } from './Menu.component';
import { Item } from './Item';
import { ChevronDown, ChevronUp } from '../Icon';
// README
import * as README from './README.md';
import { RootTheme } from '../theme';
import { Typography } from '../Typography';
import { DropDown } from '../DropDown';
import { List, Item as ListItem } from '../List';
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 MockList = () => (React.createElement(List, null, listItemArray.map(({ key, label }) => (React.createElement(ListItem, { key: key, onClick: () => {
/* eslint-disable-next-line */
console.log(`${label} has been clicked`);
} }, label)))));
const renderDemoMenu = () => {
const [isItemHovered, setIsItemHovered] = React.useState(false);
const [isItem2Hovered, setIsItem2Hovered] = React.useState(false);
return (React.createElement(Menu, null,
React.createElement(DropDown, { overlay: React.createElement(MockList, null), position: "bottomStart", showArrow: false, trigger: "click", onTriggered: setIsItemHovered },
React.createElement(Item, null,
"DropDown Link",
isItemHovered ? (React.createElement(ChevronUp, { color: "white" })) : (React.createElement(ChevronDown, { color: "white" })))),
React.createElement(DropDown, { overlay: React.createElement(MockList, null), position: "bottomStart", showArrow: false, trigger: "click", onTriggered: setIsItem2Hovered },
React.createElement(Item, null,
"Stores",
isItem2Hovered ? (React.createElement(ChevronUp, { color: "white" })) : (React.createElement(ChevronDown, { color: "white" })))),
React.createElement(Item, { path: "/" }, "More")));
};
const StyledStory = styled('div') `
padding: 2rem 5rem;
`;
storiesOf('Components/Menu', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Default', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Typography, { as: "p" }, "Large"),
React.createElement(Menu, { size: "lg" },
React.createElement(Item, { path: "/" }, "Item 1"),
React.createElement(Item, { path: "/" }, "Item 2"),
React.createElement(Item, { path: "/" }, "Item 3"),
React.createElement(Item, { path: "/" }, "Item 4"),
React.createElement(Item, { path: "/" }, "Item 5"),
React.createElement(Item, { path: "/" }, "Item 6")),
React.createElement(Typography, { as: "p" }, "Medium"),
renderDemoMenu(),
React.createElement("br", null),
React.createElement(Typography, { as: "p" }, "Small"),
React.createElement(Menu, { size: "sm" },
React.createElement(Item, { path: "/" }, "Rx Saver"),
React.createElement(Item, { path: "/" }, "Genie"),
React.createElement(Item, { path: "/" }, "Everyday"),
React.createElement(Item, { path: "/" }, "Real Deal"),
React.createElement(Item, { path: "/" }, "Get the App")),
React.createElement("br", null),
React.createElement(Typography, { as: "p" }, "Small, Custom Color, & Custom Position"),
React.createElement(Menu, { size: "sm", justify: "flex-end", background: "#4B2354" },
React.createElement(Item, { path: "/" }, "Rx Saver"),
React.createElement(Item, { path: "/" }, "Genie"),
React.createElement(Item, { path: "/" }, "Everyday"),
React.createElement(Item, { path: "/" }, "Real Deal"),
React.createElement(Item, { path: "/" }, "Get the App"))))));
//# sourceMappingURL=Menu.stories.js.map