@cfpb/cfpb-design-system 3.14.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.14.0",
+  "version": "4.0.0",
   "description": "CFPB's UI framework",
   "exports": {
     ".": "./src/index.js",
@@ -12,6 +12,7 @@
     "email": "tech@cfpb.gov",
     "url": "https://cfpb.github.io/design-system"
   },
+  "sideEffects": false,
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/abstracts/vars.scss

@@ -52,7 +52,7 @@ $size-code: 13px; // Custom size only for Mono code blocks
 // Icon variables
 
 // Icons' SVG viewbox are a consistent 19px (h) x variable (w).
-// The height matches the 19px rendered canvas of text set in Avenir Next
+// The height matches the 19px rendered canvas of text set in Source Sans 3
 // sized at 16px (19/16 = 1.1875).
 $cf-icon-height: 1.1875em;
 

package/src/base/base.scss

@@ -25,6 +25,11 @@ textarea {
   // Must set these explicitly to override Normalize.css's provided default
   // of `font-family: sans-serif;`
   font-family: var(--font-stack);
+
+  // Characters in some languages, like Chinese, have a larger x-height,
+  // which will make the button taller than the input.
+  // Fix that by setting the line height on the button and the input.
+  line-height: math.div(19px, $base-font-size-px);
 }
 
 /*

package/src/base/font.scss

@@ -5,25 +5,23 @@
    ========================================================================== */
 
   @if $path {
+    // Refer to https://fontsource.org/fonts/source-sans-3/install for
+    // generating @font-face rules.
     @font-face {
-      font-family: 'Avenir Next';
-      src: url('#{$path}/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2')
-        format('woff2');
+      font-family: 'Source Sans 3 Variable';
       font-style: normal;
-      font-weight: normal;
       font-display: fallback;
+      font-weight: 200 900;
+      src: url('#{$path}/source-sans-3-latin-wght-normal.woff2')
+        format('woff2-variations');
+      unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+        U+2212, U+2215, U+FEFF, U+FFFD;
     }
 
-    @font-face {
-      font-family: 'Avenir Next';
-      src: url('#{$path}/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2')
-        format('woff2');
-      font-style: normal;
-      font-weight: 500;
-      font-display: fallback;
-    }
     :root {
-      --font-stack: 'Avenir Next', arial, sans-serif;
+      --font-stack: 'Source Sans 3 Variable', arial, sans-serif;
     }
   }
 }

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

@@ -34,13 +34,13 @@ input.a-btn::-moz-focus-inner {
   cursor: pointer;
   font-size: math.div($btn-font-size, $base-font-size-px) + em;
   font-weight: 500;
-  line-height: normal;
   text-align: center;
   text-decoration: none;
   transition: background-color 0.1s;
   width: fit-content;
   height: fit-content;
   justify-content: center;
+  align-items: center;
 
   &,
   &:link,

package/src/components/cfpb-expandables/summary-minimal.scss

@@ -37,6 +37,11 @@
     &[aria-expanded='true'] .o-summary-minimal__cue-close {
       display: block;
     }
+
+    svg {
+      // Shift icon for better alignment.
+      margin-top: 1px;
+    }
   }
 
   // Hide button in no-js state.

package/src/components/cfpb-expandables/summary.scss

@@ -16,7 +16,10 @@
   &__btn {
     position: relative;
     z-index: 2;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: math.div(5px, $base-font-size-px) + rem;
     width: 100%;
     padding-top: 15px;
     padding-bottom: 15px;
@@ -26,6 +29,11 @@
     color: var(--pacific);
     background: #fff;
 
+    svg {
+      // Prevent icon from shrinking when button wraps.
+      flex: none;
+    }
+
     &:focus {
       outline: 1px dotted var(--pacific);
       outline-offset: 1px;
@@ -42,7 +50,7 @@
       right: 0;
 
       // 4px is needed because the 2px movement of the content's bounding box.
-      top: calc(-100% + 2px);
+      top: calc(-100% + 4px);
 
       /* TODO: stylelint wants to convert rgba to rgb. Investigate why. */
       /* stylelint-disable */

package/src/components/cfpb-forms/search-input.scss

@@ -17,6 +17,10 @@
       left: 10px;
       align-self: center;
       cursor: pointer;
+      line-height: math.div(
+        14.4px,
+        $base-font-size-px
+      ); // 9px vertically centers icon.
     }
 
     input[type='search'] {
@@ -97,13 +101,6 @@
     display: block;
   }
 
-  button[type='submit'] {
-    // Characters in some languages, like Chinese, have a larger x-height,
-    // which will make the button taller than the input.
-    // Fix that by setting the line height on the button.
-    line-height: math.div(19px, $base-font-size-px);
-  }
-
   // Tablet and above.
   @include respond-to-min($bp-sm-min) {
     flex-direction: row;

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

@@ -5,6 +5,8 @@
 
 // Filter tags appear in filtered contexts, often as part of multiselects.
 .a-tag-filter {
+  line-height: math.div(19px, $base-font-size-px);
+
   display: flex;
   gap: math.div(10px, $btn-font-size) + rem;
 
@@ -48,8 +50,6 @@ a.a-tag-filter {
 }
 
 a.a-tag-filter {
-  line-height: normal;
-
   // Colors for :link, :visited, :hover, :focus, :active.
   @include u-link-colors(
     var(--black),

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

@@ -13,7 +13,7 @@
 ) {
   .#{$jump-link-class} {
     @if $is-gold {
-      font-size: math.div(12px, $base-font-size-px) + rem;
+      font-size: math.div(14px, $base-font-size-px) + rem;
       font-weight: 600;
       text-transform: uppercase;
       color: var(--gold-80);

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

@@ -48,7 +48,9 @@ export class CfpbButton extends LitElement {
       </button>
     `;
   }
-}
 
-window.customElements.get('cfpb-button') ||
-  window.customElements.define('cfpb-button', CfpbButton);
+  static init() {
+    window.customElements.get('cfpb-button') ||
+      window.customElements.define('cfpb-button', CfpbButton);
+  }
+}

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

@@ -1,6 +1,7 @@
 import { html, LitElement, css, unsafeCSS } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './cfpb-file-upload.component.scss';
+import { CfpbButton } from '../cfpb-button';
 
 /**
  *
@@ -96,7 +97,13 @@ export class CfpbFileUpload extends LitElement {
       </div>
     `;
   }
-}
 
-window.customElements.get('cfpb-file-upload') ||
-  window.customElements.define('cfpb-file-upload', CfpbFileUpload);
+  static init() {
+    // Initialize internal button.
+    CfpbButton.init();
+
+    // Initialize parent file upload.
+    window.customElements.get('cfpb-file-upload') ||
+      window.customElements.define('cfpb-file-upload', CfpbFileUpload);
+  }
+}