@cfpb/cfpb-design-system 4.2.4 → 4.3.0

package/src/elements/cfpb-button/cfpb-button-link.scss

@@ -0,0 +1,96 @@
+@use 'sass:math';
+@use './vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
+//
+// Button link
+//
+
+/*
+Link text and underline.
+$v: Link link and visited color.
+$h: Link hover color.
+$f: Link focus color.
+$a: Link active color.
+*/
+@mixin u-btn-link-states($selector, $v, $h, $f, $a) {
+  #{$selector} {
+    &,
+    &:link,
+    &:visited {
+      text-decoration-color: $v;
+      background-color: transparent;
+      color: $v;
+    }
+
+    &:hover,
+    &.hover {
+      text-decoration-color: $h;
+      text-decoration-style: solid;
+      background-color: transparent;
+      color: $h;
+    }
+
+    &:focus,
+    &.focus {
+      background-color: transparent;
+      outline: 1px dotted $f;
+      color: $f;
+    }
+
+    &:active,
+    &.active {
+      text-decoration-color: $a;
+      text-decoration-style: solid;
+      background-color: transparent;
+      color: $a;
+    }
+  }
+}
+
+.a-btn--link {
+  // Padding added so the focus rectangle falls below the underline.
+  padding: 1.5px 0;
+  border-radius: 0;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-style: dotted;
+  text-underline-offset: 4.5px;
+
+  &:has(svg) {
+    // Button links should be closer to their icon.
+    gap: math.div(5px, $base-font-size-px) + rem;
+
+    // Button links shouldn't have a divider.
+    &::before {
+      display: none;
+    }
+  }
+}
+
+@include u-btn-link-states(
+  '.a-btn--link',
+  var(--link-text),
+  var(--link-text-hover),
+  var(--link-text),
+  var(--link-text-active)
+);
+
+//
+// Secondary button link
+//
+
+// The .a-btn--link.a-btn--secondary combo shouldn't be used,
+// so we provide no styles.
+
+//
+// Destructive action button link
+//
+
+@include u-btn-link-states(
+  '.a-btn--link.a-btn--warning',
+  var(--btn-warning-bg),
+  var(--btn-warning-bg-hover),
+  var(--btn-warning-bg),
+  var(--btn-warning-bg-active)
+);

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

