Skip to content

Commit 6ed876a

Browse files
adamkudrnaadamkudrna
committed
Create FormLayout component and make form fields ready for it (#44)
1 parent e092552 commit 6ed876a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+549
-15
lines changed

‎src/demo/pages/DemoContainer.jsx‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
CTAStart,
2222
CheckboxField,
2323
ForgotPassword,
24+
FormLayout,
2425
LayoutCenter,
2526
List,
2627
ListItem,
@@ -344,6 +345,190 @@ class DemoContainer extends React.Component {
344345
</CTA>
345346
)}
346347
/>
348+
<h3 id="layout-components-form-layout" className="typography-size-4 mb-6">Form Layout</h3>
349+
<p>
350+
Vertical Form Layout works similar to List except that List Items are not needed.
351+
Vertical form field layout is forced.
352+
</p>
353+
<Documentation
354+
name="Vertical Form Layout"
355+
component={(
356+
<FormLayout>
357+
<>
358+
<TextField
359+
id="formLayoutVerticalFirstName"
360+
changeHandler={logger}
361+
label="First Name"
362+
/>
363+
<TextField
364+
id="formLayoutVerticalLastName"
365+
changeHandler={logger}
366+
label="Last Name"
367+
/>
368+
</>
369+
<TextField
370+
id="formLayoutVerticalEmail"
371+
changeHandler={logger}
372+
label="Email address"
373+
type="email"
374+
helperText="Optional"
375+
/>
376+
<>
377+
<TextField
378+
id="formLayoutVerticalAddress1"
379+
changeHandler={logger}
380+
label="Address"
381+
placeholder="Address line 1"
382+
/>
383+
<TextField
384+
id="formLayoutVerticalAddress2"
385+
changeHandler={logger}
386+
isLabelVisible={false}
387+
label="Address 2"
388+
placeholder="Address line 2"
389+
/>
390+
<TextField
391+
id="formLayoutVerticalZip"
392+
changeHandler={logger}
393+
helperText="ZIP should be 5 to 6 digits long code."
394+
label="ZIP"
395+
inputSize={6}
396+
validationState="invalid"
397+
/>
398+
<TextField
399+
id="formLayoutVerticalCountry"
400+
changeHandler={logger}
401+
label="Country"
402+
/>
403+
<CheckboxField
404+
id="formLayoutVerticalDelivery"
405+
changeHandler={logger}
406+
label="This is my delivery address"
407+
/>
408+
</>
409+
<SelectField
410+
id="formLayoutVerticalFruit"
411+
changeHandler={logger}
412+
label="Your favourite fruit"
413+
options={this.exampleOptions}
414+
/>
415+
<TextArea
416+
id="formLayoutVerticalMessage"
417+
changeHandler={logger}
418+
fullWidth
419+
label="Message"
420+
rows={3}
421+
/>
422+
<Toggle
423+
id="formLayoutVerticalNewsletter"
424+
changeHandler={logger}
425+
checked
426+
description="Only once per week!"
427+
label="Receive weekly newsletter"
428+
required
429+
/>
430+
<Radio
431+
id="formLayoutVerticalFruit2"
432+
changeHandler={logger}
433+
label="And fruit again!"
434+
options={this.exampleOptions}
435+
value="apples"
436+
/>
437+
</FormLayout>
438+
)}
439+
/>
440+
<p>
441+
Horizontal Form Layout is designed for horizontal form fields.
442+
It is applied starting from <code>md</code> viewport size onwards.
443+
Horizontal form field layout is forced.
444+
</p>
445+
<Documentation
446+
name="Horizontal Form Layout"
447+
component={(
448+
<FormLayout fieldLayout="horizontal">
449+
<>
450+
<TextField
451+
id="formLayoutHorizontalFirstName"
452+
changeHandler={logger}
453+
label="First Name"
454+
/>
455+
<TextField
456+
id="formLayoutHorizontalLastName"
457+
changeHandler={logger}
458+
label="Last Name"
459+
/>
460+
</>
461+
<TextField
462+
id="formLayoutHorizontalEmail"
463+
changeHandler={logger}
464+
label="Email address"
465+
type="email"
466+
helperText="Optional"
467+
/>
468+
<>
469+
<TextField
470+
id="formLayoutHorizontalAddress1"
471+
changeHandler={logger}
472+
label="Address"
473+
placeholder="Address line 1"
474+
/>
475+
<TextField
476+
id="formLayoutHorizontalAddress2"
477+
changeHandler={logger}
478+
isLabelVisible={false}
479+
label="Address 2"
480+
placeholder="Address line 2"
481+
/>
482+
<TextField
483+
id="formLayoutHorizontalZip"
484+
changeHandler={logger}
485+
helperText="ZIP should be 5 to 6 digits long code."
486+
label="ZIP"
487+
inputSize={6}
488+
validationState="invalid"
489+
/>
490+
<TextField
491+
id="formLayoutHorizontalCountry"
492+
changeHandler={logger}
493+
label="Country"
494+
/>
495+
<CheckboxField
496+
id="formLayoutHorizontalDelivery"
497+
changeHandler={logger}
498+
label="This is my delivery address"
499+
/>
500+
</>
501+
<SelectField
502+
id="formLayoutHorizontalFruit"
503+
changeHandler={logger}
504+
label="Your favourite fruit"
505+
options={this.exampleOptions}
506+
/>
507+
<TextArea
508+
id="formLayoutHorizontalMessage"
509+
changeHandler={logger}
510+
fullWidth
511+
label="Message"
512+
rows={3}
513+
/>
514+
<Toggle
515+
id="formLayoutHorizontalNewsletter"
516+
changeHandler={logger}
517+
checked
518+
label="Receive weekly newsletter"
519+
required
520+
description="Only once per week!"
521+
/>
522+
<Radio
523+
id="formLayoutHorizontalFruit2"
524+
changeHandler={logger}
525+
label="And fruit again!"
526+
options={this.exampleOptions}
527+
value="apples"
528+
/>
529+
</FormLayout>
530+
)}
531+
/>
347532
<h3 id="layout-components-list" className="typography-size-4 mb-6">List</h3>
348533
<Documentation
349534
name="Default list"

