@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
37 lines • 1.8 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
import { select, boolean, text } from '@storybook/addon-knobs';
// ANCHOR
import { RootTheme } from '../../src/theme';
import { Alert, AlertTypes } from './Alert.component';
import { InfoOutline } from '../Icon';
const StyledStory = styled('div') `
padding: 2rem;
color: text.base;
font-family: base;
`;
storiesOf('Components/Alert', module)
.add('Default', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Alert, { variant: select('Variant', [
AlertTypes.warning,
AlertTypes.error,
AlertTypes.success,
AlertTypes.info,
], AlertTypes.warning), closable: boolean('Closable', true), message: text('Message', 'This is a message'), description: text('Description', 'This is a description'), onClose: () => {
/* eslint-disable-next-line */
console.log('Alert has closed!');
} })))))
.add('With Icon', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Alert, { variant: select('Variant', [
AlertTypes.warning,
AlertTypes.error,
AlertTypes.success,
AlertTypes.info,
], AlertTypes.warning), closable: boolean('Closable', true), message: text('Message', 'This is a message'), description: text('Description', 'This is a description'), icon: React.createElement(InfoOutline, { scale: "md" }) })))));
//# sourceMappingURL=Alert.stories.js.map