@cfpb/cfpb-design-system 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "CFPB's UI framework",
   "exports": {
     ".": "./src/index.js",
@@ -28,7 +28,7 @@
   "gitHead": "d9b9862ef0a34a0ca6f4835347ac7f202ed50e3e",
   "type": "module",
   "dependencies": {
-    "@fontsource-variable/source-sans-3": "5.2.8",
+    "@fontsource-variable/source-sans-3": "5.2.9",
     "tippy.js": "6.3.7"
   }
 }

package/src/base/base.scss

@@ -153,60 +153,48 @@ li {
 //
 
 a {
-  border-width: 0;
-  border-style: dotted;
-  border-color: $link-underline;
   color: $link-text;
-  text-decoration: none;
+
+  text-decoration-color: $link-underline;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-style: dotted;
+  text-underline-offset: 4.5px;
 
   // Note: The class definitions below are only for use in
   // demonstrating link states. Do not use in production.
 
   &:visited,
   &.visited {
-    border-color: $link-underline-visited;
+    text-decoration-color: $link-underline-visited;
     color: $link-text-visited;
   }
 
   &:hover,
   &.hover {
-    border-style: solid;
-    border-color: $link-underline-hover;
+    text-decoration-style: solid;
+    text-decoration-color: $link-underline-hover;
     color: $link-text-hover;
   }
 
   &:focus,
   &.focus {
-    border-style: solid;
+    text-decoration-style: solid;
     outline: thin dotted;
     outline-offset: 1px;
   }
 
   &:active,
   &.active {
-    border-style: solid;
-    border-color: $link-underline-active;
+    text-decoration-style: solid;
+    text-decoration-color: $link-underline-active;
     color: $link-text-active;
   }
 }
 
-//
-// Underlined links
-//
-
-p,
-li,
-dd {
-  // Restrict bottom borders to inline text links ...
-
-  a {
-    border-bottom-width: 1px;
-  }
-}
-
 nav a {
-  // ... unless they're part of a nav list
-  border-bottom-width: 0;
+  // Don't show underlines if they're part of a nav list.
+  text-decoration-line: none;
 }
 
 //

package/src/components/cfpb-buttons/button.scss

@@ -141,7 +141,8 @@ input.a-btn::-moz-focus-inner {
   //
 
   &--disabled,
-  &[disabled] {
+  &[disabled],
+  &[aria-disabled='true'] {
     &,
     &:link,
     &:visited,
@@ -205,7 +206,8 @@ input.a-btn::-moz-focus-inner {
   }
 
   &--disabled:has(svg)::before,
-  &[disabled]:has(svg)::before {
+  &[disabled]:has(svg)::before,
+  &[aria-disabled='true']:has(svg)::before {
     border-color: $btn-disabled-divider !important;
   }
 

package/src/components/cfpb-forms/tag.scss

@@ -50,6 +50,8 @@ a.a-tag-filter {
 }
 
 a.a-tag-filter {
+  text-decoration: none;
+
   // Colors for :link, :visited, :hover, :focus, :active.
   @include u-link-colors(
     var(--black),
@@ -101,6 +103,7 @@ a.a-tag-filter {
   a.a-tag-topic:hover,
   a.a-tag-topic:focus,
   a.a-tag-topic:active {
+    text-decoration: none;
     border-bottom: none;
     outline-offset: 1px;
 

package/src/components/cfpb-pagination/vars.scss

@@ -11,7 +11,3 @@
 
 $pagination-text: var(--gray);
 $pagination-bg: var(--gray-5);
-
-// Sizing variables
-
-$pagination-btn-min-width-px: 130px;

package/src/components/cfpb-typography/link.scss

@@ -3,10 +3,12 @@
 
 .a-link {
   border-bottom-width: 0;
+  text-decoration-line: none;
 
   .a-link__text {
-    border-bottom-width: 1px;
-    border-bottom-style: inherit;
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-thickness: 1px;
 
     // See https://github.com/cfpb/consumerfinance.gov/pull/8252
     overflow-wrap: break-word;

package/src/components/cfpb-typography/mixins.scss

@@ -77,9 +77,17 @@
 
     // Mobile only.
     @include respond-to-max($bp-xs-max) {
+      text-decoration: none;
+      border-top-style: dotted;
+      border-bottom-style: dotted;
       border-top-width: 1px;
       border-bottom-width: 1px;
 
+      &:hover {
+        border-top-style: solid;
+        border-bottom-style: solid;
+      }
+
       // We create a faux focus rectangle in the ::after pseudoelement to better
       // control the positioning of the focus rectangle, which would overwise
       // overlap the top border of the jumplink when it appears in a group.

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

@@ -1,6 +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 *;
 
 :host {
   // This prevents the child button from having an empty gap after the button.
@@ -14,3 +15,17 @@
     width: 100%;
   }
 }
+
+:host([flush-left]) {
+  [role='button'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+:host([flush-right]) {
+  [role='button'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}

package/src/elements/cfpb-button/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-button.component.scss';
+import { CfpbIconText } from '../cfpb-icon-text';
 
 // The variants are different color themes of the button.
 const VALID_VARIANTS = ['primary', 'secondary', 'warning'];
@@ -19,15 +21,19 @@ 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 to stack the tags vertically.
+   * @property {boolean} disabled - Whether the button is disabled or not.
    * @property {string} variant - The button variant: secondary and warning.
    * @property {boolean} fullOnMobile - Whether to be width 100% on mobile.
-   * @property {string} type - The button type: button, submit, or reset.
+   * @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 },
@@ -36,47 +42,55 @@ export class CfpbButton extends LitElement {
         attribute: 'full-on-mobile',
         reflect: true,
       },
-      type: { type: String },
+      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();
+
   constructor() {
     super();
-    this.disabled = false;
+    this.type = 'button';
     this.variant = 'primary';
+    this.disabled = false;
     this.fullOnMobile = false;
-    this.type = 'button';
+    this.styleAsLink = false;
   }
 
   /**
-   * Hide any icon in the slot.
+   * @returns {boolean} True if it has an icon, false otherwise.
    */
-  hideIcon() {
-    const icon = this.#findIconInSlot();
-    if (icon) icon.style.display = 'none';
+  hasIcon() {
+    return this.#iconTextDom.value?.hasIcon();
   }
 
   /**
-   * Show any icon in the slot, if it was hidden.
+   * Hide any icon in the slot.
    */
-  showIcon() {
-    const icon = this.#findIconInSlot();
-    if (icon) icon.style.display = '';
+  hideIcon() {
+    this.#iconTextDom.value?.hideIcon();
   }
 
   /**
-   * Find the icon SVG in the slot.
-   * @returns {Node} The icon SVG node.
+   * Show any icon in the slot, if it was hidden.
    */
-  #findIconInSlot() {
-    const slot = this.shadowRoot.querySelector('slot');
-    const nodes = slot.assignedNodes({ flatten: true });
-
-    for (const node of nodes) {
-      if (node.tagName.toLowerCase() === 'svg') {
-        return node;
-      }
-    }
+  showIcon() {
+    this.#iconTextDom.value?.showIcon();
   }
 
   /**
@@ -103,9 +117,18 @@ export class CfpbButton extends LitElement {
     return {
       'a-btn': true,
       [`a-btn--${this.#validVariant}`]: this.#validVariant !== 'primary',
+      [`a-btn--link`]: this.styleAsLink === true,
     };
   }
 
+  #renderTextAndIcon() {
+    return html`
+      <cfpb-icon-text ${ref(this.#iconTextDom)} ?disabled=${this.disabled}>
+        <slot></slot>
+      </cfpb-icon-text>
+    `;
+  }
+
   render() {
     const classes = classMap(this.#btnClass);
 
@@ -119,8 +142,8 @@ export class CfpbButton extends LitElement {
           aria-disabled=${String(this.disabled)}
           tabindex=${this.disabled ? -1 : 0}
         >
-          <slot></slot
-        ></a>
+          ${this.#renderTextAndIcon()}
+        </a>
       `;
     }
 
@@ -131,12 +154,14 @@ export class CfpbButton extends LitElement {
         ?disabled=${this.disabled}
         type=${this.#validType}
       >
-        <slot></slot>
+        ${this.#renderTextAndIcon()}
       </button>
     `;
   }
 
   static init() {
+    CfpbIconText.init();
+
     window.customElements.get('cfpb-button') ||
       window.customElements.define('cfpb-button', CfpbButton);
   }

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

@@ -0,0 +1,59 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
+@mixin u-btn-divider() {
+  content: '';
+  border-left: 1px solid var(--icon-text-divider);
+  order: 2;
+  place-self: normal;
+}
+
+:host {
+  // Theme variables.
+  --icon-text-divider: var(--pacific-60);
+
+  div {
+    // This prevents the child button from having an empty gap after the button.
+    display: flex;
+    width: fit-content;
+
+    // Hide SVG by default.
+    & ::slotted(svg) {
+      display: none;
+    }
+
+    &.u-has-icon {
+      gap: math.div(10px, $btn-font-size) + rem;
+      & slot::before {
+        @include u-btn-divider;
+      }
+
+      // Show SVG.
+      & ::slotted(svg) {
+        display: initial;
+      }
+    }
+
+    &.u-has-icon--left {
+      & ::slotted(svg) {
+        order: 1;
+      }
+      & ::slotted(span) {
+        order: 3;
+      }
+    }
+
+    &.u-has-icon--right {
+      & ::slotted(svg) {
+        order: 3;
+      }
+      & ::slotted(span) {
+        order: 1;
+      }
+    }
+  }
+}
+
+:host([disabled]) {
+  --icon-text-divider: var(--gray-60);
+}

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

@@ -0,0 +1,150 @@
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import styles from './cfpb-icon-text.component.scss';
+
+/**
+ *
+ * @element cfpb-icon-text
+ * @slot - The main content for the text and icon.
+ */
+export class CfpbIconText extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  /**
+   * @property {boolean} disabled - Apply disabled styles or not.
+   * @returns {object} The map of properties.
+   */
+  static get properties() {
+    return {
+      disabled: { type: Boolean, reflect: true },
+    };
+  }
+
+  // DOM references.
+  #svgObserver;
+  #iconClasses;
+
+  constructor() {
+    super();
+    this.#iconClasses = '';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.#svgObserver = new MutationObserver(() => {
+      this.#processLightDom();
+    });
+
+    this.#svgObserver.observe(this, {
+      childList: true,
+      subtree: false,
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.#svgObserver) {
+      this.#svgObserver.disconnect();
+      this.#svgObserver = null;
+    }
+  }
+
+  #processLightDom() {
+    const div = this.shadowRoot.querySelector('div');
+    const slot = this.shadowRoot.querySelector('slot');
+    const nodes = slot.assignedNodes({ flatten: true });
+
+    let svgEl = null;
+    let spanEl = null;
+
+    for (const node of nodes) {
+      if (
+        node.nodeType === Node.TEXT_NODE &&
+        node.textContent.trim().length > 0
+      ) {
+        const span = document.createElement('span');
+        span.textContent = node.textContent;
+        node.replaceWith(span);
+        if (!spanEl) spanEl = span;
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const tag = node.tagName.toLowerCase();
+        if (tag === 'svg' && !svgEl) {
+          svgEl = node;
+        } else if (tag === 'span' && !spanEl) {
+          spanEl = node;
+        }
+      }
+    }
+
+    if (svgEl && spanEl) {
+      div.classList.add('u-has-icon');
+      if (
+        svgEl.compareDocumentPosition(spanEl) & Node.DOCUMENT_POSITION_FOLLOWING
+      ) {
+        div.classList.add('u-has-icon--left');
+      } else {
+        div.classList.add('u-has-icon--right');
+      }
+    }
+  }
+
+  firstUpdated() {
+    this.#processLightDom();
+  }
+
+  /**
+   * Hide any icon in the slot.
+   */
+  hideIcon() {
+    const icon = this.#findIconInSlot();
+    const div = this.shadowRoot.querySelector('div');
+    if (icon) {
+      this.#iconClasses = div.className;
+      div.className = '';
+    }
+  }
+
+  /**
+   * Show any icon in the slot, if it was hidden.
+   */
+  showIcon() {
+    const icon = this.#findIconInSlot();
+    const div = this.shadowRoot.querySelector('div');
+    if (icon) div.className = this.#iconClasses;
+  }
+
+  /**
+   * @returns {boolean} True if it has an icon, false otherwise.
+   */
+  hasIcon() {
+    const icon = this.#findIconInSlot();
+    if (icon) return true;
+    return false;
+  }
+
+  /**
+   * Find the icon SVG in the slot.
+   * @returns {Node} The icon SVG node.
+   */
+  #findIconInSlot() {
+    const slot = this.shadowRoot.querySelector('slot');
+    const nodes = slot.assignedNodes({ flatten: true });
+
+    for (const node of nodes) {
+      if (node.tagName && node.tagName.toLowerCase() === 'svg') {
+        return node;
+      }
+    }
+  }
+
+  render() {
+    return html`<div><slot></slot></div>`;
+  }
+
+  static init() {
+    window.customElements.get('cfpb-icon-text') ||
+      window.customElements.define('cfpb-icon-text', CfpbIconText);
+  }
+}

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

@@ -4,8 +4,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  *
- * @element cfpb-multiselect.
- * @slot - The main content for the upload button.
+ * @element cfpb-label.
+ * @slot label - The content for the label text.
+ * @slot helper - The content for the label helper text.
  */
 export class CfpbLabel extends LitElement {
   static styles = css`
@@ -14,7 +15,7 @@ export class CfpbLabel extends LitElement {
 
   /**
    * @property {string} for - Associate the label with an ID elsewhere.
-   * @property {string} type - Associate the label with an ID elsewhere.
+   * @property {boolean} block - Whether this has block or inline helper text.
    * @returns {object} The map of properties.
    */
   static get properties() {

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

@@ -0,0 +1,72 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+
+:host {
+  width: 100%;
+
+  .cf-icon-svg {
+    height: $cf-icon-height;
+    vertical-align: text-top;
+    fill: currentcolor;
+  }
+
+  .m-pagination {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      'pag-btn-prev . pag-btn-next'
+      'pag-form pag-form pag-form';
+    row-gap: math.div(15px, $base-font-size-px) + rem;
+
+    &__form {
+      grid-area: pag-form;
+      display: flex;
+      flex-flow: wrap;
+      place-content: center;
+      gap: math.div(10px, $base-font-size-px) + rem;
+
+      padding: math.div(5px, $base-font-size-px) + rem;
+      border-radius: math.div(4px, $base-font-size-px) + rem;
+      background: var(--gray-5);
+      color: var(--gray);
+    }
+
+    &__current-page {
+      // 45px is a magic number to provide enough room for three digits
+      // and the number spinners for type="number" inputs on desktop
+      width: math.div(45px, $base-font-size-px) + rem;
+
+      font-weight: 500;
+      text-align: right;
+    }
+
+    &__label {
+      display: contents;
+      white-space: nowrap;
+    }
+
+    &__btn-prev {
+      grid-area: pag-btn-prev;
+      z-index: 1;
+    }
+    &__btn-next {
+      grid-area: pag-btn-next;
+      z-index: 1;
+    }
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      grid-template-areas: 'pag-btn-prev pag-form pag-btn-next';
+
+      &__btn-prev {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &__btn-next {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}