@cfpb/cfpb-design-system 4.3.2 → 5.0.0

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "4.3.2",
+  "version": "5.0.0",
   "description": "CFPB's UI framework",
   "exports": {
     ".": "./src/index.js",
     "./tooltips": "./src/components/cfpb-tooltips/index.js",
-    "./icons/": "./src/components/cfpb-icons/icons/"
+    "./icons/": "./src/components/cfpb-icons/icons/",
+    "./src/elements/abstracts/*": "./src/elements/abstracts/*",
+    "./src/elements/*": "./src/elements/*",
+    "./src/components/*": "./src/components/*"
   },
   "author": {
     "name": "Consumer Financial Protection Bureau",

package/src/components/cfpb-buttons/button-link.scss

@@ -3,7 +3,6 @@
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button-link' as *;
 
-
 .a-btn--link {
   // Padding added so the focus rectangle falls below the underline.
   padding: 1.5px 0;

package/src/components/cfpb-forms/multiselect-model.js

@@ -1,6 +1,3 @@
-// Undefined return value for void methods.
-let UNDEFINED;
-
 // How many options may be checked.
 export const MAX_SELECTIONS = 5;
 
@@ -74,7 +71,7 @@ function MultiselectModel(options, name, config) {
     let item;
     const cleaned = [];
 
-    let isChecked = false;
+    let isChecked;
     for (let i = 0, len = list.length; i < len; i++) {
       item = list[i];
       isChecked = isAtMaxSelections() ? false : item.defaultSelected;
@@ -209,7 +206,7 @@ function MultiselectModel(options, name, config) {
   this.filterIndices = filterIndices;
   this.clearFilter = function () {
     _filterIndices = _lastFilterIndices = [];
-    return UNDEFINED;
+    return undefined;
   };
   this.getFilterIndices = function () {
     return _filterIndices;

package/src/components/cfpb-forms/multiselect.js

@@ -10,7 +10,7 @@ import { create } from './multiselect-utils.js';
 
 import * as MultiselectStyles from './multiselect.scss';
 
-import * as closeIconSrc from '../cfpb-icons/icons/error.svg';
+import * as closeIconSrc from '../cfpb-icons/icons/error.svg?raw';
 const closeIcon = closeIconSrc.default;
 
 const BASE_CLASS = 'o-multiselect';

package/src/components/cfpb-layout/email-signup.scss

@@ -3,7 +3,10 @@
 
 .o-email-signup {
   .m-notification {
-    margin-bottom: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+    margin-bottom: math.div(
+        math.div($grid-gutter-width, 2),
+        $base-font-size-px
+      ) +
       em;
   }
 

package/src/components/cfpb-layout/featured-content-module.scss

@@ -22,25 +22,30 @@
       padding-right: math.div(
           math.div($grid-gutter-width, 2),
           $base-font-size-px
-        ) + em;
+        ) +
+        em;
       padding-left: math.div(
           math.div($grid-gutter-width, 2),
           $base-font-size-px
-        ) + em;
+        ) +
+        em;
     }
     &__visual {
       padding-right: math.div(
           math.div($grid-gutter-width, 2),
           $base-font-size-px
-        ) + em;
+        ) +
+        em;
       padding-bottom: math.div(
           math.div($grid-gutter-width, 2),
           $base-font-size-px
-        ) + em;
+        ) +
+        em;
       padding-left: math.div(
           math.div($grid-gutter-width, 2),
           $base-font-size-px
-        ) + em;
+        ) +
+        em;
     }
     &__img {
       margin-right: auto;

package/src/components/cfpb-tables/table.scss

@@ -80,7 +80,10 @@
       margin-top: 0;
       margin-bottom: math.div(5px, $base-font-size-px) + em;
       content: attr(data-label);
-      line-height: 1.83333333;
+
+      // Yeilds 1.83333333
+      // TODO: Research alternative to this magic number
+      line-height: math.div(11, 6);
 
       // h5 size.
       font-size: math.div($size-v, $base-font-size-px) + em;

package/src/elements/abstracts/custom-props.css

@@ -119,5 +119,5 @@
   --teal-90: #3e8685;
   --teal-dark: #005e5d;
   --teal-mid-dark: #126b69;
-  --white: #ffffff;
+  --white: #fff;
 }

package/src/elements/abstracts/sizing-vars.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 
 //  Seperating sizing vars out because for now we are only doing JSON color tokens
-//  Putting these in a partial.  
+//  Putting these in a partial.
 $base-font-size: 16;
 $base-font-size-px: 16px;
 $base-line-height-px: 22px;
@@ -38,29 +38,30 @@ $fcm-visual-width: 270px;
 $fcm-min-height: 220px;
 
 :root {
-// Typography normalization
-    --font-adjust-base: 0.517;
-    --font-adjust-step: 0.0054;
+  // Typography normalization
+  --font-adjust-base: 0.517;
+  --font-adjust-step: 0.0054;
 
-    /* Derived font-size-adjust-values */
-    --font-adjust-h1: calc(
-        var(--font-size-adjust-base) + (5 * var(--font-adjust-step))
-    );
-    --font-adjust-h2: calc(
-        var(--font-size-adjust-base) + (4 * var(--font-adjust-step))
-    );
-    --font-adjust-h3: calc(
-        var(--font-size-adjust-base) + (3 * var(--font-adjust-step))
-    );
-    --font-adjust-h4: calc(
-        var(--font-size-adjust-base) + (2 * var(--font-adjust-step))
-    );
-    --font-adjust-h5: calc(
-        var(--font-size-adjust-base) + (1 * var(--font-adjust-step))
-    );
-    --font-adjust-h6: var(--font-adjust-base);
-    --font-adjust-body: var(--font-adjust-base);
+  /* Derived font-size-adjust-values */
+  --font-adjust-h1: calc(
+    var(--font-size-adjust-base) + (5 * var(--font-adjust-step))
+  );
+  --font-adjust-h2: calc(
+    var(--font-size-adjust-base) + (4 * var(--font-adjust-step))
+  );
+  --font-adjust-h3: calc(
+    var(--font-size-adjust-base) + (3 * var(--font-adjust-step))
+  );
+  --font-adjust-h4: calc(
+    var(--font-size-adjust-base) + (2 * var(--font-adjust-step))
+  );
+  --font-adjust-h5: calc(
+    var(--font-size-adjust-base) + (1 * var(--font-adjust-step))
+  );
+  --font-adjust-h6: var(--font-adjust-base);
+  --font-adjust-body: var(--font-adjust-base);
 
-    // .a-select
-    --select-border-width-default: 1px;
+  // .a-select
+  --select-border-width-default: 1px;
+  --select-border-width-error: 2px;
 }

package/src/elements/cfpb-button/cfpb-button.scss

@@ -1,7 +1,8 @@
 @use 'sass:math';
 @use './vars' as *;
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/elements/cfpb-icon-text/cfpb-icon-text.component' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-icon-text/cfpb-icon-text.component'
+  as *;
 
 :host {
   //

package/src/elements/cfpb-button/index.js

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './cfpb-button.component.scss';
@@ -16,9 +16,7 @@ const VALID_TYPES = ['button', 'submit', 'reset'];
  * @slot - The main content for the button.
  */
 export class CfpbButton extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {string} type - The button type: button, submit, or reset.

package/src/elements/cfpb-checkbox-icon/index.js

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-checkbox-icon.component.scss';
 
 // The validation states are error, warning, or success.
@@ -8,9 +8,7 @@ const VALID_VALIDATION = ['error', 'warning', 'success'];
  * @element cfpb-checkbox-icon
  */
 export class CfpbCheckboxIcon extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   #hover;
   #focus;

package/src/elements/cfpb-expandable/cfpb-expandable.component.scss

@@ -29,6 +29,7 @@
       font-size: math.div(16px, $base-font-size-px) + em !important;
     }
 
+    /*
     .o-expandable--padded {
       // h2 size.
       font-size: math.div(26px, $base-font-size-px) + em !important;
@@ -38,6 +39,7 @@
         font-size: math.div(22px, $base-font-size-px) + em !important;
       }
     }
+    */
   }
 
   //
