@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
34 lines • 1.84 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { text, color, select } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// COMPONENT
import { SidebarLayout, DEFAULT_LAYOUT_WIDTH, DEFAULT_CONTENT_WIDTH, DEFAULT_SIDEBAR_WIDTH, TRANSPARENT, } from './SidebarLayout.component';
import { Footer } from '../Footer';
import { Sider } from '../Sider';
import { RootTheme } from '../../theme/index';
import { Page } from '../Page';
// README
import * as README from './README.md';
// Styled Components
// ------------------------------------------------------------------------------------------------------------------
const StyledStory = styled('div') `
background: white;
`;
// Stories
// ------------------------------------------------------------------------------------------------------------------
storiesOf('Components/Layout', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Sidebar Layout', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Page, { footer: React.createElement(Footer, null) },
React.createElement(SidebarLayout, { layoutWidth: text('Layout Width', DEFAULT_LAYOUT_WIDTH), contentWidth: text('Content Width', DEFAULT_CONTENT_WIDTH), layoutBackgroundColor: color('Layout Background Color', TRANSPARENT), contentBackgroundColor: color('Content Background Color', TRANSPARENT), sidebar: React.createElement(Sider, null), sidebarAlign: select('Sidebar Alignment', ['left', 'right'], 'left'), sidebarWidth: text('Sidebar Width', DEFAULT_SIDEBAR_WIDTH) },
React.createElement("h1", null, "Hello!")))))));
//# sourceMappingURL=SidebarLayout.stories.js.map