@cfpb/cfpb-design-system 4.2.4 → 4.3.0

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

@@ -1,6 +1,8 @@
 import { html, LitElement, css, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './cfpb-form-choice.component.scss';
+import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
 
 // The validation states are error, warning, or success.
 const VALID_VALIDATION = ['error', 'warning', 'success'];
@@ -17,29 +19,27 @@ export class CfpbFormChoice extends LitElement {
     ${unsafeCSS(styles)}
   `;
 
+  #checkboxIcon = createRef();
+
   /**
    * @property {boolean} checked - Whether the choice is checked or not.
    * @property {boolean} disabled - Whether the choice is disabled or not.
    * @property {boolean} large - Whether the choice has a large target area.
    * @property {string} validation - Validation style: error, warning, success.
    * @property {string} type - Choice type: checkbox or radio.
-   * @property {string} inlist - Whether the choice appears in a <li> list.
    * @property {string} name - The name within a form.
    * @property {string} value - The value to submit within a form.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      checked: { type: Boolean, reflect: true },
-      disabled: { type: Boolean },
-      large: { type: Boolean },
-      validation: { type: String },
-      type: { type: String },
-      inlist: { type: Boolean, attribute: true },
-      name: { type: String },
-      value: { type: String },
-    };
-  }
+  static properties = {
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean },
+    large: { type: Boolean },
+    validation: { type: String },
+    type: { type: String },
+    name: { type: String },
+    value: { type: String },
+  };
 
   constructor() {
     super();
@@ -48,12 +48,12 @@ export class CfpbFormChoice extends LitElement {
     this.large = false;
     this.validation = '';
     this.type = 'checkbox';
-    this.inlist = false;
     this.name = '';
     this.value = '';
   }
 
-  #onChange() {
+  #onChange(evt) {
+    this.checked = evt.target.checked;
     this.dispatchEvent(
       new Event('change', {
         bubbles: true,
@@ -71,6 +71,26 @@ export class CfpbFormChoice extends LitElement {
     );
   }
 
+  #onFocus() {
+    if (this.#checkboxIcon.value) {
+      this.#checkboxIcon.value.focus();
+    }
+  }
+
+  #onBlur() {
+    if (this.#checkboxIcon.value) {
+      this.#checkboxIcon.value.blur();
+    }
+  }
+
+  #onMouseOver() {
+    if (this.#checkboxIcon.value) this.#checkboxIcon.value.mouseover();
+  }
+
+  #onMouseLeave() {
+    if (this.#checkboxIcon.value) this.#checkboxIcon.value.mouseleave();
+  }
+
   focus() {
     this.shadowRoot.querySelector('input').focus();
   }
@@ -98,7 +118,6 @@ export class CfpbFormChoice extends LitElement {
       'm-form-field': true,
       [`m-form-field--${this.type}`]: true,
       'm-form-field--lg-target': this.large,
-      'm-form-field--in-list': this.inlist,
     };
 
     if (this.#validValidation)
@@ -107,22 +126,41 @@ export class CfpbFormChoice extends LitElement {
     return classes;
   }
 
+  #renderCheckbox() {
+    return html`
+      <cfpb-checkbox-icon
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        validation=${this.#validValidation}
+        ${ref(this.#checkboxIcon)}
+      ></cfpb-checkbox-icon>
+    `;
+  }
+
   render() {
     const classes = classMap(this.#baseClass);
 
     return html`
-      <div class="${classes}" ?large=${this.large}>
+      <div
+        class=${classes}
+        ?large=${this.large}
+        @mouseover=${this.#onMouseOver}
+        @mouseleave=${this.#onMouseLeave}
+      >
         <input
           class="a-${this.type}"
-          type="${this.#validType}"
+          type=${this.#validType}
           id="choice-input"
           ?disabled=${this.disabled}
           .checked=${this.checked}
           @change=${this.#onChange}
           @input=${this.#onInput}
+          @focus=${this.#onFocus}
+          @blur=${this.#onBlur}
           aria-invalid=${this.#validValidation === 'error' ? 'true' : 'false'}
         />
         <label class="a-label" for="choice-input">
+          ${this.type === 'checkbox' ? this.#renderCheckbox() : null}
           <slot></slot>
         </label>
       </div>
@@ -130,6 +168,8 @@ export class CfpbFormChoice extends LitElement {
   }
 
   static init() {
+    CfpbCheckboxIcon.init();
+
     window.customElements.get('cfpb-form-choice') ||
       window.customElements.define('cfpb-form-choice', CfpbFormChoice);
   }

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

@@ -0,0 +1,54 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button' as *;
+
+:host {
+  // Hide light DOM content.
+  ::slotted(ul),
+  ::slotted(ol) {
+    display: none !important;
+  }
+
+  // This line-height settings is taken from base.scss.
+  button {
+    line-height: math.div(19px, $base-font-size-px);
+  }
+
+  .o-form-search {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    row-gap: math.div(15px, $base-font-size-px) + rem;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      flex-direction: row;
+      border-left: 0;
+      button[type='submit'] {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        flex-basis: 25%;
+      }
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+    }
+
+    .popup {
+      display: none;
+      position: absolute;
+      top: 34px;
+      z-index: 100;
+      background: white;
+      border: 1px solid var(--pacific);
+      border-top: 0;
+      width: calc(100% - 2px);
+    }
+
+    .popup.show {
+      display: block;
+    }
+  }
+}

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