@cfpb/cfpb-design-system 4.0.4 → 4.1.0

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

@@ -1,6 +1,13 @@
 import { html, LitElement, css, unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import styles from './cfpb-button.component.scss';
 
+// 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'];
+
 /**
  *
  * @element cfpb-button
@@ -12,12 +19,23 @@ export class CfpbButton extends LitElement {
   `;
 
   /**
+   * @property {string} href - The URL to link to (makes the button a link).
    * @property {boolean} disabled - Whether to stack the tags vertically.
-   * @property {string} type - The button type: secondary, warning, disabled.
+   * @property {string} variant - The button variant: secondary and warning.
+   * @property {boolean} fullOnMobile - Whether to be width 100% on mobile.
+   * @property {string} type - The button type: button, submit, or reset.
+   * @returns {object} The map of properties.
    */
   static get properties() {
     return {
-      disabled: { type: Boolean },
+      href: { type: String },
+      disabled: { type: Boolean, reflect: true },
+      variant: { type: String },
+      fullOnMobile: {
+        type: Boolean,
+        attribute: 'full-on-mobile',
+        reflect: true,
+      },
       type: { type: String },
     };
   }
@@ -25,29 +43,94 @@ export class CfpbButton extends LitElement {
   constructor() {
     super();
     this.disabled = false;
-    this.type = '';
+    this.variant = 'primary';
+    this.fullOnMobile = false;
+    this.type = 'button';
   }
 
-  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;
+  /**
+   * Hide any icon in the slot.
+   */
+  hideIcon() {
+    const icon = this.#findIconInSlot();
+    if (icon) icon.style.display = 'none';
+  }
+
+  /**
+   * Show any icon in the slot, if it was hidden.
+   */
+  showIcon() {
+    const icon = this.#findIconInSlot();
+    if (icon) icon.style.display = '';
+  }
+
+  /**
+   * Find the icon SVG in the slot.
+   * @returns {Node} The icon SVG node.
+   */
+  #findIconInSlot() {
+    const slot = this.shadowRoot.querySelector('slot');
+    const nodes = slot.assignedNodes({ flatten: true });
+
+    for (const node of nodes) {
+      if (node.tagName.toLowerCase() === 'svg') {
+        return node;
+      }
     }
+  }
 
-    return btnClass;
+  /**
+   * 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() {
+    return {
+      'a-btn': true,
+      [`a-btn--${this.#validVariant}`]: this.#validVariant !== 'primary',
+    };
   }
 
   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}
+        >
+          <slot></slot
+        ></a>
+      `;
+    }
+
+    // Button form.
     return html`
-      <button class="${this.#btnClass}" ?disabled=${this.disabled}>
+      <button
+        class=${classes}
+        ?disabled=${this.disabled}
+        type=${this.#validType}
+      >
         <slot></slot>
       </button>
     `;

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-label/cfpb-label.component.scss

@@ -0,0 +1,36 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
+:host {
+  .a-label {
+    slot {
+      display: inline-block;
+    }
+
+    &__helper {
+      color: $label-helper;
+      font-size: math.div(16px, $base-font-size-px) + rem;
+      font-weight: normal;
+
+      &--block {
+        display: block;
+
+        // Add a gap between the label helper and label.
+        margin-top: math.div(10px, $size-vi) + em;
+      }
+    }
+
+    &--heading {
+      display: block;
+
+      margin-bottom: math.div(10px, $size-iv) + em;
+
+      @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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import styles from './cfpb-label.component.scss';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+/**
+ *
+ * @element cfpb-multiselect.
+ * @slot - The main content for the upload button.
+ */
+export class CfpbLabel extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  /**
+   * @property {string} for - Associate the label with an ID elsewhere.
+   * @property {string} type - Associate the label with an ID elsewhere.
+   * @returns {object} The map of properties.
+   */
+  static get properties() {
+    return {
+      // Other properties.
+      block: { type: Boolean, reflect: true },
+      for: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.block = false;
+    this.for = '';
+  }
+
+  get #helperClass() {
+    let helperClass = 'a-label__helper';
+    if (this.block) {
+      helperClass += ' a-label__helper--block';
+    }
+
+    return helperClass;
+  }
+
+  render() {
+    return html`
+      <label
+        class="a-label a-label--heading"
+        for=${ifDefined(this.for && this.for.trim() ? this.for : undefined)}
+      >
+        <slot name="label"></slot>
+        <small class="${this.#helperClass}">
+          <slot name="helper"></slot>
+        </small>
+      </label>
+    `;
+  }
+
+  static init() {
+    window.customElements.get('cfpb-label') ||
+      window.customElements.define('cfpb-label', CfpbLabel);
+  }
+}

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