@@ -136,6 +138,9 @@
     // Padded expandable modifier
     //
 
+    // NOTE: Padded expandle is disabled pending possible deletion.
+
+    /*
     &--padded {
       .o-expandable {
         &__header {
@@ -155,6 +160,7 @@
         }
       }
     }
+    */
 
     //
     // Expandable with a background color modifier

package/src/elements/cfpb-expandable/index.js

@@ -1,8 +1,8 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import styles from './cfpb-expandable.component.scss';
-import expandIcon from '../../components/cfpb-icons/icons/plus-round.svg';
-import collapseIcon from '../../components/cfpb-icons/icons/minus-round.svg';
+import expandIcon from '../../components/cfpb-icons/icons/plus-round.svg?raw';
+import collapseIcon from '../../components/cfpb-icons/icons/minus-round.svg?raw';
 import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
 import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
 
@@ -12,9 +12,7 @@ import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
  * @slot - The main content for the button.
  */
 export class CfpbExpandable extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   #flyoutMenu;
   #transition;

package/src/elements/cfpb-file-upload/cfpb-file-upload.component.scss

@@ -8,7 +8,3 @@
 
   flex-direction: column;
 }
-
-:host::part(upload-details)[hidden='true'] {
-  display: none;
-}

package/src/elements/cfpb-file-upload/index.js

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './cfpb-file-upload.component.scss';
 import { CfpbButton } from '../cfpb-button';
