Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 4db044a

Browse files
phelmaphelma
committed
restore body padding and just remove it for grid story
1 parent 79bdced commit 4db044a

File tree

2 files changed

+175
-158
lines changed

2 files changed

+175
-158
lines changed

‎.storybook/preview-body.html

-5
This file was deleted.

‎src/layout/grid/src/stories.tsx

+175-153
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @jsx jsx */
22

33
import * as React from 'react'
4-
import { css, jsx } from '@emotion/core'
4+
import { css, Global, jsx } from '@emotion/core'
55
import { storiesOf } from '@storybook/react'
66
import { colors, typography } from '@uswitch/trustyle.styles'
77

@@ -20,188 +20,210 @@ const exampleRowStyle = css({
2020
paddingBottom: '16px'
2121
})
2222

23-
storiesOf('Layout|Grid', module).add('Basic Example', () => (
24-
<Container css={{ backgroundColor: colors.slateGrey, paddingBottom: '16px' }}>
25-
<Row css={exampleRowStyle}>
26-
<Column s={6 / 12} m={6 / 12} l={1 / 2}>
27-
<div css={{ backgroundColor: 'white' }}>
28-
<h2>A 6 / 12 column</h2>
29-
</div>
30-
</Column>
31-
32-
<Column s={6 / 12} m={1 / 2} l={1 / 2}>
33-
<div css={{ backgroundColor: 'white' }}>
34-
<h2>A 6 / 12 column</h2>
35-
</div>
36-
</Column>
37-
</Row>
38-
39-
<Row css={exampleRowStyle}>
40-
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
41-
<div css={{ backgroundColor: 'white' }}>2/12</div>
42-
</Column>
43-
44-
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
45-
<div css={{ backgroundColor: 'white' }}>2/12</div>
46-
</Column>
47-
48-
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
49-
<div css={{ backgroundColor: 'white' }}>2/12</div>
50-
</Column>
51-
52-
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
53-
<div css={{ backgroundColor: 'white' }}>2/12</div>
54-
</Column>
55-
56-
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
57-
<div css={{ backgroundColor: 'white' }}>2/12</div>
58-
</Column>
59-
60-
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
61-
<div css={{ backgroundColor: 'white' }}>2/12</div>
62-
</Column>
63-
</Row>
64-
65-
<div css={{ backgroundColor: 'white' }}>
66-
A normal block element in the container not in a row or column
67-
</div>
68-
</Container>
69-
))
23+
const globalStyles = { body: { margin: 0 } }
7024

