@cfpb/cfpb-design-system 4.2.3 → 4.3.0

package/src/elements/cfpb-list/index.spec.js

@@ -0,0 +1,169 @@
+import { jest } from '@jest/globals';
+import { CfpbList } from './index';
+
+beforeAll(() => {
+  CfpbList.init();
+});
+
+describe('<cfpb-list> tests', () => {
+  let list;
+
+  beforeEach(() => {
+    list = document.createElement('cfpb-list');
+    document.body.appendChild(list);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('renders childData and sets checked state (single)', async () => {
+    list.childData = JSON.stringify([
+      { value: 'A', checked: true },
+      { value: 'B', checked: true },
+      { value: 'C' },
+    ]);
+
+    await list.updateComplete;
+
+    expect(list.items.length).toBe(3);
+    // Only first checked stays true in single select
+    expect(list.items[0].checked).toBe(true);
+    expect(list.items[1].checked).toBe(false);
+    expect(list.items[2].checked).toBe(false);
+    expect(list.checkedItems).toEqual([list.items[0]]);
+  });
+
+  test('multiple selection mode allows multiple checked items', async () => {
+    list.multiple = true;
+    list.childData = JSON.stringify([
+      { value: 'A', checked: true },
+      { value: 'B', checked: true },
+      { value: 'C' },
+    ]);
+
+    await list.updateComplete;
+
+    expect(list.checkedItems.length).toBe(2);
+    expect(list.checkedItems).toContain(list.items[0]);
+    expect(list.checkedItems).toContain(list.items[1]);
+
+    // Uncheck an item
+    const event = new CustomEvent('click-item', {
+      bubbles: true,
+      composed: true,
+    });
+    list.items[0].checked = false;
+    list.items[0].dispatchEvent(event);
+
+    expect(list.checkedItems).toEqual([list.items[1]]);
+  });
+
+  test('click-item toggles single selection', async () => {
+    list.childData = JSON.stringify([{ value: 'A' }, { value: 'B' }]);
+
+    await list.updateComplete;
+
+    const clickSpy = jest.fn();
+    list.addEventListener('item-click', clickSpy);
+
+    // Click first item
+    list.items[0].checked = true;
+    list.items[0].dispatchEvent(
+      new CustomEvent('click-item', { bubbles: true, composed: true }),
+    );
+
+    expect(list.checkedItems).toEqual([list.items[0]]);
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+
+    // Click again to uncheck
+    list.items[0].checked = false;
+    list.items[0].dispatchEvent(
+      new CustomEvent('click-item', { bubbles: true, composed: true }),
+    );
+    expect(list.checkedItems).toEqual([]);
+  });
+
+  test('replaces prior click listeners on items', async () => {
+    list.childData = JSON.stringify([{ value: 'X' }]);
+    await list.updateComplete;
+
+    const listenerSpy = jest.fn();
+    list.addEventListener('item-click', listenerSpy);
+
+    // Trigger click-item event
+    const event = new CustomEvent('click-item', {
+      bubbles: true,
+      composed: true,
+    });
+    list.items[0].dispatchEvent(event);
+
+    expect(listenerSpy).toHaveBeenCalled();
+  });
+
+  test('filterItems hides items and sets focused index', async () => {
+    list.childData = JSON.stringify([
+      { value: 'A' },
+      { value: 'B' },
+      { value: 'C' },
+    ]);
+    await list.updateComplete;
+
+    list.filterItems(['B']);
+    expect(list.visibleItems.length).toBe(1);
+    expect(list.visibleItems[0].value).toBe('B');
+    expect(list.items[0].hidden).toBe(true);
+    expect(list.items[1].hidden).toBe(false);
+    expect(list.items[2].hidden).toBe(true);
+  });
+
+  test('arrow keys skip hidden items', async () => {
+    list.childData = JSON.stringify([
+      { value: 'A' },
+      { value: 'B' },
+      { value: 'C' },
+    ]);
+    await list.updateComplete;
+
+    list.filterItems(['C']); // only C visible
+
+    list.focusItemAt(0);
+    expect(document.activeElement.value).toBe('C');
+
+    // Press ArrowDown, should wrap to same visible item
+    list.shadowRoot
+      .querySelector('div')
+      .dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
+      );
+    expect(document.activeElement.value).toBe('C');
+
+    // Press ArrowUp
+    list.shadowRoot
+      .querySelector('div')
+      .dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }),
+      );
+    expect(document.activeElement.value).toBe('C');
+  });
+
+  test('showAllItems unhides all items', async () => {
+    list.childData = JSON.stringify([
+      { value: 'A', hidden: true },
+      { value: 'B', hidden: true },
+    ]);
+    await list.updateComplete;
+
+    list.showAllItems();
+    expect(list.items.every((i) => i.hidden === false)).toBe(true);
+    expect(list.visibleItems.length).toBe(2);
+  });
+
+  test('invalid childData logs error', async () => {
+    console.error = jest.fn();
+    list.childData = 'not-json';
+    await list.updateComplete;
+
+    expect(console.error).toHaveBeenCalled();
+  });
+});

