You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.1 KiB
43 lines
1.1 KiB
6 years ago
|
import React from 'react'
|
||
|
|
import { storiesOf } from '@storybook/react'
|
||
|
|
import { Page, MainContent, Sidebar } from 'components/UI'
|
||
|
|
import { Content } from '../helpers'
|
||
|
|
|
||
|
|
storiesOf('Layouts', module).addWithChapters('Page', {
|
||
|
|
subtitle: 'The outer most application wrapper.',
|
||
|
|
info: `Pages can have optional sidebars on the left or right.`,
|
||
|
|
chapters: [
|
||
|
|
{
|
||
|
|
sections: [
|
||
|
|
{
|
||
|
|
title: 'Page with small left sidebar',
|
||
|
|
|
||
|
|
sectionFn: () => (
|
||
|
|
<Page>
|
||
|
|
<Sidebar.small bg="green">
|
||
|
|
<Content>Sidebar</Content>
|
||
|
|
</Sidebar.small>
|
||
|
|
<MainContent bg="blue">
|
||
|
|
<Content>MainContent</Content>
|
||
|
|
</MainContent>
|
||
|
|
</Page>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Page with large right sidebar',
|
||
|
|
sectionFn: () => (
|
||
|
|
<Page>
|
||
|
|
<MainContent bg="blue">
|
||
|
|
<Content>MainContent</Content>
|
||
|
|
</MainContent>
|
||
|
|
<Sidebar.large bg="green">
|
||
|
|
<Content>Sidebar</Content>
|
||
|
|
</Sidebar.large>
|
||
|
|
</Page>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|