@@ -1,7 +1,7 @@
-@use '@cfpb/cfpb-design-system/src/base' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/button' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/button-link' as *;
+@use '@cfpb/cfpb-design-system/src/elements/base' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button-link' as *;
 
 :host {
   // This prevents the child button from having an empty gap after the button.
@@ -13,10 +13,16 @@
   // Mobile only.
   @include respond-to-max($bp-xs-max) {
     width: 100%;
+
+    button,
+    [role='button'] {
+      width: 100%;
+    }
   }
 }
 
 :host([flush-left]) {
+  button,
   [role='button'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -24,6 +30,7 @@
 }
 
 :host([flush-right]) {
+  button,
   [role='button'] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;

package/src/elements/cfpb-button/cfpb-button.scss

@@ -0,0 +1,222 @@
+@use 'sass:math';
+@use './vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
+//
+// Default button
+//
+
+button.a-btn::-moz-focus-inner,
+input.a-btn::-moz-focus-inner {
+  // Fixes inconsistent button.btn height in Firefox.
+  // Helps with inconsistent input.btn height in Firefox but not completely.
+  border: 0;
+}
+
+@mixin u-btn-divider() {
+  content: '';
+  border-left: 1px solid var(--btn-divider);
+  order: 2;
+  place-self: normal;
+}
+
+.a-btn {
+  line-height: math.div(19px, $base-font-size-px);
+  appearance: none;
+  display: flex;
+  gap: math.div(10px, $base-font-size-px) + rem;
+
+  box-sizing: border-box;
+  padding: math.div($btn-v-padding, $btn-font-size) + em
+    math.div($btn-h-padding, $btn-font-size) + em;
+  border: 0;
+  margin: 0;
+  border-radius: math.div($btn-border-radius-size, $btn-font-size) + em;
+  cursor: pointer;
+  font-size: math.div($btn-font-size, $base-font-size-px) + em;
+  font-weight: 500;
+  text-align: center;
+  text-decoration: none;
+  transition: background-color 0.1s;
+  width: fit-content;
+  height: fit-content;
+  justify-content: center;
+  align-items: center;
+
+  &,
+  &:link,
+  &:visited {
+    background-color: var(--btn-bg);
+    color: var(--btn-text);
+  }
+
+  &:hover,
+  &.hover,
+  &:focus,
+  &.focus {
+    background-color: var(--btn-bg-hover);
+    color: var(--btn-text);
+  }
+
+  &:focus,
+  &.focus {
+    outline: 1px dotted var(--btn-bg);
+
+    // The outline-offset property is not supported everywhere (e.g. IE)
+    // but it adds a nice touch in browsers where it is.
+    outline-offset: 1px;
+  }
+
+  &:active,
+  &.active {
+    background-color: var(--btn-bg-active);
+  }
+
+  //
+  // Secondary button
+  //
+
+  &--secondary {
+    &,
+    &:link,
+    &:visited {
+      background-color: var(--btn-secondary-bg);
+      color: var(--btn-secondary-text);
+      box-shadow: 0 0 0 1px var(--btn-secondary-border) inset;
+    }
+
+    &:hover,
+    &.hover,
+    &:focus,
+    &.focus {
+      background-color: var(--btn-secondary-bg-hover);
+      color: var(--btn-secondary-text-hover);
+      box-shadow: 0 0 0 1px var(--btn-secondary-border-hover) inset;
+    }
+
+    &:focus,
+    &.focus {
+      outline-color: var(--btn-secondary-border);
+    }
+
+    &:active,
+    &.active {
+      background-color: var(--btn-secondary-bg-active);
+      color: var(--btn-secondary-text-active);
+      box-shadow: 0 0 0 1px var(--btn-secondary-border-active) inset;
+    }
+  }
+
+  //
+  // Destructive action button
+  //
+
+  &--warning {
+    &,
+    &:link,
+    &:visited {
+      background-color: var(--btn-warning-bg);
+      color: var(--btn-warning-text);
+    }
+
+    &:hover,
+    &.hover,
+    &:focus,
+    &.focus {
+      background-color: var(--btn-warning-bg-hover);
+    }
+
+    &:focus,
+    &.focus {
+      outline-color: var(--btn-warning-bg);
+    }
+
+    &:active,
+    &.active {
+      background-color: var(--btn-warning-bg-active);
+    }
+  }
+
+  //
+  // Disabled button
+  //
+
+  &--disabled,
+  &[disabled],
+  &[aria-disabled='true'] {
+    &,
+    &:link,
+    &:visited,
+    &:hover,
+    &.hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: var(--btn-disabled-bg);
+      color: var(--btn-disabled-text);
+      cursor: default; // Fallback for IE/Opera
+      cursor: not-allowed;
+    }
+
+    &:focus,
+    &.focus {
+      outline-color: var(--btn-disabled-outline);
+    }
+  }
+
+  //
+  // Full width button on x-small screens
+  //
+  &--full-on-xs {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      width: 100%;
+    }
+  }
+
+  // Set either the text or icon as the last item in the button.
+  &:has(svg + span) {
+    span {
+      order: 3;
+    }
+  }
+
+  &:has(span + svg) {
+    svg {
+      order: 3;
+
+      // Prevent icon from shrinking when button wraps.
+      flex: none;
+    }
+  }
+
+  // Handle button with icon divider logic.
+  &:not(.a-btn--hide-icon):has(svg + span)::before,
+  &:not(.a-btn--hide-icon):has(span + svg)::before {
+    @include u-btn-divider;
+  }
+
+  // Handle different coloring in divider.
+  &--secondary:has(svg)::before {
+    border-color: var(--btn-secondary-divider) !important;
+  }
+
+  &--warning:has(svg)::before {
+    border-color: var(--btn-warning-divider) !important;
+  }
+
+  &--disabled:has(svg)::before,
+  &[disabled]:has(svg)::before,
+  &[aria-disabled='true']:has(svg)::before {
+    border-color: var(--btn-disabled-divider) !important;
+  }
+
+  // Hide the icon if the a-btn--hide-icon modifier is set.
+  // Useful for showing and hiding a loading icon, for example.
+  &--hide-icon {
+    svg {
+      display: none;
+    }
+  }
+}

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