‎src/demo/pages/navigation.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ export default [
3535
link: '#layout-components-cta',
3636
title: 'CTA',
3737
},
38+
{
39+
link: '#layout-components-form-layout',
40+
title: 'Form Layout',
41+
},
3842
{
3943
link: '#layout-components-list',
4044
title: 'List',

‎src/lib/components/layout/CardList/CardList.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import '../../../styles/settings/layouts';
12
@import '../../../styles/tools/breakpoints';
23
@import '../../../styles/tools/offset';
34
@import './theme';
@@ -8,7 +9,7 @@
89
grid-template-columns: 1fr;
910
grid-template-rows: auto;
1011
grid-gap: $card-list-grid-gap;
11-
margin-bottom: offset(4);
12+
margin-bottom: $layout-common-bottom-offset;
1213

1314
@include breakpoint-up(sm) {
1415
grid-template-columns: repeat(auto-fit, minmax($card-list-card-min-width, $card-list-card-max-width));

‎src/lib/components/layout/FormLayout/FormLayout.jsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import styles from './FormLayout.scss';
4+
5+
const FormLayout = (props) => {
6+
const {
7+
children,
8+
fieldLayout,
9+
id,
10+
} = props;
11+
12+
if (!children) {
13+
return null;
14+
}
15+
16+
const fieldLayoutClass = (layout) => {
17+
if (layout === 'horizontal') {
18+
return styles.rootFieldLayoutHorizontal;
19+
}
20+
21+
return styles.rootFieldLayoutVertical;
22+
};
23+
24+
return (
25+
<div
26+
id={id}
27+
className={[
28+
styles.root,
29+
fieldLayoutClass(fieldLayout),
30+
].join(' ')}
31+
>
32+
{React.Children.map(children, (child) => {
33+
if (!React.isValidElement(child)) {
34+
return null;
35+
}
36+
37+
return React.cloneElement(child, {
38+
inFormLayout: true,
39+
layout: fieldLayout,
40+
});
41+
})}
42+
</div>
43+
);
44+
};
45+
46+
FormLayout.defaultProps = {
47+
children: null,
48+
fieldLayout: 'vertical',
49+
id: undefined,
50+
};
51+
52+
FormLayout.propTypes = {
53+
children: PropTypes.node,
54+
fieldLayout: PropTypes.oneOf(['horizontal', 'vertical']),
55+
id: PropTypes.string,
56+
};
57+
58+
export default FormLayout;

‎src/lib/components/layout/FormLayout/FormLayout.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import '../../../styles/settings/forms';
2+
@import '../../../styles/settings/forms-theme';
3+
@import '../../../styles/settings/layouts';
4+
@import '../../../styles/tools/breakpoints';
5+
@import '../../../styles/tools/offset';
6+
7+
.root {
8+
margin-bottom: $layout-common-bottom-offset;
9+
}
10+
11+
.rootFieldLayoutVertical,
12+
.rootFieldLayoutHorizontal {
13+
display: grid;
14+
grid-template-columns: 1fr;
15+
grid-row-gap: $form-field-vertical-outer-spacing;
16+
}
17+
18+
.rootFieldLayoutHorizontal {
19+
@include breakpoint-up($form-field-horizontal-breakpoint) {
20+
grid-template-columns: $form-layout-horizontal-label-width 1fr;
21+
}
22+
}

‎src/lib/components/layout/FormLayout/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './FormLayout';

‎src/lib/components/layout/List/List.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
@import '../../../styles/settings/layouts';
12
@import '../../../styles/tools/offset';
23

34
.root {
4-
margin-bottom: offset(4);
5+
margin-bottom: $layout-common-bottom-offset;
56
}
67

78
.list {

‎src/lib/components/layout/Media/Media.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
@import '../../../styles/settings/layouts';
12
@import '../../../styles/tools/offset';
23

34
.media {
45
display: flex;
56
align-items: flex-start;
6-
margin-bottom: offset(3);
7+
margin-bottom: $layout-common-bottom-offset;
78
}
89

910
.object {

‎src/lib/components/layout/Row/Row.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
@import '../../../styles/settings/layouts';
12
@import '../../../styles/tools/offset';
23

34
.row {
45
display: flex;
56
flex-wrap: wrap;
67
align-items: baseline;
7-
margin-bottom: offset(3);
8+
margin-bottom: $layout-common-bottom-offset;
89
}
910

1011
.start,

‎src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ exports[`rendering renders correctly 1`] = `
4848
fullWidth={true}
4949
helperText={null}
5050
id="resetEmailInput"
51+
inFormLayout={false}
5152
inputSize={null}
5253
isLabelVisible={true}
5354
label="E-mail"
@@ -62,6 +63,7 @@ exports[`rendering renders correctly 1`] = `
6263
<label
6364
className="root
6465
isRootFullWidth
66+
6567
rootLayoutVertical
6668
isRootRequired
6769
rootSizeMedium
@@ -198,6 +200,7 @@ exports[`rendering renders correctly 2`] = `
198200
fullWidth={true}
199201
helperText={null}
200202
id="resetEmailInput"
203+
inFormLayout={false}
201204
inputSize={null}
202205
isLabelVisible={true}
203206
label="E-mail"
@@ -212,6 +215,7 @@ exports[`rendering renders correctly 2`] = `
212215
<label
213216
className="root
214217
isRootFullWidth
218+
215219
rootLayoutVertical
216220
isRootRequired
217221
rootSizeMedium
@@ -376,6 +380,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
376380
fullWidth={true}
377381
helperText={null}
378382
id="custom-id__resetEmailInput"
383+
inFormLayout={false}
379384
inputSize={null}
380385
isLabelVisible={true}
381386
label="E-mail"
@@ -390,6 +395,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
390395
<label
391396
className="root
392397
isRootFullWidth
398+
393399
rootLayoutVertical
394400
isRootRequired
395401
rootSizeMedium

0 commit comments

Comments
 (0)