@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
43 lines • 2.57 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { select, text } from '@storybook/addon-knobs';
// VENDOR
import { createGlobalStyle } from 'styled-components';
import styled, { ThemeProvider, css } from '@xstyled/styled-components';
import { th } from '@xstyled/system';
// ANCHOR
import { RootTheme } from '../../src/theme';
import { Tabs } from './Tabs.component';
const { Pane } = Tabs;
const GlobalStyle = createGlobalStyle `
html {
${({ background }) => css({
background: th.color(background),
})}
}
`;
const StyledStory = styled('div') `
padding: 2rem 1rem;
color: text.base;
font-family: base;
`;
storiesOf('Components/Tabs', module)
.add('Default', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(GlobalStyle, { background: text('html bg', 'background.base') || undefined }),
React.createElement(Tabs, { variant: select('variant', ['regular', 'tabular'], 'regular'), position: select('position', ['top', 'bottom', 'right', 'left'], 'top'), activeKey: text('activeKey', '') || undefined, defaultActiveKey: text('defaultActiveKey', '') || undefined, spacing: text('spacing', '') || undefined },
React.createElement(Pane, { title: "Banana", key: "banana" }, "Best when just starting to brown."),
React.createElement(Pane, { title: "Orange", key: "orange" }, "Juicy and delicious, generally underrated."),
React.createElement(Pane, { title: "Apple", key: "apple" }, "Only okay."),
React.createElement(Pane, { title: "Strawberry", key: "strawberry" }, "Trivia: Strawberries are the only known red fruit."),
React.createElement(Pane, { title: "Blueberry", key: "blueberry", disabled: true }, "Blueberries are great for making muffins!"),
React.createElement(Pane, { title: "Lemon", key: "lemon" }, "Use lemons to brighten up your food."))))))
.add('Basic', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Tabs, { variant: select('variant', ['regular', 'tabular'], 'regular'), position: select('position', ['top', 'bottom', 'right', 'left'], 'top') },
React.createElement(Pane, { title: "Tab 1" }, "Content 1"),
React.createElement(Pane, { title: "Tab 2" }, "Content 2"),
React.createElement(Pane, { title: "Tab 3" }, "Content 3"))))));
//# sourceMappingURL=Tabs.stories.js.map