Skip to content

Commit f9a5f2c

Browse files
GomezIvannGomezIvann
authored
Merge pull request #1210 from dxc-technology/marcialfps-issue-1209
New Flex component
2 parents e026726 + ef8ee74 commit f9a5f2c

File tree

8 files changed

+283
-75
lines changed

8 files changed

+283
-75
lines changed

‎lib/src/bleed/Bleed.stories.tsx‎

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import styled from "styled-components";
33
import Title from "../../.storybook/components/Title";
44
import DxcBleed from "./Bleed";
5-
import DxcStack from "../stack/Stack";
5+
import DxcFlex from "../flex/Flex";
66

77
export default {
88
title: "Bleed",
@@ -13,316 +13,316 @@ export const Chromatic = () => (
1313
<>
1414
<Title title="Space = none" theme="light" level={4} />
1515
<Container>
16-
<DxcStack gutter="1.5rem">
16+
<DxcFlex direction="column" gap="1.5rem">
1717
<Placeholder></Placeholder>
1818
<DxcBleed space="0rem">
1919
<Placeholder></Placeholder>
2020
</DxcBleed>
2121
<Placeholder></Placeholder>
22-
</DxcStack>
22+
</DxcFlex>
2323
</Container>
2424
<Title title="Space = xxxsmall" theme="light" level={4} />
2525
<Container>
26-
<DxcStack gutter="1.5rem">
26+
<DxcFlex direction="column" gap="1.5rem">
2727
<Placeholder></Placeholder>
2828
<DxcBleed space="0.125rem">
2929
<Placeholder></Placeholder>
3030
</DxcBleed>
3131
<Placeholder></Placeholder>
32-
</DxcStack>
32+
</DxcFlex>
3333
</Container>
3434
<Title title="Space = xxsmall" theme="light" level={4} />
3535
<Container>
36-
<DxcStack gutter="1.5rem">
36+
<DxcFlex direction="column" gap="1.5rem">
3737
<Placeholder></Placeholder>
3838
<DxcBleed space="0.25rem">
3939
<Placeholder></Placeholder>
4040
</DxcBleed>
4141
<Placeholder></Placeholder>
42-
</DxcStack>
42+
</DxcFlex>
4343
</Container>
4444
<Title title="Space = xsmall" theme="light" level={4} />
4545
<Container>
46-
<DxcStack gutter="1.5rem">
46+
<DxcFlex direction="column" gap="1.5rem">
4747
<Placeholder></Placeholder>
4848
<DxcBleed space="0.5rem">
4949
<Placeholder></Placeholder>
5050
</DxcBleed>
5151
<Placeholder></Placeholder>
52-
</DxcStack>
52+
</DxcFlex>
5353
</Container>
5454
<Title title="Space = small" theme="light" level={4} />
5555
<Container>
56-
<DxcStack gutter="1.5rem">
56+
<DxcFlex direction="column" gap="1.5rem">
5757
<Placeholder></Placeholder>
5858
<DxcBleed space="1rem">
5959
<Placeholder></Placeholder>
6060
</DxcBleed>
6161
<Placeholder></Placeholder>
62-
</DxcStack>
62+
</DxcFlex>
6363
</Container>
6464
<Title title="Space = medium" theme="light" level={4} />
6565
<Container>
66-
<DxcStack gutter="1.5rem">
66+
<DxcFlex direction="column" gap="1.5rem">
6767
<Placeholder></Placeholder>
6868
<DxcBleed space="1.5rem">
6969
<Placeholder></Placeholder>
7070
</DxcBleed>
7171
<Placeholder></Placeholder>
72-
</DxcStack>
72+
</DxcFlex>
7373
</Container>
7474
<Title title="Space = large" theme="light" level={4} />
7575
<Container>
76-
<DxcStack gutter="1.5rem">
76+
<DxcFlex direction="column" gap="1.5rem">
7777
<Placeholder></Placeholder>
7878
<DxcBleed space="2rem">
7979
<Placeholder></Placeholder>
8080
</DxcBleed>
8181
<Placeholder></Placeholder>
82-
</DxcStack>
82+
</DxcFlex>
8383
</Container>
8484
<Title title="Space = xlarge" theme="light" level={4} />
8585
<Container>
86-
<DxcStack gutter="1.5rem">
86+
<DxcFlex direction="column" gap="1.5rem">
8787
<Placeholder></Placeholder>
8888
<DxcBleed space="3rem">
8989
<Placeholder></Placeholder>
9090
</DxcBleed>
9191
<Placeholder></Placeholder>
92-
</DxcStack>
92+
</DxcFlex>
9393
</Container>
9494
<Title title="Space = xxlarge" theme="light" level={4} />
9595
<Container>
96-
<DxcStack gutter="1.5rem">
96+
<DxcFlex direction="column" gap="1.5rem">
9797
<Placeholder></Placeholder>
9898
<DxcBleed space="4rem">
9999
<Placeholder></Placeholder>
100100
</DxcBleed>
101101
<Placeholder></Placeholder>
102-
</DxcStack>
102+
</DxcFlex>
103103
</Container>
104104
<Title title="Space = xxxlarge" theme="light" level={4} />
105105
<Container>
106-
<DxcStack gutter="1.5rem">
106+
<DxcFlex direction="column" gap="1.5rem">
107107
<Placeholder></Placeholder>
108108
<DxcBleed space="5rem">
109109
<Placeholder></Placeholder>
110110
</DxcBleed>
111111
<Placeholder></Placeholder>
112-
</DxcStack>
112+
</DxcFlex>
113113
</Container>
114114

115115
<Title title="Horizontal = none" theme="light" level={4} />
116116
<Container>
117-
<DxcStack gutter="1.5rem">
117+
<DxcFlex direction="column" gap="1.5rem">
118118
<Placeholder></Placeholder>
119119
<DxcBleed horizontal="0rem">
120120
<Placeholder></Placeholder>
121121
</DxcBleed>
122122
<Placeholder></Placeholder>
123-
</DxcStack>
123+
</DxcFlex>
124124
</Container>
125125
<Title title="Horizontal = xxxsmall" theme="light" level={4} />
126126
<Container>
127-
<DxcStack gutter="1.5rem">
127+
<DxcFlex direction="column" gap="1.5rem">
128128
<Placeholder></Placeholder>
129129
<DxcBleed horizontal="0.125rem">
130130
<Placeholder></Placeholder>
131131
</DxcBleed>
132132
<Placeholder></Placeholder>
133-
</DxcStack>
133+
</DxcFlex>
134134
</Container>
135135
<Title title="Horizontal = xxsmall" theme="light" level={4} />
136136
<Container>
137-
<DxcStack gutter="1.5rem">
137+
<DxcFlex direction="column" gap="1.5rem">
138138
<Placeholder></Placeholder>
139139
<DxcBleed horizontal="0.25rem">
140140
<Placeholder></Placeholder>
141141
</DxcBleed>
142142
<Placeholder></Placeholder>
143-
</DxcStack>
143+
</DxcFlex>
144144
</Container>
145145
<Title title="Horizontal = xsmall" theme="light" level={4} />
146146
<Container>
147-
<DxcStack gutter="1.5rem">
147+
<DxcFlex direction="column" gap="1.5rem">
148148
<Placeholder></Placeholder>
149149
<DxcBleed horizontal="0.5rem">
150150
<Placeholder></Placeholder>
151151
</DxcBleed>
152152
<Placeholder></Placeholder>
153-
</DxcStack>
153+
</DxcFlex>
154154
</Container>
155155
<Title title="Horizontal = small" theme="light" level={4} />
156156
<Container>
157-
<DxcStack gutter="1.5rem">
157+
<DxcFlex direction="column" gap="1.5rem">
158158
<Placeholder></Placeholder>
159159
<DxcBleed horizontal="1rem">
160160
<Placeholder></Placeholder>
161161
</DxcBleed>
162162
<Placeholder></Placeholder>
163-
</DxcStack>
163+
</DxcFlex>
164164
</Container>
165165
<Title title="Horizontal = medium" theme="light" level={4} />
166166
<Container>
167-
<DxcStack gutter="1.5rem">
167+
<DxcFlex direction="column" gap="1.5rem">
168168
<Placeholder></Placeholder>
169169
<DxcBleed horizontal="1.5rem">
170170
<Placeholder></Placeholder>
171171
</DxcBleed>
172172
<Placeholder></Placeholder>
173-
</DxcStack>
173+
</DxcFlex>
174174
</Container>
175175
<Title title="Horizontal = large" theme="light" level={4} />
176176
<Container>
177-
<DxcStack gutter="1.5rem">
177+
<DxcFlex direction="column" gap="1.5rem">
178178
<Placeholder></Placeholder>
179179
<DxcBleed horizontal="2rem">
180180
<Placeholder></Placeholder>
181181
</DxcBleed>
182182
<Placeholder></Placeholder>
183-
</DxcStack>
183+
</DxcFlex>
184184
</Container>
185185
<Title title="Horizontal = xlarge" theme="light" level={4} />
186186
<Container>
187-
<DxcStack gutter="1.5rem">
187+
<DxcFlex direction="column" gap="1.5rem">
188188
<Placeholder></Placeholder>
189189
<DxcBleed horizontal="3rem">
190190
<Placeholder></Placeholder>
191191
</DxcBleed>
192192
<Placeholder></Placeholder>
193-
</DxcStack>
193+
</DxcFlex>
194194
</Container>
195195
<Title title="Horizontal = xxlarge" theme="light" level={4} />
196196
<Container>
197-
<DxcStack gutter="1.5rem">
197+
<DxcFlex direction="column" gap="1.5rem">
198198
<Placeholder></Placeholder>
199199
<DxcBleed horizontal="4rem">
200200
<Placeholder></Placeholder>
201201
</DxcBleed>
202202
<Placeholder></Placeholder>
203-
</DxcStack>
203+
</DxcFlex>
204204
</Container>
205205
<Title title="Horizontal = xxxlarge" theme="light" level={4} />
206206
<Container>
207-
<DxcStack gutter="1.5rem">
207+
<DxcFlex direction="column" gap="1.5rem">
208208
<Placeholder></Placeholder>
209209
<DxcBleed horizontal="5rem">
210210
<Placeholder></Placeholder>
211211
</DxcBleed>
212212
<Placeholder></Placeholder>
213-
</DxcStack>
213+
</DxcFlex>
214214
</Container>
215215

216216
<Title title="Vertical = none" theme="light" level={4} />
217217
<Container>
218-
<DxcStack gutter="1.5rem">
218+
<DxcFlex direction="column" gap="1.5rem">
219219
<Placeholder></Placeholder>
220220
<DxcBleed vertical="0rem">
221221
<Placeholder></Placeholder>
222222
</DxcBleed>
223223
<Placeholder></Placeholder>
224-
</DxcStack>
224+
</DxcFlex>
225225
</Container>
226226
<Title title="Vertical = xxxsmall" theme="light" level={4} />
227227
<Container>
228-
<DxcStack gutter="1.5rem">
228+
<DxcFlex direction="column" gap="1.5rem">
229229
<Placeholder></Placeholder>
230230
<DxcBleed vertical="0.125rem">
231231
<Placeholder></Placeholder>
232232
</DxcBleed>
233233
<Placeholder></Placeholder>
234-
</DxcStack>
234+
</DxcFlex>
235235
</Container>
236236
<Title title="Vertical = xxsmall" theme="light" level={4} />
237237
<Container>
238-
<DxcStack gutter="1.5rem">
238+
<DxcFlex direction="column" gap="1.5rem">
239239
<Placeholder></Placeholder>
240240
<DxcBleed vertical="0.25rem">
241241
<Placeholder></Placeholder>
242242
</DxcBleed>
243243
<Placeholder></Placeholder>
244-
</DxcStack>
244+
</DxcFlex>
245245
</Container>
246246
<Title title="Vertical = xsmall" theme="light" level={4} />
247247
<Container>
248-
<DxcStack gutter="1.5rem">
248+
<DxcFlex direction="column" gap="1.5rem">
249249
<Placeholder></Placeholder>
250250
<DxcBleed vertical="0.5rem">
251251
<Placeholder></Placeholder>
252252
</DxcBleed>
253253
<Placeholder></Placeholder>
254-
</DxcStack>
254+
</DxcFlex>
255255
</Container>
256256
<Title title="Vertical = small" theme="light" level={4} />
257257
<Container>
258-
<DxcStack gutter="1.5rem">
258+
<DxcFlex direction="column" gap="1.5rem">
259259
<Placeholder></Placeholder>
260260
<DxcBleed vertical="1rem">
261261
<Placeholder></Placeholder>
262262
</DxcBleed>
263263
<Placeholder></Placeholder>
264-
</DxcStack>
264+
</DxcFlex>
265265
</Container>
266266
<Title title="Vertical = medium" theme="light" level={4} />
267267
<Container>
268-
<DxcStack gutter="1.5rem">
268+
<DxcFlex direction="column" gap="1.5rem">
269269
<Placeholder></Placeholder>
270270
<DxcBleed vertical="1.5rem">
271271
<Placeholder></Placeholder>
272272
</DxcBleed>
273273
<Placeholder></Placeholder>
274-
</DxcStack>
274+
</DxcFlex>
275275
</Container>
276276
<Title title="Vertical = large" theme="light" level={4} />
277277
<Container>
278-
<DxcStack gutter="1.5rem">
278+
<DxcFlex direction="column" gap="1.5rem">
279279
<Placeholder></Placeholder>
280280
<DxcBleed vertical="2rem">
281281
<Placeholder></Placeholder>
282282
</DxcBleed>
283283
<Placeholder></Placeholder>
284-
</DxcStack>
284+
</DxcFlex>
285285
</Container>
286286
<Title title="Vertical = xlarge" theme="light" level={4} />
287287
<Container>
288-
<DxcStack gutter="1.5rem">
288+
<DxcFlex direction="column" gap="1.5rem">
289289
<Placeholder></Placeholder>
290290
<DxcBleed vertical="3rem">
291291
<Placeholder></Placeholder>
292292
</DxcBleed>
293293
<Placeholder></Placeholder>
294-
</DxcStack>
294+
</DxcFlex>
295295
</Container>
296296
<Title title="Vertical = xxlarge" theme="light" level={4} />
297297
<Container>
298-
<DxcStack gutter="1.5rem">
298+
<DxcFlex direction="column" gap="1.5rem">
299299
<Placeholder></Placeholder>
300300
<DxcBleed vertical="4rem">
301301
<Placeholder></Placeholder>
302302
</DxcBleed>
303303
<Placeholder></Placeholder>
304-
</DxcStack>
304+
</DxcFlex>
305305
</Container>
306306
<Title title="Vertical = xxxlarge" theme="light" level={4} />
307307
<Container>
308-
<DxcStack gutter="1.5rem">
308+
<DxcFlex direction="column" gap="1.5rem">
309309
<Placeholder></Placeholder>
310310
<DxcBleed vertical="5rem">
311311
<Placeholder></Placeholder>
312312
</DxcBleed>
313313
<Placeholder></Placeholder>
314-
</DxcStack>
314+
</DxcFlex>
315315
</Container>
316316

317317
<Title title="Top = xsmall, right = small, bottom = medium and left = large" theme="light" level={4} />
318318
<Container>
319-
<DxcStack gutter="1.5rem">
319+
<DxcFlex direction="column" gap="1.5rem">
320320
<Placeholder></Placeholder>
321321
<DxcBleed top="0.5rem" right="1rem" bottom="1.5rem" left="2rem">
322322
<Placeholder></Placeholder>
323323
</DxcBleed>
324324
<Placeholder></Placeholder>
325-
</DxcStack>
325+
</DxcFlex>
326326
</Container>
327327
</>
328328
);

0 commit comments

Comments
 (0)