Update to uswds v2

package.json

@@ -33,7 +33,7 @@
   },
   "homepage": "https://github.com/usds/us-forms-system#readme",
   "devDependencies": {
-    "autoprefixer": "^8.6.5",
+    "autoprefixer": "^9.8.6",
     "axe-core": "^2.4.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.24.1",
@@ -68,26 +68,26 @@
     "isomorphic-fetch": "http://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
     "jsdom": "^13.2.0",
     "jsonschema": "^1.1.1",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
     "lodash-deep": "^2.0.0",
-    "markdown-link-check": "^3.7.2",
+    "markdown-link-check": "^3.8.1",
     "mocha": "^5.2.0",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.14.1",
     "null-loader": "^0.1.1",
-    "postcss-cli": "^5.0.1",
+    "postcss-cli": "^7.1.2",
     "react": "^15.6.2",
     "react-dom": "^15.6.2",
     "react-test-renderer": "^15.5.4",
     "redux-thunk": "^2.3.0",
     "sass-lint": "^1.13.1",
     "sinon": "^6.3.5",
     "skin-deep": "^1.0.0",
-    "uswds": "^1.6.9"
+    "uswds": "^2.8.1"
   },
   "peerDependencies": {
     "react": "^15.5.4",
     "react-dom": "^15.6.2",
-    "uswds": "^1.6.3"
+    "uswds": "^2.8.1"
   },
   "dependencies": {
     "@department-of-veterans-affairs/react-jsonschema-form": "^1.0.0",

src/js/components/ErrorableCheckbox.jsx

@@ -24,7 +24,7 @@ class ErrorableCheckbox extends React.Component {
     if (this.props.errorMessage) {
       errorSpanId = `${this.inputId}-error-message`;
       errorSpan = (
-        <span className="usa-input-error-message" role="alert" id={errorSpanId}>
+        <span className="usa-error-message" role="alert" id={errorSpanId}>
           <span className="sr-only">Error</span> {this.props.errorMessage}
         </span>
       );
@@ -36,8 +36,8 @@ class ErrorableCheckbox extends React.Component {
       requiredSpan = <span className="form-required-span">*</span>;
     }
 
-    let className = `form-checkbox${
-      this.props.errorMessage ? ' usa-input-error' : ''
+    let className = `usa-checkbox${
+      this.props.errorMessage ? ' usa-input--error' : ''
     }`;
     if (!_.isUndefined(this.props.className)) {
       className = `${className} ${this.props.className}`;
@@ -51,10 +51,11 @@ class ErrorableCheckbox extends React.Component {
           id={this.inputId}
           name={this.props.name}
           type="checkbox"
+          className="usa-checkbox__input"
           onChange={this.handleChange}/>
         <label
           className={
-            this.props.errorMessage ? 'usa-input-error-label' : undefined
+            this.props.errorMessage ? 'usa-checkbox__label usa-label--error' : 'usa-checkbox__label'
           }
           name={`${this.props.name}-label`}
           htmlFor={this.inputId}>

src/js/components/FieldTemplate.jsx

@@ -42,26 +42,26 @@ export default function FieldTemplate(props) {
   let errorSpan;
   let errorClass;
   if (hasErrors) {
-    errorClass = isDateField ? 'input-error-date' : 'usa-input-error';
+    errorClass = isDateField ? 'input-error-date' : 'usa-input--error';
     errorSpanId = `${id}-error-message`;
     errorSpan = (
-      <span className="usa-input-error-message" role="alert" id={errorSpanId}>
+      <span className="usa-error-message" role="alert" id={errorSpanId}>
         <span className="sr-only">Error</span> {rawErrors[0]}
       </span>
     );
   }
 
   const containerClassNames = classNames(
-    'schemaform-field-template',
+    'usa-fieldset schemaform-field-template',
     _.get(['ui:options', 'classNames'], uiSchema)
   );
   const labelClassNames = classNames({
-    'usa-input-error-label': hasErrors && !isDateField,
+    'usa-label--error': hasErrors && !isDateField,
     'schemaform-label': true
   });
 
   const inputWrapperClassNames = classNames('schemaform-widget-wrapper', {
-    'usa-input-error form-error-date': isDateField && hasErrors
+    'usa-input--error form-error-date': isDateField && hasErrors
   });
 
   const noWrapperContent = !showFieldLabel &&

src/js/containers/FormApp.jsx

@@ -61,16 +61,18 @@ class FormApp extends React.Component {
 
     return (
       <div>
-        <div className="row">
-          <div className="usa-width-two-thirds medium-8 columns">
-            <Element name="topScrollElement"/>
-            {formTitle}
-            {formNav}
-            {renderedChildren}
+        <div className="grid-container">
+          <div className="grid-row grid-gap">
+            <div className="grid-col-8">
+              <Element name="topScrollElement"/>
+              {formTitle}
+              {formNav}
+              {renderedChildren}
+            </div>
           </div>
+          {footer}
+          <span className="js-test-location hidden" data-location={trimmedPathname} hidden></span>
         </div>
-        {footer}
-        <span className="js-test-location hidden" data-location={trimmedPathname} hidden></span>
       </div>
     );
   }

src/js/containers/FormPage.jsx

@@ -108,6 +108,7 @@ class FormPage extends React.Component {
         <SchemaForm
           name={route.pageConfig.pageKey}
           title={route.pageConfig.title}
+          className="usa-form"
           data={data}
           schema={schema}
           uiSchema={uiSchema}
@@ -116,20 +117,20 @@ class FormPage extends React.Component {
           uploadFile={this.props.uploadFile}
           onChange={this.onChange}
           onSubmit={this.onSubmit}>
-          <div className="row form-progress-buttons schemaform-buttons">
-            <div className="small-6 medium-5 columns">
+          <div className="grid-row grid-gap form-progress-buttons schemaform-buttons">
+            <div className="grid-col-6">
               { !isFirstRoutePage &&
                 <ProgressButton
                   onButtonClick={this.goBack}
                   buttonText="Back"
-                  buttonClass="usa-button-secondary"
+                  buttonClass="usa-button usa-button--outline"
                   beforeText="«"/> }
             </div>
-            <div className="small-6 medium-5 end columns">
+            <div className="grid-col-6">
               <ProgressButton
                 submitButton
                 buttonText="Continue"
-                buttonClass="usa-button-primary"
+                buttonClass="usa-button usa-button--primary"
                 afterText="»"/>
             </div>
           </div>

src/js/review/ArrayField.jsx

@@ -187,7 +187,7 @@ class ArrayField extends React.Component {
             <h5 className="form-review-panel-page-header">{title}</h5>
             {itemsNeeded && <span className="schemaform-review-array-warning-icon"/>}
             {!itemCountLocked &&
-              <button type="button" className="edit-btn primary-outline" onClick={() => this.handleAdd()}>Add Another</button>
+              <button type="button" className="usa-button usa-button--outline edit-btn" onClick={() => this.handleAdd()}>Add Another</button>
             }
           </div>}
         <div className="usfs-growable usfs-growable-review">
@@ -203,8 +203,8 @@ class ArrayField extends React.Component {
               return (
                 <div key={index} className="usfs-growable-background">
                   <Element name={`table_${fieldName}_${index}`}/>
-                  <div className="row small-collapse schemaform-array-row" id={`table_${fieldName}_${index}`}>
-                    <div className="small-12 columns usfs-growable-expanded">
+                  <div className="grid-row small-collapse schemaform-array-row" id={`table_${fieldName}_${index}`}>
+                    <div className="grid-col-fill usfs-growable-expanded">
                       {isLast && uiOptions.itemName && items.length > 1
                         ? <h5>New {uiOptions.itemName}</h5>
                         : null}
@@ -220,11 +220,11 @@ class ArrayField extends React.Component {
                         onChange={(data) => this.handleSetData(index, data)}
                         onEdit={() => this.handleEdit(index, !isEditing)}
                         onSubmit={() => this.handleSave(index)}>
-                        <div className="row small-collapse">
-                          <div className="small-6 left columns">
+                        <div className="grid-row small-collapse">
+                          <div className="grid-col-6">
                             <button className="float-left">Update</button>
                           </div>
-                          <div className="small-6 right columns">
+                          <div className="grid-col-6">
                             {showReviewButton && <button type="button" className="usa-button-secondary float-right" onClick={() => this.handleRemove(index)}>Remove</button>}
                           </div>
                         </div>
@@ -236,7 +236,7 @@ class ArrayField extends React.Component {
             }
             return (
               <div key={index} className="usfs-growable-background">
-                <div className="row small-collapse">
+                <div className="grid-row small-collapse">
                   <SchemaForm
                     reviewMode
                     data={item}
@@ -254,8 +254,8 @@ class ArrayField extends React.Component {
             );
           })}
           {itemsNeeded &&
-            <div className="usa-alert usa-alert-warning usa-alert-no-color usa-alert-mini">
-              <div className="usa-alert-body">
+            <div className="usa-alert usa-alert--warning usa-alert--slim">
+              <div className="usa-alert__body">
                 {_.get('ui:errorMessages.minItems', uiSchema) || 'You need to add at least one item.'}
               </div>
             </div>}

src/js/review/ReviewCollapsibleChapter.jsx

@@ -91,7 +91,7 @@ export default class ReviewCollapsibleChapter extends React.Component {
 
     if (this.props.open) {
       pageContent = (
-        <div className="usa-accordion-content schemaform-chapter-accordion-content" aria-hidden="false">
+        <div>
           {ChapterDescription &&
             <ChapterDescription
               viewedPages={viewedPages}
@@ -156,7 +156,7 @@ export default class ReviewCollapsibleChapter extends React.Component {
                     {!editing ? <div/> : <ProgressButton
                       submitButton
                       buttonText="Update Page"
-                      buttonClass="usa-button-primary"/>}
+                      buttonClass="usa-button usa-button--primary"/>}
                   </SchemaForm>}
                 {arrayFields.map(arrayField => (
                   <div key={arrayField.path} className="form-review-array">
@@ -181,30 +181,26 @@ export default class ReviewCollapsibleChapter extends React.Component {
       );
     }
 
-    const classes = classNames('usa-accordion-bordered', 'form-review-panel', {
+    const classes = classNames('usa-accordion usa-accordion--bordered', 'form-review-panel', {
       'schemaform-review-chapter-warning': showUnviewedPageWarning
     });
 
     return (
       <div id={`${this.id}-collapsiblePanel`} className={classes}>
         <Element name={`chapter${this.props.chapterKey}ScrollElement`}/>
-        <ul className="usa-unstyled-list">
-          <li>
-            <div className="accordion-header clearfix schemaform-chapter-accordion-header">
-              <button
-                className="usa-button-unstyled"
-                aria-expanded={this.props.open ? 'true' : 'false'}
-                aria-controls={`collapsible-${this.id}`}
-                onClick={this.props.toggleButtonClicked}>
-                {chapterTitle}
-              </button>
-              {showUnviewedPageWarning && <span className="schemaform-review-chapter-warning-icon"/>}
-            </div>
-            <div id={`collapsible-${this.id}`}>
-              {pageContent}
-            </div>
-          </li>
-        </ul>
+        <div className="usa-accordion__heading clearfix schemaform-chapter-accordion-header">
+          <button
+            className="usa-accordion__button"
+            aria-expanded={this.props.open ? 'true' : 'false'}
+            aria-controls={`collapsible-${this.id}`}
+            onClick={this.props.toggleButtonClicked}>
+            {chapterTitle}
+          </button>
+          {showUnviewedPageWarning && <span className="schemaform-review-chapter-warning-icon"/>}
+        </div>
+        <div id={`collapsible-${this.id}`} className="usa-accordion__content schemaform-chapter-accordion-content" aria-hidden="false">
+          {pageContent}
+        </div>
       </div>
     );
   }