react-boilerplate.com/app/components/Box/stories/Box.Round.stories.js at 67f04dca22ce503c23d4c99349fee7975ebd789e · cuttlesoft/react-boilerplate.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React from 'react'
import { storiesOf } from '@storybook/react'

// Components
import { Box } from '..'
import { Grid } from '../../Grid'
import { StoryContainer } from '../../StoryContainer'

// Misc
import README from '../README.md'

storiesOf('Box', module)
  .addParameters({
    readme: {
      sidebar: README,
    },
  })
  .add('Round', () => (
    <StoryContainer>
      <Box pad="small" gap="small">
        <Box pad="small" background="brand" round alignSelf="start">
          true
        </Box>

        <Grid columns="small" gap="small">
          {['xsmall', 'small', 'medium', 'large', 'xlarge', 'full'].map(size => (
            <Box key={size} pad="large" background="brand" round={{ size }}>
              {size}
            </Box>
          ))}
        </Grid>

        <Grid columns="small" gap="small">
          {[
            'left',
            'top',
            'right',
            'bottom',
            'top-left',
            'top-right',
            'bottom-left',
            'bottom-right',
          ].map(corner => (
            <Box key={corner} pad="small" background="brand" round={{ corner }}>
              {corner}
            </Box>
          ))}

          <Box
            background="brand"
            pad="small"
            round={{
              corner: 'left',
              size: '15px',
            }}
          >
            left rounded corner px value
          </Box>
        </Grid>
      </Box>
    </StoryContainer>
  ))