@@ -24,41 +24,40 @@ export class CfpbButton extends LitElement {
    * @property {string} type - The button type: button, submit, or reset.
    * @property {string} href - The URL to link to (makes the button a link).
    * @property {boolean} disabled - Whether the button is disabled or not.
-   * @property {string} variant - The button variant: secondary and warning.
+   * @property {string} variant
+   *   The button variant: primary, secondary, or warning.
    * @property {boolean} fullOnMobile - Whether to be width 100% on mobile.
    * @property {boolean} flushLeft - Whether button is not rounded on left.
    * @property {boolean} flushRight - Whether button is not rounded on right.
    * @property {boolean} styleAsLink - Style the button as a link.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      type: { type: String },
-      href: { type: String },
-      disabled: { type: Boolean, reflect: true },
-      variant: { type: String },
-      fullOnMobile: {
-        type: Boolean,
-        attribute: 'full-on-mobile',
-        reflect: true,
-      },
-      flushLeft: {
-        type: Boolean,
-        attribute: 'flush-left',
-        reflect: true,
-      },
-      flushRight: {
-        type: Boolean,
-        attribute: 'flush-right',
-        reflect: true,
-      },
-      styleAsLink: {
-        type: Boolean,
-        attribute: 'style-as-link',
-        reflect: true,
-      },
-    };
-  }
+  static properties = {
+    type: { type: String },
+    href: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    variant: { type: String },
+    fullOnMobile: {
+      type: Boolean,
+      attribute: 'full-on-mobile',
+      reflect: true,
+    },
+    flushLeft: {
+      type: Boolean,
+      attribute: 'flush-left',
+      reflect: true,
+    },
+    flushRight: {
+      type: Boolean,
+      attribute: 'flush-right',
+      reflect: true,
+    },
+    styleAsLink: {
+      type: Boolean,
+      attribute: 'style-as-link',
+      reflect: true,
+    },
+  };
 
   // DOM references.
   #iconTextDom = createRef();

package/src/elements/cfpb-button/vars.css

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:host {
+  --btn-bg: var(--pacific);
+  --btn-bg-active: var(--navy);
+  --btn-bg-hover: var(--pacific-dark);
+  --btn-disabled-bg: var(--gray-20);
+  --btn-disabled-divider: var(--gray-60);
+  --btn-disabled-outline: var(--gray-20);
+  --btn-disabled-text: var(--gray-dark);
+  --btn-divider: var(--pacific-60);
+  --btn-secondary-bg: var(--white);
+  --btn-secondary-bg-active: var(--pacific-20);
+  --btn-secondary-bg-hover: var(--pacific-10);
+  --btn-secondary-border: var(--pacific);
+  --btn-secondary-border-active: var(--navy);
+  --btn-secondary-border-hover: var(--pacific-dark);
+  --btn-secondary-divider: var(--pacific-60);
+  --btn-secondary-text: var(--pacific);
+  --btn-secondary-text-active: var(--navy);
+  --btn-secondary-text-hover: var(--pacific-dark);
+  --btn-text: var(--white);
+  --btn-warning-bg: var(--red-mid-dark);
+  --btn-warning-bg-active: var(--gray-dark);
+  --btn-warning-bg-hover: var(--red-dark);
+  --btn-warning-divider: var(--red-60);
+  --btn-warning-text: var(--white);
+}

package/src/elements/cfpb-checkbox-icon/cfpb-checkbox-icon.component.scss

