@cfpb/cfpb-design-system 5.2.0 → 5.3.1

package/src/elements/cfpb-tagline/{cfpb-tagline.component.scss → styles.component.scss}

@@ -1,9 +1,8 @@
-@use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '../../utilities/functions' as *;
 
 :host {
   .a-tagline {
-    font-size: math.div(12px, $base-font-size-px) + rem;
+    font-size: rem-from-px(12px);
 
     display: grid;
     grid-template-columns: 22px 1fr;
@@ -19,7 +18,7 @@
     }
 
     &--large {
-      font-size: math.div(16px, $base-font-size-px) + rem;
+      font-size: rem-from-px(16px);
 
       & cfpb-flag-usa {
         margin-top: 4px;

package/src/elements/cfpb-utilities/fallback/wc-fallback.css

@@ -0,0 +1,31 @@
+/*
+This fallback CSS assumes a web component that contains a <noscript> fallback,
+as well as author-supplied content, and separately has a script to swap the
+<noscript> with `<div class="fallback">` if JS is enabled, but the web component
+definition is not defined.
+
+Ex.
+
+<cfpb-example-btn hasfallback>
+  <!-- author-supplied no-js fallback -->
+  <noscript><button>Click this basic button!</button>
+
+  <!-- author-supplied slotted content -->
+  Click this fancy button!
+</cfpb-example-btn>
+*/
+
+/* 1. If JS is disabled, hide everything except <noscript> */
+[hasfallback] > :not(noscript) {
+  display: none;
+}
+
+/* 2. If JS is enabled, but web component definition is not defined, show fallback. */
+[hasfallback] > .fallback {
+  display: block;
+}
+
+/* 3. If JS is enabled and web component definition is defined, operate as normal. */
+[hasfallback]:defined > :not(noscript) {
+  display: block;
+}

package/src/elements/cfpb-utilities/fallback/wc-fallback.js

@@ -0,0 +1,65 @@
+/**
+ * This utility IIFE function can be added to a page with web components
+ * to support the display of any fallback content in `<noscript>` tags
+ * that would otherwise not appear if JavaScript was enabled, but
+ * the Web Component APIs were not supported.
+ */
+(function () {
+  /**
+   * Within a custom element (web component),
+   * convert any `<noscript>` tags into `<div class="fallback">`,
+   * so that the fallback content appears in environments where
+   * JavaScript is enabled, but web component APIs are not supported.
+   * @param {HTMLElement} el - A custom element.
+   */
+  function applyFallback(el) {
+    if (!el) return;
+
+    const tag = el.tagName.toLowerCase();
+    const isDefined = !!customElements.get(tag);
+    const noscript = el.querySelector('noscript');
+
+    // Only act if the element is NOT defined and there is a <noscript>
+    if (!isDefined && noscript) {
+      // Create a <div> with the fallback content.
+      const fallbackDiv = document.createElement('div');
+      fallbackDiv.className = 'fallback';
+      fallbackDiv.innerHTML = noscript.innerHTML;
+
+      // Insert fallback at the top.
+      el.insertBefore(fallbackDiv, el.firstChild);
+
+      // Hide the original <noscript> to avoid duplicates.
+      noscript.style.display = 'none';
+
+      /*
+    // Hide other non-fallback children (optional; wc-fallback.css handles this).
+    Array.from(el.children).forEach((child) => {
+      if (child !== fallbackDiv && child !== noscript) {
+        child.style.display = 'none';
+      }
+    });
+    */
+    }
+  }
+
+  /**
+   * Query the document for custom elements that have the "fallback" attribute,
+   * e.g. <my-custom-btn fallback>
+   * @param {string} selector - The CSS selector to search for on the page.
+   */
+  function applyAllFallbacks(selector = '[fallback]') {
+    document.querySelectorAll(selector).forEach((el) => applyFallback(el));
+  }
+
+  // Check for browser support of the Web Component APIs.
+  const supportsWC =
+    'customElements' in window &&
+    'attachShadow' in Element.prototype &&
+    'content' in document.createElement('template');
+
+  // Only run the fallback utility script globally if web components are NOT supported.
+  if (!supportsWC) {
+    document.addEventListener('DOMContentLoaded', applyAllFallbacks);
+  }
+})();

package/src/elements/cfpb-utilities/shared-config.js

@@ -0,0 +1,52 @@
+const DEFAULT_CONFIG = {
+  iconPath: './icons/',
+};
+
+let config = { ...DEFAULT_CONFIG };
+let initialized = false;
+
+const ALLOWED_KEYS = Object.keys(DEFAULT_CONFIG);
+
+/**
+ * Set the shared configuration for the project.
+ * @param {object} userConfig - User supplied settings that override DEFAULT_CONFIG settings.
+ */
+export function setSharedConfig(userConfig) {
+  if (initialized) {
+    // eslint-disable-next-line no-console
+    console.warn('CFPB Design System config already initialized');
+    return;
+  }
+
+  for (const key of Object.keys(userConfig)) {
+    if (!ALLOWED_KEYS.includes(key)) {
+      // eslint-disable-next-line no-console
+      console.warn(`CFPB Design System invalid config key: ${key}`);
+    }
+  }
+
+  config = {
+    ...config,
+    ...userConfig,
+  };
+
+  initialized = true;
+}
+
+/**
+ * @returns {object} The shared config used in the project.
+ */
+export function getSharedConfig() {
+  return config;
+}
+
+/**
+ * Check if a custom element is registered, and if not, define it on the globalThis (window).
+ * @param {string} tag - A custom element's tag as it appears in markup.
+ * @param {HTMLElement} constructor - A custom element constructor.
+ */
+export function defineComponent(tag, constructor) {
+  if (!globalThis.customElements.get(tag)) {
+    globalThis.customElements.define(tag, constructor);
+  }
+}

package/src/elements/cfpb-utilities/skeleton.css

@@ -0,0 +1,33 @@
+/*
+This file defines a "loading skeleton", which is a wireframe-esque box that loads 
+in before a web component has been initialized. 
+
+Each component that has a loading skeleton also has a file similar to this one, 
+which defines the dimensions of the box that should load. 
+
+Having a loading skeleton avoids a layout shift when the component is actually 
+initialized and rendered.
+*/
+*:not(:defined) {
+  display: block;
+  width: 100%;
+
+  box-shadow: 0 0 3px rgb(90, 93, 97, 10%) inset;
+  border-radius: 4px;
+
+  animation: pulse-background 1.5s infinite;
+}
+
+@keyframes pulse-background {
+  0% {
+    background-color: transparent;
+  }
+
+  50% {
+    background-color: rgb(90, 93, 97, 5%);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}

package/src/elements/cfpb-utilities/transition/{transition.scss → transition.css}

@@ -9,9 +9,9 @@
   transition-duration: 0s !important;
 }
 
-//
-// Utility classes for moving an element using transform translate values.
-//
+/**
+ * Utility classes for moving an element using transform translate values.
+ */
 
 .u-move-transition {
   transition: transform 0.25s ease-out;
@@ -25,7 +25,7 @@
   transform: translate3d(-100%, 0, 0);
 }
 
-// TODO: Look into adding a mixin for movement multiples.
+/* TODO: Look into adding a mixin for movement multiples. */
 .u-move-left-2x {
   transform: translate3d(-200%, 0, 0);
 }
@@ -42,9 +42,9 @@
   transform: translate3d(0, -100%, 0);
 }
 
-//
-// Utility classes for setting an element's opacity.
-//
+/**
+ * Utility classes for setting an element's opacity.
+ */
 
 .u-alpha-transition {
   transition: opacity 0.25s linear;
@@ -58,15 +58,15 @@
   opacity: 0;
 }
 
-//
-// Utility classes for setting an element's height.
-//
+/**
+ * Utility classes for setting an element's height.
+ */
 
 .u-max-height-transition {
   overflow: hidden;
   contain: paint;
 
-  // Duration is set here, but it is actually overridden in the JavaScript.
+  /* Duration is set here, but it is actually overridden in the JavaScript. */
   transition: max-height 0.2s ease-out;
 }
 

package/src/elements/index.js

@@ -3,14 +3,23 @@
    ========================================================================== */
 
 // TODO: aggregate and export the component subdirectories automatically.
+
+// Base styles.
+export * from './abstracts';
+
+// Shared config.
+export * from './cfpb-utilities/shared-config';
+
+// Component styles.
 export * from './cfpb-button';
 export * from './cfpb-form-alert';
 export * from './cfpb-expandable';
 export * from './cfpb-form-choice';
 export * from './cfpb-file-upload';
+export * from './cfpb-icon';
 export * from './cfpb-label';
-export * from './cfpb-list';
-export * from './cfpb-list-item';
+export * from './cfpb-listbox';
+export * from './cfpb-listbox-item';
 export * from './cfpb-form-search';
 export * from './cfpb-form-search-input';
 export * from './cfpb-tagline';

package/src/index.js

@@ -2,9 +2,7 @@
    Design System
    ========================================================================== */
 
-export * from './elements/abstracts';
-
-export * from './elements/base';
+export * from './elements';
 
 export * from './components/cfpb-buttons';
 export * from './components/cfpb-expandables';
@@ -17,5 +15,3 @@ export * from './components/cfpb-tables';
 export * from './components/cfpb-typography';
 
 export * from './utilities';
-
-export * from './elements';

package/src/index.scss

@@ -74,4 +74,4 @@
 @forward 'elements/cfpb-button/vars';
 
 // cfpb-icon-text
-@forward 'elements/cfpb-icon-text/cfpb-icon-text.component';
+@forward 'elements/cfpb-icon-text/styles.component';

package/src/tokens/abstracts/custom-props.json

@@ -2321,7 +2321,7 @@
   },
   "font-stack": {
     "$type": "string",
-    "$value": "system-ui,sans-serif",
+    "$value": "var(--font-stack-branded, system-ui, sans-serif)",
     "$extensions": {
       "com.figma.variableId": "VariableID:8191:7009",
       "com.figma.scopes": [
@@ -2331,6 +2331,18 @@
       "com.figma.isOverride": true
     }
   },
+  "font-stack-branded": {
+    "$type": "string",
+    "$value": "initial",
+    "$extensions": {
+      "com.figma.variableId": "VariableID:9617:2",
+      "com.figma.scopes": [
+        "ALL_SCOPES"
+      ],
+      "com.figma.type": "string",
+      "com.figma.isOverride": true
+    }
+  },
   "$extensions": {
     "com.figma.modeName": "default"
   }

package/src/utilities/functions.scss

@@ -0,0 +1,20 @@
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
+/*
+The native CSS implementation of the below would look like:
+
+@function --rem-from-px(--px <length>, --base <length>: 16px) returns <length> {
+  result: calc((var(--px) / var(--base)) * 1rem);
+}
+
+This can be swapped in when browser coverage is added to Firefox and Safari
+See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@function
+*/
+
+@function rem-from-px($px, $base: $base-font-size-px) {
+  @return calc(($px / $base) * 1rem);
+}
+
+@function unitless-from-px($px, $base: $base-font-size-px) {
+  @return calc($px / $base);
+}

package/src/elements/base/index.js

@@ -1,2 +0,0 @@
-export * as normalizeStyles from './normalize.scss';
-export * as baseStyles from './base.scss';

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

@@ -1,10 +0,0 @@
-@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.
-  display: flex;
-  width: fit-content;
-
-  flex-direction: column;
-}

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

@@ -1,36 +0,0 @@
-@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);
-    }
-  }
-}