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.
86 lines
2.2 KiB
86 lines
2.2 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { storiesOf } from '@storybook/react'
|
|
import { ThemeProvider, withTheme } from 'styled-components'
|
|
import { Box, Card, Flex } from 'rebass'
|
|
import { BackgroundPrimary, Text } from 'components/UI'
|
|
import { dark, light } from 'themes'
|
|
import { Column, Group, Element } from './helpers'
|
|
|
|
const Swatch = ({ name, color }) => (
|
|
<Element>
|
|
<Flex mb={2}>
|
|
<Card
|
|
// bg={color}
|
|
width={50}
|
|
mr={21}
|
|
borderRadius={8}
|
|
borderColor="primaryText"
|
|
border="solid 1px"
|
|
css={{
|
|
background: color,
|
|
height: '50px'
|
|
}}
|
|
/>
|
|
<Box>
|
|
<Text fontWeight="normal">{name}</Text>
|
|
<Text>{color}</Text>
|
|
</Box>
|
|
</Flex>
|
|
</Element>
|
|
)
|
|
Swatch.propTypes = {
|
|
name: PropTypes.string,
|
|
color: PropTypes.string
|
|
}
|
|
|
|
const Palette = withTheme(({ theme, ...rest }) => (
|
|
<Box {...rest}>
|
|
{Object.keys(theme.colors).map(key => (
|
|
<Swatch key={key} name={key} color={theme.colors[key]} />
|
|
))}
|
|
</Box>
|
|
))
|
|
|
|
storiesOf('Welcome', module).addWithChapters('Color palette', {
|
|
subtitle: 'Colors that we use throughout the app.',
|
|
info: `This page shows our two primary colour palettes. These are used as "themes" that users can switch between
|
|
within the app.`,
|
|
chapters: [
|
|
{
|
|
sections: [
|
|
{
|
|
options: {
|
|
showSource: false,
|
|
allowSourceToggling: false,
|
|
showPropTables: false,
|
|
allowPropTablesToggling: false
|
|
},
|
|
sectionFn: () => (
|
|
<Flex>
|
|
<Column>
|
|
<Group title="Dark">
|
|
<ThemeProvider theme={dark}>
|
|
<BackgroundPrimary p={3}>
|
|
<Palette />
|
|
</BackgroundPrimary>
|
|
</ThemeProvider>
|
|
</Group>
|
|
</Column>
|
|
|
|
<Column>
|
|
<Group title="Light">
|
|
<ThemeProvider theme={light}>
|
|
<BackgroundPrimary p={3}>
|
|
<Palette />
|
|
</BackgroundPrimary>
|
|
</ThemeProvider>
|
|
</Group>
|
|
</Column>
|
|
</Flex>
|
|
)
|
|
}
|
|
]
|
|
}
|
|
]
|
|
})
|
|
|