Skip to content

Commit 2aa6934

Browse files
stuarthendrenstuarthendren
committed
feat(layout): adds Inline and Stack components
1 parent b23161e commit 2aa6934

File tree

12 files changed

+358
-23
lines changed

12 files changed

+358
-23
lines changed

‎src/components/Grid/Grid.stories.tsx‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Meta, Story } from '@storybook/react'
22
import React from 'react'
33
import { Grid } from '.'
4-
import { Box, Row } from '../'
5-
import { randomColor } from '../../docs/util'
4+
import { Row } from '../'
65
import type { CSS } from '../../stitches.config'
6+
import { GridBox } from '../../utils/story-utils'
77

88
export default {
99
title: 'Components/Grid',
@@ -12,27 +12,6 @@ export default {
1212

1313
const border = '1px solid $grey3'
1414

15-
type BoxProps = React.ComponentProps<typeof Box>
16-
type GridBoxProps = Omit<BoxProps, 'css'> & {
17-
css?: CSS
18-
}
19-
20-
const GridBox: React.FC<GridBoxProps> = ({ css, ...props }) => (
21-
<Box
22-
css={
23-
{
24-
minWidth: '$5',
25-
minHeight: '$5',
26-
p: '$2',
27-
border,
28-
backgroundColor: randomColor(),
29-
...css,
30-
} as CSS
31-
}
32-
{...props}
33-
/>
34-
)
35-
3615
export const Default: React.FC = () => (
3716
<Grid
3817
css={{

‎src/components/Inline/Inline.stories.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { Meta, Story } from '@storybook/react'
2+
import React, { ComponentProps } from 'react'
3+
import { Inline } from '.'
4+
import { CSS } from '../../stitches.config'
5+
import { ExampleComponent } from '../../utils/story-utils'
6+
7+
export default {
8+
title: 'Components/Inline',
9+
component: Inline,
10+
argTypes: {
11+
spacing: {
12+
control: {
13+
type: 'select',
14+
options: ['small', 'default', 'large', 'responsive'],
15+
},
16+
description:
17+
'The spacing is available in 3 different sizes, and a responsive version.',
18+
},
19+
},
20+
} as Meta
21+
22+
export const Default: Story<ComponentProps<typeof Inline>> = (args) => (
23+
<Inline {...args}>
24+
<ExampleComponent />
25+
<ExampleComponent />
26+
<ExampleComponent />
27+
</Inline>
28+
)
29+
30+
const Template: Story<
31+
ComponentProps<typeof Inline> & { height: CSS['height']; width: CSS['width'] }
32+
> = ({ height, width, ...args }) => (
33+
<Inline {...args}>
34+
<ExampleComponent height={height} width={width} />
35+
<ExampleComponent height={height} width={width} />
36+
<ExampleComponent height={height} width={width} />
37+
</Inline>
38+
)
39+
40+
/**
41+
* `small` spacing can be used for the spacing of smaller components
42+
*/
43+
export const Small = Template.bind({})
44+
Small.args = {
45+
spacing: 'small',
46+
height: '$6',
47+
}
48+
49+
/**
50+
* `large` spacing can be used for the spacing of large components
51+
*/
52+
export const Large = Template.bind({})
53+
Large.args = {
54+
spacing: 'large',
55+
height: '$10',
56+
}
57+
58+
/**
59+
* `responsive` spacing can be used across multiple display types
60+
*/
61+
export const Responsive = Template.bind({})
62+
Responsive.args = {
63+
spacing: 'responsive',
64+
}
65+
66+
/**
67+
* `left` alignment is the default
68+
*/
69+
export const Left = Template.bind({})
70+
Left.args = {
71+
width: '25%',
72+
align: 'left',
73+
}
74+
75+
/**
76+
* `center` alignment can be used to put items in the center of the stack
77+
*/
78+
export const Center = Template.bind({})
79+
Center.args = {
80+
width: '25%',
81+
align: 'center',
82+
}
83+
84+
/**
85+
* `right` alignment can be used to align items to the right of the stack
86+
*/
87+
export const Bottom = Template.bind({})
88+
Bottom.args = {
89+
width: '25%',
90+
align: 'right',
91+
}

‎src/components/Inline/Inline.test.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
import { renderDark, renderLight } from 'test-utils'
3+
import { Default } from './Inline.stories'
4+
5+
it('renders light without error', () => {
6+
const { asFragment } = renderLight(<Default />)
7+
expect(asFragment()).toBeDefined()
8+
})
9+
10+
it('renders dark without error', () => {
11+
const { asFragment } = renderDark(<Default />)
12+
expect(asFragment()).toBeDefined()
13+
})

‎src/components/Inline/Inline.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { styled } from '../../stitches.config'
2+
import { spacing } from '../../utils/layout'
3+
import { Box } from '../Box'
4+
5+
/**
6+
* `Inline` is a layout component that puts children is an equally spaced row.
7+
*
8+
* It is implemented with `flex` so supports other flexbox controls provided by css
9+
*/
10+
export const Inline = styled(Box, {
11+
display: 'flex',
12+
flexDirection: 'row',
13+
variants: {
14+
spacing,
15+
align: {
16+
left: {
17+
justifyContent: 'flex-start',
18+
},
19+
center: {
20+
justifyContent: 'center',
21+
},
22+
right: {
23+
justifyContent: 'flex-end',
24+
},
25+
},
26+
},
27+
defaultVariants: {
28+
spacing: 'default',
29+
align: 'left',
30+
},
31+
})

‎src/components/Inline/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Inline'

‎src/components/Stack/Stack.stories.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { Meta, Story } from '@storybook/react'
2+
import React, { ComponentProps } from 'react'
3+
import { Stack } from '.'
4+
import { CSS } from '../../stitches.config'
5+
import { ExampleComponent } from '../../utils/story-utils'
6+
7+
export default {
8+
title: 'Components/Stack',
9+
component: Stack,
10+
argTypes: {
11+
spacing: {
12+
control: {
13+
type: 'select',
14+
options: ['small', 'default', 'large', 'responsive'],
15+
},
16+
description:
17+
'The spacing is available in 3 different sizes, and a responsive version.',
18+
},
19+
align: {
20+
control: {
21+
type: 'select',
22+
options: ['left', 'center', 'right'],
23+
},
24+
description: 'The horizontal alignment can be set using the align prop.',
25+
},
26+
},
27+
} as Meta
28+
29+
export const Default: Story<ComponentProps<typeof Stack>> = (args) => (
30+
<Stack {...args}>
31+
<ExampleComponent />
32+
<ExampleComponent />
33+
<ExampleComponent />
34+
</Stack>
35+
)
36+
37+
const Template: Story<
38+
ComponentProps<typeof Stack> & { height: CSS['height']; width: CSS['width'] }
39+
> = ({ height, width, ...args }) => (
40+
<Stack {...args}>
41+
<ExampleComponent height={height} width={width} />
42+
<ExampleComponent height={height} width={width} />
43+
<ExampleComponent height={height} width={width} />
44+
</Stack>
45+
)
46+
47+
/**
48+
* `small` spacing can be used for the stacking of smaller components
49+
*/
50+
export const Small = Template.bind({})
51+
Small.args = {
52+
spacing: 'small',
53+
height: '$6',
54+
}
55+
56+
/**
57+
* `large` spacing can be used for the stacking of large components
58+
*/
59+
export const Large = Template.bind({})
60+
Large.args = {
61+
spacing: 'large',
62+
height: '$10',
63+
}
64+
65+
/**
66+
* `responsive` spacing can be used for stacks used across multiple display types
67+
*/
68+
export const Responsive = Template.bind({})
69+
Responsive.args = {
70+
spacing: 'responsive',
71+
}
72+
73+
/**
74+
* `left` alignment is the default
75+
*/
76+
export const Left = Template.bind({})
77+
Left.args = {
78+
width: '25%',
79+
align: 'left',
80+
}
81+
82+
/**
83+
* `center` alignment can be used to put items in the center of the stack
84+
*/
85+
export const Center = Template.bind({})
86+
Center.args = {
87+
width: '25%',
88+
align: 'center',
89+
}
90+
91+
/**
92+
* `right` alignment can be used to align items to the right of the stack
93+
*/
94+
export const Bottom = Template.bind({})
95+
Bottom.args = {
96+
width: '25%',
97+
align: 'right',
98+
}

‎src/components/Stack/Stack.test.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
import { renderDark, renderLight } from 'test-utils'
3+
import { Default } from './Stack.stories'
4+
5+
it('renders light without error', () => {
6+
const { asFragment } = renderLight(<Default />)
7+
expect(asFragment()).toBeDefined()
8+
})
9+
10+
it('renders dark without error', () => {
11+
const { asFragment } = renderDark(<Default />)
12+
expect(asFragment()).toBeDefined()
13+
})

‎src/components/Stack/Stack.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { styled } from '../../stitches.config'
2+
import { spacing } from '../../utils/layout'
3+
import { Box } from '../Box'
4+
5+
/**
6+
* `Stack` is a layout component that stacks children is an equally spaced column.
7+
*
8+
* It is implemented with `flex` so supports other flexbox controls provided by css
9+
*/
10+
export const Stack = styled(Box, {
11+
display: 'flex',
12+
flexDirection: 'column',
13+
variants: {
14+
spacing,
15+
align: {
16+
left: {
17+
alignItems: 'flex-start',
18+
},
19+
center: {
20+
alignItems: 'center',
21+
},
22+
right: {
23+
alignItems: 'flex-end',
24+
},
25+
},
26+
},
27+
defaultVariants: {
28+
spacing: 'default',
29+
align: 'left',
30+
},
31+
})

‎src/components/Stack/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Stack'

‎src/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export * from './Hidden'
2626
export * from './HoverCard'
2727
export * from './IconButton'
2828
export * from './Icons'
29+
export * from './Inline'
2930
export * from './Input'
3031
export * from './Label'
3132
export * from './Link'
@@ -43,6 +44,7 @@ export * from './Select'
4344
export * from './Skeleton'
4445
export * from './Slider'
4546
export * from './Spinner'
47+
export * from './Stack'
4648
export * from './Subheading'
4749
export * from './Svg'
4850
export * from './Switch'

0 commit comments

Comments
 (0)