@cfpb/cfpb-design-system 4.2.4 → 4.3.0

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"

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;
+      }
+    }
+  }
+}