@cfpb/cfpb-design-system 4.2.4 → 4.3.0

package/src/elements/cfpb-expandable/cfpb-expandable.component.scss

@@ -0,0 +1,218 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/base' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+@use '../cfpb-utilities/transition/transition.scss' as *;
+
+:host {
+  // Theme
+
+  --expandable-border: var(--gray-40);
+
+  .cf-icon-svg {
+    height: 1.1875em;
+    vertical-align: middle;
+    fill: currentcolor;
+  }
+
+  // Overide heading defaults.
+  ::slotted([slot='header']) {
+    margin-bottom: 0 !important;
+    color: var(--black) !important;
+    font-weight: 500 !important;
+
+    // h4 size.
+    font-size: math.div(18px, $base-font-size-px) + em !important;
+
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      font-size: math.div(16px, $base-font-size-px) + em !important;
+    }
+
+    .o-expandable--padded {
+      // h2 size.
+      font-size: math.div(26px, $base-font-size-px) + em !important;
+
+      // Mobile only.
+      @include respond-to-max($bp-xs-max) {
+        font-size: math.div(22px, $base-font-size-px) + em !important;
+      }
+    }
+  }
+
+  //
+  // Recommended expandable pattern
+  //
+
+  .o-expandable {
+    position: relative;
+
+    //
+    // Header
+    //
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      gap: 10px;
+      padding: math.div(10px, $base-font-size-px) + em
+        math.div(15px, $base-font-size-px) + em;
+      border: 0;
+      background-color: transparent;
+      cursor: pointer;
+
+      &:focus {
+        outline: 1px dotted var(--black);
+        outline-offset: 2px;
+      }
+
+      .o-expandable__cue-close,
+      .o-expandable__cue-open {
+        display: none;
+      }
+
+      &[aria-expanded='false'] .o-expandable__cue-open {
+        display: block;
+      }
+
+      &[aria-expanded='true'] .o-expandable__cue-close {
+        display: block;
+      }
+    }
+
+    // Using the button element with .o-expandable__header requires setting
+    // an explicit width.
+    button.o-expandable__header {
+      width: 100%;
+      text-align: left;
+    }
+
+    //
+    // Expandable text elements
+    //
+
+    &__label {
+      // Grow to available width.
+      flex-grow: 1;
+    }
+
+    &__icon,
+    &__label {
+      // h4 size.
+      font-size: math.div(18px, $base-font-size-px) + em !important;
+
+      // Mobile only.
+      @include respond-to-max($bp-xs-max) {
+        font-size: math.div(16px, $base-font-size-px) + em !important;
+      }
+    }
+
+    &__cues {
+      align-self: center;
+      color: var(--pacific);
+      font-size: math.div(16px, $base-font-size-px) + em;
+      line-height: math.div($base-line-height-px, $base-font-size-px);
+    }
+
+    &__content {
+      padding: math.div(15px, $base-font-size-px) + em;
+      padding-top: 0;
+
+      // The divider between __header and __content.
+      &::before {
+        content: '';
+        display: block;
+        border-top: 1px solid var(--expandable-border);
+        padding-top: math.div(15px, $base-font-size-px) + em;
+      }
+
+      &::after {
+        padding-bottom: math.div(15px, $base-font-size-px) + em;
+        width: 100%;
+      }
+    }
+
+    //
+    // Padded expandable modifier
+    //
+
+    &--padded {
+      .o-expandable {
+        &__header {
+          padding: math.div(25px, $base-font-size-px) + em
+            math.div(15px, $base-font-size-px) + em;
+        }
+
+        &__icon,
+        &__label {
+          // h2 size.
+          font-size: math.div(26px, $base-font-size-px) + em !important;
+
+          // Mobile only.
+          @include respond-to-max($bp-xs-max) {
+            font-size: math.div(22px, $base-font-size-px) + em !important;
+          }
+        }
+      }
+    }
+
+    //
+    // Expandable with a background color modifier
+    //
+
+    &--background {
+      background: var(--gray-5);
+    }
+
+    //
+    // Expandable with a border modifier
+    //
+
+    &--border {
+      border: 1px solid var(--expandable-border);
+    }
+
+    //
+    // Expandable groups
+    //
+
+    &-group {
+      .o-expandable {
+        border-bottom: 1px solid var(--expandable-border);
+
+        &:first-child {
+          border-top: 1px solid var(--expandable-border);
+        }
+      }
+    }
+
+    @media print {
+      // Hide the interactive expandable cues when printing
+      &__header[aria-expanded='true'] &__cue-close,
+      &__header[aria-expanded='false'] &__cue-open {
+        display: none;
+      } // Ensure all expandables are expanded when printing.
+      // To accommodate print stylesheets that display the raw URL after links,
+      // set an enormous max height to accommodate expandables that have a lot of links.
+      &__content[aria-expanded='false'] {
+        display: block;
+        max-height: 99999px !important;
+      }
+    }
+  }
+}
+
+// Used when the set language reads right-to-left
+html[lang='ar'] {
+  :host {
+    .o-expandable {
+      &__header {
+        text-align: right;
+      }
+
+      &__cues {
+        text-align: left;
+      }
+    }
+  }
+}