@@ -9,9 +9,7 @@ import { CfpbButton } from '../cfpb-button';
  * @slot - The main content for the upload button.
  */
 export class CfpbFileUpload extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   static properties = {
     isDetailHidden: {

package/src/elements/cfpb-flag-usa/cfpb-flag-usa.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: inline-block;
+
+  // Standard flag size.
+  width: 24px;
+  height: 13px;
+
+  // 48px x 25px USA flag image.
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAZCAMAAABAf11LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5QTFRF////sxlC7MbQ2YyhxlNxCjFhR2WJV3GSKUt1dYumOFh/GT5rhZiwwszYsr/OlKW6Zn6c0djh8PL1iR9Ko7LE4OXrl0pttKC0pXWRtYKbSuJhRQAAANFJREFUeNrkkctuwyAUREnSuW/ApHYf//+jBVdZVcJi3aORgAXcMyLBAAJEzsVG3m8TkifyI3zfPQ6nJJLo421CArSBmkgjNEWtQE4zXJmClXuCWIlU5hdQxCqbqnE1KdIz79CVDvBwZxyKfQfmHTyzl01UZSvOWSTbhZLSWeDMufWLC/1ls3amT4qQq394EjIjApxBT+/nr8eEBNuKcB9SWMpmEXalNOylmlUZNTr4vE/4VdKhpC+leQf6y/e0wzL3RdJtkfUJyzwW+ZcdfgQYAJmJD3zerW6OAAAAAElFTkSuQmCC');
+  background-size: contain;
+  background-repeat: no-repeat;
+}

package/src/elements/cfpb-flag-usa/index.js

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import styles from './cfpb-flag-usa.component.scss';
+
+/**
+ * @element cfpb-flag-usa
+ */
+export class CfpbFlagUsa extends LitElement {
+  static styles = styles;
+
+  static init() {
+    globalThis.customElements.get('cfpb-flag-usa') ??
+      globalThis.customElements.define('cfpb-flag-usa', CfpbFlagUsa);
+  }
+}

package/src/elements/cfpb-form-alert/index.js

@@ -1,18 +1,16 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import styles from './cfpb-form-alert.component.scss';
-import errorIcon from '../../components/cfpb-icons/icons/error-round.svg';
-import warningIcon from '../../components/cfpb-icons/icons/warning-round.svg';
-import successIcon from '../../components/cfpb-icons/icons/approved-round.svg';
+import errorIcon from '../../components/cfpb-icons/icons/error-round.svg?raw';
+import warningIcon from '../../components/cfpb-icons/icons/warning-round.svg?raw';
+import successIcon from '../../components/cfpb-icons/icons/approved-round.svg?raw';
 
 /**
  * @element cfpb-form-search
  * @slot - The label for the form input.
  */
 export class CfpbFormAlert extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {string} validation - Validation style: error, warning, success.

package/src/elements/cfpb-form-choice/index.js

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './cfpb-form-choice.component.scss';
@@ -15,9 +15,7 @@ const VALID_TYPES = ['checkbox', 'radio'];
  * @slot - The label for the form input.
  */
 export class CfpbFormChoice extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   #checkboxIcon = createRef();
 

package/src/elements/cfpb-form-search/cfpb-form-search.component.scss

@@ -45,6 +45,16 @@
       border: 1px solid var(--pacific);
       border-top: 0;
       width: calc(100% - 2px);
+
+      &::after {
+        position: absolute;
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        bottom: -1px;
+        border-bottom: 1px solid var(--pacific);
+      }
     }
 
     .popup.show {

package/src/elements/cfpb-form-search/index.js

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-form-search.component.scss';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { CfpbFormSearchInput } from '../cfpb-form-search-input';
@@ -10,9 +10,7 @@ import { CfpbFormAlert } from '../cfpb-form-alert';
  * @element cfpb-form-search
  */
 export class CfpbFormSearch extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   static formAssociated = true;
 
@@ -95,6 +93,7 @@ export class CfpbFormSearch extends LitElement {
   }
 
   #onClear() {
+    this.value = '';
     this.#popup.value.classList.remove('show');
     this.#list.value.showAllItems();
   }
