@cfpb/cfpb-design-system 4.2.4 → 4.3.0

package/src/elements/cfpb-form-search-input/index.js

@@ -0,0 +1,136 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import { ref, createRef } from 'lit/directives/ref.js';
+import styles from './cfpb-form-search-input.component.scss';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+import searchIcon from '../../components/cfpb-icons/icons/search.svg';
+import clearIcon from '../../components/cfpb-icons/icons/error.svg';
+
+/**
+ * @element cfpb-form-search-input
+ */
+export class CfpbFormSearchInput extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  /**
+   * @property {boolean} disabled - Whether the input is disabled or not.
+   * @property {string} validation - Validation style: error, warning, success.
+   * @property {string} label - The aria-label for the input.
+   * @property {string} name - The name within a form.
+   * @property {string} value - The value within the input.
+   * @property {number} maxlength - The maximum characters allowed in the input.
+   * @property {string} placeholder - The placeholder value.
+   * @property {string} ariaLabelInput - aria-label for input.
+   * @property {string} ariaLabelButton - aria-label for button.
+   * @property {boolean} borderless - Whether the input has a border or not.
+   * @returns {object} The map of properties.
+   */
+  static properties = {
+    disabled: { type: Boolean, reflect: true },
+    validation: { type: String, reflect: true },
+    label: { type: String },
+    name: { type: String },
+    title: { type: String, attribute: true },
+    value: { type: String },
+    maxlength: { type: Number, reflect: true },
+    placeholder: { type: String },
+    ariaLabelInput: { type: String, attribute: 'aria-label-input' },
+    ariaLabelButton: { type: String, attribute: 'aria-label-button' },
+    borderless: { type: Boolean, reflect: true },
+  };
+
+  #searchInput;
+
+  constructor() {
+    super();
+
+    this.label = 'Search';
+    this.name = '';
+    this.title = 'Search';
+    this.value = '';
+    this.maxlength = 75;
+    this.placeholder = '';
+    this.ariaLabelInput = 'Search input';
+    this.ariaLabelButton = 'Clear search';
+    this.disabled = false;
+    this.#searchInput = createRef();
+
+    // Borderless is only used for CSS.
+    this.borderless = false;
+  }
+
+  #onInput(evt) {
+    this.value = evt.target.value;
+  }
+
+  #onBlur() {
+    this.dispatchEvent(
+      new Event('blur', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #onClickClear(evt) {
+    evt.preventDefault();
+    if (this.disabled) return;
+    this.value = '';
+    this.#searchInput.value?.focus();
+    this.dispatchEvent(
+      new CustomEvent('clear', { detail: '', bubbles: true, composed: true }),
+    );
+  }
+
+  render() {
+    return html`
+      <div
+        class="o-search-input ${this.validation
+          ? `o-search-input--${this.validation}`
+          : ''}"
+      >
+        <label
+          for="search-text"
+          class="o-search-input__input-label"
+          aria-label=${this.label}
+        >
+          ${unsafeSVG(searchIcon)}
+        </label>
+        <input
+          id="search-text"
+          type="search"
+          name=${this.name}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          class="a-text-input a-text-input__full"
+          placeholder=${this.placeholder}
+          title=${this.title}
+          autocomplete="off"
+          maxlength=${this.maxlength}
+          aria-label=${this.ariaLabelInput}
+          ${ref(this.#searchInput)}
+          @input=${this.#onInput}
+          @blur=${this.#onBlur}
+        />
+        <button
+          type="reset"
+          aria-label=${this.ariaLabelButton}
+          title=${this.ariaLabelButton}
+          @click=${this.#onClickClear}
+        >
+          ${unsafeSVG(clearIcon)}
+        </button>
+      </div>
+    `;
+  }
+
+  static init() {
+    window.customElements.get('cfpb-form-search-input') ||
+      window.customElements.define(
+        'cfpb-form-search-input',
+        CfpbFormSearchInput,
+      );
+  }
+}

package/src/elements/cfpb-icon-text/cfpb-icon-text.component.scss