package/src/elements/cfpb-expandable/index.js

@@ -0,0 +1,127 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import styles from './cfpb-expandable.component.scss';
+import expandIcon from '../../components/cfpb-icons/icons/plus-round.svg';
+import collapseIcon from '../../components/cfpb-icons/icons/minus-round.svg';
+import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
+import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
+
+/**
+ *
+ * @element cfpb-button
+ * @slot - The main content for the button.
+ */
+export class CfpbExpandable extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  #flyoutMenu;
+  #transition;
+
+  /**
+   * @property {boolean} isExpanded - Whether the expandable is expanded or not.
+   * @returns {object} The map of properties.
+   */
+  static get properties() {
+    return {
+      isExpanded: { type: Boolean, attribute: 'open', reflect: true },
+    };
+  }
+
+  constructor() {
+    super();
+  }
+
+  firstUpdated() {
+    const root = this.shadowRoot.querySelector('div');
+    const contentDom = root.querySelector('.o-expandable__content');
+
+    // If it's expanded we don't set an initial height,
+    // as it will be calculated internally.
+    const initialClass = this.isExpanded
+      ? MaxHeightTransition.CLASSES.MH_DEFAULT
+      : MaxHeightTransition.CLASSES.MH_ZERO;
+    this.#transition = new MaxHeightTransition(contentDom).init(initialClass);
+
+    this.#flyoutMenu = new FlyoutMenu(root);
+
+    this.#flyoutMenu.setTransition(
+      this.#transition,
+      this.#transition.maxHeightZero,
+      this.#transition.maxHeightDefault,
+    );
+
+    this.#flyoutMenu.init(this.isExpanded);
+
+    // Add events.
+    this.#flyoutMenu.addEventListener('expandbegin', () => {
+      this.isExpanded = true;
+      contentDom.classList.remove('u-hidden');
+      this.dispatchEvent(
+        new CustomEvent('expandbegin', {
+          detail: { target: this },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    });
+    this.#flyoutMenu.addEventListener('collapseend', () => {
+      this.isExpanded = false;
+      contentDom.classList.add('u-hidden');
+    });
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('isExpanded')) {
+      const oldVal = changedProps.get('isExpanded');
+      const newVal = this.isExpanded;
+
+      if (newVal !== oldVal) {
+        if (newVal) {
+          this.#flyoutMenu.expand();
+        } else {
+          this.#flyoutMenu.collapse();
+        }
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="o-expandable o-expandable--background o-expandable--border"
+        data-js-hook="behavior_flyout-menu"
+      >
+        <button
+          class="o-expandable__header"
+          title="Expand content"
+          data-js-hook="behavior_flyout-menu_trigger"
+        >
+          <slot name="header" class="o-expandable__label"></slot>
+          <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="Show">
+              ${unsafeSVG(expandIcon)}
+              <span class="u-visually-hidden">Show</span>
+            </span>
+            <span class="o-expandable__cue-close" role="img" aria-label="Hide">
+              ${unsafeSVG(collapseIcon)}
+              <span class="u-visually-hidden">Hide</span>
+            </span>
+          </span>
+        </button>
+        <div
+          class="o-expandable__content"
+          data-js-hook="behavior_flyout-menu_content"
+        >
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  static init() {
+    window.customElements.get('cfpb-expandable') ||
+      window.customElements.define('cfpb-expandable', CfpbExpandable);
+  }
+}

package/src/elements/cfpb-file-upload/cfpb-file-upload.component.scss

@@ -1,5 +1,5 @@
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/vars' as *;
 
 :host {
   // This prevents the child button from having an empty gap after the button.

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