@cfpb/cfpb-design-system 5.2.0 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "CFPB's UI framework",
   "exports": {
     ".": "./src/index.js",

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

@@ -7,7 +7,8 @@
   --beige-30: #f0e8d8;
   --beige-60: #d8c8a0;
   --black: #101820;
-  --font-stack: system-ui, sans-serif;
+  --font-stack: var(--font-stack-branded, system-ui, sans-serif);
+  --font-stack-branded: initial;
   --gold: #ff9e1b;
   --gold-10: #fff6ec;
   --gold-20: #fff0dd;

package/src/elements/abstracts/vars.css

@@ -64,12 +64,7 @@
   --select-text-disabled-default: var(--gray-dark);
   --table-border: var(--gray);
   --table-head-bg: var(--gray-5);
-  --tag-filter-bg-active-default: var(--teal-60);
-  --tag-filter-bg-default: var(--teal-20);
-  --tag-filter-bg-hover-default: var(--teal-40);
-  --tag-filter-border-default: var(--teal);
-  --tag-filter-outline-focuse-default: var(--teal-dark);
-  --text: var(--black); /** body */
+  --text: var(--black);
   --block-border-bottom: var(--block-border);
   --block-border-left: var(--block-border);
   --block-border-right: var(--block-border);

package/src/elements/base/base.scss

@@ -1,5 +1,8 @@
 @use 'sass:math';
 @use '../abstracts' as *;
+@use '../cfpb-utilities/skeleton' as *;
+@use '../cfpb-tagline/skeleton' as *;
+@use '../cfpb-form-search/skeleton' as *;
 
 /* ==========================================================================
    Design System

package/src/elements/base/font.scss

@@ -21,7 +21,7 @@
     }
 
     :root {
-      --font-stack: 'Source Sans 3 Variable', arial, sans-serif !important;
+      --font-stack-branded: 'Source Sans 3 Variable', arial, sans-serif;
     }
   }
 }

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

@@ -1,7 +1,7 @@
 @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'
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-icon-text/styles.component'
   as *;
 
 :host {

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

@@ -1,7 +1,7 @@
 import { html, LitElement, css, unsafeCSS } 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?inline';
+import styles from './styles.component.scss?inline';
 import { CfpbIconText } from '../cfpb-icon-text';
 
 // The variants are different color themes of the button.

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

@@ -1,5 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import styles from './cfpb-checkbox-icon.component.scss?inline';
+import styles from './styles.component.scss?inline';
 
 // The validation states are error, warning, or success.
 const VALID_VALIDATION = ['error', 'warning', 'success'];

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

@@ -1,10 +1,6 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import styles from './cfpb-expandable.component.scss?inline';
-import {
-  plusRoundIcon as expandIcon,
-  minusRoundIcon as collapseIcon,
-} from '../../components/cfpb-icons/icons-lib.js';
+import styles from './styles.component.scss?inline';
+import { CfpbIcon } from '../cfpb-icon';
 import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
 import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
 
@@ -103,11 +99,11 @@ export class CfpbExpandable extends LitElement {
           <slot name="header" class="o-expandable__label"></slot>
           <span class="o-expandable__cues">
             <span class="o-expandable__cue-open" role="img" aria-label="Show">
-              ${unsafeSVG(expandIcon)}
+              <cfpb-icon name="plus-round" color="pacific"></cfpb-icon>
               <span class="u-visually-hidden">Show</span>
             </span>
             <span class="o-expandable__cue-close" role="img" aria-label="Hide">
-              ${unsafeSVG(collapseIcon)}
+              <cfpb-icon name="minus-round" color="pacific"></cfpb-icon>
               <span class="u-visually-hidden">Hide</span>
             </span>
           </span>
@@ -123,6 +119,8 @@ export class CfpbExpandable extends LitElement {
   }
 
   static init() {
+    CfpbIcon.init();
+
     window.customElements.get('cfpb-expandable') ||
       window.customElements.define('cfpb-expandable', CfpbExpandable);
   }

package/src/elements/cfpb-expandable/{cfpb-expandable.component.scss → styles.component.scss}

@@ -2,7 +2,7 @@
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/elements/base' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
-@use '../cfpb-utilities/transition/transition.scss' as *;
+@use '../cfpb-utilities/transition/transition.css' as *;
 
 :host {
   // Theme

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

@@ -1,6 +1,6 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
-import styles from './cfpb-file-upload.component.scss?inline';
+import styles from './styles.component.css?inline';
 import { CfpbButton } from '../cfpb-button';
 
 /**

package/src/elements/cfpb-file-upload/styles.component.css

@@ -0,0 +1,7 @@
+:host {
+  /* This prevents the child button from having an empty gap after the button. */
+  display: flex;
+  width: fit-content;
+
+  flex-direction: column;
+}

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