@@ -1,60 +1,53 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 @mixin u-btn-divider() {
   content: '';
   border-left: 1px solid var(--icon-text-divider);
-  order: 2;
   place-self: normal;
 }
 
 :host {
   // Theme variables.
-  --icon-text-divider: var(--pacific-60);
+  --icon-text-divider-default: var(--pacific-60);
+  --icon-text-divider-disabled: var(--gray-60);
 
-  div {
+  // Private variables.
+  --icon-text-divider: var(--icon-text-divider-default);
+
+  .wrapper {
     // This prevents the child button from having an empty gap after the button.
     display: flex;
     width: fit-content;
     align-items: center;
 
-    // Hide SVG by default.
-    & ::slotted(svg) {
-      display: none;
-    }
-
-    &.u-has-icon {
-      gap: math.div(10px, $btn-font-size) + rem;
-      & slot::before {
-        @include u-btn-divider;
-      }
-
-      // Show SVG.
-      & ::slotted(svg) {
-        display: initial;
-      }
-    }
-
-    &.u-has-icon--left {
-      & ::slotted(svg) {
-        order: 1;
-      }
-      & ::slotted(span) {
-        order: 3;
-      }
-    }
-
-    &.u-has-icon--right {
-      & ::slotted(svg) {
-        order: 3;
-      }
-      & ::slotted(span) {
-        order: 1;
-      }
-    }
+    gap: math.div(10px, $btn-font-size) + rem;
+  }
+
+  .left-divider::before,
+  .right-divider::after {
+    @include u-btn-divider;
+  }
+
+  // Shine the slot contents through to the wrapper's flexbox items.
+  slot {
+    display: contents;
   }
 }
 
+.left-divider ::slotted(svg:first-of-type) {
+  order: -1;
+}
+
+.right-divider ::slotted(svg:last-of-type) {
+  order: 1;
+}
+
 :host([disabled]) {
-  --icon-text-divider: var(--gray-60);
+  --icon-text-divider: var(--icon-text-divider-disabled);
+}
+
+// Hide SVG if user calls hideIcon()
+:host([icon-hidden]) ::slotted(svg) {
+  display: none !important;
 }

package/src/elements/cfpb-icon-text/index.js

@@ -2,7 +2,6 @@ import { html, LitElement, css, unsafeCSS } from 'lit';
 import styles from './cfpb-icon-text.component.scss';
 
 /**
- *
  * @element cfpb-icon-text
  * @slot - The main content for the text and icon.
  */
@@ -15,132 +14,61 @@ export class CfpbIconText extends LitElement {
    * @property {boolean} disabled - Apply disabled styles or not.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      disabled: { type: Boolean, reflect: true },
-    };
-  }
-
-  // DOM references.
-  #svgObserver;
-  #iconClasses;
+  static properties = {
+    disabled: { type: Boolean, reflect: true },
+    iconHidden: { type: Boolean, reflect: true, attribute: 'icon-hidden' },
+  };
 
   constructor() {
     super();
-    this.#iconClasses = '';
+    this.disabled = false;
+    this.iconHidden = false;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.#svgObserver = new MutationObserver(() => {
-      this.#processLightDom();
-    });
+  firstUpdated() {
+    const slot = this.shadowRoot.querySelector('slot');
+    this.#updateDividers();
 
-    this.#svgObserver.observe(this, {
-      childList: true,
-      subtree: false,
-    });
+    // Handle dynamically added/removed nodes.
+    slot.addEventListener('slotchange', () => this.#updateDividers());
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.#svgObserver) {
-      this.#svgObserver.disconnect();
-      this.#svgObserver = null;
+  updated(changedProps) {
+    if (changedProps.has('iconHidden')) {
+      this.#updateDividers();
     }
   }
 
-  #processLightDom() {
-    const div = this.shadowRoot.querySelector('div');
+  #updateDividers() {
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
     const slot = this.shadowRoot.querySelector('slot');
-    const nodes = slot.assignedNodes({ flatten: true });
-
-    let svgEl = null;
-    let spanEl = null;
+    const nodes = slot.assignedNodes({ flatten: true }).filter((node) => {
+      return (
+        node.nodeType === Node.ELEMENT_NODE ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent.trim())
+      );
+    });
 
