@cfpb/cfpb-design-system 4.2.3 → 4.3.0

package/src/elements/cfpb-file-upload/index.js

@@ -13,19 +13,17 @@ export class CfpbFileUpload extends LitElement {
     ${unsafeCSS(styles)}
   `;
 
-  static get properties() {
-    return {
-      isDetailHidden: {
-        type: Boolean,
-        attribute: 'hidden', // Maps 'hidden' to 'isDetailHidden' property.
-        reflect: true, // Reflects the property change back to the attribute.
-      },
-      fileName: { type: String }, // The file name.
-      accept: { type: String }, // The accepted file types.
-      value: { type: String }, // The raw file name.
-      files: { type: FileList }, // A FileList object.
-    };
-  }
+  static properties = {
+    isDetailHidden: {
+      type: Boolean,
+      attribute: 'hidden', // Maps 'hidden' to 'isDetailHidden' property.
+      reflect: true, // Reflects the property change back to the attribute.
+    },
+    fileName: { type: String }, // The file name.
+    accept: { type: String }, // The accepted file types.
+    value: { type: String }, // The raw file name.
+    files: { type: FileList }, // A FileList object.
+  };
 
   constructor() {
     super();
@@ -71,9 +69,9 @@ export class CfpbFileUpload extends LitElement {
     return html`
       <cfpb-button
         variant="secondary"
-        @click="${() => {
+        @click=${() => {
           this.fileInput.value.click();
-        }}"
+        }}
       >
         <slot></slot>
       </cfpb-button>
@@ -81,9 +79,9 @@ export class CfpbFileUpload extends LitElement {
         class="a-btn a-btn--secondary"
         type="file"
         hidden
-        accept="${this.accept}"
-        @input="${() => this.#checkStatus()}"
-        @cancel="${() => this.#checkStatus()}"
+        accept=${this.accept}
+        @input=${() => this.#checkStatus()}
+        @cancel=${() => this.#checkStatus()}
         ${ref(this.fileInput)}
       />
       <div

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

@@ -0,0 +1,36 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icon' as *;
+
+:host {
+  .a-form-alert {
+    // Theme
+    --form-alert-icon-color: var(--form-alert-icon-color-default);
+
+    margin-top: math.div(15px, $base-font-size-px) + rem;
+    display: flex;
+    gap: math.div(5px, $base-font-size-px) + rem;
+
+    .cf-icon-svg {
+      color: var(--form-alert-icon-color);
+      flex: none;
+      margin-top: math.div(1px, $base-font-size-px) + rem;
+    }
+
+    &__text {
+      display: block;
+    }
+
+    &--success .cf-icon-svg {
+      --form-alert-icon-color: var(--form-alert-icon-color-success);
+    }
+
+    &--warning .cf-icon-svg {
+      --form-alert-icon-color: var(--form-alert-icon-color-warning);
+    }
+
+    &--error .cf-icon-svg {
+      --form-alert-icon-color: var(--form-alert-icon-color-error);
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import styles from './cfpb-form-alert.component.scss';
+import errorIcon from '../../components/cfpb-icons/icons/error-round.svg';
+import warningIcon from '../../components/cfpb-icons/icons/warning-round.svg';
+import successIcon from '../../components/cfpb-icons/icons/approved-round.svg';
+
+/**
+ * @element cfpb-form-search
+ * @slot - The label for the form input.
+ */
+export class CfpbFormAlert extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  /**
+   * @property {string} validation - Validation style: error, warning, success.
+   * @returns {object} The map of properties.
+   */
+  static properties = {
+    validation: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.validation = 'error';
+  }
+
+  get icon() {
+    let icon = errorIcon;
+    if (this.validation === 'warning') {
+      icon = warningIcon;
+    } else if (this.validation === 'success') {
+      icon = successIcon;
+    }
+
+    return icon;
+  }
+
+  render() {
+    return html`<div
+      class="a-form-alert a-form-alert--${this.validation}"
+      role="alert"
+    >
+      ${unsafeSVG(this.icon)}
+      <div class="a-form-alert__text"><slot></slot></div>
+    </div>`;
+  }
+
+  static init() {
+    window.customElements.get('cfpb-form-alert') ||
+      window.customElements.define('cfpb-form-alert', CfpbFormAlert);
+  }
+}

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