@cfpb/cfpb-design-system 4.2.3 → 4.3.0

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

@@ -0,0 +1,194 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import styles from './cfpb-form-search.component.scss';
+import { ref, createRef } from 'lit/directives/ref.js';
+import { CfpbFormSearchInput } from '../cfpb-form-search-input';
+import { SearchService } from '../cfpb-utilities/search-service.js';
+import { CfpbList } from '../cfpb-list';
+import { CfpbFormAlert } from '../cfpb-form-alert';
+
+/**
+ * @element cfpb-form-search
+ */
+export class CfpbFormSearch extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  static formAssociated = true;
+
+  /**
+   * @property {boolean} disabled - Whether the choice 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 {string} placeholder - The placeholder value.
+   * @property {string} maxlength - The maximum characters allowed in the input.
+   * @property {string} ariaLabelInput - aria-label for input.
+   * @property {string} ariaLabelButton - aria-label for button.
+   * @returns {object} The map of properties.
+   */
+  static get properties() {
+    return {
+      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' },
+      ariaLabelButton: { type: String, attribute: 'aria-label-button' },
+      searchList: { type: Array },
+    };
+  }
+
+  #list = createRef();
+  #popup = createRef();
+
+  #internals;
+  #search;
+
+  constructor() {
+    super();
+
+    this.value = '';
+    this.#internals = this.attachInternals();
+    this.searchList = [];
+  }
+
+  #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 link = li.querySelector('a');
+      if (link) {
+        return {
+          value: link.textContent.trim(),
+          href: link.getAttribute('href'),
+        };
+      }
+      return { value: li.textContent.trim() };
+    });
+
+    this.searchList = items;
+
+    this.#search = new SearchService(
+      items.map((item) => {
+        return item.value;
+      }),
+    );
+  }
+
+  #onClear() {
+    this.#popup.value.classList.remove('show');
+    this.#list.value.showAllItems();
+  }
+
+  #onInput(evt) {
+    if (evt.target.value.length > 1) {
+      this.#popup.value.classList.add('show');
+      if (this.#search) {
+        this.#list.value.filterItems(this.#search.search(evt.target.value));
+      }
+    } else {
+      this.#popup.value.classList.remove('show');
+    }
+
+    this.value = evt.target.value;
+  }
+
+  #onBlur() {
+    this.#popup.value.classList.remove('show');
+  }
+
+  get isSearchDisabled() {
+    return this.disabled || this.isOverMaxLength;
+  }
+
+  get isOverMaxLength() {
+    const isOverMax = this.value.length > this.maxlength;
+    if (isOverMax) this.validation = 'error';
+    else this.validation = '';
+    return isOverMax;
+  }
+
+  #onClickSearch(evt) {
+    evt.preventDefault();
+    if (this.disabled) return;
+
+    console.log(this.value);
+
+    if (this.value !== '') {
+      this.#internals.setFormValue(this.value);
+      this.#internals.form?.requestSubmit();
+    }
+  }
+
+  render() {
+    return html` <!--Light DOM content-->
+      <slot @slotchange=${this.#onSlotChange}></slot>
+
+      <!--Shadow DOM content-->
+      <div class="o-form-search">
+        <div class="container">
+          <cfpb-form-search-input
+            ?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}
+            @blur=${this.#onBlur}
+          ></cfpb-form-search-input>
+
+          <div class="popup" ${ref(this.#popup)}>
+            <cfpb-list .childData=${this.searchList} ${ref(this.#list)}>
+            </cfpb-list>
+          </div>
+        </div>
+
+        <button
+          class="a-btn"
+          type="submit"
+          aria-label="Search for term(s)"
+          ?disabled=${this.isSearchDisabled}
+          @click=${this.#onClickSearch}
+        >
+          Search
+        </button>
+      </div>
+
+      ${this.isOverMaxLength
+        ? html`<cfpb-form-alert validation="error">
+            Searches are limited to ${this.maxlength} characters.
+          </cfpb-form-alert>`
+        : null}`;
+  }
+
+  static init() {
+    CfpbFormSearchInput.init();
+    CfpbList.init();
+    CfpbFormAlert.init();
+
+    window.customElements.get('cfpb-form-search') ||
+      window.customElements.define('cfpb-form-search', CfpbFormSearch);
+  }
+}

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