@formio/uswds 2.3.9-rc.2 → 2.4.0-rc.3

package/lib/css/styles.css

@@ -79,8 +79,8 @@ span[role=link]:hover {
   margin: 0.5em 0 0.3em;
 }
 
-.formio-dialog.formio-dialog-theme-default .formio-dialog-content {
-  padding: 1.5em 1em 1em !important;
+.formio-dialog.formio-dialog-theme-default .component-edit-container {
+  padding: 0.6em;
 }
 .formio-dialog.formio-dialog-theme-default .formio-dialog-content .formio-dialog-close {
   right: 4px;
@@ -95,7 +95,16 @@ span[role=link]:hover {
   color: #6b6b6b;
 }
 
+.formio-dialog-content .usa-label {
+  padding-right: 30px;
+}
+.formio-dialog-content .usa-label label {
+  padding-right: 0;
+}
+
 .formio-dialog-buttons {
+  display: flex;
+  justify-content: flex-end;
   margin: 0 -0.5rem;
 }
 
@@ -176,7 +185,7 @@ span[role=link]:hover {
 .input-group .usa-input, .input-group .usa-textarea {
   position: relative;
   z-index: 1;
-  width: auto;
+  width: 1%;
   min-width: 50px;
   flex-grow: 1;
   margin-top: 0;
@@ -267,11 +276,11 @@ span[role=link]:hover {
   transition: width 0.6s ease;
 }
 
-.tooltip__trigger {
+.formio-tooltip__trigger {
   cursor: pointer;
 }
 
-.tooltip__body {
+.formio-tooltip__body {
   background-color: #1b1b1b;
   border-radius: 0.25rem;
   bottom: 0;
@@ -286,32 +295,32 @@ span[role=link]:hover {
   white-space: pre;
   z-index: 1000;
 }
-.tooltip__body.is-set {
+.formio-tooltip__body.formio-tooltip--is-set {
   display: block;
 }
-.tooltip__body--whitespace {
+.formio-tooltip__body--whitespace {
   white-space: normal;
   width: 250px;
 }
-.tooltip__body--right {
+.formio-tooltip__body--right {
   top: auto;
   transform: translateX(0);
 }
-.tooltip__body--left {
+.formio-tooltip__body--left {
   top: auto;
   left: 0;
   right: auto;
   transform: translateX(0);
 }
-.tooltip__body--bottom {
+.formio-tooltip__body--bottom {
   bottom: auto;
   top: 0;
 }
 
-.tooltip__wrapper {
+.formio-tooltip__wrapper {
   position: relative;
 }
-.tooltip__wrapper > span {
+.formio-tooltip__wrapper > span {
   font-weight: normal;
 }
 

package/lib/index.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     framework: string;
     templates: {
         uswds: {
+            transform(type: any, text: any): any;
             address: {
                 form: string;
             };
@@ -171,6 +172,17 @@ declare const _default: {
                 'formio-tab-panel-active': string;
                 'formio-tab-link-active': string;
                 'formio-tab-link-container-active': string;
+                'sr-only': string;
+                'formio-form-error': string;
+                'formio-label-error': string;
+                'formio-input-success': string;
+                'formio-input-error': string;
+                'formio-modal-save': string;
+                'formio-alert-danger': string;
+                'formio-alert-success': string;
+                'formio-modal-cancel-button': string;
+                'formio-modal-confirm-button': string;
+                'form-control ui fluid selection dropdown': string;
             };
         };
     };

package/lib/sass/styles.scss

@@ -106,9 +106,11 @@ span[role="link"] {
 }
 
 .formio-dialog.formio-dialog-theme-default {
-  & .formio-dialog-content {
-    padding: 1.5em 1em 1em !important;
+  & .component-edit-container {
+    padding: 0.6em;
+  }
 
+  & .formio-dialog-content {
     & .formio-dialog-close {
       right: 4px;
       top: 4px;
@@ -126,7 +128,16 @@ span[role="link"] {
   }
 }
 
+.formio-dialog-content .usa-label {
+  padding-right: 30px;
+  label {
+    padding-right: 0;
+  }
+}
+
 .formio-dialog-buttons {
+  display: flex;
+  justify-content: flex-end;
   margin: 0 -0.5rem;
 }
 
@@ -205,7 +216,7 @@ span[role="link"] {
   & .usa-input, .usa-textarea {
     position: relative;
     z-index: 1;
-    width: auto;
+    width: 1%;
     min-width: 50px;
     flex-grow: 1;
     margin-top: 0;
@@ -298,11 +309,11 @@ span[role="link"] {
   }
 }
 
-.tooltip__trigger {
+.formio-tooltip__trigger {
   cursor: pointer;
 }
 
-.tooltip__body {
+.formio-tooltip__body {
   background-color: $color-tooltip;
   border-radius: 0.25rem;
   bottom: 0;
@@ -317,7 +328,7 @@ span[role="link"] {
   white-space: pre;
   z-index: 1000;
 
-  &.is-set {
+  &.formio-tooltip--is-set {
     display: block;
   }
 
@@ -344,7 +355,7 @@ span[role="link"] {
   }
 }
 
-.tooltip__wrapper {
+.formio-tooltip__wrapper {
   position: relative;
   & > span {
     font-weight: normal;

package/lib/templates/index.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     uswds: {
+        transform(type: any, text: any): any;
         address: {
             form: string;
         };
@@ -169,6 +170,17 @@ declare const _default: {
             'formio-tab-panel-active': string;
             'formio-tab-link-active': string;
             'formio-tab-link-container-active': string;
+            'sr-only': string;
+            'formio-form-error': string;
+            'formio-label-error': string;
+            'formio-input-success': string;
+            'formio-input-error': string;
+            'formio-modal-save': string;
+            'formio-alert-danger': string;
+            'formio-alert-success': string;
+            'formio-modal-cancel-button': string;
+            'formio-modal-confirm-button': string;
+            'form-control ui fluid selection dropdown': string;
         };
     };
 };

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

@@ -28,7 +28,7 @@ __p += '\n        ' +
 ((__t = (ctx.children)) == null ? '' : __t) +
 '\n        ';
  } ;
-__p += '\n        <div class="formio-dialog-buttons float-right">\n          <button class="usa-button usa-button--secondary" ref="modalClose" aria-label="Cancel button. Click to cancel the changes and get back to the form.">' +
+__p += '\n        <div class="formio-dialog-buttons">\n          <button class="usa-button usa-button--secondary" ref="modalClose" aria-label="Cancel button. Click to cancel the changes and get back to the form.">' +
 ((__t = (ctx.t('Cancel'))) == null ? '' : __t) +
 '</button>\n          <button class="usa-button" ref="modalSave" aria-label="Save button. Click to save the changes and get back to the form.">' +
 ((__t = (ctx.t('Save'))) == null ? '' : __t) +

package/lib/templates/uswds/cssClasses.d.ts

@@ -2,5 +2,16 @@ declare const _default: {
     'formio-tab-panel-active': string;
     'formio-tab-link-active': string;
     'formio-tab-link-container-active': string;
+    'sr-only': string;
+    'formio-form-error': string;
+    'formio-label-error': string;
+    'formio-input-success': string;
+    'formio-input-error': string;
+    'formio-modal-save': string;
+    'formio-alert-danger': string;
+    'formio-alert-success': string;
+    'formio-modal-cancel-button': string;
+    'formio-modal-confirm-button': string;
+    'form-control ui fluid selection dropdown': string;
 };
 export default _default;

package/lib/templates/uswds/cssClasses.js

@@ -3,5 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     'formio-tab-panel-active': 'usa-current',
     'formio-tab-link-active': 'usa-current',
-    'formio-tab-link-container-active': 'usa-current'
+    'formio-tab-link-container-active': 'usa-current',
+    'sr-only': 'usa-sr-only',
+    'formio-form-error': 'usa-form-group--error',
+    'formio-label-error': 'usa-label--error',
+    'formio-input-success': 'usa-input--success',
+    'formio-input-error': 'usa-input--error',
+    'formio-modal-save': 'usa-error',
+    'formio-alert-danger': 'usa-alert usa-alert--error usa-alert--no-icon',
+    'formio-alert-success': 'usa-alert usa-alert--success usa-alert--no-icon',
+    'formio-modal-cancel-button': 'usa-button usa-button--secondary',
+    'formio-modal-confirm-button': 'usa-button',
+    'form-control ui fluid selection dropdown': 'usa-select maxw-full',
 };

package/lib/templates/uswds/index.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    transform(type: any, text: any): any;
     address: {
         form: string;
     };
@@ -168,6 +169,17 @@ declare const _default: {
         'formio-tab-panel-active': string;
         'formio-tab-link-active': string;
         'formio-tab-link-container-active': string;
+        'sr-only': string;
+        'formio-form-error': string;
+        'formio-label-error': string;
+        'formio-input-success': string;
+        'formio-input-error': string;
+        'formio-modal-save': string;
+        'formio-alert-danger': string;
+        'formio-alert-success': string;
+        'formio-modal-cancel-button': string;
+        'formio-modal-confirm-button': string;
+        'form-control ui fluid selection dropdown': string;
     };
 };
 export default _default;

package/lib/templates/uswds/index.js

@@ -54,6 +54,16 @@ var wizardNav_1 = require("./wizardNav");
 var size_1 = require("./size");
 var cssClasses_1 = require("./cssClasses");
 exports.default = {
+    transform: function (type, text) {
+        if (!text) {
+            return text;
+        }
+        switch (type) {
+            case 'class':
+                return this.cssClasses.hasOwnProperty(text.toString()) ? this.cssClasses[text.toString()] : text;
+        }
+        return text;
+    },
     address: address_1.default,
     alert: alert_1.default,
     builder: builder_1.default,

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

@@ -90,8 +90,18 @@ __p += '\n';
 __p += '\n</div>\n';
  } ;
 __p += '\n';
+ if (ctx.component.showCharCount || ctx.component.showWordCount) { ;
+__p += '\n<div class="' +
+((__t = (ctx.component.description ? 'pull-right' : 'text-right')) == null ? '' : __t) +
+'">\n  ';
  if (ctx.component.showCharCount) { ;
-__p += '\n<span aria-live="polite" class="text-base float-right" ref="charcount"></span>\n';
+__p += '\n  <span aria-live="polite" class="text-muted" ref="charcount"></span>\n  ';
+ } ;
+__p += '\n  ';
+ if (ctx.component.showWordCount) { ;
+__p += '\n  <span aria-live="polite" class="text-muted" ref="wordcount"></span>\n  ';
+ } ;
+__p += '\n</div>\n';
  } ;
 __p += '\n';
 return __p

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default=function(ctx) {
 var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<fieldset\n  class="usa-fieldset"\n  ref="fieldset"\n  aria-labelledby="l-' +
+__p += '<fieldset\n  class="usa-fieldset"\n  ref="radioGroup"\n  aria-labelledby="l-' +
 ((__t = (ctx.instance.id)) == null ? '' : __t) +
 '-' +
 ((__t = (ctx.component.key)) == null ? '' : __t) +
@@ -60,7 +60,7 @@ __p += '\n      value="' +
 __p += '\n      checked=true\n      ';
  } ;
 __p += '\n      id="' +
-((__t = (ctx.instance.root?.id)) == null ? '' : __t) +
+((__t = (ctx.instance.root && ctx.instance.root.id)) == null ? '' : __t) +
 '-' +
 ((__t = (ctx.id)) == null ? '' : __t) +
 '-' +
@@ -72,7 +72,7 @@ __p += '\n      id="' +
 '"\n    >\n    <label class="' +
 ((__t = (ctx.component.type === "selectboxes" ? "usa-checkbox__label" : "usa-radio__label")) == null ? '' : __t) +
 '" for="' +
-((__t = (ctx.instance.root?.id)) == null ? '' : __t) +
+((__t = (ctx.instance.root && ctx.instance.root.id)) == null ? '' : __t) +
 '-' +
 ((__t = (ctx.id)) == null ? '' : __t) +
 '-' +

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default=function(ctx) {
 var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<div class="formio-usa-card">\n  <ul role="navigation" class="usa-sidenav">\n    ';
+__p += '<div class="formio-usa-card">\n  <ul role="tablist" class="usa-sidenav">\n    ';
  ctx.component.components.forEach(function(tab, index) { ;
-__p += '\n    <li class="usa-sidenav__item ' +
+__p += '\n    <li role="tab" class="usa-sidenav__item ' +
 ((__t = (ctx.currentTab === index ? 'usa-current' : '')) == null ? '' : __t) +
-' border-top-0" role="presentation" ref="' +
+' border-top-0" ref="' +
 ((__t = (ctx.tabLikey)) == null ? '' : __t) +
 '">\n      <a href="#' +
 ((__t = (tab.key)) == null ? '' : __t) +

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

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default=function(ctx) {
 var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<div class="usa-step-indicator usa-step-indicator--no-labels" aria-label="Wizard" id="' +
+__p += '<div class="usa-step-indicator usa-step-indicator--no-labels" ref="' +
+((__t = ( ctx.wizardKey )) == null ? '' : __t) +
+'-header" aria-label="Wizard" id="' +
 ((__t = ( ctx.wizardKey )) == null ? '' : __t) +
 '-header">\n  <ol class="usa-step-indicator__segments" tabindex="0" aria-label="Progress bar, Step ' +
 ((__t = (ctx.currentPage + 1)) == null ? '' : __t) +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/uswds",
-  "version": "2.3.9-rc.2",
+  "version": "2.4.0-rc.3",
   "description": "US Web Design System templates for form.io",
   "main": "lib/index.js",
   "scripts": {
@@ -34,21 +34,21 @@
     "@types/chai": "^4.2.22",
     "@types/ejs": "^3.1.0",
     "@types/mocha": "^9.0.0",
-    "@types/node": "^16.9.4",
-    "@types/sinon": "^10.0.3",
+    "@types/node": "^16.10.2",
+    "@types/sinon": "^10.0.4",
     "chai": "^4.3.4",
     "del": "^6.0.0",
-    "formiojs": "^4.13.6",
+    "formiojs": "^4.14.0-rc.26",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-insert": "^0.5.0",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.0.0",
     "gulp-template": "^5.0.0",
-    "mocha": "^9.1.1",
+    "mocha": "^9.1.2",
     "nyc": "^15.1.0",
     "pre-commit": "^1.2.2",
-    "sass": "^1.42.0",
+    "sass": "^1.42.1",
     "sinon": "^11.1.2",
     "ts-node": "^10.2.1",
     "ts-sinon": "^2.0.2",