package/src/elements/cfpb-list-item/cfpb-list-item.component.scss

@@ -0,0 +1,69 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
+:host {
+  // Theme variables.
+  --list-item-bg-hover: var(--gray-5);
+  --list-item-border-focus: var(--pacific);
+
+  display: block;
+
+  .container {
+    display: block;
+    padding: 6.5px 10px;
+  }
+
+  .checkbox {
+    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;
+
+    // Wrap long words in narrow form fields to prevent clipping
+    overflow-wrap: anywhere;
+  }
+
+  .selectable {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--list-item-bg-hover);
+      transition: background-color 0.2s;
+      cursor: pointer;
+    }
+  }
+}
+
+// Remove default focus ring.
+:host(:focus) {
+  outline: none;
+}
+
+// Add custom focus ring.
+:host(:not([disabled]):focus-within) {
+  outline: 1px dotted var(--list-item-border-focus);
+  outline-offset: 2px;
+}
+
+:host([checked]) {
+  .checkbox::before {
+    --cfpb-background-icon-svg: 'approved';
+
+    background-size: auto $cf-icon-height;
+    background-repeat: no-repeat;
+    background-position: center 0;
+  }
+}
+
+:host([type='plain']) {
+  .checkbox::before {
+    border-color: transparent;
+    outline-color: transparent;
+    background-color: transparent;
+  }
+}
+
+:host([hidden]) {
+  display: none;
+}

package/src/elements/cfpb-list-item/index.js

