@cfpb/cfpb-design-system 4.0.4 → 4.2.0

package/src/base/base.scss

@@ -9,11 +9,11 @@
 //
 // Type hierarchy
 //
-
 body {
   color: $text;
   font-family: var(--font-stack);
   font-size: math.div($base-font-size, 16) * 100%;
+  font-size-adjust: var(--font-adjust-body);
   line-height: $base-line-height;
   -webkit-font-smoothing: antialiased;
 }
@@ -153,60 +153,48 @@ li {
 //
 
 a {
-  border-width: 0;
-  border-style: dotted;
-  border-color: $link-underline;
   color: $link-text;
-  text-decoration: none;
+
+  text-decoration-color: $link-underline;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-style: dotted;
+  text-underline-offset: 4.5px;
 
   // Note: The class definitions below are only for use in
   // demonstrating link states. Do not use in production.
 
   &:visited,
   &.visited {
-    border-color: $link-underline-visited;
+    text-decoration-color: $link-underline-visited;
     color: $link-text-visited;
   }
 
   &:hover,
   &.hover {
-    border-style: solid;
-    border-color: $link-underline-hover;
+    text-decoration-style: solid;
+    text-decoration-color: $link-underline-hover;
     color: $link-text-hover;
   }
 
   &:focus,
   &.focus {
-    border-style: solid;
+    text-decoration-style: solid;
     outline: thin dotted;
     outline-offset: 1px;
   }
 
   &:active,
   &.active {
-    border-style: solid;
-    border-color: $link-underline-active;
+    text-decoration-style: solid;
+    text-decoration-color: $link-underline-active;
     color: $link-text-active;
   }
 }
 
-//
-// Underlined links
-//
-
-p,
-li,
-dd {
-  // Restrict bottom borders to inline text links ...
-
-  a {
-    border-bottom-width: 1px;
-  }
-}
-
 nav a {
-  // ... unless they're part of a nav list
-  border-bottom-width: 0;
+  // Don't show underlines if they're part of a nav list.
+  text-decoration-line: none;
 }
 
 //

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

@@ -141,7 +141,8 @@ input.a-btn::-moz-focus-inner {
   //
 
   &--disabled,
-  &[disabled] {
+  &[disabled],
+  &[aria-disabled='true'] {
     &,
     &:link,
     &:visited,
@@ -205,7 +206,8 @@ input.a-btn::-moz-focus-inner {
   }
 
   &--disabled:has(svg)::before,
-  &[disabled]:has(svg)::before {
+  &[disabled]:has(svg)::before,
+  &[aria-disabled='true']:has(svg)::before {
     border-color: $btn-disabled-divider !important;
   }
 

package/src/components/cfpb-forms/tag.scss

@@ -50,6 +50,8 @@ a.a-tag-filter {
 }
 
 a.a-tag-filter {
+  text-decoration: none;
+
   // Colors for :link, :visited, :hover, :focus, :active.
   @include u-link-colors(
     var(--black),
@@ -101,6 +103,7 @@ a.a-tag-filter {
   a.a-tag-topic:hover,
   a.a-tag-topic:focus,
   a.a-tag-topic:active {
+    text-decoration: none;
     border-bottom: none;
     outline-offset: 1px;
 

package/src/components/cfpb-pagination/vars.scss

@@ -11,7 +11,3 @@
 
 $pagination-text: var(--gray);
 $pagination-bg: var(--gray-5);
-
-// Sizing variables
-
-$pagination-btn-min-width-px: 130px;

package/src/components/cfpb-typography/link.scss

@@ -3,10 +3,12 @@
 
 .a-link {
   border-bottom-width: 0;
+  text-decoration-line: none;
 
   .a-link__text {
-    border-bottom-width: 1px;
-    border-bottom-style: inherit;
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-thickness: 1px;
 
     // See https://github.com/cfpb/consumerfinance.gov/pull/8252
     overflow-wrap: break-word;

package/src/components/cfpb-typography/mixins.scss

@@ -77,9 +77,17 @@
 
     // Mobile only.
     @include respond-to-max($bp-xs-max) {
+      text-decoration: none;
+      border-top-style: dotted;
+      border-bottom-style: dotted;
       border-top-width: 1px;
       border-bottom-width: 1px;
 
+      &:hover {
+        border-top-style: solid;
+        border-bottom-style: solid;
+      }
+
       // We create a faux focus rectangle in the ::after pseudoelement to better
       // control the positioning of the focus rectangle, which would overwise
       // overlap the top border of the jumplink when it appears in a group.

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

@@ -1,8 +1,31 @@
 @use '@cfpb/cfpb-design-system/src/base' as *;
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/button' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/button-link' as *;
 
 :host {
   // This prevents the child button from having an empty gap after the button.
   display: flex;
   width: fit-content;
 }
+
+:host([full-on-mobile]) {
+  // Mobile only.
+  @include respond-to-max($bp-xs-max) {
+    width: 100%;
+  }
+}
+
+:host([flush-left]) {
+  [role='button'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+:host([flush-right]) {
+  [role='button'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}

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

@@ -1,5 +1,14 @@
 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';
+import { CfpbIconText } from '../cfpb-icon-text';
+
+// The variants are different color themes of the button.
+const VALID_VARIANTS = ['primary', 'secondary', 'warning'];
+
+// The types are a regular button, or submit/reset that are used in forms.
+const VALID_TYPES = ['button', 'submit', 'reset'];
 
 /**
  *
@@ -12,48 +21,147 @@ export class CfpbButton extends LitElement {
   `;
 
   /**
-   * @property {boolean} disabled - Whether to stack the tags vertically.
-   * @property {string} type - The button type: secondary, warning, disabled.
+   * @property {string} type - The button type: button, submit, or reset.
+   * @property {string} href - The URL to link to (makes the button a link).
+   * @property {boolean} disabled - Whether the button is disabled or not.
+   * @property {string} variant - The button variant: secondary and warning.
+   * @property {boolean} fullOnMobile - Whether to be width 100% on mobile.
+   * @property {boolean} flushLeft - Whether button is not rounded on left.
+   * @property {boolean} flushRight - Whether button is not rounded on right.
+   * @property {boolean} styleAsLink - Style the button as a link.
+   * @returns {object} The map of properties.
    */
   static get properties() {
     return {
-      disabled: { type: Boolean },
       type: { type: String },
+      href: { type: String },
+      disabled: { type: Boolean, reflect: true },
+      variant: { type: String },
+      fullOnMobile: {
+        type: Boolean,
+        attribute: 'full-on-mobile',
+        reflect: true,
+      },
+      flushLeft: {
+        type: Boolean,
+        attribute: 'flush-left',
+        reflect: true,
+      },
+      flushRight: {
+        type: Boolean,
+        attribute: 'flush-right',
+        reflect: true,
+      },
+      styleAsLink: {
+        type: Boolean,
+        attribute: 'style-as-link',
+        reflect: true,
+      },
     };
   }
 
+  // DOM references.
+  #iconTextDom = createRef();
+
   constructor() {
     super();
+    this.type = 'button';
+    this.variant = 'primary';
     this.disabled = false;
-    this.type = '';
+    this.fullOnMobile = false;
+    this.styleAsLink = false;
+  }
+
+  /**
+   * @returns {boolean} True if it has an icon, false otherwise.
+   */
+  hasIcon() {
+    return this.#iconTextDom.value?.hasIcon();
+  }
+
+  /**
+   * Hide any icon in the slot.
+   */
+  hideIcon() {
+    this.#iconTextDom.value?.hideIcon();
+  }
+
+  /**
+   * Show any icon in the slot, if it was hidden.
+   */
+  showIcon() {
+    this.#iconTextDom.value?.showIcon();
+  }
+
+  /**
+   * Ensure the variant value is valid, and fall back to a default if not.
+   * @returns {string} A valid variant value string.
+   */
+  get #validVariant() {
+    return VALID_VARIANTS.includes(this.variant) ? this.variant : 'primary';
   }
 
+  /**
+   * Ensure the type value is valid, and fall back to a default if not.
+   * @returns {string} A valid type value string.
+   */
+  get #validType() {
+    return VALID_TYPES.includes(this.type) ? this.type : 'button';
+  }
+
+  /**
+   * The classes added to the button.
+   * @returns {object} A classmap of CSS class names.
+   */
   get #btnClass() {
-    let btnClass = 'a-btn';
-    switch (this.type) {
-      case 'secondary':
-        btnClass += ' a-btn--secondary';
-        break;
-      case 'warning':
-        btnClass += ' a-btn--warning';
-        break;
-      case 'disabled':
-        btnClass += ' a-btn--disabled';
-        break;
-    }
+    return {
+      'a-btn': true,
+      [`a-btn--${this.#validVariant}`]: this.#validVariant !== 'primary',
+      [`a-btn--link`]: this.styleAsLink === true,
+    };
+  }
 
-    return btnClass;
+  #renderTextAndIcon() {
+    return html`
+      <cfpb-icon-text ${ref(this.#iconTextDom)} ?disabled=${this.disabled}>
+        <slot></slot>
+      </cfpb-icon-text>
+    `;
   }
 
   render() {
+    const classes = classMap(this.#btnClass);
+
+    // Link button form.
+    if (this.href) {
+      return html`
+        <a
+          class=${classes}
+          href=${this.disabled ? undefined : this.href}
+          role="button"
+          aria-disabled=${String(this.disabled)}
+          tabindex=${this.disabled ? -1 : 0}
+        >
+          ${this.#renderTextAndIcon()}
+        </a>
+      `;
+    }
+
+    // Button form.
     return html`
-      <button class="${this.#btnClass}" ?disabled=${this.disabled}>
-        <slot></slot>
+      <button
+        class=${classes}
+        ?disabled=${this.disabled}
+        type=${this.#validType}
+      >
+        ${this.#renderTextAndIcon()}
       </button>
     `;
   }
 
   static init() {
+    CfpbIconText.init();
+
     window.customElements.get('cfpb-button') ||
       window.customElements.define('cfpb-button', CfpbButton);
   }

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

@@ -70,7 +70,7 @@ export class CfpbFileUpload extends LitElement {
   render() {
     return html`
       <cfpb-button
-        type="secondary"
+        variant="secondary"
         @click="${() => {
           this.fileInput.value.click();
         }}"

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

@@ -17,7 +17,12 @@
     // Private variables.
     --choice-border-width-addendum: 0;
 
-    .a-text-input--full {
+    &--in-list label {
+      box-sizing: border-box;
+      padding-top: math.div(5px, $base-font-size-px) + em;
+      padding-right: 0;
+      padding-bottom: math.div(5px, $base-font-size-px) + em;
+      padding-left: math.div(10px, $base-font-size-px) + em;
       width: 100%;
     }
 

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

@@ -1,8 +1,14 @@
 import { html, LitElement, css, unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import styles from './cfpb-form-choice.component.scss';
 
+// The validation states are error, warning, or success.
+const VALID_VALIDATION = ['error', 'warning', 'success'];
+
+// The types are a checkbox or radio button.
+const VALID_TYPES = ['checkbox', 'radio'];
+
 /**
- *
  * @element cfpb-form-choice
  * @slot - The label for the form input.
  */
@@ -17,6 +23,10 @@ export class CfpbFormChoice extends LitElement {
    * @property {boolean} large - Whether the choice has a large target area.
    * @property {string} validation - Validation style: error, warning, success.
    * @property {string} type - Choice type: checkbox or radio.
+   * @property {string} inlist - Whether the choice appears in a <li> list.
+   * @property {string} name - The name within a form.
+   * @property {string} value - The value to submit within a form.
+   * @returns {object} The map of properties.
    */
   static get properties() {
     return {
@@ -25,41 +35,25 @@ export class CfpbFormChoice extends LitElement {
       large: { type: Boolean },
       validation: { type: String },
       type: { type: String },
+      inlist: { type: Boolean, attribute: true },
+      name: { type: String },
+      value: { type: String },
     };
   }
 
   constructor() {
     super();
+    this.checked = false;
     this.disabled = false;
     this.large = false;
     this.validation = '';
     this.type = 'checkbox';
+    this.inlist = false;
+    this.name = '';
+    this.value = '';
   }
 
-  get #baseClass() {
-    let baseClass = `m-form-field m-form-field--${this.type}`;
-
-    switch (this.validation) {
-      case 'success':
-        baseClass += ` m-form-field--${this.type}-success`;
-        break;
-      case 'warning':
-        baseClass += ` m-form-field--${this.type}-warning`;
-        break;
-      case 'error':
-        baseClass += ` m-form-field--${this.type}-error`;
-        break;
-    }
-
-    if (this.large) {
-      baseClass += ' m-form-field--lg-target';
-    }
-
-    return baseClass;
-  }
-
-  #onChange(evt) {
-    evt.target.checked = this.checked;
+  #onChange() {
     this.dispatchEvent(
       new Event('change', {
         bubbles: true,
@@ -77,19 +71,58 @@ export class CfpbFormChoice extends LitElement {
     );
   }
 
+  focus() {
+    this.shadowRoot.querySelector('input').focus();
+  }
+
+  /**
+   * Ensure the validation value is valid, and fall back to a default if not.
+   * @returns {string|undefined} A valid validation value string, or undefined.
+   */
+  get #validValidation() {
+    return VALID_VALIDATION.includes(this.validation)
+      ? this.validation
+      : undefined;
+  }
+
+  /**
+   * Ensure the type value is valid, and fall back to a default if not.
+   * @returns {string} A type value string.
+   */
+  get #validType() {
+    return VALID_TYPES.includes(this.type) ? this.type : 'checkbox';
+  }
+
+  get #baseClass() {
+    const classes = {
+      'm-form-field': true,
+      [`m-form-field--${this.type}`]: true,
+      'm-form-field--lg-target': this.large,
+      'm-form-field--in-list': this.inlist,
+    };
+
+    if (this.#validValidation)
+      classes[[`m-form-field--${this.type}-${this.validation}`]] =
+        this.validation;
+    return classes;
+  }
+
   render() {
+    const classes = classMap(this.#baseClass);
+
     return html`
-      <div class="${this.#baseClass}" ?large=${this.large}>
+      <div class="${classes}" ?large=${this.large}>
         <input
           class="a-${this.type}"
-          type="${this.type}"
-          id="${this.type}"
+          type="${this.#validType}"
+          id="choice-input"
           ?disabled=${this.disabled}
           .checked=${this.checked}
           @change=${this.#onChange}
           @input=${this.#onInput}
+          aria-invalid=${this.#validValidation === 'error' ? 'true' : 'false'}
         />
-        <label class="a-label" for="${this.type}">
+        <label class="a-label" for="choice-input">
           <slot></slot>
         </label>
       </div>

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

@@ -0,0 +1,47 @@
+import { jest } from '@jest/globals';
+import { CfpbFormChoice } from './index.js';
+
+describe('<cfpb-form-choice>', () => {
+  let elm;
+
+  beforeEach(async () => {
+    CfpbFormChoice.init();
+    elm = document.createElement('cfpb-form-choice');
+    document.body.appendChild(elm);
+
+    await customElements.whenDefined('cfpb-form-choice');
+    await elm.updateComplete;
+  });
+
+  afterEach(() => {
+    document.body.removeChild(elm);
+  });
+
+  it('renders slotted content', async () => {
+    const slottedContent = document.createElement('span');
+    slottedContent.textContent = 'Earth';
+    elm.appendChild(slottedContent);
+    await elm.updateComplete;
+
+    const slot = elm.shadowRoot.querySelector('slot');
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+
+    expect(assignedNodes.length).toBe(1);
+    expect(assignedNodes[0].textContent).toBe('Earth');
+  });
+
+  it('dispatches the correct event', async () => {
+    const inputMockHandler = jest.fn();
+    const changeMockHandler = jest.fn();
+    elm.addEventListener('input', inputMockHandler);
+    elm.addEventListener('change', changeMockHandler);
+
+    elm.shadowRoot.querySelector('label').click();
+
+    expect(inputMockHandler).toHaveBeenCalledTimes(1);
+    expect(inputMockHandler.mock.calls[0][0].target).toBe(elm);
+
+    expect(changeMockHandler).toHaveBeenCalledTimes(1);
+    expect(changeMockHandler.mock.calls[0][0].target).toBe(elm);
+  });
+});

package/src/elements/cfpb-icon-text/cfpb-icon-text.component.scss

@@ -0,0 +1,59 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
+@mixin u-btn-divider() {
+  content: '';
+  border-left: 1px solid var(--icon-text-divider);
+  order: 2;
+  place-self: normal;
+}
+
+:host {
+  // Theme variables.
+  --icon-text-divider: var(--pacific-60);
+
+  div {
+    // This prevents the child button from having an empty gap after the button.
+    display: flex;
+    width: fit-content;
+
+    // Hide SVG by default.
+    & ::slotted(svg) {
+      display: none;
+    }
+
+    &.u-has-icon {
+      gap: math.div(10px, $btn-font-size) + rem;
+      & slot::before {
+        @include u-btn-divider;
+      }
+
+      // Show SVG.
+      & ::slotted(svg) {
+        display: initial;
+      }
+    }
+
+    &.u-has-icon--left {
+      & ::slotted(svg) {
+        order: 1;
+      }
+      & ::slotted(span) {
+        order: 3;
+      }
+    }
+
+    &.u-has-icon--right {
+      & ::slotted(svg) {
+        order: 3;
+      }
+      & ::slotted(span) {
+        order: 1;
+      }
+    }
+  }
+}
+
+:host([disabled]) {
+  --icon-text-divider: var(--gray-60);
+}