@cfpb/cfpb-design-system 4.2.4 → 4.3.1

package/src/elements/cfpb-form-choice/cfpb-form-choice.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 *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 :host {
@@ -17,14 +17,7 @@
     // Private variables.
     --choice-border-width-addendum: 0;
 
-    &--in-list label {
-      box-sizing: border-box;
-      padding-top: math.div(5px, $base-font-size-px) + em;
-      padding-right: 0;
-      padding-bottom: math.div(5px, $base-font-size-px) + em;
-      padding-left: math.div(10px, $base-font-size-px) + em;
-      width: 100%;
-    }
+    width: max-content;
 
     .a-label + .a-text-input {
       margin-top: math.div(5px, $base-font-size-px) + em;
@@ -42,31 +35,6 @@
 
         // Wrap long words in narrow form fields to prevent clipping
         overflow-wrap: anywhere;
-
-        &::before {
-          display: inline-block;
-          grid-row-start: 1;
-          grid-row-end: 3;
-          border: 1px solid var(--choice-border);
-          outline: var(--choice-border-width-addendum) solid
-            var(--choice-border);
-          height: math.div(18px, $base-font-size-px) + em;
-          width: math.div(18px, $base-font-size-px) + em;
-          margin-right: 10px;
-          background-color: var(--choice-bg);
-          content: '';
-          vertical-align: top;
-
-          // Offset so that the checkbox/radio fits within focused area.
-          position: relative;
-          top: 1px;
-          left: 1px;
-        }
-
-        &:hover::before,
-        &.hover::before {
-          border-color: var(--choice-border-hover);
-        }
       }
 
       .a-checkbox,
@@ -80,23 +48,9 @@
         }
 
         &:disabled {
-          &:checked + .a-label::before,
-          &:focus + .a-label::before,
-          &.focus + .a-label::before,
-          &:hover + .a-label::before,
-          &.hover + .a-label::before {
-            border-color: var(--choice-border);
-            outline: none;
-            box-shadow: none; // Applies only to radio buttons.
-          }
-
           & + .a-label {
             cursor: not-allowed;
             color: var(--choice-label-disabled);
-
-            &::before {
-              outline: none;
-            }
           }
         }
       }
@@ -127,40 +81,49 @@
       }
     }
 
-    &--checkbox {
-      .a-checkbox {
+    &--radio {
+      input:disabled {
+        &:checked + .a-label::before,
         &:focus + .a-label::before,
-        &.focus + .a-label::before {
-          border-color: var(--choice-border-focus);
-          box-shadow: 0 0 0 1px var(--choice-border-focus);
-          outline-color: var(--choice-border-focus);
-        }
-
+        &.focus + .a-label::before,
         &:hover + .a-label::before,
         &.hover + .a-label::before {
-          border-color: var(--choice-border-hover);
-          box-shadow: 0 0 0 1px var(--choice-border-hover);
-          outline-color: var(--choice-border-hover);
+          border-color: var(--choice-border);
+          outline: none;
+          box-shadow: none; // Applies only to radio buttons.
         }
 
-        &:checked + .a-label::before {
-          --cfpb-background-icon-svg: 'approved';
-
-          background-size: auto $cf-icon-height;
-          background-repeat: no-repeat;
-          background-position: center 0;
-        }
-        &:disabled:checked + .a-label::before {
-          // RGB values are CFPB gray (#5a5d61).
-          // For some reason SVG isn't accepting hex values for the fill.
-          --cfpb-background-icon-svg: 'approved rgb(90,93,97)';
+        & + .a-label {
+          &::before {
+            outline: none;
+          }
         }
       }
-    }
 
-    &--radio {
+      &:hover::before,
+      &.hover::before {
+        border-color: var(--choice-border-hover);
+      }
+
       .a-label {
         &::before {
+          display: inline-block;
+          grid-row-start: 1;
+          grid-row-end: 3;
+          border: 1px solid var(--choice-border);
+          outline: var(--choice-border-width-addendum) solid
+            var(--choice-border);
+          height: math.div(18px, $base-font-size-px) + em;
+          width: math.div(18px, $base-font-size-px) + em;
+          margin-right: 10px;
+          background-color: var(--choice-bg);
+          content: '';
+          vertical-align: top;
+
+          // Offset so that the checkbox/radio fits within focused area.
+          position: relative;
+          top: 1px;
+          left: 1px;
           border-radius: 50%;
 
           /* The rotate is needed to fix a bug in Firefox where radio
@@ -217,27 +180,28 @@
     }
 
     &--lg-target {
+      width: 100%;
       display: block;
 
       .a-label {
         box-sizing: border-box;
         width: 100%;
         padding: 15px;
-        background-color: $form-field-input-lg-target-bg;
+        background-color: var(--form-field-input-lg-target-bg);
       }
 
       .a-checkbox,
       .a-radio {
         &:checked + .a-label {
-          background-color: $form-field-input-lg-target-bg-selected;
-          box-shadow: inset 0 0 0 1px $form-field-input-lg-target-border;
+          background-color: var(--form-field-input-lg-target-bg-selected);
+          box-shadow: inset 0 0 0 1px var(--form-field-input-lg-target-border);
         }
 
         &:hover + .a-label,
         &.hover + .a-label,
         &:focus + .a-label,
         &.focus + .a-label {
-          box-shadow: inset 0 0 0 2px $form-field-input-lg-target-border;
+          box-shadow: inset 0 0 0 2px var(--form-field-input-lg-target-border);
         }
 
         &:focus + .a-label,
@@ -251,14 +215,11 @@
         &:hover:disabled + .a-label {
           color: var(--choice-label-disabled);
           box-shadow: none;
-          background-color: $form-field-input-lg-target-bg-disabled;
+          background-color: var(--form-field-input-lg-target-bg-disabled);
         }
 
         &:checked:disabled + .a-label {
-          &,
-          &::before {
-            border: 1px solid var(--form-field-border-disabled);
-          }
+          border: 1px solid var(--form-field-border-disabled);
         }
       }
     }

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