@cfpb/cfpb-design-system 4.2.4 → 4.3.0

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.

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

@@ -1,5 +1,6 @@
 import { html, LitElement, css, unsafeCSS } from 'lit';
 import styles from './cfpb-tag-group.component.scss';
+import { parseChildData } from '../cfpb-utilities/parse-child-data';
 
 const SUPPORTED_TAG_LIST = ['CFPB-TAG-FILTER', 'CFPB-TAG-TOPIC'];
 
@@ -21,16 +22,16 @@ export class CfpbTagGroup extends LitElement {
   `;
 
   /**
+   * @property {string} childData - Structure data to create child components.
    * @property {boolean} stacked - Whether to stack the tags vertically.
    * @property {Array} tagList - List of the tags in the tag group.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      stacked: { type: Boolean, reflect: true },
-      tagList: { type: Array },
-    };
-  }
+  static properties = {
+    childData: { type: String, attribute: 'childdata' },
+    stacked: { type: Boolean, reflect: true },
+    tagList: { type: Array },
+  };
 
   // Private properties.
   #observer;
@@ -39,6 +40,7 @@ export class CfpbTagGroup extends LitElement {
 
   constructor() {
     super();
+    this.childData = '';
     this.stacked = false;
     this.tagList = [];
     this.#observer = new MutationObserver(this.#onMutation.bind(this));
@@ -67,6 +69,51 @@ export class CfpbTagGroup extends LitElement {
     });
   }
 
+  updated(changedProps) {
+    if (changedProps.has('childData')) {
+      const parsed = parseChildData(this.childData);
+      if (parsed) {
+        this.#renderTagsFromData(parsed);
+      }
+    }
+  }
+
+  #renderTagsFromData(arr) {
+    if (!Array.isArray(arr)) return;
+
+    this.#clearAllTags();
+
+    arr.forEach((data, index) => {
+      const tag = document.createElement(data.tagName);
+      // e.g. 'cfpb-tag-filter' or 'cfpb-tag-topic'
+      if (data.text) tag.textContent = data.text;
+      if (data.href) tag.href = data.href;
+      // any other props from `data`
+      this.addTag(tag, index);
+    });
+  }
+
+  /**
+   * Remove all previous tags from shadow DOM and light DOM.
+   */
+  #clearAllTags() {
+    // Remove shadow DOM wrappers.
+    if (this.#tagMap) {
+      this.#tagMap.forEach((wrapped) => {
+        if (wrapped.parentElement) wrapped.remove();
+      });
+      this.#tagMap.clear();
+    }
+
+    // Remove light DOM tags.
+    [...this.children].forEach((child) => {
+      if (SUPPORTED_TAG_LIST.includes(child.tagName)) child.remove();
+    });
+
+    // Reset tagList
+    this.tagList = [];
+  }
+
   /**
    * Set up a MutationObserver to watch changes in the light DOM.
    */

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

@@ -17,12 +17,10 @@ export class CfpbTagTopic extends LitElement {
    *   Whether the preceding sibling is a jump link or not.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      href: { type: String, reflect: true },
-      siblingOfJumpLink: { type: Boolean },
-    };
-  }
+  static properties = {
+    href: { type: String, reflect: true },
+    siblingOfJumpLink: { type: Boolean },
+  };
 
   /*
    * @property {string} href - The URL to link to (makes the tag a link).
@@ -55,7 +53,7 @@ export class CfpbTagTopic extends LitElement {
         ? html`<span class="a-tag-topic"
             >${bullet}<span class="a-tag-topic__text"><slot></slot></span
           ></span>`
-        : html`<a class="${this.#tagClass}" href="${this.href}"
+        : html`<a class=${this.#tagClass} href=${this.href}
             >${bullet}<span class="a-tag-topic__text"><slot></slot></span
           ></a>`;
     return html`${slot}`;

package/src/elements/cfpb-utilities/parse-child-data.js

@@ -0,0 +1,50 @@
+/**
+ * Normalize "childData" style inputs into an array.
+ * Accepts:
+ *   - JS arrays
+ *   - JSON strings
+ *   - JSON-like strings with single quotes
+ * @param {Array | string} input
+ * @param {object} options - optional settings.
+ * @param {boolean} options.allowSingleQuotes - default true.
+ * @returns {Array|null} Parsed array/string, or null if invalid.
+ */
+export function parseChildData(input, options = {}) {
+  const { allowSingleQuotes = true } = options;
+
+  if (!input) return null;
+
+  // Already an array - most desirable case.
+  if (Array.isArray(input)) {
+    return input;
+  }
+
+  if (typeof input !== 'string') {
+    console.error('childData must be a string or array.');
+    return null;
+  }
+
+  let text = input.trim();
+
+  // String is empty after trim.
+  if (!text) return null;
+
+  // Optional conversation: single -> double quotes for HTML convenience.
+  if (allowSingleQuotes) {
+    text = text.replace(/'/g, '"');
+  }
+
+  try {
+    const parsed = JSON.parse(text);
+
+    if (!Array.isArray(parsed)) {
+      console.error('childData JSON must parse to an array.');
+      return null;
+    }
+
+    return parsed;
+  } catch (err) {
+    console.error('Failed to parse childData JSON:', err);
+    return null;
+  }
+}

package/src/elements/cfpb-utilities/parse-child-data.spec.js

@@ -0,0 +1,56 @@
+import { parseChildData } from './parse-child-data.js';
+
+describe('parseChildData', () => {
+  it('returns null for empty input', () => {
+    expect(parseChildData(null)).toBeNull();
+    expect(parseChildData(undefined)).toBeNull();
+    expect(parseChildData('')).toBeNull();
+  });
+
+  it('returns the array unchanged if input is already an array', () => {
+    const arr = [1, 2, 3];
+    expect(parseChildData(arr)).toBe(arr);
+  });
+
+  it('parses valid JSON string into array', () => {
+    const json = '[{"text":"a"},{"text":"b"}]';
+    const result = parseChildData(json);
+    expect(result).toEqual([{ text: 'a' }, { text: 'b' }]);
+  });
+
+  it('parses JSON-like string with single quotes when allowSingleQuotes=true', () => {
+    const jsonLike = "[{'text':'a'},{'text':'b'}]";
+    const result = parseChildData(jsonLike, { allowSingleQuotes: true });
+    expect(result).toEqual([{ text: 'a' }, { text: 'b' }]);
+  });
+
+  it('throws error / returns null for invalid JSON', () => {
+    const invalid = '[{text:a},{text:b}]';
+    const result = parseChildData(invalid);
+    expect(result).toBeNull();
+  });
+
+  it('returns null when parsed JSON is not an array', () => {
+    const objString = '{"a":1,"b":2}';
+    const result = parseChildData(objString);
+    expect(result).toBeNull();
+  });
+
+  it('does not convert single quotes if allowSingleQuotes=false', () => {
+    const singleQuoteStr = "[{'text':'a'}]";
+    const result = parseChildData(singleQuoteStr, { allowSingleQuotes: false });
+    expect(result).toBeNull();
+  });
+
+  it('trims whitespace before parsing', () => {
+    const json = '   [ {"text":"x"} ]  ';
+    const result = parseChildData(json);
+    expect(result).toEqual([{ text: 'x' }]);
+  });
+
+  it('works with mixed content and multiple spaces', () => {
+    const jsonLike = " [  { 'text' : 'x' } , { 'text':'y' } ] ";
+    const result = parseChildData(jsonLike, { allowSingleQuotes: true });
+    expect(result).toEqual([{ text: 'x' }, { text: 'y' }]);
+  });
+});