@cfpb/cfpb-design-system 4.2.3 → 4.3.0

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

@@ -0,0 +1,241 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/base' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icon';
+@use '../cfpb-utilities/transition/transition.scss' as *;
+
+:host {
+  // Theme
+  --select-border-default: var(--gray-60); // $input-border
+  --select-border-width-default: 1px;
+  --select-border-error: var(--red);
+  --select-border-width-error: 2px;
+  --select-border-hover-default: var(--pacific); // $input-border-hover
+  --select-border-focus-default: var(--pacific); // $input-border-focused
+  --select-bg-disabled-default: var(--gray-10); // $input-bg-disabled
+  --select-icon-bg-default: var(--gray-10);
+  --select-text-disabled-default: var(--gray-dark); // $input-text-disabled
+
+  // Private variables.
+  --select-border: var(--select-border-default);
+  --select-border-width: var(--select-border-width-default);
+  --select-border-hover: var(--select-border-hover-default);
+  --select-border-focus: var(--select-border-focus-default);
+
+  // Hide light DOM content.
+  ::slotted(ul),
+  ::slotted(ol) {
+    display: none !important;
+  }
+
+  //
+  // Custom scrollbar
+  //
+
+  // Reset lack of scrollbar on Apple devices.
+  ::-webkit-scrollbar {
+    appearance: none;
+    width: 7px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--pacific-20);
+    box-shadow: 0 0 1px var(--gray-10);
+  }
+
+  //
+  // Base styling
+  //
+
+  button {
+    // This line-height settings is larger than base.scss to
+    // accommodate the SVG height.
+    line-height: math.div(21px, $base-font-size-px);
+
+    // Remove default focus ring.
+    outline: none;
+  }
+
+  //
+  // Recommended select pattern
+  //
+
+  .o-select {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 38px;
+
+    &:hover {
+      border-color: var(--select-border-hover);
+      box-shadow: 0 0 0 1px var(--select-border-hover);
+    }
+
+    &:focus,
+    &:focus-within {
+      outline: 1px dotted var(--select-border-focus);
+      outline-offset: 2px;
+
+      box-shadow: 0 0 0 1px var(--select-border-focus);
+    }
+
+    //
+    // Header
+    //
+
+    &__header {
+      padding: 0;
+      border: 0;
+      background-color: transparent;
+      cursor: pointer;
+
+      display: flex;
+
+      // Single select.
+      &:has(.o-select__label) {
+        justify-content: space-between;
+        align-items: center;
+        gap: 10px;
+      }
+
+      // Multiselect.
+      cfpb-form-search-input {
+        width: 100%;
+      }
+
+      .o-select__cue-close,
+      .o-select__cue-open {
+        display: none;
+      }
+
+      &[aria-expanded='false'] .o-select__cue-open {
+        display: block;
+      }
+
+      &[aria-expanded='true'] .o-select__cue-close {
+        display: block;
+      }
+    }
+
+    .no-results {
+      padding: 6.5px 10px;
+    }
+
+    // Using the button element with .o-select__header requires setting
+    // an explicit width.
+    button.o-select__header {
+      width: 100%;
+      text-align: left;
+    }
+
+    //
+    // select text elements
+    //
+
+    &__label {
+      // Grow to available width.
+      flex-grow: 1;
+      padding: math.div(7px, $base-font-size-px) + em
+        math.div(10px, $base-font-size-px) + em;
+
+      cursor: pointer;
+    }
+
+    &__cues {
+      align-self: center;
+      background: var(--select-icon-bg-default);
+      border-left: 1px solid var(--select-border-default);
+      padding: math.div(7px, $base-font-size-px) + em
+        math.div(10px, $base-font-size-px) + em;
+    }
+
+    &__content {
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      position: absolute;
+      z-index: 10;
+      width: calc(100% + 2px);
+      left: -1px;
+      border: 2px solid var(--pacific);
+      background-color: var(--white);
+      padding: 0;
+
+      &::after {
+        padding-bottom: math.div(15px, $base-font-size-px) + em;
+        width: 100%;
+      }
+    }
+
+    //
+    // select with a border modifier
+    //
+
+    &--border {
+      border: 1px solid var(--select-border);
+    }
+
+    @media print {
+      // Hide the interactive select cues when printing
+      &__header[aria-expanded='true'] &__cue-close,
+      &__header[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;
+      }
+    }
+
+    &--down {
+      &::before {
+        bottom: -1px;
+      }
+
+      .o-select__content {
+        border-top: 0;
+        top: 35px;
+      }
+    }
+
+    &--up {
+      .o-select__content {
+        border-bottom: 0;
+        top: unset;
+      }
+    }
+  }
+}
+
+// The drop-down is expanded.
+:host([open]) {
+  .o-select {
+    // The divider between __header and __content.
+    &::before {
+      position: absolute;
+      z-index: 11;
+      content: '';
+      display: block;
+      width: 100%;
+      border-top: 1px solid var(--select-border);
+      pointer-events: none;
+    }
+  }
+}
+
+// Used when the set language reads right-to-left
+html[lang='ar'] {
+  :host {
+    .o-select {
+      &__header {
+        text-align: right;
+      }
+
+      &__cues {
+        text-align: left;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,381 @@
+import { html, LitElement, css, unsafeCSS, nothing } from 'lit';
+import { ref, createRef } from 'lit/directives/ref.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import styles from './cfpb-select.component.scss';
+import expandIcon from '../../components/cfpb-icons/icons/down.svg';
+import collapseIcon from '../../components/cfpb-icons/icons/up.svg';
+import { CfpbFormSearchInput } from '../cfpb-form-search-input';
+import { SearchService } from '../cfpb-utilities/search-service.js';
+import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
+import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
+import { CfpbList } from '../cfpb-list';
+import { CfpbTagGroup } from '../cfpb-tag-group';
+
+/**
+ *
+ * @element cfpb-button
+ * @slot - The main content for the button.
+ */
+export class CfpbSelect extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  // Flyout menu options.
+  #flyoutMenu;
+  #transition;
+  #search;
+  #root = createRef();
+  #headerDom = createRef();
+  #contentDom = createRef();
+  #input = createRef();
+  #tagGroup = createRef();
+  #list = createRef();
+  #displayLabel = createRef();
+  #boundOnOutsideClick;
+  #noResults = false;
+
+  /**
+   * @property {boolean} multiple - Whether the select supports multiple or not.
+   * @property {boolean} isExpanded - Whether the select is expanded or not.
+   * @property {Array} selectedTexts - Text of selected options.
+   * @returns {object} The map of properties.
+   */
+  static get properties() {
+    return {
+      multiple: { type: Boolean, reflect: true },
+      disabled: { type: Boolean },
+      validation: { type: String },
+      label: { type: String },
+      name: { type: String },
+      title: { type: Boolean, attribute: true },
+      value: { type: String },
+      maxlength: { type: Number },
+      placeholder: { type: String },
+      ariaLabelInput: { type: String, attribute: 'aria-label-input' },
+      ariaLabelList: { type: String, attribute: 'aria-label-list' },
+
+      isExpanded: { type: Boolean, attribute: 'open', reflect: true },
+      selectedTexts: { type: Array },
+      optionList: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.options = [];
+    this.selectedTexts = [];
+    this.optionList = [];
+
+    this.#boundOnOutsideClick = this.#onOutsideClick.bind(this);
+  }
+
+  firstUpdated() {
+    this.#initFlyoutMenu();
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('pointerdown', this.#boundOnOutsideClick);
+    super.disconnectedCallback();
+  }
+
+  #onOutsideClick(evt) {
+    const path = evt.composedPath();
+    if (!path.includes(this)) {
+      this.isExpanded = false;
+    }
+  }
+
+  #onSlotChange(evt) {
+    const slot = evt.target;
+
+    const list = slot
+      .assignedNodes({ flatten: true })
+      .filter(
+        (node) =>
+          node.nodeType === Node.ELEMENT_NODE &&
+          (node.tagName === 'UL' || node.tagName === 'OL'),
+      );
+
+    if (!list || !list[0]) {
+      return;
+    }
+
+    // Extract list items (with their text or link info)
+    const items = [...list[0].querySelectorAll('li')].map((li) => {
+      const checked = li.querySelector('b');
+      if (checked) {
+        return {
+          value: li.textContent.trim(),
+          checked: 'true',
+        };
+      }
+      return { value: li.textContent.trim() };
+    });
+
+    this.optionList = items;
+
+    this.#search = new SearchService(
+      items.map((item) => {
+        return item.value;
+      }),
+    );
+  }
+
+  #onInput(evt) {
+    this.#flyoutMenu.suspend();
+    if (!this.isExpanded) this.isExpanded = true;
+    const visibleItems = this.#list.value.filterItems(
+      this.#search.search(evt.target.value),
+    );
+
+    if (visibleItems.length === 0) {
+      this.#noResults = true;
+      this.requestUpdate();
+    } else {
+      this.#noResults = false;
+      this.requestUpdate();
+      this.#flyoutMenu.resume();
+    }
+  }
+
+  #onClear() {
+    this.#list.value.showAllItems();
+  }
+
+  #initFlyoutMenu() {
+    const root = this.#root.value;
+    const contentDom = this.#contentDom.value;
+
+    // If it's expanded we don't set an initial height,
+    // as it will be calculated internally.
+    const initialClass = this.isExpanded
+      ? MaxHeightTransition.CLASSES.MH_DEFAULT
+      : MaxHeightTransition.CLASSES.MH_ZERO;
+    this.#transition = new MaxHeightTransition(contentDom).init(initialClass);
+
+    this.#flyoutMenu = new FlyoutMenu(root);
+
+    this.#flyoutMenu.setTransition(
+      this.#transition,
+      this.#transition.maxHeightZero,
+      this.#transition.maxHeightDynamic,
+    );
+
+    this.#flyoutMenu.init(this.isExpanded);
+
+    // Add events.
+    this.#flyoutMenu.addEventListener('expandbegin', () => {
+      this.isExpanded = true;
+      contentDom.classList.remove('u-hidden');
+      this.dispatchEvent(
+        new CustomEvent('expandbegin', {
+          detail: { target: this },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    });
+    this.#flyoutMenu.addEventListener('collapseend', () => {
+      this.isExpanded = false;
+      contentDom.classList.add('u-hidden');
+
+      // Remove direction classes.
+      this.#root.value.classList.remove(`o-select--up`);
+      this.#root.value.classList.remove(`o-select--down`);
+    });
+
+    this.#transition.addEventListener('transitiondir', (evt) => {
+      this.#root.value.classList.add(`o-select--${evt.dir}`);
+    });
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('isExpanded')) {
+      const oldVal = changedProps.get('isExpanded');
+      const newVal = this.isExpanded;
+
+      if (newVal !== oldVal) {
+        if (newVal) {
+          this.#flyoutMenu.expand();
+          document.addEventListener('pointerdown', this.#boundOnOutsideClick);
+        } else {
+          this.#flyoutMenu.collapse();
+          document.removeEventListener(
+            'pointerdown',
+            this.#boundOnOutsideClick,
+          );
+        }
+      }
+    }
+  }
+
+  #onClick(evt) {
+    const target = evt.currentTarget;
+
+    if (this.multiple) {
+      if (target.tagName === 'CFPB-FORM-SEARCH-INPUT') {
+        if (this.isExpanded) this.#flyoutMenu.suspend();
+        else this.#flyoutMenu.expand();
+      } else {
+        this.#flyoutMenu.resume();
+      }
+    } else if (target.classList.contains('o-select__label')) {
+      this.#headerDom.value.focus();
+      this.isExpanded = !this.isExpanded;
+    }
+  }
+
+  #onItemClick() {
+    if (this.multiple) {
+      this.optionList = this.#list.value.childData;
+      this.requestUpdate();
+    } else {
+      const checkedItems = this.#list.value.checkedItems;
+      const selectedValue = checkedItems[0]?.value;
+
+      this.#displayLabel.value.innerHTML = selectedValue ? selectedValue : '';
+
+      // Update optionList so the selection persists.
+      this.optionList = this.optionList.map((item) => ({
+        ...item,
+        checked: item.value === selectedValue,
+      }));
+
+      this.requestUpdate();
+
+      // Now close the dropdown.
+      this.isExpanded = false;
+
+      // Move focus back to the header.
+      if (this.multiple) this.#input.value.focus();
+      else this.#headerDom.value.focus();
+    }
+  }
+
+  #onTagClick(evt) {
+    const tagList = this.#tagGroup.value.tagList.filter((item) => {
+      return item !== evt.detail.target;
+    });
+
+    this.optionList = this.optionList.map((item) => ({
+      ...item,
+      checked: !!tagList.find((tag) => tag.value === item.value),
+    }));
+
+    this.requestUpdate();
+  }
+
+  #onKeyDown(evt) {
+    switch (evt.key) {
+      case 'ArrowDown':
+        evt.preventDefault();
+        this.#contentDom.value.querySelector('cfpb-list-item').focus();
+        break;
+    }
+  }
+
+  render() {
+    return html`
+      <!--Light DOM content-->
+      <slot @slotchange=${this.#onSlotChange}></slot>
+
+      ${this.multiple
+        ? html`<cfpb-tag-group
+            ${ref(this.#tagGroup)}
+            .childData=${this.optionList
+              .filter((item) => {
+                return item.checked;
+              })
+              .map((item) => {
+                return { text: item.value, tagName: 'cfpb-tag-filter' };
+              })}
+            @tag-click=${this.#onTagClick}
+          >
+          </cfpb-tag-group>`
+        : nothing}
+
+      <div
+        class="o-select o-select--border"
+        data-js-hook="behavior_flyout-menu"
+        ${ref(this.#root)}
+      >
+        ${this.#renderInput()}
+
+        <button
+          class="o-select__header"
+          title="Expand content"
+          data-js-hook="behavior_flyout-menu_trigger"
+          ${ref(this.#headerDom)}
+          @keydown=${this.#onKeyDown}
+        >
+          <span class="o-select__cues" @click=${this.#onClick}>
+            <span class="o-select__cue-open" role="img" aria-label="Show">
+              ${unsafeSVG(expandIcon)}
+              <span class="u-visually-hidden">Show</span>
+            </span>
+            <span class="o-select__cue-close" role="img" aria-label="Hide">
+              ${unsafeSVG(collapseIcon)}
+              <span class="u-visually-hidden">Hide</span>
+            </span>
+          </span>
+        </button>
+        <div
+          class="o-select__content"
+          data-js-hook="behavior_flyout-menu_content"
+          ${ref(this.#contentDom)}
+        >
+          <cfpb-list
+            @item-click=${this.#onItemClick}
+            ?multiple=${this.multiple}
+            .childData=${this.optionList}
+            type=${this.multiple ? 'checkbox' : 'check'}
+            aria-label=${this.ariaLabelList
+              ? this.ariaLabelList
+              : 'Choose an item…'}
+            ${ref(this.#list)}
+          >
+          </cfpb-list>
+          <div class=${this.#noResults ? 'no-results' : 'u-hidden'}>
+            No results found
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  #renderInput() {
+    return this.multiple
+      ? html`
+          <cfpb-form-search-input
+            ${ref(this.#input)}
+            borderless
+            ?name=${this.name}
+            ?value=${this.value}
+            ?placeholder=${this.placeholder}
+            title=${this.title}
+            ?maxlength=${this.maxlength}
+            aria-label=${this.ariaLabelInput}
+            ?validation=${this.validation}
+            @clear=${this.#onClear}
+            @input=${this.#onInput}
+            @click=${this.#onClick}
+          ></cfpb-form-search-input>
+        `
+      : html`<div
+          class="o-select__label"
+          ${ref(this.#displayLabel)}
+          @click=${this.#onClick}
+        ></div>`;
+  }
+
+  static init() {
+    CfpbFormSearchInput.init();
+    CfpbList.init();
+    CfpbTagGroup.init();
+
+    window.customElements.get('cfpb-select') ||
+      window.customElements.define('cfpb-select', CfpbSelect);
+  }
+}

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

@@ -1,15 +1,18 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/vars' as *;
 
 :host {
   button {
+    // This line-height isn't 19 or 22, as 20 creates a 30px high tag.
+    line-height: math.div(20px, $base-font-size-px);
+
     // 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;
+    align-items: center;
 
     border: 1px solid var(--teal);
     padding: 4px 6px;

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

@@ -17,15 +17,15 @@ export class CfpbTagFilter extends LitElement {
    * @property {string} for - Associate the label with an ID elsewhere.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      for: { type: String },
-    };
-  }
+  static properties = {
+    for: { type: String },
+    value: { type: String },
+  };
 
   constructor() {
     super();
     this.for = '';
+    this.value = '';
   }
 
   #onClick() {
@@ -38,11 +38,19 @@ export class CfpbTagFilter extends LitElement {
     );
   }
 
+  #onSlotChange() {
+    const slot = this.shadowRoot.querySelector('slot');
+    this.value = slot
+      .assignedNodes({ flatten: true })
+      .map((node) => node.textContent.trim())
+      .join(' ');
+  }
+
   render() {
     const slot =
       this.for === ''
-        ? html`<slot></slot>`
-        : html`<label for="${this.for}"><slot></slot></label>`;
+        ? html`<slot @slotchange=${this.#onSlotChange}></slot>`
+        : html`<label for=${this.for}><slot></slot></label>`;
     return html`<button @click=${this.#onClick}>
       ${slot} ${unsafeHTML(icon)}
     </button>`;

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

@@ -1,6 +1,6 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/vars' as *;
 
 :host {
   // Tag group sets the spacing between tags.