Merge pull request #122 from sonatype/RSC-162-Refactor-form-layout

refactor form layout example page RSC-162
sonatype · Aug 27, 2020 · 2999bfe · 2999bfe
2 parents 377eeb0 + bacb658
commit 2999bfe
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 126 deletions.
diff --git a/gallery/package.json b/gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components-gallery",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "Gallery application to demonstrate usage and look of Sonatype shared UI components",
   "main": "src/main.ts",
   "scripts": {

diff --git a/gallery/src/pageConfig.ts b/gallery/src/pageConfig.ts
@@ -33,7 +33,7 @@ import NxIconPage from './styles/NxIcon/NxIconPage';
 import NxFontAwesomeIconPage from './components/NxFontAwesomeIcon/NxFontAwesomeIconPage';
 import NxCounterPage from './styles/NxCounter/NxCounterPage';
 import NxThreatNumberPage from './styles/NxThreatNumber/NxThreatNumberPage';
-//import NxFormLayoutPage from './styles/NxFormLayout/NxFormLayoutPage';
+import NxFormLayoutPage from './styles/NxFormLayout/NxFormLayoutPage';
 import NxSubmitMaskPage from './components/NxSubmitMask/NxSubmitMaskPage';
 import NxStatefulSubmitMaskPage from './components/NxStatefulSubmitMask/NxStatefulSubmitMaskPage';
 import NxTablePage from './components/NxTable/NxTablePage';
@@ -134,7 +134,7 @@ const pageConfig: PageConfig = {
     'nx-truncate-ellipsis': NxTruncatePage
   },
   'Layout Examples': {
-    //'Form Layout Styles': NxFormLayoutPage,
+    'Form Layout Styles': NxFormLayoutPage,
     'Page Layout': PageLayoutPage
   },
   'JavaScript & TypeScript Utilities': {

diff --git a/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx b/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx
@@ -4,53 +4,87 @@
  * the terms of the Eclipse Public License 2.0 which accompanies this
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
-import React from 'react';
+import React, { FormEvent, useState } from 'react';
 
 import { NxCheckbox } from '@sonatype/react-shared-components';
 import { NxRadio } from '@sonatype/react-shared-components';
-
-import { NxFontAwesomeIcon } from '@sonatype/react-shared-components';
-import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+import { NxButton } from '@sonatype/react-shared-components';
+import { NxStatefulTextInput } from '@sonatype/react-shared-components';
+import { NxInfoAlert } from '@sonatype/react-shared-components';
 
 export default function NxFormLayoutExample() {
+  function validator(val: string) {
+    return val.length ? null : 'Must be non-empty';
+  }
+
+  const [isRed, setIsRed] = useState(false),
+      [isBlue, setIsBlue] = useState(false),
+      [isGreen, setIsGreen] = useState(false),
+      toggleRed = () => setIsRed(!isRed),
+      toggleBlue = () => setIsBlue(!isBlue),
+      toggleGreen = () => setIsGreen(!isGreen);
+
+  const [color, setColor] = useState<string | null>(null);
+
+  function onSubmit(evt: FormEvent) {
+    evt.preventDefault();
+    alert('Submitted!');
+  }
+
   return (
-    <form className="nx-form">
+    <form className="nx-form" onSubmit={onSubmit}>
       <div className="nx-form-row">
         <div className="nx-form-group">
           <label className="nx-label">
-            <span className="nx-label__text">Horizontal layout</span>
-            <span className="nx-sub-label">
-              <NxFontAwesomeIcon icon={faCalendar}/>
-              <span>Sub-label with icon.</span>
-            </span>
-            <input type="text" className="nx-text-input"/>
+            <span className="nx-label__text">Label</span>
+            <NxStatefulTextInput validator={validator}/>
           </label>
         </div>
         <div className="nx-form-group">
-          <label className="nx-label">
-            <span className="nx-label__text">Second column</span>
-            <span className="nx-sub-label">This is a sub-label.</span>
-            <input type="text" className="nx-text-input"/>
+          <label className="nx-label nx-label--optional">
+            <span className="nx-label__text">Label</span>
+            <NxStatefulTextInput/>
           </label>
         </div>
-        <div className="nx-form-group">
-          <button className="nx-btn" type="button">Button</button>
-        </div>
-      </div>
-      <div className="nx-form-row">
-        <fieldset className="nx-fieldset">
-          <legend className="nx-label nx-label--optional">Checkboxes</legend>
-          <NxCheckbox isChecked={false}>Checkbox 1</NxCheckbox>
-          <NxCheckbox isChecked={true}>Checkbox 2</NxCheckbox>
-          <NxCheckbox isChecked={false}>Checkbox 3</NxCheckbox>
-        </fieldset>
-        <fieldset className="nx-fieldset">
-          <legend className="nx-label">Radio buttons</legend>
-          <NxRadio name="demo1" value="demo1" isChecked={true}>Radio Button 1</NxRadio>
-          <NxRadio name="demo2" value="demo2" isChecked={false}>Radio Button 2</NxRadio>
-          <NxRadio name="demo3" value="demo3" isChecked={true}>Radio Button 3</NxRadio>
-        </fieldset>
       </div>
+      <fieldset className="nx-fieldset">
+        <legend className="nx-legend">
+          <span className="nx-legend__text">
+            Checkboxes
+          </span>
+        </legend>
+        <NxCheckbox onChange={toggleRed} isChecked={isRed}>Red</NxCheckbox>
+        <NxCheckbox onChange={toggleBlue} isChecked={isBlue}>Blue</NxCheckbox>
+        <NxCheckbox onChange={toggleGreen} isChecked={isGreen}>Green</NxCheckbox>
+      </fieldset>
+      <fieldset className="nx-fieldset">
+        <legend className="nx-legend"><span className="nx-legend__text">Radio buttons</span></legend>
+        <NxRadio name="color"
+                 value="red"
+                 onChange={setColor}
+                 isChecked={color === 'red'}>
+          Red
+        </NxRadio>
+        <NxRadio name="color"
+                 value="purple"
+                 onChange={setColor}
+                 isChecked={color === 'purple'}>
+          Purple
+        </NxRadio>
+        <NxRadio name="color" value="green" onChange={setColor} isChecked={color === 'green'}>
+          Green
+        </NxRadio>
+        <NxRadio name="color" value="blue" onChange={setColor} isChecked={color === 'blue'}>
+          Blue
+        </NxRadio>
+      </fieldset>
+      <footer className="nx-form-footer">
+        <NxInfoAlert>This is a sample alert message</NxInfoAlert>
+        <div className="nx-btn-bar">
+          <NxButton type="button">Cancel</NxButton>
+          <NxButton variant="primary" type="submit">Submit</NxButton>
+        </div>
+      </footer>
     </form>
   );
 }
diff --git a/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx b/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx
@@ -4,61 +4,104 @@
  * the terms of the Eclipse Public License 2.0 which accompanies this
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
-import React from 'react';
+import React, { FormEvent, useState } from 'react';
 
 import { NxCheckbox } from '@sonatype/react-shared-components';
 import { NxRadio } from '@sonatype/react-shared-components';
+import { NxStatefulTextInput } from '@sonatype/react-shared-components';
+import { NxButton } from '@sonatype/react-shared-components';
+import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+import { NxFontAwesomeIcon } from '@sonatype/react-shared-components';
 
 export default function NxFormLayoutExample() {
+  function validator(val: string) {
+    return val.length ? null : 'Must be non-empty';
+  }
+
+  const [isRed, setIsRed] = useState(false),
+      [isBlue, setIsBlue] = useState(false),
+      [isGreen, setIsGreen] = useState(false),
+      toggleRed = () => setIsRed(!isRed),
+      toggleBlue = () => setIsBlue(!isBlue),
+      toggleGreen = () => setIsGreen(!isGreen);
+
+  const [color, setColor] = useState<string | null>(null);
+
+  function onSubmit(evt: FormEvent) {
+    evt.preventDefault();
+    alert('Submitted!');
+  }
+
   return (
-    <form className="nx-form">
+    <form className="nx-form" onSubmit={onSubmit}>
       <div className="nx-form-group">
         <label className="nx-label">
           <span className="nx-label__text">Label</span>
-          <input type="text" className="nx-text-input"/>
+          <NxStatefulTextInput validator={validator}/>
         </label>
       </div>
       <div className="nx-form-group">
         <label className="nx-label nx-label--optional">
           <span className="nx-label__text">Label</span>
-          <input type="text" className="nx-text-input"/>
+          <NxStatefulTextInput/>
         </label>
       </div>
       <div className="nx-form-group">
         <label className="nx-label nx-label--optional">
           <span className="nx-label__text">Long field</span>
-          <span className="nx-sub-label">This is a sub-label. The field element below is wider than the default.</span>
-          <input type="text" className="nx-text-input nx-text-input--long"/>
+          <span className="nx-sub-label">
+            <NxFontAwesomeIcon icon={faCalendar}/>
+            <span>This is a sub-label. The field element below is wider than the default.</span>
+          </span>
+          <NxStatefulTextInput className="nx-text-input--long"/>
         </label>
       </div>
       <fieldset className="nx-fieldset">
-        <legend className="nx-label">Checkboxes</legend>
-        <NxCheckbox isChecked={false}>Checkbox 1</NxCheckbox>
-        <NxCheckbox isChecked={true}>Checkbox 2</NxCheckbox>
-        <NxCheckbox isChecked={false}>Checkbox 3</NxCheckbox>
+        <legend className="nx-legend">
+          <span className="nx-legend__text">
+            Checkboxes
+          </span>
+        </legend>
+        <NxCheckbox onChange={toggleRed} isChecked={isRed}>Red</NxCheckbox>
+        <NxCheckbox onChange={toggleBlue} isChecked={isBlue}>Blue</NxCheckbox>
+        <NxCheckbox onChange={toggleGreen} isChecked={isGreen}>Green</NxCheckbox>
       </fieldset>
       <fieldset className="nx-fieldset">
-        <legend className="nx-label">Radio buttons</legend>
-        <NxRadio name="demo1" value="demo1" isChecked={true}>Radio Button 1</NxRadio>
-        <NxRadio name="demo2" value="demo2" isChecked={false}>Radio Button 2</NxRadio>
-        <NxRadio name="demo3" value="demo3" isChecked={true}>Radio Button 3</NxRadio>
+        <legend className="nx-legend nx-legend--optional">
+          <span className="nx-legend__text">Radio buttons</span>
+          <span className="nx-sub-label">Sub-label</span>
+        </legend>
+        <NxRadio name="color"
+                 value="red"
+                 onChange={setColor}
+                 isChecked={color === 'red'}>
+          Red
+        </NxRadio>
+        <NxRadio name="color"
+                 value="purple"
+                 onChange={setColor}
+                 isChecked={color === 'purple'}>
+          Purple
+        </NxRadio>
+        <NxRadio name="color" value="green" onChange={setColor} isChecked={color === 'green'}>
+          Green
+        </NxRadio>
+        <NxRadio name="color" value="blue" onChange={setColor} isChecked={color === 'blue'}>
+          Blue
+        </NxRadio>
       </fieldset>
       <div className="nx-form-group">
         <label className="nx-label">
           <span className="nx-label__text">Textarea</span>
-          <textarea className="nx-text-input"></textarea>
+          <NxStatefulTextInput type="textarea" placeholder="placeholder"/>
         </label>
       </div>
-      <div className="nx-form-group">
-        <label className="nx-label">
-          <span className="nx-label__text">Long Textarea</span>
-          <textarea className="nx-text-input nx-text-input--long"></textarea>
-        </label>
-      </div>
-      <div className="nx-btn-bar nx-btn-bar--forms">
-        <button className="nx-btn nx-btn--primary">Submit</button>
-        <button className="nx-btn">Cancel</button>
-      </div>
+      <footer className="nx-form-footer">
+        <div className="nx-btn-bar">
+          <NxButton type="button">Cancel</NxButton>
+          <NxButton variant="primary" type="submit">Submit</NxButton>
+        </div>
+      </footer>
     </form>
   );
 }
diff --git a/gallery/src/styles/NxFormLayout/NxFormLayoutPage.tsx b/gallery/src/styles/NxFormLayout/NxFormLayoutPage.tsx
@@ -6,14 +6,13 @@
  */
 import React from 'react';
 
-import { GalleryDescriptionTile } from '../../gallery-components/GalleryTiles';
-import { GalleryTile } from '../../gallery-components/GalleryTiles';
-import CodeExample from '../../CodeExample';
+import { GalleryDescriptionTile, GalleryExampleTile } from '../../gallery-components/GalleryTiles';
+
 import NxFormLayoutExample from './NxFormLayoutExample';
 import NxFormHorizontalLayoutExample from './NxFormHorizontalLayoutExample';
 
-const NxFormLayoutCode = require('!!raw-loader!./NxFormLayoutExample').default,
-    NxFormHorizontalLayoutCode = require('!!raw-loader!./NxFormHorizontalLayoutExample').default;
+const NxFormLayoutCode = require('!!raw-loader!./NxFormLayoutExample').default;
+const NxFormHorizontalLayoutCode = require('!!raw-loader!./NxFormHorizontalLayoutExample').default;
 
 const NxFormLayoutPage = () =>
   <>
@@ -107,15 +106,19 @@ const NxFormLayoutPage = () =>
       </table>
     </GalleryDescriptionTile>
 
-    <GalleryTile title="NX Form Layout Example">
-      <NxFormLayoutExample />
-      <CodeExample content={NxFormLayoutCode}/>
-    </GalleryTile>
+    <GalleryExampleTile title="General Example"
+                        codeExamples={NxFormLayoutCode}
+                        liveExample={NxFormLayoutExample}>
+      This example shows a standard vertical form layout with validation on some fields.
+    </GalleryExampleTile>
 
-    <GalleryTile title="NX Form Horizontal Layout Example">
-      <NxFormHorizontalLayoutExample />
-      <CodeExample content={NxFormHorizontalLayoutCode}/>
-    </GalleryTile>
+    <GalleryExampleTile title="Horizontal form layout"
+                        liveExample={NxFormHorizontalLayoutExample}
+                        codeExamples={NxFormHorizontalLayoutCode}>
+      This example demonstrates a form layout with horizontally placed text input fields. Note that the checkbox and
+      radio fieldsets remain vertically separated, they should not be placed side-by-side. This example also
+      demonstrates the use of an <code className="nx-code">NxErrorAlert</code> in the footer.
+    </GalleryExampleTile>
   </>;
 
 export default NxFormLayoutPage;
diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "Sonatype shared UI components and utilities written in React",
   "main": "index.js",
   "repository": {

diff --git a/lib/src/base-styles/_nx-btn-bar.scss b/lib/src/base-styles/_nx-btn-bar.scss
@@ -9,4 +9,5 @@
   @include container-horizontal;
 
   margin: $nx-spacing-sm 0;
+  text-align: right;
 }