@@ -0,0 +1,215 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import styles from './cfpb-list-item.component.scss';
+import { ref, createRef } from 'lit/directives/ref.js';
+import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
+
+/**
+ * @element cfpb-list-item.
+ * @slot - The text for the list item.
+ */
+export class CfpbListItem extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  #checkboxIcon = createRef();
+  #value;
+  #inList = false;
+
+  /**
+   * @property {string} type - Choice type: plain, check, checkbox.
+   * @property {boolean} checked - Whether the list item is checked or not.
+   * @property {boolean} disabled - Whether the list item is selectable or not.
+   * @property {boolean} hidden - Whether the list item is hidden or not.
+   * @returns {object} The map of properties.
+   */
+  static properties = {
+    type: { type: String, reflect: true },
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    hidden: { type: Boolean, reflect: true },
+    href: { type: String, refrect: true },
+  };
+
+  constructor() {
+    super();
+    this.type = 'plain';
+    this.checked = false;
+    this.disabled = false;
+    this.hidden = false;
+    this.href = '';
+  }
+
+  firstUpdated() {
+    // Make host focusable only if not disabled
+    this.tabIndex = this.disabled ? -1 : 0;
+
+    // Only add keydown if NOT inside a list
+    if (!this.#inList) {
+      this.addEventListener('keydown', this.#onKeyDown);
+    }
+
+    this.addEventListener('click', this.#onClick);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Detect if inside a listbox
+    this.#inList = this.closest('[role=listbox]') !== null;
+
+    if (this.#inList) {
+      this.setAttribute('role', 'option');
+      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+      this.setAttribute('aria-selected', this.checked ? 'true' : 'false');
+
+      // Disable internal keyboard handling if inside list
+      this.tabIndex = -1;
+    } else {
+      // Not inside list, remove list-specific ARIA
+      this.removeAttribute('role');
+      this.removeAttribute('aria-disabled');
+      this.removeAttribute('aria-selected');
+    }
+  }
+
+  updated(changed) {
+    if (changed.has('checked') && this.#inList) {
+      this.setAttribute('aria-selected', this.checked ? 'true' : 'false');
+    }
+
+    if (changed.has('disabled')) {
+      this.tabIndex = this.disabled ? -1 : 0;
+      if (this.#inList) {
+        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+      }
+    }
+
+    if (changed.has('hidden')) {
+      this.setAttribute('aria-hidden', this.hidden ? 'true' : 'false');
+      if (this.hidden) {
+        this.tabIndex = -1;
+      }
+    }
+  }
+
+  #toggleChecked() {
+    // If the item has an href attribute, go to that page.
+    if (this.href !== '') {
+      window.location.href = this.href;
+    }
+
+    // … Otherwise, toggle the checked state.
+    this.checked = !this.checked;
+    this.dispatchEvent(
+      new CustomEvent('click-item', {
+        detail: { checked: this.checked, value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #onClick() {
+    if (!this.disabled && !this.hidden) this.#toggleChecked();
+  }
+
+  #onKeyDown(evt) {
+    if (this.disabled || this.hidden) return;
+
+    if (evt.key === ' ' || evt.key === 'Enter') {
+      evt.preventDefault();
+      this.#toggleChecked();
+    }
+  }
+
+  #onMouseOver() {
+    this.#checkboxIcon.value?.mouseover();
+  }
+
+  #onMouseLeave() {
+    this.#checkboxIcon.value?.mouseleave();
+  }
+
+  get value() {
+    if (this.#value) return this.#value;
+
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return '';
+
+    this.#value = slot
+      .assignedNodes({ flatten: true })
+      .map((node) => node.textContent)
+      .join('')
+      .trim();
+
+    return this.#value;
+  }
+
+  set value(val) {
+    this.#value = val;
+  }
+
+  render() {
+    return html`
+      <div
+        part="container"
+        class="container
+        ${this.disabled ? '' : 'selectable'}"
+        @mouseover=${this.#onMouseOver}
+        @mouseleave=${this.#onMouseLeave}
+      >
+        ${this.#chooseRender()}
+      </div>
+    `;
+  }
+
+  #chooseRender() {
+    switch (this.type) {
+      case 'check':
+        return this.#renderCheck();
+      case 'checkbox':
+        return this.#renderCheckbox();
+      default:
+        return this.#renderPlain();
+    }
+  }
+
+  #renderPlain() {
+    return html`<div><slot></slot></div>`;
+  }
+
+  #renderCheck() {
+    return html`
+      <div class="checkbox">
+        <cfpb-checkbox-icon
+          borderless
+          ?disabled=${this.disabled}
+          ?checked=${this.checked}
+        ></cfpb-checkbox-icon>
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  #renderCheckbox() {
+    return html`
+      <div class="checkbox">
+        <cfpb-checkbox-icon
+          ?disabled=${this.disabled}
+          ?checked=${this.checked}
+          ${ref(this.#checkboxIcon)}
+        ></cfpb-checkbox-icon>
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static init() {
+    CfpbCheckboxIcon.init();
+
+    if (!window.customElements.get('cfpb-list-item')) {
+      window.customElements.define('cfpb-list-item', CfpbListItem);
+    }
+  }
+}

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

@@ -1,16 +1,11 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icon' as *;
 
 :host {
   width: 100%;
 
-  .cf-icon-svg {
-    height: $cf-icon-height;
-    vertical-align: middle;
-    fill: currentcolor;
-  }
-
   .m-pagination {
     display: grid;
     grid-template-columns: auto 1fr auto;

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

@@ -24,13 +24,11 @@ export class CfpbPagination extends LitElement {
    * @property {number} maxPage - The maximum page count.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      currentPage: { type: Number, attribute: 'value', reflect: true },
-      maxPage: { type: Number, attribute: 'max', reflect: true },
-      lang: { type: String, reflect: true },
-    };
-  }
+  static properties = {
+    currentPage: { type: Number, attribute: 'value', reflect: true },
+    maxPage: { type: Number, attribute: 'max', reflect: true },
+    lang: { type: String, reflect: true },
+  };
 
   constructor() {
     super();
@@ -146,7 +144,7 @@ export class CfpbPagination extends LitElement {
       <nav
         class="m-pagination"
         role="navigation"
-        aria-label="${trans('page number')}"
+        aria-label=${trans('page number')}
       >
         <cfpb-button
           class="m-pagination__btn-prev"