@formio/uswds 2.8.0 → 2.8.2

package/lib/components/Select.js

@@ -5,7 +5,11 @@ const SelectComponent = js_1.Components.components.select;
 class USWDSSelectComponent extends SelectComponent {
     choicesOptions() {
         const choicesOptions = super.choicesOptions();
-        choicesOptions.classNames.containerInner = [...choicesOptions.classNames.containerInner, 'usa-select', 'maxw-full'];
+        choicesOptions.classNames.containerInner = [
+            ...choicesOptions.classNames.containerInner,
+            'usa-select',
+            'maxw-full',
+        ];
         return choicesOptions;
     }
 }

package/lib/components/index.js

@@ -10,5 +10,5 @@ exports.default = {
     radio: Radio_1.default,
     button: Button_1.default,
     checkbox: Checkbox_1.default,
-    selectboxes: SelectBoxes_1.default
+    selectboxes: SelectBoxes_1.default,
 };

package/lib/components/radio/Radio.js

@@ -5,6 +5,7 @@ const Radio_form_1 = require("./Radio.form");
 const RadioComponent = js_1.Components.components.radio;
 RadioComponent.editForm = Radio_form_1.default;
 const render = RadioComponent.prototype.render;
+// GOTCHA(G-US02)
 RadioComponent.prototype.render = function () {
     this.noField = true;
     return render.call(this);

package/lib/css/styles.css

@@ -77,7 +77,8 @@ span[role=link]:hover {
   border: 0;
 }
 
-.dropdown-item:hover, .dropdown-item:focus {
+.dropdown-item:hover,
+.dropdown-item:focus {
   color: #1e2125;
   background-color: #e9ecef;
 }
@@ -101,7 +102,7 @@ span[role=link]:hover {
 }
 
 .flatpickr-day.selected {
-  background: #0073EC !important;
+  background: #0073ec !important;
 }
 
 .flatpickr-day:hover,
@@ -152,7 +153,8 @@ span[role=link]:hover {
   line-height: 24px;
   color: #8a8a8a;
 }
-.formio-dialog.formio-dialog-theme-default .formio-dialog-content .formio-dialog-close:hover:before, .formio-dialog.formio-dialog-theme-default .formio-dialog-content .formio-dialog-close :active:before {
+.formio-dialog.formio-dialog-theme-default .formio-dialog-content .formio-dialog-close:hover:before,
+.formio-dialog.formio-dialog-theme-default .formio-dialog-content .formio-dialog-close :active:before {
   color: #6b6b6b;
 }
 
@@ -243,7 +245,8 @@ span[role=link]:hover {
   width: 100%;
   margin-top: 0.5rem;
 }
-.input-group .usa-input, .input-group .usa-textarea {
+.input-group .usa-input,
+.input-group .usa-textarea {
   position: relative;
   z-index: 1;
   width: 1%;
@@ -406,7 +409,8 @@ span[role=link]:hover {
 }
 
 /* USWDS overrides */
-b, strong {
+b,
+strong {
   font-weight: bold !important;
 }
 
@@ -426,7 +430,8 @@ ul.usa-sidenav {
   border-top: 0px;
 }
 
-.usa-input--error.usa-select, .usa-input--success.usa-select {
+.usa-input--error.usa-select,
+.usa-input--success.usa-select {
   height: auto;
 }
 
@@ -469,7 +474,8 @@ ul.usa-sidenav {
   max-width: 100% !important;
 }
 
-.usa-button + .has-error, .usa-button + .has-success {
+.usa-button + .has-error,
+.usa-button + .has-success {
   display: none;
 }
 
@@ -478,7 +484,8 @@ ul.usa-sidenav {
   box-shadow: 0 0 0 2px #c9c9c9, inset 0 0 0 3px #fff;
 }
 
-.usa-radio, .usa-checkbox {
+.usa-radio,
+.usa-checkbox {
   background: none !important;
 }
 

package/lib/sass/styles.scss

@@ -15,7 +15,7 @@ $color-lightest: #fff;
 $color-dark: #000;
 $color-tooltip: #1b1b1b;
 
-span[role="link"] {
+span[role='link'] {
   &:hover {
     text-decoration: underline;
     cursor: pointer;
@@ -103,7 +103,8 @@ span[role="link"] {
   border: 0;
 }
 
-.dropdown-item:hover, .dropdown-item:focus {
+.dropdown-item:hover,
+.dropdown-item:focus {
   color: #1e2125;
   background-color: #e9ecef;
 }
@@ -127,7 +128,7 @@ span[role="link"] {
 }
 
 .flatpickr-day.selected {
-  background: #0073EC !important;
+  background: #0073ec !important;
 }
 
 .flatpickr-day:hover,
@@ -184,7 +185,8 @@ span[role="link"] {
         color: #8a8a8a;
       }
 
-      &:hover:before, :active:before {
+      &:hover:before,
+      :active:before {
         color: #6b6b6b;
       }
     }
@@ -236,7 +238,7 @@ span[role="link"] {
   word-wrap: break-word;
   background-clip: border-box;
   border: 1px solid $color-dark;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
 }
 
 .formio-usa-card-body {
@@ -249,11 +251,11 @@ span[role="link"] {
 .formio-usa-card-header {
   position: relative;
   display: flex;
-  padding: .5rem;
+  padding: 0.5rem;
   margin-bottom: 0;
   margin-top: 1px;
   border-bottom: 1px solid $color-dark;
-  border-radius: .25rem .25rem 0 0;
+  border-radius: 0.25rem 0.25rem 0 0;
   background-color: $color-lighter;
 }
 
@@ -276,7 +278,8 @@ span[role="link"] {
   align-items: stretch;
   width: 100%;
   margin-top: 0.5rem;
-  & .usa-input, .usa-textarea {
+  & .usa-input,
+  .usa-textarea {
     position: relative;
     z-index: 1;
     width: 1%;
@@ -351,9 +354,9 @@ span[role="link"] {
   display: flex;
   height: 1rem;
   overflow: hidden;
-  font-size: .75rem;
+  font-size: 0.75rem;
   background-color: #e9ecef;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   .progress-bar {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -368,7 +371,7 @@ span[role="link"] {
     color: #fff;
     text-align: center;
     background-color: #007bff;
-    transition: width .6s ease;
+    transition: width 0.6s ease;
   }
 }
 
@@ -445,7 +448,8 @@ span[role="link"] {
 
 /* USWDS overrides */
 
-b, strong {
+b,
+strong {
   font-weight: bold !important;
 }
 
@@ -465,19 +469,20 @@ ul.usa-sidenav {
   border-top: 0px;
 }
 
-.usa-input--error.usa-select, .usa-input--success.usa-select {
+.usa-input--error.usa-select,
+.usa-input--success.usa-select {
   height: auto;
 }
 
 .usa-accordion__button {
- &.non-collapsible-panel--button {
-   background-image: none;
+  &.non-collapsible-panel--button {
+    background-image: none;
 
-   &:hover {
+    &:hover {
       background-color: $color-lighter;
       cursor: auto;
-   }
- }
+    }
+  }
 }
 
 .usa-table {
@@ -511,16 +516,22 @@ ul.usa-sidenav {
   max-width: 100% !important;
 }
 
-.usa-button + .has-error, .usa-button + .has-success {
+.usa-button + .has-error,
+.usa-button + .has-success {
   display: none;
 }
 
 .usa-radio__input:disabled:checked + .usa-radio__label::before {
-  -webkit-box-shadow: 0 0 0 2px $color-light, inset 0 0 0 3px $color-lightest;
-          box-shadow: 0 0 0 2px $color-light, inset 0 0 0 3px $color-lightest;
+  -webkit-box-shadow:
+    0 0 0 2px $color-light,
+    inset 0 0 0 3px $color-lightest;
+  box-shadow:
+    0 0 0 2px $color-light,
+    inset 0 0 0 3px $color-lightest;
 }
 
-.usa-radio, .usa-checkbox {
+.usa-radio,
+.usa-checkbox {
   background: none !important;
 }
 
@@ -538,100 +549,104 @@ ul.usa-sidenav {
   }
 }
 
-div[ref="modalContents"] .usa-form-group--error {
+div[ref='modalContents'] .usa-form-group--error {
   margin-top: 0;
 }
 
 @media print {
-  div[class*=":grid-col-1"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:8.3333333333%;
+  div[class*=':grid-col-1'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 8.3333333333%;
   }
 
-  div[class*=":grid-col-2"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:16.6666666667%;
+  div[class*=':grid-col-2'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 16.6666666667%;
   }
 
-  div[class*=":grid-col-3"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:25%;
+  div[class*=':grid-col-3'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 25%;
   }
 
-  div[class*=":grid-col-4"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:33.3333333333%;
+  div[class*=':grid-col-4'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 33.3333333333%;
   }
 
-  div[class*=":grid-col-5"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:41.6666666667%;
+  div[class*=':grid-col-5'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 41.6666666667%;
   }
 
-  div[class*=":grid-col-6"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:50%;
+  div[class*=':grid-col-6'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 50%;
   }
 
-  div[class*=":grid-col-7"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:58.3333333333%;
+  div[class*=':grid-col-7'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 58.3333333333%;
   }
 
-  div[class*=":grid-col-8"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:66.6666666667%;
+  div[class*=':grid-col-8'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 66.6666666667%;
   }
 
-  div[class*=":grid-col-9"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:75%;
+  div[class*=':grid-col-9'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 75%;
   }
 
-  div[class*=":grid-col-10"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:83.3333333333%;
+  div[class*=':grid-col-10'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 83.3333333333%;
   }
 
-  div[class*=":grid-col-11"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:91.6666666667%;
+  div[class*=':grid-col-11'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 91.6666666667%;
   }
 
-  div[class*=":grid-col-12"] {
-    -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-          flex:0 0 auto;
-    width:100%;
+  div[class*=':grid-col-12'] {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: 100%;
   }
 
   .usa-checkbox__input:checked:disabled + .usa-checkbox__label::before {
     background-image: none;
     background-color: $color-light;
-    -webkit-box-shadow: 0 0 0 2px $color-light, inset 0 0 0 3px $color-lightest;
-    box-shadow: 0 0 0 2px $color-light, inset 0 0 0 3px $color-lightest;
+    -webkit-box-shadow:
+      0 0 0 2px $color-light,
+      inset 0 0 0 3px $color-lightest;
+    box-shadow:
+      0 0 0 2px $color-light,
+      inset 0 0 0 3px $color-lightest;
     -webkit-print-color-adjust: exact;
     text-indent: 0;
   }
@@ -647,4 +662,4 @@ div[ref="modalContents"] .usa-form-group--error {
 
 .formio-choices .choices__list--dropdown .choices__list {
   width: 100%;
-}
+}

package/lib/templates/uswds/fieldset/form.ejs.js

@@ -6,6 +6,8 @@ var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 __p += '<fieldset class="usa-fieldset">\n  ';
  if (ctx.component.legend) { ;
+__p += '\n  ';
+ /* GOTCHA(G-US03) */ ;
 __p += '\n  <legend ref="header" id="l-' +
 ((__t = (ctx.instance.id)) == null ? '' : __t) +
 '-legend" class="usa-sr-only">\n    ' +

package/lib/templates/uswds/index.js

@@ -62,7 +62,9 @@ exports.default = {
         }
         switch (type) {
             case 'class':
-                return this.cssClasses.hasOwnProperty(text.toString()) ? this.cssClasses[text.toString()] : text;
+                return this.cssClasses.hasOwnProperty(text.toString())
+                    ? this.cssClasses[text.toString()]
+                    : text;
         }
         return text;
     },
@@ -120,6 +122,7 @@ exports.default = {
     wizardNav: wizardNav_1.default,
     size: size_1.default,
     cssClasses: cssClasses_1.default,
+    // GOTCHA(G-US01)
     iconClass: iconClass_js_1.default,
     defaultIconset: 'fa',
 };

package/lib/templates/uswds/size.js

@@ -2,10 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = (size) => {
     switch (size) {
-        case 'xs': return '';
-        case 'sm': return 'mobile-lg';
-        case 'md': return 'tablet';
-        case 'lg': return 'desktop';
-        default: return 'tablet';
+        case 'xs':
+            return '';
+        case 'sm':
+            return 'mobile-lg';
+        case 'md':
+            return 'tablet';
+        case 'lg':
+            return 'desktop';
+        default:
+            return 'tablet';
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/uswds",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "description": "US Web Design System templates for form.io",
   "main": "lib/index.js",
   "pre-commit": [
@@ -23,7 +23,7 @@
     "Standards"
   ],
   "peerDependencies": {
-    "@formio/js": "^5.4.0"
+    "@formio/js": "^5.4.2"
   },
   "devDependencies": {
     "@types/chai": "^4.2.22",
@@ -51,7 +51,7 @@
     "typescript": "^4.4.3",
     "webpack": "5.38.1",
     "webpack-cli": "^4.8.0",
-    "@formio/js": "^5.4.0"
+    "@formio/js": "^5.4.2"
   },
   "author": "Form.io Developers <support@form.io>",
   "license": "OSLv3",
@@ -70,6 +70,8 @@
     "bundle:dev": "NODE_OPTIONS=--openssl-legacy-provider webpack",
     "bundle:prod": "NODE_OPTIONS=--openssl-legacy-provider webpack --config webpack.prod.js",
     "build": "gulp build && tsc && npm run bundle:prod && npm run bundle:dev",
-    "lint": "tslint -p ."
+    "lint": "tslint -p .",
+    "check-types": "tsc --noEmit",
+    "lint:fix": "tslint -p . --fix"
   }
 }

package/Readme.md

@@ -1,66 +0,0 @@
-# Form.io United States Web Design System Templates
-
-This repository will change the rendering of forms in formio.js so that it uses html and classes compatible with the [United States Web Design System](https://designsystem.digital.gov/) framework.
-
-## Usage
-
-```javascript
-import uswds from '@formio/uswds';
-import { Formio } from '@formio/js';
-Formio.use(uswds);
-```
-
-Or if you would like to embed directly within your website, you can use the following.
-
-```html
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css">
-        <link rel="stylesheet" href="https://cdn.form.io/js/formio.form.min.css">
-        <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
-        <script src="https://cdn.form.io/js/formio.form.min.js"></script>
-        <script src="https://cdn.form.io/uswds/uswds.min.js"></script>
-    </head>
-    <body>
-        <div id="formio"></div>
-        <script type="text/javascript">
-            Formio.use(uswds);
-            Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
-        </script>
-    </body>
-</html>
-```
-
-You can try out this by going to the following JSFiddle - https://jsfiddle.net/travistidwell/yrwp9m24/1/
-
-## Form Builder
-In addition to being a Form Renderer, you can also use this library to embed the Form.io Form Builder within your own application using the following.
-
-```html
-<html>
-    <head>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css">
-        <link rel="stylesheet" href="https://cdn.form.io/js/formio.full.min.css">
-        <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
-        <script src="https://cdn.form.io/js/formio.full.min.js"></script>
-        <script src="https://cdn.form.io/uswds/uswds.min.js"></script>
-    </head>
-    <body>
-        <div id="builder"></div>
-        <script type="text/javascript">
-            Formio.use(uswds);
-            Formio.builder(document.getElementById('builder'));
-        </script>
-    </body>
-</html>
-```
-
-## Example Application
-For an example of how this platform works, please see the following application.
-
-[https://formio.github.io/uswds](https://formio.github.io/uswds)