@cfpb/cfpb-design-system 4.2.4 → 4.3.1

package/src/elements/cfpb-form-search-input/cfpb-form-search-input.component.scss

@@ -0,0 +1,217 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-forms/text-input' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icon' as *;
+
+:host {
+  // Theme
+  --input-border-default: var(--gray-60); // $input-border
+  --input-border-disabled: var(--gray-60);
+  --input-border-success: var(--green);
+  --input-border-warning: var(--gold);
+  --input-border-error: var(--red);
+
+  // Private vars
+  --input-border: var(--input-border-default);
+
+  .o-search-input {
+    position: relative;
+    display: flex;
+    width: initial;
+    flex: 0 1 100%;
+
+    // Add a min-width for the default width of the text input + clear button,
+    // so that when the clear button appears it doesn't bump the input width.
+    min-width: 300px;
+
+    background: var(--white);
+
+    // Create a faux input border that includes the input and clear button.
+    border: 1px solid var(--input-border);
+    outline: 0 solid var(--input-border);
+
+    label {
+      position: absolute;
+      left: 10px;
+      align-self: center;
+      cursor: pointer;
+      line-height: math.div(
+        14.4px,
+        $base-font-size-px
+      ); // 9px vertically centers icon.
+    }
+
+    // This line-height settings is taken from base.scss.
+    input {
+      line-height: math.div(19px, $base-font-size-px);
+    }
+
+    input[type='search'] {
+      font-size: 1rem;
+      width: 100%;
+      white-space: nowrap;
+      padding-left: 30px;
+      cursor: text;
+
+      // Remove default rounding in Safari.
+      appearance: none;
+
+      // Remove input border and re-create it around the input and clear X.
+      border: none;
+      box-shadow: none;
+      outline: none;
+    }
+
+    // Style the clear x button, and hide it by default.
+    button[type='reset'] {
+      display: none;
+      align-self: center;
+
+      color: var(--gray-40);
+      font-size: 20px;
+      border: 1px solid transparent;
+      background-color: transparent;
+      outline: 0;
+
+      // Set the touch target minimum for iOS.
+      width: 44px;
+      text-align: right;
+
+      > svg {
+        // Set width of SVG width to create a box for the focus rectangle.
+        width: 25px;
+
+        // Prevent targeting of button's internal SVG icon.
+        pointer-events: none;
+      }
+    }
+
+    button[type='reset']:hover {
+      color: var(--black);
+      cursor: pointer;
+    }
+
+    // Style the clear x focus rectangle.
+    button[type='reset']:focus {
+      color: var(--black);
+
+      // Put the focus rectangle on the icon
+      // because the button touch target is larger and would be lop-sided if
+      // we put the rectangle on the button.
+      > svg {
+        outline: 1px dotted var(--pacific);
+      }
+    }
+
+    // However, hide it if we haven't entered any text yet.
+    input[type='search']:placeholder-shown ~ button[type='reset'] {
+      display: none;
+    }
+
+    // Remove the default x mark in Chrome.
+    input[type='search']::-webkit-search-decoration,
+    input[type='search']::-webkit-search-cancel-button,
+    input[type='search']::-webkit-search-results-button,
+    input[type='search']::-webkit-search-results-decoration {
+      display: none;
+    }
+
+    &:hover,
+    &:focus-within {
+      border: 1px solid var(--pacific);
+      box-shadow: 0 0 0 1px var(--pacific);
+      outline-color: var(--pacific);
+      input[type='search'] {
+        outline: none;
+
+        // Remove the right-hand padding, because the clear button is showing.
+        padding-right: 0;
+      }
+    }
+
+    &:focus-within {
+      outline: 1px dotted var(--pacific);
+      outline-offset: 2px;
+    }
+
+    // Validation state coloring.
+    &--error,
+    &--warning,
+    &--success {
+      outline-width: 1px;
+    }
+
+    &--error {
+      --input-border: var(--input-border-error);
+    }
+
+    &--warning {
+      --input-border: var(--input-border-warning);
+    }
+
+    &--success {
+      --input-border: var(--input-border-success);
+    }
+
+    // Show the clear x button if we're focused within the search input area.
+    &:focus-within button[type='reset'],
+    &:hover button[type='reset'] {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  // If the value is on a search input by the backend, then the reset button
+  // will only reset the input back to initial value at page load. We add a
+  // small amount of JS to fully clear the input for this circumstance.
+  // However, this doesn't work when JS is disabled,
+  // so in that case we hide the reset button.
+  .no-js .o-search-input button[type='reset'] {
+    display: none !important;
+  }
+}
+
+:host([borderless]) {
+  .o-search-input {
+    border-color: transparent;
+
+    &:hover,
+    &:focus-within {
+      border-color: transparent;
+      box-shadow: 0 0 0 1px transparent;
+      outline-color: transparent;
+    }
+  }
+}
+
+:host([disabled]) {
+  --input-border: var(--input-border-disabled);
+
+  .o-search-input {
+    label,
+    input[type='search'] {
+      color: var(--input-border);
+    }
+
+    &:hover {
+      border: 1px solid var(--input-border);
+      box-shadow: none;
+
+      label,
+      input[type='search'] {
+        cursor: not-allowed;
+      }
+
+      button[type='reset'] {
+        display: none;
+      }
+    }
+
+    // Validation state coloring.
+    &--error:hover,
+    &--warning:hover,
+    &--success:hover {
+      outline-color: var(--input-border);
+    }
+  }
+}

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

@@ -0,0 +1,140 @@
+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 }),
+    );
+  }
+
+  focus() {
+    this.#searchInput.value.focus();
+  }
+
+  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,54 @@
 @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);
+  // !important is set so that disabled divider color overrides all other color.
+  --icon-text-divider: var(--icon-text-divider-disabled) !important;
+}
+
+// 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,34 @@
+@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) {
+    position: relative;
+    margin-top: 1px;
+
+    &::before,
+    &::after {
+      position: absolute;
+      content: '';
+      display: block;
+      width: 100%;
+      height: 1px;
+    }
+
+    &::before {
+      top: -1px;
+      border-top: 1px solid var(--gray-20);
+    }
+
+    &::after {
+      bottom: -1px;
+      border-bottom: 1px solid var(--gray-20);
+    }
+  }
+
+  :focus {
+    outline: 1px dotted var(--pacific);
+    outline-offset: 2px;
+  }
+}