@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
43 lines • 1.97 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { select, boolean, text, number } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
import { Tooltip } from './Tooltip.component';
import { Button } from '../Button';
import { Typography } from '../Typography';
// README
import * as README from './README.md';
// THEME
import { RootTheme } from '../theme';
const StyledStory = styled('div') `
padding: 2rem 5rem;
`;
storiesOf('Components/Tooltip', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Default', () => (React.createElement(StyledStory, null,
React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(React.Fragment, null,
React.createElement(Typography, { as: "h1" }, "Tool Tip Demo"),
React.createElement(Tooltip, { wrapContent: boolean('Tooltip wrapContent', false), position: select('Tooltip Position', [
'topStart',
'top',
'topEnd',
'rightStart',
'right',
'rightEnd',
'bottomEnd',
'bottom',
'bottomStart',
'leftEnd',
'left',
'leftStart',
], 'topEnd'), content: text('Tooltip Text', 'Text'), maxWidth: text('Tooltip width', 'auto'), delay: text('Tooltip delay', '') || undefined, background: text('Tooltip background', '') || undefined, showArrow: boolean('Show Arrow', false), arrowIndent: text('Arrow Indent', '') || undefined, arrowSize: text('Arrow Size', '') || undefined, spacing: number('Spacing', 8) || undefined, debug: boolean('Debug', false) },
React.createElement(Button, { size: "lg" }, "Hover over me")))))));
//# sourceMappingURL=Tooltip.stories.js.map