@@ -1,5 +1,5 @@
 import { LitElement, css, unsafeCSS } from 'lit';
-import styles from './cfpb-flag-usa.component.scss?inline';
+import styles from './styles.component.css?inline';
 
 /**
  * @element cfpb-flag-usa

package/src/elements/cfpb-flag-usa/{cfpb-flag-usa.component.scss → styles.component.css}

@@ -1,11 +1,11 @@
 :host {
   display: inline-block;
 
-  // Standard flag size.
+  /* Standard flag size. */
   width: 24px;
   height: 13px;
 
-  // 48px x 25px USA flag image.
+  /* 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-form-alert/index.js

@@ -1,11 +1,6 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import styles from './cfpb-form-alert.component.scss?inline';
-import {
-  errorRoundIcon as errorIcon,
-  warningRoundIcon as warningIcon,
-  approvedRoundIcon as successIcon,
-} from '../../components/cfpb-icons/icons-lib.js';
+import styles from './styles.component.scss?inline';
+import { CfpbIcon } from '../cfpb-icon';
 
 /**
  * @element cfpb-form-search
@@ -30,11 +25,21 @@ export class CfpbFormAlert extends LitElement {
   }
 
   get icon() {
-    let icon = errorIcon;
+    let icon = {
+      name: 'error',
+      colorVar: 'form-alert-icon-color-error',
+    };
+
     if (this.validation === 'warning') {
-      icon = warningIcon;
+      icon = {
+        name: 'warning',
+        colorVar: 'form-alert-icon-color-warning',
+      };
     } else if (this.validation === 'success') {
-      icon = successIcon;
+      icon = {
+        name: 'approved',
+        colorVar: 'form-alert-icon-color-success',
+      };
     }
 
     return icon;
@@ -45,12 +50,17 @@ export class CfpbFormAlert extends LitElement {
       class="a-form-alert a-form-alert--${this.validation}"
       role="alert"
     >
-      ${unsafeSVG(this.icon)}
+      <cfpb-icon
+        name="${this.icon.name}-round"
+        color="${this.icon.colorVar}"
+      ></cfpb-icon>
       <div class="a-form-alert__text"><slot></slot></div>
     </div>`;
   }
 
   static init() {
+    CfpbIcon.init();
+
     window.customElements.get('cfpb-form-alert') ||
       window.customElements.define('cfpb-form-alert', CfpbFormAlert);
   }

package/src/elements/cfpb-form-alert/styles.component.scss

@@ -0,0 +1,14 @@
+@use '../../utilities/functions' as *;
+
+:host {
+  .a-form-alert {
+    margin-top: rem-from-px(15px);
+    display: flex;
+    align-items: center;
+    gap: rem-from-px(5px);
+
+    &__text {
+      display: block;
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
 import { LitElement, html, css, unsafeCSS } 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?inline';
+import styles from './styles.component.scss?inline';
 import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
 
 // The validation states are error, warning, or success.

package/src/elements/cfpb-form-choice/{cfpb-form-choice.component.scss → styles.component.scss}

@@ -1,6 +1,5 @@
-@use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
+@use '../../utilities/functions' as *;
 
 :host {
   .m-form-field {
@@ -20,7 +19,7 @@
     width: max-content;
 
     .a-label + .a-text-input {
-      margin-top: math.div(5px, $base-font-size-px) + em;
+      margin-top: rem-from-px(5px);
     }
 
     &--checkbox,
@@ -29,7 +28,7 @@
         display: inline-grid;
 
         // 30px is width of checkbox/radio button plus the needed padding.
-        grid-template-columns: math.div(30px, $base-font-size-px) + em auto;
+        grid-template-columns: rem-from-px(30px) auto;
         vertical-align: top;
         cursor: pointer;
 
@@ -113,8 +112,8 @@
           border: 1px solid var(--choice-border);
           outline: var(--choice-border-width-addendum) solid
             var(--choice-border);
-          height: math.div(18px, $base-font-size-px) + em;
-          width: math.div(18px, $base-font-size-px) + em;
+          height: rem-from-px(18px);
+          width: rem-from-px(18px);
           margin-right: 10px;
           background-color: var(--choice-bg);
           content: '';

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

@@ -1,9 +1,9 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import styles from './cfpb-form-search.component.scss?inline';
+import styles from './styles.component.scss?inline';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { CfpbFormSearchInput } from '../cfpb-form-search-input';
 import { SearchService } from '../cfpb-utilities/search-service.js';
-import { CfpbList } from '../cfpb-list';
+import { CfpbListbox } from '../cfpb-listbox';
 import { CfpbFormAlert } from '../cfpb-form-alert';
 
 /**
@@ -163,8 +163,8 @@ export class CfpbFormSearch extends LitElement {
           ></cfpb-form-search-input>
 
           <div class="popup" ${ref(this.#popup)}>
-            <cfpb-list .childData=${this.searchList} ${ref(this.#list)}>
-            </cfpb-list>
+            <cfpb-listbox .childData=${this.searchList} ${ref(this.#list)}>
+            </cfpb-listbox>
           </div>
         </div>
 
@@ -188,7 +188,7 @@ export class CfpbFormSearch extends LitElement {
 
   static init() {
     CfpbFormSearchInput.init();
-    CfpbList.init();
+    CfpbListbox.init();
     CfpbFormAlert.init();
 
     window.customElements.get('cfpb-form-search') ||

package/src/elements/cfpb-form-search/skeleton.css

@@ -0,0 +1,8 @@
+cfpb-form-search:not(:defined) {
+  min-height: 35px;
+
+  /* Mobile only */
+  @media only screen and (width <= 37.5625em) {
+    min-height: 85px;
+  }
+}