-    for (const node of nodes) {
-      if (
-        node.nodeType === Node.TEXT_NODE &&
-        node.textContent.trim().length > 0
-      ) {
-        const span = document.createElement('span');
-        span.textContent = node.textContent;
-        node.replaceWith(span);
-        if (!spanEl) spanEl = span;
-      } else if (node.nodeType === Node.ELEMENT_NODE) {
-        const tag = node.tagName.toLowerCase();
-        if (tag === 'svg' && !svgEl) {
-          svgEl = node;
-        } else if (tag === 'span' && !spanEl) {
-          spanEl = node;
-        }
-      }
-    }
+    const showLeft =
+      !this.iconHidden && nodes[0]?.tagName?.toLowerCase() === 'svg';
+    const showRight =
+      !this.iconHidden &&
+      nodes[nodes.length - 1]?.tagName?.toLowerCase() === 'svg';
 
-    if (svgEl && spanEl) {
-      div.classList.add('u-has-icon');
-      if (
-        svgEl.compareDocumentPosition(spanEl) & Node.DOCUMENT_POSITION_FOLLOWING
-      ) {
-        div.classList.add('u-has-icon--left');
-      } else {
-        div.classList.add('u-has-icon--right');
-      }
-    }
+    wrapper.classList.toggle('left-divider', showLeft);
+    wrapper.classList.toggle('right-divider', showRight);
   }
 
-  firstUpdated() {
-    this.#processLightDom();
-  }
-
-  /**
-   * Hide any icon in the slot.
-   */
   hideIcon() {
-    const icon = this.#findIconInSlot();
-    const div = this.shadowRoot.querySelector('div');
-    if (icon) {
-      this.#iconClasses = div.className;
-      div.className = '';
-    }
+    this.iconHidden = true;
   }
 
-  /**
-   * Show any icon in the slot, if it was hidden.
-   */
   showIcon() {
-    const icon = this.#findIconInSlot();
-    const div = this.shadowRoot.querySelector('div');
-    if (icon) div.className = this.#iconClasses;
-  }
-
-  /**
-   * @returns {boolean} True if it has an icon, false otherwise.
-   */
-  hasIcon() {
-    const icon = this.#findIconInSlot();
-    if (icon) return true;
-    return false;
-  }
-
-  /**
-   * 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 && node.tagName.toLowerCase() === 'svg') {
-        return node;
-      }
-    }
+    this.iconHidden = false;
   }
 
   render() {
-    return html`<div><slot></slot></div>`;
+    return html`<span class="wrapper"><slot></slot></span>`;
   }
 
   static init() {

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 :host {
   .a-label {
@@ -8,7 +8,7 @@
     }
 
     &__helper {
-      color: $label-helper;
+      color: var(--label-helper);
       font-size: math.div(16px, $base-font-size-px) + rem;
       font-weight: normal;
 

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

@@ -14,17 +14,14 @@ export class CfpbLabel extends LitElement {
   `;
 
   /**
-   * @property {string} for - Associate the label with an ID elsewhere.
    * @property {boolean} block - Whether this has block or inline helper text.
+   * @property {string} for - 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 },
-    };
-  }
+  static properties = {
+    block: { type: Boolean, reflect: true },
+    for: { type: String },
+  };
 
   constructor() {
     super();
@@ -48,7 +45,7 @@ export class CfpbLabel extends LitElement {
         for=${ifDefined(this.for && this.for.trim() ? this.for : undefined)}
       >
         <slot name="label"></slot>
-        <small class="${this.#helperClass}">
+        <small class=${this.#helperClass}>
           <slot name="helper"></slot>
         </small>
       </label>

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

@@ -0,0 +1,23 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icon';
+
+:host {
+  ::slotted(cfpb-list-item) {
+    border-bottom: 1px solid var(--gray-20);
+
+    // Overlap with the border of prior item.
+    margin-top: -1px;
+  }
+
+  ::slotted(cfpb-list-item:first-of-type) {
+    border-top: 1px solid var(--gray-20);
+
+    // Don't shift the first item.
+    margin-top: 0;
+  }
+
+  :focus {
+    outline: 1px dotted var(--pacific);
+  }
+}