@cfpb/cfpb-design-system 4.4.0 → 5.0.0

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "4.4.0",
+  "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

@@ -83,7 +83,7 @@
 
       // Yeilds 1.83333333
       // TODO: Research alternative to this magic number
-      line-height: math.div(11,6);
+      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/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,10 +135,8 @@ export class CfpbFormSearch extends LitElement {
     evt.preventDefault();
     if (this.disabled) return;
 
-    if (this.value !== '') {
-      this.#internals.setFormValue(this.value);
-      this.#internals.form?.requestSubmit();
-    }
+    this.#internals.setFormValue(this.value);
+    this.#internals.form?.requestSubmit();
   }
 
   render() {
@@ -154,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/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();
@@ -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;
     }

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

@@ -157,9 +157,11 @@ describe('<cfpb-list> tests', () => {
   });
 
   test('invalid childData logs error', async () => {
+    // eslint-disable-next-line no-console
     console.error = jest.fn();
     list.childData = 'not-json';
     await list.updateComplete;
+    // eslint-disable-next-line no-console
     expect(console.error).toHaveBeenCalled();
   });
 

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

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-list-item.component.scss';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
@@ -8,9 +8,7 @@ import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
  * @slot - The text for the list item.
  */
 export class CfpbListItem extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   #checkboxIcon = createRef();
   #value;

package/src/elements/cfpb-pagination/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-pagination.component.scss';
-import leftIcon from '../../components/cfpb-icons/icons/left.svg';
-import rightIcon from '../../components/cfpb-icons/icons/right.svg';
+import leftIcon from '../../components/cfpb-icons/icons/left.svg?raw';
+import rightIcon from '../../components/cfpb-icons/icons/right.svg?raw';
 import { I18nService, MediaQueryService } from '../cfpb-utilities/';
 
 /**
@@ -15,9 +15,7 @@ export class CfpbPagination extends LitElement {
   #isMobile;
   #i18n;
 
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {number} currentPage - The currently selected page.

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

@@ -173,19 +173,19 @@
         top: unset;
       }
     }
-  }
 
-  @media print {
-    // Hide the interactive select cues when printing
-    &__cues[aria-expanded='true'] &__cue-close,
-    &__cues[aria-expanded='false'] &__cue-open {
-      display: none;
-    } // Ensure all selects are expanded when printing.
-    // To accommodate print stylesheets that display the raw URL after links,
-    // set an enormous max height to accommodate selects that have a lot of links.
-    &__content[aria-expanded='false'] {
-      display: block;
-      max-height: 99999px !important;
+    @media print {
+      // Hide the interactive select cues when printing
+      &__cues[aria-expanded='true'] &__cue-close,
+      &__cues[aria-expanded='false'] &__cue-open {
+        display: none;
+      } // Ensure all selects are expanded when printing.
+      // To accommodate print stylesheets that display the raw URL after links,
+      // set an enormous max height to accommodate selects that have a lot of links.
+      &__content[aria-expanded='false'] {
+        display: block;
+        max-height: 99999px !important;
+      }
     }
   }
 }