package/src/elements/cfpb-form-search/{cfpb-form-search.component.scss → styles.component.scss}

@@ -1,6 +1,6 @@
-@use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button' as *;
+@use '../../utilities/functions' as *;
 
 :host {
   // Hide light DOM content.
@@ -11,14 +11,14 @@
 
   // This line-height settings is taken from base.scss.
   button {
-    line-height: math.div(19px, $base-font-size-px);
+    line-height: unitless-from-px(19px);
   }
 
   .o-form-search {
     position: relative;
     display: flex;
     flex-direction: column;
-    row-gap: math.div(15px, $base-font-size-px) + rem;
+    row-gap: rem-from-px(15px);
 
     // Tablet and above.
     @include respond-to-min($bp-sm-min) {

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

@@ -1,12 +1,7 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
-import styles from './cfpb-form-search-input.component.scss?inline';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-
-import {
-  searchIcon,
-  errorIcon as clearIcon,
-} from '../../components/cfpb-icons/icons-lib.js';
+import styles from './styles.component.scss?inline';
+import { CfpbIcon } from '../cfpb-icon';
 
 /**
  * @element cfpb-form-search-input
@@ -113,7 +108,7 @@ export class CfpbFormSearchInput extends LitElement {
           class="o-search-input__input-label"
           aria-label=${this.label}
         >
-          ${unsafeSVG(searchIcon)}
+          <cfpb-icon name="search"></cfpb-icon>
         </label>
         <input
           id="search-text"
@@ -138,13 +133,15 @@ export class CfpbFormSearchInput extends LitElement {
           title=${this.ariaLabelButton}
           @click=${this.#onClickClear}
         >
-          ${unsafeSVG(clearIcon)}
+          <cfpb-icon name="error"></cfpb-icon>
         </button>
       </div>
     `;
   }
 
   static init() {
+    CfpbIcon.init();
+
     window.customElements.get('cfpb-form-search-input') ||
       window.customElements.define(
         'cfpb-form-search-input',

package/src/elements/cfpb-form-search-input/{cfpb-form-search-input.component.scss → styles.component.scss}

@@ -1,7 +1,6 @@
-@use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/components/cfpb-forms/text-input' as *;
 @use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icon' as *;
+@use '../../utilities/functions' as *;
 
 :host {
   // Theme
@@ -41,7 +40,7 @@
 
     // This line-height settings is taken from base.scss.
     input {
-      line-height: math.div(19px, $base-font-size-px);
+      line-height: unitless-from-px(19px);
     }
 
     input[type='search'] {
@@ -73,9 +72,8 @@
 
       // Set the touch target minimum for iOS.
       width: 44px;
-      text-align: right;
 
-      > svg {
+      > cfpb-icon {
         // Set width of SVG width to create a box for the focus rectangle.
         width: 25px;
 
@@ -96,7 +94,7 @@
       // Put the focus rectangle on the icon
       // because the button touch target is larger and would be lop-sided if
       // we put the rectangle on the button.
-      > svg {
+      > cfpb-icon {
         outline: 1px dotted var(--pacific);
       }
     }
@@ -174,8 +172,8 @@
     border-color: transparent;
 
     input {
-      padding-top: math.div(5px, $base-font-size-px) + em;
-      padding-bottom: math.div(5px, $base-font-size-px) + em;
+      padding-top: rem-from-px(5px);
+      padding-bottom: rem-from-px(5px);
     }
 
     &:hover,

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

@@ -0,0 +1,43 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import styles from './styles.component.css?inline';
+import { getSharedConfig } from '../cfpb-utilities/shared-config';
+
+/**
+ * @element cfpb-icon
+ */
+export class CfpbIcon extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  /**
+   * @property {boolean} name - The name of the icon.
+   * @property {boolean} color - The color of the icon.
+   * @returns {object} The map of properties.
+   */
+  static properties = {
+    name: { type: String },
+    color: { type: String },
+    spin: { type: Boolean, attribute: true },
+  };
+
+  render() {
+    if (!this.name) return null;
+    const iconPath = `${getSharedConfig().iconPath + this.name}.svg`;
+
+    if (this.color) {
+      this.style.setProperty('--icon-color-default', `var(--${this.color})`);
+    } else {
+      this.style.removeProperty('--icon-color-default');
+    }
+
+    return html`<span style="--icon-mask-image-url:url('${iconPath}')">
+      <img src="${iconPath}" loading="lazy" decoding="async" />
+    </span>`;
+  }
+
+  static init() {
+    globalThis.customElements.get('cfpb-icon') ??
+      globalThis.customElements.define('cfpb-icon', CfpbIcon);
+  }
+}

package/src/elements/cfpb-icon/styles.component.css

@@ -0,0 +1,48 @@
+/*
+The icons work like this:
+- Nest an `img` tag inside a `span` tag.
+- Load an SVG icon into the `img` tag.
+- Load the same SVG icon into a CSS `mask-image` in the `span` tag.
+- Set the `background-color` on the masked `span` to change the icon color.
+*/
+:host {
+  --icon-mask-image-url: '';
+
+  /* 
+  The SVG height is scaled to match the rendered text height, 
+  calculated by dividing the rendered height by the assigned 
+  font size (19/16 = 1.1875em)
+  */
+  height: 1.1875em;
+  vertical-align: middle;
+  display: inline-block;
+  color: var(--icon-color-default, inherit);
+
+  span {
+    line-height: 0;
+    mask-image: var(--icon-mask-image-url);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    display: inline-block;
+    background-color: currentcolor;
+  }
+
+  img {
+    height: 1.1875em;
+    opacity: 0;
+  }
+}
+
+:host([spin]) {
+  animation: spin-animation 1.25s infinite linear;
+  transform-origin: 50% 50%;
+}
+
+@keyframes spin-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}

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

@@ -1,5 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import styles from './cfpb-icon-text.component.scss?inline';
+import styles from './styles.component.scss?inline';
 
 /**
  * @element cfpb-icon-text

package/src/elements/cfpb-icon-text/{cfpb-icon-text.component.scss → styles.component.scss}

@@ -1,5 +1,4 @@
-@use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '../../utilities/functions' as *;
 
 @mixin u-btn-divider() {
   content: '';
@@ -21,7 +20,7 @@
     width: fit-content;
     align-items: center;
 
-    gap: math.div(10px, $btn-font-size) + rem;
+    gap: rem-from-px(10px);
   }
 
   .left-divider::before,

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

@@ -1,5 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import styles from './cfpb-label.component.scss?inline';
+import styles from './styles.component.scss?inline';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**

package/src/elements/cfpb-label/{cfpb-label.component.scss → styles.component.scss}

@@ -1,5 +1,5 @@
-@use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '../../utilities/functions' as *;
 
 :host {
   .a-label {
@@ -9,27 +9,27 @@
 
     &__helper {
       color: var(--label-helper);
-      font-size: math.div(16px, $base-font-size-px) + rem;
+      font-size: rem-from-px(16px);
       font-weight: normal;
 
       &--block {
         display: block;
 
         // Add a gap between the label helper and label.
-        margin-top: math.div(10px, $size-vi) + em;
+        margin-top: rem-from-px(10px);
       }
     }
 
     &--heading {
       display: block;
 
-      margin-bottom: math.div(10px, $size-iv) + em;
+      margin-bottom: rem-from-px(10px);
 
       @include heading-4($has-margin-bottom: false);
 
       // Add a gap between the label helper and label heading
       .a-label__helper--block {
-        margin-top: math.div(10px, $base-font-size-px) + rem;
+        margin-top: rem-from-px(10px);
       }
     }
   }