71-
storiesOf('Layout|Grid', module).add('Custom gutters', () => {
72-
const gutterWidths = [8, 16, 24]
73-
return (
25+
storiesOf('Layout|Grid', module).add('Basic Example', () => (
26+
<React.Fragment>
27+
<Global styles={globalStyles} />
7428
<Container
75-
gutterWidths={gutterWidths}
76-
css={{ backgroundColor: colors.offWhite, paddingBottom: '16px' }}
29+
css={{ backgroundColor: colors.slateGrey, paddingBottom: '16px' }}
7730
>
7831
<Row css={exampleRowStyle}>
79-
<Column m={1 / 2} l={1 / 2}>
32+
<Column s={6 / 12} m={6 / 12} l={1 / 2}>
8033
<div css={{ backgroundColor: 'white' }}>
8134
<h2>A 6 / 12 column</h2>
8235
</div>
8336
</Column>
8437

85-
<Column m={1 / 2} l={1 / 2}>
38+
<Column s={6 / 12} m={1 / 2} l={1 / 2}>
8639
<div css={{ backgroundColor: 'white' }}>
8740
<h2>A 6 / 12 column</h2>
8841
</div>
8942
</Column>
9043
</Row>
9144

45+
<Row css={exampleRowStyle}>
46+
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
47+
<div css={{ backgroundColor: 'white' }}>2/12</div>
48+
</Column>
49+
50+
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
51+
<div css={{ backgroundColor: 'white' }}>2/12</div>
52+
</Column>
53+
54+
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
55+
<div css={{ backgroundColor: 'white' }}>2/12</div>
56+
</Column>
57+
58+
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
59+
<div css={{ backgroundColor: 'white' }}>2/12</div>
60+
</Column>
61+
62+
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
63+
<div css={{ backgroundColor: 'white' }}>2/12</div>
64+
</Column>
65+
66+
<Column s={2 / 12} m={2 / 12} l={2 / 12}>
67+
<div css={{ backgroundColor: 'white' }}>2/12</div>
68+
</Column>
69+
</Row>
70+
9271
<div css={{ backgroundColor: 'white' }}>
9372
A normal block element in the container not in a row or column
9473
</div>
9574
</Container>
75+
</React.Fragment>
76+
))
77+
78+
storiesOf('Layout|Grid', module).add('Custom gutters', () => {
79+
const gutterWidths = [8, 16, 24]
80+
return (
81+
<React.Fragment>
82+
<Global styles={globalStyles} />
83+
<Container
84+
gutterWidths={gutterWidths}
85+
css={{ backgroundColor: colors.offWhite, paddingBottom: '16px' }}
86+
>
87+
<Row css={exampleRowStyle}>
88+
<Column m={1 / 2} l={1 / 2}>
89+
<div css={{ backgroundColor: 'white' }}>
90+
<h2>A 6 / 12 column</h2>
91+
</div>
92+
</Column>
93+
94+
<Column m={1 / 2} l={1 / 2}>
95+
<div css={{ backgroundColor: 'white' }}>
96+
<h2>A 6 / 12 column</h2>
97+
</div>
98+
</Column>
99+
</Row>
100+
101+
<div css={{ backgroundColor: 'white' }}>
102+
A normal block element in the container not in a row or column
103+
</div>
104+
</Container>
105+
</React.Fragment>
96106
)
97107
})
98108

99109
storiesOf('Layout|Grid', module).add('Example 1 - basics', () => (
100-
<Container
101-
outerMargin={['0 8px', '0 auto']}
102-
css={{ backgroundColor: colors.offWhite }}
103-
>
104-
<Row css={exampleRowStyle} topSpacing={[8, 16]}>
105-
<Column>
106-
<p>
107-
Here is an example of a grid which will turn into 100% width columns
108-
on mobile.
109-
</p>
110-
</Column>
111-
</Row>
112-
<Row css={exampleRowStyle} topSpacing={[8, 16]}>
113-
<Column hide-s m={1 / 4} l={1 / 6} css={exampleColumnStyle}>
114-
.us-col-md-2
115-
</Column>
116-
<Column m={1 / 4} l={1 / 6} css={exampleColumnStyle}>
117-
.us-col-md-2
118-
</Column>
119-
<Column m={1 / 4} l={1 / 3} css={exampleColumnStyle}>
120-
.us-col-md-4
121-
</Column>
122-
<Column m={1 / 4} l={1 / 3} css={exampleColumnStyle}>
123-
.us-col-md-4
124-
</Column>
125-
</Row>
126-
<Row css={exampleRowStyle} topSpacing={[8, 16]}>
127-
<Column m={1 / 2} l={2 / 3} css={exampleColumnStyle}>
128-
.us-col-md-2
129-
</Column>
130-
<Column m={1 / 2} l={1 / 3} css={exampleColumnStyle}>
131-
.us-col-md-4
132-
</Column>
133-
</Row>
134-
<Row css={exampleRowStyle} topSpacing={[8, 16]}>
135-
<Column s={1 / 2} m={1 / 2} l={1 / 2} css={exampleColumnStyle}>
136-
.us-col-md-2
137-
</Column>
138-
<Column s={1 / 2} m={1 / 2} l={1 / 2} css={exampleColumnStyle}>
139-
.us-col-md-4
140-
</Column>
141-
</Row>
142-
</Container>
110+
<React.Fragment>
111+
<Global styles={globalStyles} />
112+
<Container
113+
outerMargin={['0 8px', '0 auto']}
114+
css={{ backgroundColor: colors.offWhite }}
115+
>
116+
<Row css={exampleRowStyle} topSpacing={[8, 16]}>
117+
<Column>
118+
<p>
119+
Here is an example of a grid which will turn into 100% width columns
120+
on mobile.
121+
</p>
122+
</Column>
123+
</Row>
124+
<Row css={exampleRowStyle} topSpacing={[8, 16]}>
125+
<Column hide-s m={1 / 4} l={1 / 6} css={exampleColumnStyle}>
126+
.us-col-md-2
127+
</Column>
128+
<Column m={1 / 4} l={1 / 6} css={exampleColumnStyle}>
129+
.us-col-md-2
130+
</Column>
131+
<Column m={1 / 4} l={1 / 3} css={exampleColumnStyle}>
132+
.us-col-md-4
133+
</Column>
134+
<Column m={1 / 4} l={1 / 3} css={exampleColumnStyle}>
135+
.us-col-md-4
136+
</Column>
137+
</Row>
138+
<Row css={exampleRowStyle} topSpacing={[8, 16]}>
139+
<Column m={1 / 2} l={2 / 3} css={exampleColumnStyle}>
140+
.us-col-md-2
141+
</Column>
142+
<Column m={1 / 2} l={1 / 3} css={exampleColumnStyle}>
143+
.us-col-md-4
144+
</Column>
145+
</Row>
146+
<Row css={exampleRowStyle} topSpacing={[8, 16]}>
147+
<Column s={1 / 2} m={1 / 2} l={1 / 2} css={exampleColumnStyle}>
148+
.us-col-md-2
149+
</Column>
150+
<Column s={1 / 2} m={1 / 2} l={1 / 2} css={exampleColumnStyle}>
151+
.us-col-md-4
152+
</Column>
153+
</Row>
154+
</Container>
155+
</React.Fragment>
143156
))
144157

145158
storiesOf('Layout|Grid', module).add('Example 2 - center', () => (
146-
<Container css={{ backgroundColor: colors.offWhite }}>
147-
<Row css={exampleRowStyle} centerX>
148-
<Column m={1 / 2} l={1 / 2}>
149-
<p>
150-
Here is an example of a grid which will turn into 100% width columns
151-
on mobile.
152-
</p>
153-
</Column>
154-
</Row>
155-
</Container>
159+
<React.Fragment>
160+
<Global styles={globalStyles} />
161+
<Container css={{ backgroundColor: colors.offWhite }}>
162+
<Row css={exampleRowStyle} centerX>
163+
<Column m={1 / 2} l={1 / 2}>
164+
<p>
165+
Here is an example of a grid which will turn into 100% width columns
166+
on mobile.
167+
</p>
168+
</Column>
169+
</Row>
170+
</Container>
171+
</React.Fragment>
156172
))
157173

158174
storiesOf('Layout|Grid', module).add('Example 3 - nested grids', () => (
159-
<Container css={{ backgroundColor: colors.offWhite }}>
160-
<Row css={exampleRowStyle}>
161-
<Column>
162-
<Row>
163-
<Column m={6 / 8} l={8 / 12}>
164-
<h2>A little header</h2>
165-
</Column>
166-
</Row>
167-
<Row>
168-
<Column s={1 / 2} m={1 / 2} l={1 / 2}>
169-
<div css={exampleColumnStyle}>Something</div>
170-
</Column>
171-
<Column s={1 / 2} m={1 / 2} l={1 / 2}>
172-
<div css={exampleColumnStyle}>Something else</div>
173-
</Column>
174-
</Row>
175-
</Column>
176-
</Row>
177-
</Container>
175+
<React.Fragment>
176+
<Global styles={globalStyles} />
177+
<Container css={{ backgroundColor: colors.offWhite }}>
178+
<Row css={exampleRowStyle}>
179+
<Column>
180+
<Row>
181+
<Column m={6 / 8} l={8 / 12}>
182+
<h2>A little header</h2>
183+
</Column>
184+
</Row>
185+
<Row>
186+
<Column s={1 / 2} m={1 / 2} l={1 / 2}>
187+
<div css={exampleColumnStyle}>Something</div>
188+
</Column>
189+
<Column s={1 / 2} m={1 / 2} l={1 / 2}>
190+
<div css={exampleColumnStyle}>Something else</div>
191+
</Column>
192+
</Row>
193+
</Column>
194+
</Row>
195+
</Container>
196+
</React.Fragment>
178197
))
179198

180199
storiesOf('Layout|Grid', module).add('Example 4 - passing screen sizes', () => (
181-
<Container
182-
css={{ backgroundColor: colors.offWhite }}
183-
containerWidths={['100%', 740, 990]}
184-
gutterWidths={[8, 8, 8]}
185-
>
186-
<Row css={exampleRowStyle} gutterWidths={[8, 8, 8]}>
187-
<Column gutterWidths={[8, 8, 8]}>
188-
<Row gutterWidths={[8, 8, 8]}>
189-
<Column m={6 / 8} l={8 / 12}>
190-
<h2>A little header</h2>
191-
</Column>
192-
</Row>
193-
<Row gutterWidths={[8, 8, 8, 8]}>
194-
<Column s={1 / 3} m={1 / 3} l={1 / 3} gutterWidths={[8, 8, 8]}>
195-
<div css={exampleColumnStyle}>Something</div>
196-
</Column>
197-
<Column s={1 / 3} m={1 / 3} l={1 / 3} gutterWidths={[8, 8, 8]}>
198-
<div css={exampleColumnStyle}>Something</div>
199-
</Column>
200-
<Column s={1 / 3} m={1 / 3} l={1 / 3} gutterWidths={[8, 8, 8]}>
201-
<div css={exampleColumnStyle}>Something else</div>
202-
</Column>
203-
</Row>
204-
</Column>
205-
</Row>
206-
</Container>
200+
<React.Fragment>
201+
<Global styles={globalStyles} />
202+
<Container
203+
css={{ backgroundColor: colors.offWhite }}
204+
containerWidths={['100%', 740, 990]}
205+
gutterWidths={[8, 8, 8]}
206+
>
207+
<Row css={exampleRowStyle} gutterWidths={[8, 8, 8]}>
208+
<Column gutterWidths={[8, 8, 8]}>
209+
<Row gutterWidths={[8, 8, 8]}>
210+
<Column m={6 / 8} l={8 / 12}>
211+
<h2>A little header</h2>
212+
</Column>
213+
</Row>
214+
<Row gutterWidths={[8, 8, 8, 8]}>
215+
<Column s={1 / 3} m={1 / 3} l={1 / 3} gutterWidths={[8, 8, 8]}>
216+
<div css={exampleColumnStyle}>Something</div>
217+
</Column>
218+
<Column s={1 / 3} m={1 / 3} l={1 / 3} gutterWidths={[8, 8, 8]}>
219+
<div css={exampleColumnStyle}>Something</div>
220+
</Column>
221+
<Column s={1 / 3} m={1 / 3} l={1 / 3} gutterWidths={[8, 8, 8]}>
222+
<div css={exampleColumnStyle}>Something else</div>
223+
</Column>
224+
</Row>
225+
</Column>
226+
</Row>
227+
</Container>
228+
</React.Fragment>
207229
))

0 commit comments

Comments
 (0)