@@ -0,0 +1,88 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+
+:host {
+  // Theme variables.
+  --choice-border: var(--choice-border-default);
+  --choice-border-hover: var(--choice-border-hover-default);
+  --choice-bg: var(--choice-bg-default);
+  --choice-bg-selected: var(--choice-bg-selected-default);
+
+  // Private variables.
+  --choice-border-width-addendum: 0;
+
+  .cfpb-checkbox-icon::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;
+  }
+
+  .checked::before {
+    --cfpb-background-icon-svg: 'approved';
+    background-size: auto $cf-icon-height;
+    background-repeat: no-repeat;
+    background-position: center 0;
+  }
+
+  .disabled::before {
+    cursor: not-allowed;
+
+    --choice-border: var(--choice-border-disabled);
+    --choice-bg: var(--choice-bg-disabled);
+    --choice-bg-selected: var(--choice-bg-selected-disabled);
+  }
+
+  .checked.disabled::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)';
+  }
+
+  .cfpb-checkbox-icon:not(.disabled, .borderless).focus::before,
+  .cfpb-checkbox-icon:not(.disabled, .borderless):focus::before,
+  .cfpb-checkbox-icon:not(.disabled, .borderless).hover::before,
+  .cfpb-checkbox-icon:not(.disabled, .borderless):hover::before {
+    cursor: pointer;
+    border-color: var(--choice-border-hover);
+    box-shadow: 0 0 0 1px var(--choice-border-hover);
+    outline-color: var(--choice-border-hover);
+  }
+
+  .validation-error,
+  .validation-warning,
+  .validation-success {
+    --choice-border-width-addendum: 1px;
+  }
+
+  .validation-error {
+    --choice-border: var(--choice-border-error);
+  }
+
+  .validation-warning {
+    --choice-border: var(--choice-border-warning);
+  }
+
+  .validation-success {
+    --choice-border: var(--choice-border-success);
+  }
+
+  .borderless::before {
+    border-color: transparent;
+    outline-color: transparent;
+    background-color: transparent;
+  }
+}

package/src/elements/cfpb-checkbox-icon/index.js

@@ -0,0 +1,104 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import styles from './cfpb-checkbox-icon.component.scss';
+
+// The validation states are error, warning, or success.
+const VALID_VALIDATION = ['error', 'warning', 'success'];
+
+/**
+ * @element cfpb-checkbox-icon
+ */
+export class CfpbCheckboxIcon extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  #hover;
+  #focus;
+
+  /**
+   * @property {boolean} borderless - Whether the checkbox has a border or not.
+   * @property {boolean} checked - Whether the checkbox is checked or not.
+   * @property {boolean} disabled - Whether the checkbox is disabled or not.
+   * @property {string} validation - Validation style: error, warning, success.
+   * @returns {object} The map of properties.
+   */
+  static properties = {
+    borderless: { type: Boolean, reflect: true },
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    validation: { type: String, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.borderless = false;
+    this.checked = false;
+    this.disabled = false;
+    this.validation = '';
+    this.#hover = false;
+    this.#focus = false;
+  }
+
+  /**
+   * Ensure the validation value is valid, and fall back to a default if not.
+   * @returns {string|undefined} A valid validation value string, or undefined.
+   */
+  get #validValidation() {
+    return VALID_VALIDATION.includes(this.validation)
+      ? this.validation
+      : undefined;
+  }
+
+  mouseover() {
+    if (!this.disabled) {
+      this.#hover = true;
+      this.requestUpdate();
+    }
+  }
+
+  mouseleave() {
+    this.#hover = false;
+    this.requestUpdate();
+  }
+
+  focus() {
+    if (!this.disabled) {
+      this.#focus = true;
+      this.requestUpdate();
+    }
+  }
+
+  blur() {
+    this.#focus = false;
+    this.requestUpdate();
+  }
+
+  #computeClassString() {
+    return [
+      'cfpb-checkbox-icon',
+      this.checked && 'checked',
+      this.disabled && 'disabled',
+      this.borderless && 'borderless',
+      this.#validValidation && `validation-${this.#validValidation}`,
+      this.#hover && 'hover',
+      this.#focus && 'focus',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  render() {
+    return html`
+      <div
+        class=${this.#computeClassString()}
+        ?disabled=${this.disabled}
+        aria-hidden="true"
+      ></div>
+    `;
+  }
+
+  static init() {
+    window.customElements.get('cfpb-checkbox-icon') ||
+      window.customElements.define('cfpb-checkbox-icon', CfpbCheckboxIcon);
+  }
+}