Tom Kirkpatrick
6 years ago
47 changed files with 775 additions and 390 deletions
@ -1,28 +1,20 @@ |
|||
import React from 'react' |
|||
import { Card } from 'rebass' |
|||
import system from '@rebass/components' |
|||
|
|||
/** |
|||
* @render react |
|||
* @name Bar |
|||
* @example |
|||
* <Bar /> |
|||
*/ |
|||
class Bar extends React.PureComponent { |
|||
render() { |
|||
return ( |
|||
<Card |
|||
width={1} |
|||
{...this.props} |
|||
borderColor="primaryText" |
|||
opacity={0.6} |
|||
border={1} |
|||
m={0} |
|||
p={0} |
|||
css={{ 'border-bottom': 'none !important' }} |
|||
as="hr" |
|||
/> |
|||
) |
|||
} |
|||
} |
|||
const Bar = system( |
|||
{ |
|||
is: 'hr', |
|||
m: 0, |
|||
border: 0, |
|||
borderBottom: 1, |
|||
borderColor: 'primaryText', |
|||
opacity: 0.6 |
|||
}, |
|||
'borders', |
|||
'borderColor', |
|||
'space', |
|||
'opacity' |
|||
) |
|||
|
|||
Bar.displayName = 'Bar' |
|||
|
|||
export default Bar |
|||
|
|||
@ -0,0 +1,79 @@ |
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { Heading, Text } from 'components/UI' |
|||
|
|||
storiesOf('General', module).addWithChapters('Typography', { |
|||
subtitle: 'Text styles that we use throughout the app.', |
|||
info: `This page shows the various fonts and font styles that we use. All text uses the "Roboto" font family.`, |
|||
chapters: [ |
|||
{ |
|||
title: 'Heading', |
|||
sections: [ |
|||
{ |
|||
title: 'h1', |
|||
sectionFn: () => <Heading.h1>The quick brown fox jumps over the lazy dog</Heading.h1> |
|||
}, |
|||
{ |
|||
title: 'h2', |
|||
sectionFn: () => <Heading.h2>The quick brown fox jumps over the lazy dog</Heading.h2> |
|||
}, |
|||
{ |
|||
title: 'h3', |
|||
sectionFn: () => <Heading.h3>The quick brown fox jumps over the lazy dog</Heading.h3> |
|||
}, |
|||
{ |
|||
title: 'h4', |
|||
sectionFn: () => <Heading.h4>The quick brown fox jumps over the lazy dog</Heading.h4> |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
title: 'Text (weights)', |
|||
sections: [ |
|||
{ |
|||
title: 'Normal', |
|||
sectionFn: () => ( |
|||
<Text fontWeight="normal">The quick brown fox jumps over the lazy dog</Text> |
|||
) |
|||
}, |
|||
{ |
|||
title: 'Light', |
|||
sectionFn: () => <Text>The quick brown fox jumps over the lazy dog</Text> |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
title: 'Text (sizes)', |
|||
sections: [ |
|||
{ |
|||
title: 'Extra Extra large', |
|||
sectionFn: () => <Text fontSize="xxl">The quick brown fox jumps over the lazy dog</Text> |
|||
}, |
|||
{ |
|||
title: 'Extra Large', |
|||
sectionFn: () => <Text fontSize="xl">The quick brown fox jumps over the lazy dog</Text> |
|||
}, |
|||
{ |
|||
title: 'Large', |
|||
sectionFn: () => <Text fontSize="l">The quick brown fox jumps over the lazy dog</Text> |
|||
}, |
|||
{ |
|||
title: 'Medium', |
|||
sectionFn: () => <Text fontSize="m">The quick brown fox jumps over the lazy dog</Text> |
|||
}, |
|||
{ |
|||
title: 'Small', |
|||
sectionFn: () => <Text fontSize="s">The quick brown fox jumps over the lazy dog</Text> |
|||
}, |
|||
{ |
|||
title: 'Extra Small', |
|||
sectionFn: () => <Text fontSize="xs">The quick brown fox jumps over the lazy dog</Text> |
|||
}, |
|||
{ |
|||
title: 'Extra Extra Small', |
|||
sectionFn: () => <Text fontSize="xxs">The quick brown fox jumps over the lazy dog</Text> |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}) |
|||
@ -1,26 +1,66 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { BackgroundPrimary, BackgroundTertiary, BackgroundSecondary } from 'components/UI' |
|||
import { BackgroundPrimary, BackgroundTertiary, BackgroundSecondary, Page } from 'components/UI' |
|||
import { Content } from '../helpers' |
|||
|
|||
storiesOf('Components.Background', module) |
|||
.add('dark', () => ( |
|||
<BackgroundPrimary |
|||
css={{ |
|||
height: '50vh' |
|||
}} |
|||
/> |
|||
)) |
|||
.add('light', () => ( |
|||
<BackgroundTertiary |
|||
css={{ |
|||
height: '50vh' |
|||
}} |
|||
/> |
|||
)) |
|||
.add('lightest', () => ( |
|||
<BackgroundSecondary |
|||
css={{ |
|||
height: '50vh' |
|||
}} |
|||
/> |
|||
)) |
|||
const Wrapper = ({ children }) => ( |
|||
<Page css={{ height: '50px', 'min-height': '200px' }}>{children}</Page> |
|||
) |
|||
Wrapper.propTypes = { |
|||
children: PropTypes.node |
|||
} |
|||
|
|||
storiesOf('Components', module).addWithChapters('Background', { |
|||
chapters: [ |
|||
{ |
|||
sections: [ |
|||
{ |
|||
options: { |
|||
decorator: story => <Wrapper>{story()}</Wrapper> |
|||
}, |
|||
sectionFn: () => ( |
|||
<BackgroundPrimary |
|||
width={1} |
|||
css={{ |
|||
height: '100%' |
|||
}} |
|||
> |
|||
<Content>BackgroundPrimary</Content> |
|||
</BackgroundPrimary> |
|||
) |
|||
}, |
|||
{ |
|||
options: { |
|||
decorator: story => <Wrapper>{story()}</Wrapper> |
|||
}, |
|||
sectionFn: () => ( |
|||
<BackgroundSecondary |
|||
width={1} |
|||
css={{ |
|||
height: '100%' |
|||
}} |
|||
> |
|||
<Content>BackgroundSecondary</Content> |
|||
</BackgroundSecondary> |
|||
) |
|||
}, |
|||
{ |
|||
options: { |
|||
decorator: story => <Wrapper>{story()}</Wrapper> |
|||
}, |
|||
sectionFn: () => ( |
|||
<BackgroundTertiary |
|||
width={1} |
|||
css={{ |
|||
height: '100%' |
|||
}} |
|||
> |
|||
<Content>BackgroundTertiary</Content> |
|||
</BackgroundTertiary> |
|||
) |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}) |
|||
|
|||
@ -0,0 +1,25 @@ |
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { Message } from 'components/UI' |
|||
|
|||
storiesOf('Components', module).addWithChapters('Message', { |
|||
subtitle: 'For displaying messages.', |
|||
chapters: [ |
|||
{ |
|||
sections: [ |
|||
{ |
|||
title: 'Success', |
|||
sectionFn: () => <Message variant="success">Success message</Message> |
|||
}, |
|||
{ |
|||
title: 'Warning', |
|||
sectionFn: () => <Message variant="warning">Warning message</Message> |
|||
}, |
|||
{ |
|||
title: 'Error', |
|||
sectionFn: () => <Message variant="error">Error message</Message> |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}) |
|||
@ -1,20 +0,0 @@ |
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { Page, MainContent, Sidebar } from 'components/UI' |
|||
|
|||
storiesOf('Components.Layouts', module) |
|||
.add('MainContent', () => <MainContent>Main content</MainContent>) |
|||
.add('Sidebar', () => <Sidebar>Sidebar</Sidebar>) |
|||
.add('Page', () => <Page>Page</Page>) |
|||
.add('Page - sidebar left', () => ( |
|||
<Page> |
|||
<Sidebar.small>Sidebar left</Sidebar.small> |
|||
<MainContent>Main content</MainContent> |
|||
</Page> |
|||
)) |
|||
.add('Page - sidebar right', () => ( |
|||
<Page> |
|||
<MainContent>Main content</MainContent> |
|||
<Sidebar.large>Sidebar right</Sidebar.large> |
|||
</Page> |
|||
)) |
|||
@ -1,11 +0,0 @@ |
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { Panel } from 'components/UI' |
|||
|
|||
storiesOf('Components.Panel', module).add('Panel', () => ( |
|||
<Panel css={{ height: '500px' }}> |
|||
<Panel.Header bg="secondaryColor">Header here</Panel.Header> |
|||
<Panel.Body bg="tertiaryColor">Body here</Panel.Body> |
|||
<Panel.Footer bg="secondaryColor">Footer here</Panel.Footer> |
|||
</Panel> |
|||
)) |
|||
@ -1,25 +0,0 @@ |
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { Heading, Text } from 'components/UI' |
|||
|
|||
storiesOf('Components.Typography', module) |
|||
.add('heading', () => ( |
|||
<React.Fragment> |
|||
<Heading>This is a default heading (h2)</Heading> |
|||
<Heading.h1>This is an h1</Heading.h1> |
|||
<Heading.h2>This is an h2</Heading.h2> |
|||
<Heading.h3>This is an h3</Heading.h3> |
|||
<Heading.h4>This is an h4</Heading.h4> |
|||
<Heading.h5>This is an h5</Heading.h5> |
|||
<Heading.h6>This is an h6</Heading.h6> |
|||
</React.Fragment> |
|||
)) |
|||
.add('text', () => ( |
|||
<Text> |
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut |
|||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco |
|||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in |
|||
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat |
|||
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
|||
</Text> |
|||
)) |
|||
@ -1,20 +1,30 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { Box } from 'rebass' |
|||
import { Bar, Heading } from 'components/UI' |
|||
import { Box, Flex } from 'rebass' |
|||
import { Bar, Heading, Page } from 'components/UI' |
|||
|
|||
export const Window = props => <Page css={{ height: 'calc(100vh - 40px)' }} {...props} /> |
|||
export const Column = props => <Box width={1 / 2} mr={5} {...props} /> |
|||
export const Group = ({ title, children }) => ( |
|||
export const Group = ({ title, children, withBar = true }) => ( |
|||
<Box mb={4}> |
|||
<Heading.h3 mb={2} fontWeight="normal"> |
|||
{title} |
|||
</Heading.h3> |
|||
<Bar mb={3} /> |
|||
{withBar && <Bar mb={3} />} |
|||
{children} |
|||
</Box> |
|||
) |
|||
Group.propTypes = { |
|||
title: PropTypes.string, |
|||
children: PropTypes.node |
|||
children: PropTypes.node, |
|||
withBar: PropTypes.bool |
|||
} |
|||
export const Element = props => <Box py={1} {...props} /> |
|||
export const Content = ({ children }) => ( |
|||
<Flex justifyContent="center" alignItems="center" css={{ height: '100%' }}> |
|||
<Heading>{children}</Heading> |
|||
</Flex> |
|||
) |
|||
Content.propTypes = { |
|||
children: PropTypes.node |
|||
} |
|||
|
|||
@ -0,0 +1,42 @@ |
|||
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> |
|||
) |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}) |
|||
@ -0,0 +1,40 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { Page, Panel } from 'components/UI' |
|||
import { Content } from '../helpers' |
|||
|
|||
const Wrapper = ({ children }) => ( |
|||
<Page css={{ height: '500px', 'min-height': '500px' }}>{children}</Page> |
|||
) |
|||
Wrapper.propTypes = { |
|||
children: PropTypes.node |
|||
} |
|||
|
|||
storiesOf('Layouts', module).addWithChapters('Panel', { |
|||
subtitle: 'For pages with a fixed header and footer.', |
|||
info: `Header and footer regions will always stick to the top and bottom of a panels container.`, |
|||
chapters: [ |
|||
{ |
|||
sections: [ |
|||
{ |
|||
sectionFn: () => ( |
|||
<Wrapper> |
|||
<Panel width={1} css={{ height: '100%' }}> |
|||
<Panel.Header bg="green"> |
|||
<Content>Panel Header</Content> |
|||
</Panel.Header> |
|||
<Panel.Body bg="blue"> |
|||
<Content>Panel Body</Content> |
|||
</Panel.Body> |
|||
<Panel.Footer bg="green"> |
|||
<Content>Panel Footer</Content> |
|||
</Panel.Footer> |
|||
</Panel> |
|||
</Wrapper> |
|||
) |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}) |
|||
Loading…
Reference in new issue