@@ -0,0 +1,225 @@
+@use 'sass:math';
+@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/vars' as *;
+
+:host {
+  // Theme variables.
+  --select-input-border: var(--gray-60);
+  --select-input-border-hover: var(--pacific);
+  --select-input-border-focus: var(--pacific);
+  --select-input-bg: var(--white);
+  --select-input-text: var(--black);
+
+  // Initial and no-js state.
+  select.o-multiselect {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    padding: math.div(7px, $base-font-size-px) + em;
+
+    // Fixed height breaks the bottom border
+    // mid-character to indicate there's more content.
+    height: 5.5em;
+    padding-top: math.div(4px, $base-font-size-px) + em;
+    padding-bottom: math.div(4px, $base-font-size-px) + em;
+    border: 1px solid var(--select-border-default);
+
+    option {
+      padding: math.div(2px, $base-font-size-px) + em
+        math.div(6px, $base-font-size-px) + em;
+    }
+  }
+
+  .o-multiselect {
+    position: relative;
+
+    & header {
+      position: relative;
+
+      &::after {
+        // Arrow box width must be odd size to properly center the bg image
+        width: math.div($select-height, $base-font-size-px) + em;
+        box-sizing: border-box;
+        border: 1px solid var(--select-border-default);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--select-icon-bg-default);
+
+        --cfpb-background-icon-svg: 'down';
+
+        background-size: auto $cf-icon-height;
+        background-repeat: no-repeat;
+        background-position: center center;
+        content: '';
+        pointer-events: none;
+      }
+    }
+
+    & input[type='text'] {
+      width: 100%;
+      min-height: 35px;
+
+      // Reset the browser's default styling.
+      appearance: none;
+      display: inline-block;
+      padding: math.div(7px, $base-font-size-px) + em;
+      border: 1px solid var(--select-input-border);
+      outline: 0 solid var(--select-input-border);
+      background: var(--select-input-bg);
+      color: var(--select-input-text);
+      box-sizing: border-box;
+
+      &:hover,
+      &.hover {
+        border-color: var(--select-input-border-hover);
+        outline: 1px solid var(--select-input-border-hover);
+      }
+
+      &:focus,
+      &.focus {
+        border-color: var(--select-input-border-focus);
+        box-shadow: 0 0 0 1px var(--select-input-border-focus);
+        outline: 1px dotted var(--select-input-border-focus);
+        outline-offset: 2px;
+      }
+    }
+
+    & fieldset {
+      // Resets
+      border-color: var(--select-border-default);
+      border-top: none;
+      margin: 0;
+      padding: 0;
+
+      // Styles
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      position: absolute;
+      z-index: 10;
+
+      max-height: 0;
+      margin-top: -1px;
+      width: 100%;
+
+      transition: max-height 0.25s ease-out;
+    }
+
+    &.u-active {
+      fieldset {
+        margin-top: 0;
+
+        // This needs to match the value set in _bindEvents in Multiselect.js.
+        // See https://github.com/cfpb/design-system/blob/4d26d5af04317bcc00b4677aa866fe8d526e82e0/packages/cfpb-forms/src/organisms/Multiselect.js#L340
+        max-height: 140px;
+
+        border-color: var(--pacific);
+        border-width: 2px;
+        border-top: 0;
+      }
+
+      // Reverse arrow when search drop-down is open.
+      header::after {
+        --cfpb-background-icon-svg: 'up';
+      }
+    }
+
+    & ul {
+      list-style-type: none;
+      background-color: var(--white);
+      padding: 0;
+      padding-top: math.div(5px, $base-font-size-px) + em;
+      padding-bottom: math.div(5px, $base-font-size-px) + em;
+
+      li {
+        margin: 0;
+      }
+
+      li:first-child {
+        .a-label {
+          padding-top: math.div(10px, $base-font-size-px) + em;
+        }
+      }
+
+      &.u-filtered li:not(.u-filter-match) {
+        display: none;
+      }
+
+      &.u-no-results,
+      &.u-max-selections {
+        padding: math.div(10px, $base-font-size-px) + em;
+        li {
+          display: none;
+        }
+
+        &::after {
+          display: list-item;
+        }
+      }
+
+      &.u-no-results::after {
+        content: 'No results found';
+      }
+
+      &.u-max-selections {
+        pointer-events: none;
+
+        &::after {
+          content: 'Reached maximum number of selections';
+        }
+      }
+    }
+  }
+
+  .u-invisible {
+    visibility: hidden;
+  }
+
+  /* button {
+    // Filter tags appear in filtered contexts, often as part of multiselects.
+    line-height: math.div(19px, $base-font-size-px);
+
+    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: 1rem;
+  }
+
+  // If the contents are wrapped in a label, negate the label's display.
+  label {
+    display: contents;
+    pointer-events: none;
+  } */
+}