@@ -112,6 +111,11 @@ export class CfpbFormSearch extends LitElement {
     this.value = evt.target.value;
   }
 
+  #onEnterDown(evt) {
+    // Submit search when enter is pressed inside the input.
+    this.#onClickSearch(evt);
+  }
+
   #onBlur() {
     this.#popup.value.classList.remove('show');
   }
@@ -131,12 +135,8 @@ export class CfpbFormSearch extends LitElement {
     evt.preventDefault();
     if (this.disabled) return;
 
-    console.log(this.value);
-
-    if (this.value !== '') {
-      this.#internals.setFormValue(this.value);
-      this.#internals.form?.requestSubmit();
-    }
+    this.#internals.setFormValue(this.value);
+    this.#internals.form?.requestSubmit();
   }
 
   render() {
@@ -148,7 +148,7 @@ export class CfpbFormSearch extends LitElement {
         <div class="container">
           <cfpb-form-search-input
             ?name=${this.name}
-            ?value=${this.value}
+            .value=${this.value}
             ?placeholder=${this.placeholder}
             title=${this.title}
             ?maxlength=${this.maxlength}
@@ -156,6 +156,7 @@ export class CfpbFormSearch extends LitElement {
             ?validation=${this.validation}
             @clear=${this.#onClear}
             @input=${this.#onInput}
+            @enter-down=${this.#onEnterDown}
             @blur=${this.#onBlur}
           ></cfpb-form-search-input>
 

package/src/elements/cfpb-form-search-input/cfpb-form-search-input.component.scss

@@ -14,11 +14,14 @@
   // Private vars
   --input-border: var(--input-border-default);
 
+  display: flex;
+
   .o-search-input {
     position: relative;
     display: flex;
     width: initial;
     flex: 0 1 100%;
+    align-items: center;
 
     // Add a min-width for the default width of the text input + clear button,
     // so that when the clear button appears it doesn't bump the input width.
@@ -33,12 +36,7 @@
     label {
       position: absolute;
       left: 10px;
-      align-self: center;
       cursor: pointer;
-      line-height: math.div(
-        14.4px,
-        $base-font-size-px
-      ); // 9px vertically centers icon.
     }
 
     // This line-height settings is taken from base.scss.
@@ -175,6 +173,11 @@
   .o-search-input {
     border-color: transparent;
 
+    input {
+      padding-top: math.div(5px, $base-font-size-px) + em;
+      padding-bottom: math.div(5px, $base-font-size-px) + em;
+    }
+
     &:hover,
     &:focus-within {
       border-color: transparent;

package/src/elements/cfpb-form-search-input/index.js

@@ -1,18 +1,16 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './cfpb-form-search-input.component.scss';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
-import searchIcon from '../../components/cfpb-icons/icons/search.svg';
-import clearIcon from '../../components/cfpb-icons/icons/error.svg';
+import searchIcon from '../../components/cfpb-icons/icons/search.svg?raw';
+import clearIcon from '../../components/cfpb-icons/icons/error.svg?raw';
 
 /**
  * @element cfpb-form-search-input
  */
 export class CfpbFormSearchInput extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {boolean} disabled - Whether the input is disabled or not.
@@ -65,6 +63,17 @@ export class CfpbFormSearchInput extends LitElement {
     this.value = evt.target.value;
   }
 
+  #onKeyDown(evt) {
+    if (evt.key === 'Enter') {
+      this.dispatchEvent(
+        new CustomEvent('enter-down', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  }
+
   #onBlur() {
     this.dispatchEvent(
       new Event('blur', {
@@ -116,6 +125,7 @@ export class CfpbFormSearchInput extends LitElement {
           aria-label=${this.ariaLabelInput}
           ${ref(this.#searchInput)}
           @input=${this.#onInput}
+          @keydown=${this.#onKeyDown}
           @blur=${this.#onBlur}
         />
         <button

package/src/elements/cfpb-icon-text/index.js

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-icon-text.component.scss';
 
 /**
@@ -6,9 +6,7 @@ import styles from './cfpb-icon-text.component.scss';
  * @slot - The main content for the text and icon.
  */
 export class CfpbIconText extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {boolean} disabled - Apply disabled styles or not.

package/src/elements/cfpb-label/index.js

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-label.component.scss';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -9,9 +9,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @slot helper - The content for the label helper text.
  */
 export class CfpbLabel extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {boolean} block - Whether this has block or inline helper text.

package/src/elements/cfpb-list/index.js

@@ -1,13 +1,11 @@
-import { LitElement, html, css, unsafeCSS } from 'lit';
+import { LitElement, html } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './cfpb-list.component.scss';
 import { CfpbListItem } from '../cfpb-list-item';
 import { parseChildData } from '../cfpb-utilities/parse-child-data';
 
 export class CfpbList extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   #internalSync = false;
   #container = createRef();
@@ -139,7 +137,7 @@ export class CfpbList extends LitElement {
 
       // Remove prior listener if present.
       const prev = this.#clickListeners.get(item);
-      if (prev) item.removeEventListener('click-item', prev);
+      if (prev) item.removeEventListener('item-click', prev);
 
       // Listener that toggles the item before handling.
       const listener = (evt) => {
@@ -148,7 +146,7 @@ export class CfpbList extends LitElement {
         this.#handleToggle(item, item.checked, index);
       };
 
-      item.addEventListener('click-item', listener);
+      item.addEventListener('item-click', listener);
       this.#clickListeners.set(item, listener);
 
       // Track focus index.
@@ -186,6 +184,7 @@ export class CfpbList extends LitElement {
 
   #applyTypeToItems() {
     if (!['plain', 'check', 'checkbox'].includes(this.type)) {
+      // eslint-disable-next-line no-console
       console.warn(`<cfpb-list>: invalid type "${this.type}".`);
       return;
     }