Create FormLayout component and make form fields ready for it (#44)

react-ui-org · Jun 2, 2020 · 6ed876a · 6ed876a
1 parent e092552
commit 6ed876a
Show file tree

Hide file tree

Showing 47 changed files with 549 additions and 15 deletions.
diff --git a/src/demo/pages/DemoContainer.jsx b/src/demo/pages/DemoContainer.jsx
@@ -21,6 +21,7 @@ import {
   CTAStart,
   CheckboxField,
   ForgotPassword,
+  FormLayout,
   LayoutCenter,
   List,
   ListItem,
@@ -344,6 +345,190 @@ class DemoContainer extends React.Component {
                 </CTA>
               )}
             />
+            <h3 id="layout-components-form-layout" className="typography-size-4 mb-6">Form Layout</h3>
+            <p>
+              Vertical Form Layout works similar to List except that List Items are not needed.
+              Vertical form field layout is forced.
+            </p>
+            <Documentation
+              name="Vertical Form Layout"
+              component={(
+                <FormLayout>
+                  <>
+                    <TextField
+                      id="formLayoutVerticalFirstName"
+                      changeHandler={logger}
+                      label="First Name"
+                    />
+                    <TextField
+                      id="formLayoutVerticalLastName"
+                      changeHandler={logger}
+                      label="Last Name"
+                    />
+                  </>
+                  <TextField
+                    id="formLayoutVerticalEmail"
+                    changeHandler={logger}
+                    label="Email address"
+                    type="email"
+                    helperText="Optional"
+                  />
+                  <>
+                    <TextField
+                      id="formLayoutVerticalAddress1"
+                      changeHandler={logger}
+                      label="Address"
+                      placeholder="Address line 1"
+                    />
+                    <TextField
+                      id="formLayoutVerticalAddress2"
+                      changeHandler={logger}
+                      isLabelVisible={false}
+                      label="Address 2"
+                      placeholder="Address line 2"
+                    />
+                    <TextField
+                      id="formLayoutVerticalZip"
+                      changeHandler={logger}
+                      helperText="ZIP should be 5 to 6 digits long code."
+                      label="ZIP"
+                      inputSize={6}
+                      validationState="invalid"
+                    />
+                    <TextField
+                      id="formLayoutVerticalCountry"
+                      changeHandler={logger}
+                      label="Country"
+                    />
+                    <CheckboxField
+                      id="formLayoutVerticalDelivery"
+                      changeHandler={logger}
+                      label="This is my delivery address"
+                    />
+                  </>
+                  <SelectField
+                    id="formLayoutVerticalFruit"
+                    changeHandler={logger}
+                    label="Your favourite fruit"
+                    options={this.exampleOptions}
+                  />
+                  <TextArea
+                    id="formLayoutVerticalMessage"
+                    changeHandler={logger}
+                    fullWidth
+                    label="Message"
+                    rows={3}
+                  />
+                  <Toggle
+                    id="formLayoutVerticalNewsletter"
+                    changeHandler={logger}
+                    checked
+                    description="Only once per week!"
+                    label="Receive weekly newsletter"
+                    required
+                  />
+                  <Radio
+                    id="formLayoutVerticalFruit2"
+                    changeHandler={logger}
+                    label="And fruit again!"
+                    options={this.exampleOptions}
+                    value="apples"
+                  />
+                </FormLayout>
+              )}
+            />
+            <p>
+              Horizontal Form Layout is designed for horizontal form fields.
+              It is applied starting from <code>md</code> viewport size onwards.
+              Horizontal form field layout is forced.
+            </p>
+            <Documentation
+              name="Horizontal Form Layout"
+              component={(
+                <FormLayout fieldLayout="horizontal">
+                  <>
+                    <TextField
+                      id="formLayoutHorizontalFirstName"
+                      changeHandler={logger}
+                      label="First Name"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalLastName"
+                      changeHandler={logger}
+                      label="Last Name"
+                    />
+                  </>
+                  <TextField
+                    id="formLayoutHorizontalEmail"
+                    changeHandler={logger}
+                    label="Email address"
+                    type="email"
+                    helperText="Optional"
+                  />
+                  <>
+                    <TextField
+                      id="formLayoutHorizontalAddress1"
+                      changeHandler={logger}
+                      label="Address"
+                      placeholder="Address line 1"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalAddress2"
+                      changeHandler={logger}
+                      isLabelVisible={false}
+                      label="Address 2"
+                      placeholder="Address line 2"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalZip"
+                      changeHandler={logger}
+                      helperText="ZIP should be 5 to 6 digits long code."
+                      label="ZIP"
+                      inputSize={6}
+                      validationState="invalid"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalCountry"
+                      changeHandler={logger}
+                      label="Country"
+                    />
+                    <CheckboxField
+                      id="formLayoutHorizontalDelivery"
+                      changeHandler={logger}
+                      label="This is my delivery address"
+                    />
+                  </>
+                  <SelectField
+                    id="formLayoutHorizontalFruit"
+                    changeHandler={logger}
+                    label="Your favourite fruit"
+                    options={this.exampleOptions}
+                  />
+                  <TextArea
+                    id="formLayoutHorizontalMessage"
+                    changeHandler={logger}
+                    fullWidth
+                    label="Message"
+                    rows={3}
+                  />
+                  <Toggle
+                    id="formLayoutHorizontalNewsletter"
+                    changeHandler={logger}
+                    checked
+                    label="Receive weekly newsletter"
+                    required
+                    description="Only once per week!"
+                  />
+                  <Radio
+                    id="formLayoutHorizontalFruit2"
+                    changeHandler={logger}
+                    label="And fruit again!"
+                    options={this.exampleOptions}
+                    value="apples"
+                  />
+                </FormLayout>
+              )}
+            />
             <h3 id="layout-components-list" className="typography-size-4 mb-6">List</h3>
             <Documentation
               name="Default list"

diff --git a/src/demo/pages/navigation.js b/src/demo/pages/navigation.js
@@ -35,6 +35,10 @@ export default [
         link: '#layout-components-cta',
         title: 'CTA',
       },
+      {
+        link: '#layout-components-form-layout',
+        title: 'Form Layout',
+      },
       {
         link: '#layout-components-list',
         title: 'List',

diff --git a/src/lib/components/layout/CardList/CardList.scss b/src/lib/components/layout/CardList/CardList.scss
@@ -1,3 +1,4 @@
+@import '../../../styles/settings/layouts';
 @import '../../../styles/tools/breakpoints';
 @import '../../../styles/tools/offset';
 @import './theme';
@@ -8,7 +9,7 @@
   grid-template-columns: 1fr;
   grid-template-rows: auto;
   grid-gap: $card-list-grid-gap;
-  margin-bottom: offset(4);
+  margin-bottom: $layout-common-bottom-offset;
 
   @include breakpoint-up(sm) {
     grid-template-columns: repeat(auto-fit, minmax($card-list-card-min-width, $card-list-card-max-width));

diff --git a/src/lib/components/layout/FormLayout/FormLayout.jsx b/src/lib/components/layout/FormLayout/FormLayout.jsx
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './FormLayout.scss';
+
+const FormLayout = (props) => {
+  const {
+    children,
+    fieldLayout,
+    id,
+  } = props;
+
+  if (!children) {
+    return null;
+  }
+
+  const fieldLayoutClass = (layout) => {
+    if (layout === 'horizontal') {
+      return styles.rootFieldLayoutHorizontal;
+    }
+
+    return styles.rootFieldLayoutVertical;
+  };
+
+  return (
+    <div
+      id={id}
+      className={[
+        styles.root,
+        fieldLayoutClass(fieldLayout),
+      ].join(' ')}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        return React.cloneElement(child, {
+          inFormLayout: true,
+          layout: fieldLayout,
+        });
+      })}
+    </div>
+  );
+};
+
+FormLayout.defaultProps = {
+  children: null,
+  fieldLayout: 'vertical',
+  id: undefined,
+};
+
+FormLayout.propTypes = {
+  children: PropTypes.node,
+  fieldLayout: PropTypes.oneOf(['horizontal', 'vertical']),
+  id: PropTypes.string,
+};
+
+export default FormLayout;
diff --git a/src/lib/components/layout/FormLayout/FormLayout.scss b/src/lib/components/layout/FormLayout/FormLayout.scss
@@ -0,0 +1,22 @@
+@import '../../../styles/settings/forms';
+@import '../../../styles/settings/forms-theme';
+@import '../../../styles/settings/layouts';
+@import '../../../styles/tools/breakpoints';
+@import '../../../styles/tools/offset';
+
+.root {
+  margin-bottom: $layout-common-bottom-offset;
+}
+
+.rootFieldLayoutVertical,
+.rootFieldLayoutHorizontal {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-row-gap: $form-field-vertical-outer-spacing;
+}
+
+.rootFieldLayoutHorizontal {
+  @include breakpoint-up($form-field-horizontal-breakpoint) {
+    grid-template-columns: $form-layout-horizontal-label-width 1fr;
+  }
+}
diff --git a/src/lib/components/layout/FormLayout/index.js b/src/lib/components/layout/FormLayout/index.js
@@ -0,0 +1 @@
+export { default } from './FormLayout';
diff --git a/src/lib/components/layout/List/List.scss b/src/lib/components/layout/List/List.scss
@@ -1,7 +1,8 @@
+@import '../../../styles/settings/layouts';
 @import '../../../styles/tools/offset';
 
 .root {
-  margin-bottom: offset(4);
+  margin-bottom: $layout-common-bottom-offset;
 }
 
 .list {

diff --git a/src/lib/components/layout/Media/Media.scss b/src/lib/components/layout/Media/Media.scss
@@ -1,9 +1,10 @@
+@import '../../../styles/settings/layouts';
 @import '../../../styles/tools/offset';
 
 .media {
   display: flex;
   align-items: flex-start;
-  margin-bottom: offset(3);
+  margin-bottom: $layout-common-bottom-offset;
 }
 
 .object {

diff --git a/src/lib/components/layout/Row/Row.scss b/src/lib/components/layout/Row/Row.scss
@@ -1,10 +1,11 @@
+@import '../../../styles/settings/layouts';
 @import '../../../styles/tools/offset';
 
 .row {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  margin-bottom: offset(3);
+  margin-bottom: $layout-common-bottom-offset;
 }
 
 .start,

diff --git a/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap b/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap
@@ -48,6 +48,7 @@ exports[`rendering renders correctly 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="resetEmailInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="E-mail"
@@ -62,6 +63,7 @@ exports[`rendering renders correctly 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -198,6 +200,7 @@ exports[`rendering renders correctly 2`] = `
                 fullWidth={true}
                 helperText={null}
                 id="resetEmailInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="E-mail"
@@ -212,6 +215,7 @@ exports[`rendering renders correctly 2`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -376,6 +380,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="custom-id__resetEmailInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="E-mail"
@@ -390,6 +395,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium