@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
70 lines • 4.51 kB
JavaScript
// VENDOR
import * as React from 'react';
import styled, { ThemeProvider } from '@xstyled/styled-components';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { select, boolean, text, number } from '@storybook/addon-knobs';
// ANCHOR
import { RootTheme } from '../../src/theme';
import { PopOver } from './PopOver.component';
import { Typography, } from '../Typography/Typography.component';
import { Button } from '../Button';
const StyledStory = styled('div') `
padding: 2rem;
color: text.base;
font-family: base;
`;
const StyledParagraph = styled(Typography) `
border: base;
border-radius: base;
`;
const PopOverExample = ({ closeEvent }) => (React.createElement("div", null,
React.createElement(Typography, { pr: "3" }, "Click the button to close the PopOver."),
React.createElement(Button, { onClick: closeEvent }, "Close")));
const PopOverWithButton = () => {
const [active, setActive] = React.useState(true);
return (React.createElement(PopOver, { active: active, background: "purple", color: "white", content: React.createElement(PopOverExample, { closeEvent: () => setActive(false) }), position: "bottomStart", shadow: "0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2)", showArrow: true, spacing: 0 },
React.createElement(Typography, { pb: "3", as: "p" }, "This is an example of the PopOver being controlled by a button."),
!active && (React.createElement(Button, { onClick: () => setActive(true) }, "BRING IT BACK!!!"))));
};
storiesOf('Components/PopOver', module)
.add('Default', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Typography, { as: "h1" }, "PopOver"),
React.createElement(PopOver, { active: boolean('Active', true), delay: text('Animation Delay', '') || undefined, background: text('Background', '') || undefined, border: text('Border', '') || undefined, borderRadius: text('Border Radius', '') || undefined, color: text('Color', '') || undefined, content: text('Content', 'Text'), position: select('Position', [
'topStart',
'top',
'topEnd',
'rightStart',
'right',
'rightEnd',
'bottomEnd',
'bottom',
'bottomStart',
'leftEnd',
'left',
'leftStart',
], 'bottomStart'), shadow: text('Shadow (buggy in Storybook)', '') || undefined, spacing: number('Spacing', 8) || undefined, showArrow: boolean('Show Arrow', true), arrowIndent: text('Arrow Indent', '') || undefined, arrowSize: text('Arrow Size', '') || undefined, debug: boolean('Debug', false) },
React.createElement(StyledParagraph, { as: "p", p: "2", my: "3" }, "The PopOver allows programmatic control of the 'Popped Over' content. Toggle the 'active' prop in the knobs below to see. It can accept strings or JSX for its content."))))))
.add('Resizeable', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Typography, { as: "h1" }, "PopOver"),
React.createElement(PopOver, { active: boolean('Active', true), delay: text('Animation Delay', '') || undefined, background: text('Background', '') || undefined, border: text('Border', '') || undefined, borderRadius: text('Border Radius', '') || undefined, color: text('Color', '') || undefined, content: text('Content', 'Will reposition when newly active.'), position: select('Position', [
'topStart',
'top',
'topEnd',
'rightStart',
'right',
'rightEnd',
'bottomEnd',
'bottom',
'bottomStart',
'leftEnd',
'left',
'leftStart',
], 'bottom'), shadow: text('Shadow (buggy in Storybook)', '') || undefined, spacing: number('Spacing', 8) || undefined, showArrow: boolean('Show Arrow', true), arrowIndent: text('Arrow Indent', '') || undefined, arrowSize: text('Arrow Size', '') || undefined, debug: boolean('Debug', false) },
React.createElement("textarea", null))))))
.add('Button to Control', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(PopOverWithButton, null)))));
//# sourceMappingURL=PopOver.stories.js.map