@cfpb/cfpb-design-system 4.0.1 → 4.0.3

package/package.json

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

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

@@ -26,7 +26,7 @@ function stringMatch(x, y) {
 /**
  * @class
  * MultiselectModel
- * @param {HTMLOptionsCollection} options -
+ * @param {HTMLOptionsCollection} options
  *   Set of options from a <select> element.
  * @param {string} name - a unique name for this multiselect.
  * @param {object} config - Customization of Multiselect behavior

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

@@ -172,7 +172,7 @@ function Multiselect(element) {
 
   /**
    * Highlights an option in the list.
-   * @param {string} direction -
+   * @param {string} direction
    *   Direction to highlight compared to the current focus.
    */
   function _highlight(direction) {

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

@@ -116,6 +116,8 @@ select.o-multiselect {
 
     &.u-no-results,
     &.u-max-selections {
+      padding: math.div(10px, $base-font-size-px) + em;
+
       li {
         display: none;
       }
@@ -130,7 +132,6 @@ select.o-multiselect {
     }
 
     &.u-max-selections {
-      padding: math.div(10px, $base-font-size-px) + em;
       pointer-events: none;
 
       &::after {

package/src/components/cfpb-layout/card-group.scss

@@ -22,8 +22,8 @@
 
   &__cards {
     display: grid;
-    grid-column-gap: math.div(20px, $base-font-size-px) + em;
-    grid-row-gap: math.div(20px, $base-font-size-px) + em;
+    column-gap: math.div(20px, $base-font-size-px) + em;
+    row-gap: math.div(20px, $base-font-size-px) + em;
 
     // Mobile only.
     @include respond-to-max($bp-xs-max) {

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

@@ -61,7 +61,7 @@
     }
   }
 
-  // We need to separate out the jump link
+  // We need to separate out the jump link.
   a.#{$jump-link-class} {
     @if $is-gold {
       border-color: var(--gold-80);

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

@@ -6,7 +6,7 @@
 
   display: grid;
   grid-template-columns: 22px 1fr;
-  grid-column-gap: 10px;
+  column-gap: 10px;
 
   &__text {
     // Needed for browsers with legacy/no grid support (e.g. IE11).

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

@@ -11,16 +11,20 @@ export class CfpbButton extends LitElement {
     ${unsafeCSS(styles)}
   `;
 
+  /**
+   * @property {boolean} disabled - Whether to stack the tags vertically.
+   * @property {string} type - The button type: secondary, warning, disabled.
+   */
   static get properties() {
     return {
-      isDisabled: { type: Boolean },
+      disabled: { type: Boolean },
       type: { type: String },
     };
   }
 
   constructor() {
     super();
-    this.isDisabled = false;
+    this.disabled = false;
     this.type = '';
   }
 
@@ -43,7 +47,7 @@ export class CfpbButton extends LitElement {
 
   render() {
     return html`
-      <button class="${this._btnClass}" ?disabled=${this.isDisabled}>
+      <button class="${this._btnClass}" ?disabled=${this.disabled}>
         <slot></slot>
       </button>
     `;

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

@@ -0,0 +1,261 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+
+:host {
+  .m-form-field {
+    // Theme variables.
+    --choice-border: var(--choice-border-default);
+    --choice-border-hover: var(--choice-border-hover-default);
+    --choice-border-focus: var(--choice-border-focus-default);
+    --choice-outline-focus: var(--choice-outline-focus-default);
+    --choice-bg: var(--choice-bg-default);
+    --choice-bg-selected: var(--choice-bg-selected-default);
+    --choice-bg-selected-focus: var(--choice-bg-selected-focus-default);
+    --choice-label-disabled: var(--choice-label-disabled-default);
+
+    // Private variables.
+    --choice-border-width-addendum: 0;
+
+    .a-text-input--full {
+      width: 100%;
+    }
+
+    .a-label + .a-text-input {
+      margin-top: math.div(5px, $base-font-size-px) + em;
+    }
+
+    &--checkbox,
+    &--radio {
+      .a-label {
+        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;
+        vertical-align: top;
+        cursor: pointer;
+
+        // Wrap long words in narrow form fields to prevent clipping
+        overflow-wrap: anywhere;
+
+        &::before {
+          display: inline-block;
+          grid-row-start: 1;
+          grid-row-end: 3;
+          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;
+          margin-right: 10px;
+          background-color: var(--choice-bg);
+          content: '';
+          vertical-align: top;
+
+          // Offset so that the checkbox/radio fits within focused area.
+          position: relative;
+          top: 1px;
+          left: 1px;
+        }
+
+        &:hover::before,
+        &.hover::before {
+          border-color: var(--choice-border-hover);
+        }
+      }
+
+      .a-checkbox,
+      .a-radio {
+        @include u-visually-hidden;
+
+        &:focus + .a-label,
+        &.focus + .a-label {
+          outline: 1px dotted var(--choice-outline-focus);
+          outline-offset: 1px;
+        }
+
+        &:disabled {
+          &:checked + .a-label::before,
+          &:focus + .a-label::before,
+          &.focus + .a-label::before,
+          &:hover + .a-label::before,
+          &.hover + .a-label::before {
+            border-color: var(--choice-border);
+            outline: none;
+            box-shadow: none; // Applies only to radio buttons.
+          }
+
+          & + .a-label {
+            cursor: not-allowed;
+            color: var(--choice-label-disabled);
+
+            &::before {
+              outline: none;
+            }
+          }
+        }
+      }
+
+      &:has(.a-checkbox:disabled),
+      &:has(.a-radio:disabled) {
+        --choice-border: var(--choice-border-disabled);
+        --choice-bg: var(--choice-bg-disabled);
+        --choice-bg-selected: var(--choice-bg-selected-disabled);
+      }
+
+      &-success,
+      &-warning,
+      &-error {
+        --choice-border-width-addendum: 1px;
+      }
+
+      &-success {
+        --choice-border: var(--choice-border-success);
+      }
+
+      &-warning {
+        --choice-border: var(--choice-border-warning);
+      }
+
+      &-error {
+        --choice-border: var(--choice-border-error);
+      }
+    }
+
+    &--checkbox {
+      .a-checkbox {
+        &:focus + .a-label::before,
+        &.focus + .a-label::before {
+          border-color: var(--choice-border-focus);
+          box-shadow: 0 0 0 1px var(--choice-border-focus);
+          outline-color: var(--choice-border-focus);
+        }
+
+        &:hover + .a-label::before,
+        &.hover + .a-label::before {
+          border-color: var(--choice-border-hover);
+          box-shadow: 0 0 0 1px var(--choice-border-hover);
+          outline-color: var(--choice-border-hover);
+        }
+
+        &:checked + .a-label::before {
+          --cfpb-background-icon-svg: 'approved';
+
+          background-size: auto $cf-icon-height;
+          background-repeat: no-repeat;
+          background-position: center 0;
+        }
+        &:disabled:checked + .a-label::before {
+          // RGB values are CFPB gray (#5a5d61).
+          // For some reason SVG isn't accepting hex values for the fill.
+          --cfpb-background-icon-svg: 'approved rgb(90,93,97)';
+        }
+      }
+    }
+
+    &--radio {
+      .a-label {
+        &::before {
+          border-radius: 50%;
+
+          /* The rotate is needed to fix a bug in Firefox where radio
+           button was not centered. */
+          transform: rotate(0deg);
+        }
+      }
+
+      .a-radio {
+        &:focus + .a-label::before,
+        &.focus + .a-label::before {
+          outline: none;
+          border-color: var(--choice-border-focus);
+          box-shadow: 0 0 0 1px var(--choice-border-focus);
+        }
+
+        &:hover + .a-label::before,
+        &.hover + .a-label::before {
+          outline: none;
+          border-color: var(--choice-border-hover);
+          box-shadow: 0 0 0 1px var(--choice-border-hover);
+        }
+
+        &:checked + .a-label::before {
+          background-color: var(--choice-bg-selected);
+          box-shadow: inset 0 0 0 2px var(--white); // The radio button ring.
+        }
+
+        &:focus:checked + .a-label::before,
+        &.focus:checked + .a-label::before {
+          background-color: var(--choice-bg-selected-focus);
+          border-color: var(--choice-border-focus);
+          box-shadow:
+            0 0 0 1px var(--choice-border-focus),
+            inset 0 0 0 2px var(--white); // The radio button ring.
+        }
+
+        &:hover:checked + .a-label::before,
+        &.hover:checked + .a-label::before {
+          border-color: var(--choice-border-hover);
+          box-shadow:
+            0 0 0 1px var(--choice-border-hover),
+            inset 0 0 0 2px var(--white); // The radio button ring.
+        }
+
+        &:checked:disabled + .a-label::before,
+        &:hover:checked:disabled + .a-label::before,
+        &.hover:checked:disabled + .a-label::before {
+          background-color: var(--choice-bg-selected);
+          box-shadow: inset 0 0 0 2px var(--gray-10); // The radio button ring.
+          border-color: var(--choice-border-disabled);
+        }
+      }
+    }
+
+    &--lg-target {
+      display: block;
+
+      .a-label {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 15px;
+        background-color: $form-field-input-lg-target-bg;
+      }
+
+      .a-checkbox,
+      .a-radio {
+        &:checked + .a-label {
+          background-color: $form-field-input-lg-target-bg-selected;
+          box-shadow: inset 0 0 0 1px $form-field-input-lg-target-border;
+        }
+
+        &:hover + .a-label,
+        &.hover + .a-label,
+        &:focus + .a-label,
+        &.focus + .a-label {
+          box-shadow: inset 0 0 0 2px $form-field-input-lg-target-border;
+        }
+
+        &:focus + .a-label,
+        &.focus + .a-label,
+        &:checked + .a-label {
+          outline-offset: 1px;
+        }
+
+        &:disabled + .a-label,
+        &:checked:disabled + .a-label,
+        &:hover:disabled + .a-label {
+          color: var(--choice-label-disabled);
+          box-shadow: none;
+          background-color: $form-field-input-lg-target-bg-disabled;
+        }
+
+        &:checked:disabled + .a-label {
+          &,
+          &::before {
+            border: 1px solid var(--form-field-border-disabled);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,103 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import styles from './cfpb-form-choice.component.scss';
+
+/**
+ *
+ * @element cfpb-form-choice
+ * @slot - The label for the form input.
+ */
+export class CfpbFormChoice extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  /**
+   * @property {boolean} checked - Whether the choice is checked or not.
+   * @property {boolean} disabled - Whether the choice is disabled or not.
+   * @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.
+   */
+  static get properties() {
+    return {
+      checked: { type: Boolean, reflect: true },
+      disabled: { type: Boolean },
+      large: { type: Boolean },
+      validation: { type: String },
+      type: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.disabled = false;
+    this.large = false;
+    this.validation = '';
+    this.type = 'checkbox';
+  }
+
+  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;
+    this.dispatchEvent(
+      new Event('change', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #onInput() {
+    this.dispatchEvent(
+      new Event('input', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="${this.#baseClass}" ?large=${this.large}>
+        <input
+          class="a-${this.type}"
+          type="${this.type}"
+          id="${this.type}"
+          ?disabled=${this.disabled}
+          .checked=${this.checked}
+          @change=${this.#onChange}
+          @input=${this.#onInput}
+        />
+        <label class="a-label" for="${this.type}">
+          <slot></slot>
+        </label>
+      </div>
+    `;
+  }
+
+  static init() {
+    window.customElements.get('cfpb-form-choice') ||
+      window.customElements.define('cfpb-form-choice', CfpbFormChoice);
+  }
+}

package/src/elements/cfpb-tag-filter/cfpb-tag-filter.component.scss

@@ -0,0 +1,51 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
+
+:host {
+  button {
+    // Filter tags appear in filtered contexts, often as part of multiselects.
+    line-height: math.div(19px, $base-font-size-px);
+    font-size: math.div(16px, $btn-font-size) + rem;
+
+    display: flex;
+    gap: math.div(10px, $btn-font-size) + rem;
+
+    border: 1px solid var(--teal);
+    padding: 4px 6px;
+    background-color: var(--teal-20);
+    border-radius: math.div(3px, $base-font-size-px) + rem;
+    color: var(--black);
+    text-align: left;
+    min-width: fit-content;
+
+    &:hover {
+      background-color: var(--teal-40);
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: 1px dotted var(--teal);
+      outline-offset: 1px;
+    }
+
+    &:active {
+      background-color: var(--teal-60);
+    }
+  }
+
+  svg {
+    pointer-events: none;
+
+    // Prevent flexbox from squishing icon when tag text is long.
+    flex: none;
+
+    height: math.div(19px, $btn-font-size) + rem;
+  }
+
+  // If the contents are wrapped in a label, negate the label's display.
+  label {
+    display: contents;
+    pointer-events: none;
+  }
+}

package/src/elements/cfpb-tag-filter/index.js

@@ -0,0 +1,55 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import styles from './cfpb-tag-filter.component.scss';
+import icon from '../../components/cfpb-icons/icons/error.svg';
+
+/**
+ *
+ * @element cfpb-tag-filter.
+ * @slot - The content for the filter tag.
+ */
+export class CfpbTagFilter extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  /**
+   * @property {string} for - Whether to stack the tags vertically.
+   */
+  static get properties() {
+    return {
+      for: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.for = '';
+  }
+
+  #onClick() {
+    this.dispatchEvent(
+      new CustomEvent('tag-click', {
+        detail: { target: this },
+        bubbles: false,
+        composed: false,
+      }),
+    );
+  }
+
+  render() {
+    const slot =
+      this.for === ''
+        ? html`<slot></slot>`
+        : html`<label for="${this.for}"><slot></slot></label>`;
+    return html`<button @click=${this.#onClick}>
+      ${slot} ${unsafeHTML(icon)}
+    </button>`;
+  }
+
+  static init() {
+    // Initialize parent file upload.
+    window.customElements.get('cfpb-tag-filter') ||
+      window.customElements.define('cfpb-tag-filter', CfpbTagFilter);
+  }
+}

package/src/elements/cfpb-tag-filter/index.spec.js

@@ -0,0 +1,43 @@
+import { jest } from '@jest/globals';
+import { CfpbTagFilter } from './index.js';
+
+describe('<cfpb-tag-filter>', () => {
+  let elm;
+
+  beforeEach(async () => {
+    CfpbTagFilter.init();
+    elm = document.createElement('cfpb-tag-filter');
+    document.body.appendChild(elm);
+
+    await customElements.whenDefined('cfpb-tag-filter');
+    await elm.updateComplete;
+  });
+
+  afterEach(() => {
+    document.body.removeChild(elm);
+  });
+
+  it('renders slotted content', async () => {
+    const slottedContent = document.createElement('span');
+    elm.setAttribute('for', 'unique-id');
+    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');
+  });
+
+  xit('dispatches the correct event', async () => {
+    const mockHandler = jest.fn();
+    elm.addEventListener('tag-click', mockHandler);
+
+    elm.shadowRoot.querySelector('button').click();
+
+    expect(mockHandler).toHaveBeenCalledTimes(1);
+    expect(mockHandler.mock.calls[0][0].detail.target).toBe(elm);
+  });
+});

package/src/elements/cfpb-tag-group/cfpb-tag-group.component.scss

@@ -0,0 +1,43 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
+
+:host {
+  // Tag group sets the spacing between tags.
+  ul {
+    // Remove list ul bullets styles.
+    padding-left: 0;
+    list-style-type: none;
+
+    li {
+      margin-bottom: 0;
+      display: contents;
+    }
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      display: flex;
+      gap: math.div(15px, $btn-font-size) + rem;
+      flex-wrap: wrap;
+
+      &[stacked] {
+        flex-direction: column;
+        width: fit-content;
+      }
+    }
+
+    &:has(cfpb-tag-filter) {
+      display: flex;
+      gap: math.div(15px, $btn-font-size) + rem;
+      flex-wrap: wrap;
+    }
+  }
+
+  // Right-to-left (RTL) adjustments for arabic pages.
+  html[lang='ar'] {
+    direction: rtl;
+
+    // This is needed for right-to-left (RTL) lists.
+    padding-right: 0;
+  }
+}