@cfpb/cfpb-design-system 5.2.0 → 5.3.0

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

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

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