import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import styled from '@emotion/styled';
import Layout from '../layout';
import PageLayout from '.';
import Header from '../header';
import IconButton from '../icon-button';
import ContextMenuButton from '../context-menu-button';
import MainButton from '../main-button';
import SearchInput from '../search-input';
import Paging from '../paging';
import withReadme from 'storybook-readme/with-readme';
import { boolean, withKnobs } from '@storybook/addon-knobs/react';
import Readme from './README.md';
const HeaderContent = styled.div`
display: flex;
align-items: center;
& > * {
margin-right: 8px !important;
}
`;
const pageItems = [
{
key: '1',
label: '1 of 2',
onClick: (e) => action('set paging 1 of 2')(e)
},
{
key: '2',
label: '2 of 2',
onClick: (e) => action('set paging 2 of 2')(e)
}
];
const perPageItems = [
{
key: '1-1',
label: '25 per page',
onClick: (e) => action('set paging 25 action')(e)
},
{
key: '1-2',
label: '50 per page',
onClick: (e) => action('set paging 50 action')(e)
}
];
const articleHeaderContent = ;
const articleMainButtonContent = action('MainButton Clicked')(e)}
/>;
const articleBodyContent = Article Content
;
const sectionHeaderContent =
action('ArrowPathIcon Clicked')(e)}
/>
action('PlusIcon Clicked')(e)}
/>
[
{
key: 'key',
label: 'label',
onClick: (e) => action('label Clicked')(e)
}
]}
/>
;
const sectionFilterContent = [
{
key: 'filter-example',
group: 'filter-example',
label: 'example group',
isHeader: true
},
{
key: 'filter-example-test',
group: 'filter-example',
label: 'Test'
}
]}
onSearchClick={(result) => { console.log(result) }}
onChangeFilter={(result) => { console.log(result) }}
/>
const sectionBodyContent = Section Content
;
const sectionPagingContent = console.log(a)}
onSelectCount={(a) => console.log(a)}
previousAction={(e) => action('Prev Clicked')(e)}
nextAction={(e) => action('Next Clicked')(e)}
openDirection="top"
/>
storiesOf('Components|PageLayout', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => (
));