@cfpb/cfpb-design-system 4.3.0 → 4.3.2

package/src/elements/cfpb-select/multiple-select-event-proxy.js

@@ -0,0 +1,88 @@
+export class MultipleSelectEventProxy {
+  constructor({ list, input, tagGroup, flyout }) {
+    this.list = list;
+    this.input = input;
+    this.tagGroup = tagGroup;
+    this.flyout = flyout;
+  }
+
+  onClick(evt, host) {
+    const target = evt.currentTarget;
+
+    if (target.tagName === 'CFPB-FORM-SEARCH-INPUT') {
+      host.isExpanded ? this.flyout()?.suspend() : this.flyout()?.expand();
+    } else {
+      this.flyout()?.resume();
+    }
+  }
+
+  onItemClick(evt, host) {
+    host.optionList = this.list.childData ?? [];
+    evt.currentTarget.focusItemAt(evt.detail.index);
+    //host.requestUpdate();
+  }
+
+  onTagClick(evt, host) {
+    const remaining =
+      this.tagGroup.tagList.filter((tag) => tag !== evt.detail.target) ?? [];
+
+    host.optionList = host.optionList.map((item) => ({
+      ...item,
+      checked: remaining.some((tag) => tag.value === item.value),
+    }));
+
+    //host.requestUpdate();
+  }
+
+  onKeyDown(evt, host) {
+    const focused = host.shadowRoot.activeElement.tagName;
+
+    if (focused === 'CFPB-FORM-SEARCH-INPUT') {
+      switch (evt.key) {
+        case 'Tab':
+          evt.preventDefault();
+          if (evt.shiftKey) {
+            if (host.isExpanded) host.isExpanded = false;
+            this.input.focus();
+          } else {
+            if (!host.isExpanded) host.isExpanded = true;
+            this.list.focusItemAt(0);
+          }
+          break;
+        case 'ArrowDown':
+          evt.preventDefault();
+          if (!host.isExpanded) host.isExpanded = true;
+          else this.list.focusItemAt(0);
+          break;
+        case 'Enter':
+          evt.preventDefault();
+          host.isExpanded = !host.isExpanded;
+          break;
+      }
+    }
+
+    if (focused === 'CFPB-LIST-ITEM') {
+      switch (evt.key) {
+        case 'Tab':
+          if (evt.shiftKey) {
+            if (this.list.focusedIndex === 0) {
+              //host.shadowRoot.activeElement.blur();
+              evt.preventDefault();
+              this.list.focusItemAt(-1);
+              this.input.focus();
+            }
+          }
+          break;
+      }
+    }
+
+    if (evt.key === 'Escape') {
+      evt.preventDefault();
+      host.isExpanded = false;
+    }
+  }
+
+  onFocus() {
+    this.input.focus();
+  }
+}

package/src/elements/cfpb-select/single-select-event-proxy.js

@@ -0,0 +1,47 @@
+export class SingleSelectEventProxy {
+  constructor({ list, displayLabel, header }) {
+    this.list = list;
+    this.displayLabel = displayLabel;
+    this.header = header;
+  }
+
+  onClick(evt, host) {
+    if (evt.currentTarget.classList.contains('o-select__label')) {
+      this.header.focus();
+      host.isExpanded = !host.isExpanded;
+    }
+  }
+
+  onItemClick(evt, host) {
+    const selected = this.list.checkedItems[0]?.value ?? '';
+
+    if (this.displayLabel) {
+      this.displayLabel.textContent = selected;
+    }
+
+    host.optionList = host.optionList.map((item) => ({
+      ...item,
+      checked: item.value === selected,
+    }));
+
+    //host.requestUpdate();
+    host.isExpanded = false;
+  }
+
+  onKeyDown(evt, host) {
+    const focused = host.shadowRoot.activeElement.tagName;
+    if (focused === 'BUTTON') {
+      switch (evt.key) {
+        case 'ArrowDown':
+          evt.preventDefault();
+          host.isExpanded = true;
+          this.list.querySelector('cfpb-list-item')?.focus();
+          break;
+      }
+    }
+  }
+
+  onFocus() {
+    // Additional actions done on focus can be added here.
+  }
+}

package/src/elements/cfpb-tag-topic/cfpb-tag-topic.component.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/base' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' 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/utilities' as *;
 @use '@cfpb/cfpb-design-system/src/components/cfpb-typography/mixins' as *;
 

package/src/index.js

@@ -2,9 +2,9 @@
    Design System
    ========================================================================== */
 
-export * from './abstracts';
+export * from './elements/abstracts';
 
-export * from './base';
+export * from './elements/base';
 
 export * from './components/cfpb-buttons';
 export * from './components/cfpb-expandables';

package/src/index.scss

@@ -1,5 +1,3 @@
-@forward 'abstracts';
-@forward 'base';
 
 // Buttons.
 @forward 'components/cfpb-buttons/vars';
@@ -75,3 +73,6 @@
 @forward 'elements/cfpb-button/cfpb-button-link'; 
 @forward 'elements/cfpb-button/cfpb-button.component';
 @forward 'elements/cfpb-button/vars';
+
+// cfpb-icon-text
+@forward 'elements/cfpb-icon-text/cfpb-icon-text.component';

package/src/utilities/breakpoint-state.js

@@ -2,7 +2,7 @@
    Get Breakpoint State
    ========================================================================== */
 
-import { varsBreakpoints } from '../abstracts/vars-breakpoints.js';
+import { varsBreakpoints } from '../elements/abstracts/vars-breakpoints.js';
 
 /**
  * @returns {number} The base font size set on the body element.

package/src/utilities/utilities.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use 'sass:string';
-@use '../abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System

package/src/abstracts/custom-props.scss

@@ -1,175 +0,0 @@
-@mixin define-custom-props() {
-  :root {
-    // Default font variable.
-    --font-stack: system-ui, sans-serif;
-
-    /* ==========================================================================
-   Design System
-   Color variables
-   ========================================================================== */
-
-    // Official CFPB color palette.
-    // Current as of November 20, 2020.
-    // To view the colors in the Design System, visit:
-    // https://cfpb.github.io/design-system/foundation/color
-    //
-    //           | Beige  | Green  | Teal   | Pacific | Navy   | Purple | Red    | Gold   | Neutral | Gray   |
-    //           | ------ | ------ | ------ | ------- | ------ | ------ | ------ | ------ | ------- | ------ |
-    // darker    |        |        |        |         |        |        |        |        |         | 293037 |
-    // dark      |        | 1e9642 | 005e5d | 0050b4  | 002d72 | a01b68 | b63014 | dc731c | 745745  | 43484e |
-    // mid-dark  |        | 1fa040 | 126b69 | 0061c1  | 123c7c | aa2071 | c3381c | ed881b | 7d604b  | 4f5257 |
-    // base      | bea96f | 20aa3f | 257675 | 0072ce  | 254b87 | b4267a | d14124 | ff9e1b | 8a6c57  | 5a5d61 |
-    //   90      |        | 48b753 | 3e8685 | 2284d5  | 3e5f95 | be438b | d75a40 | ffab39 | 957865  | 676a6f |
-    //   80      |        | 66c368 | 579695 | 4497dc  | 5674a3 | c55998 | dd735d | ffb858 | a18573  | 75787b |
-    //   70      |        | 93cf7c | 70a6a5 | 61a7e2  | 6f88b2 | cd70a5 | e28875 | ffc372 | ad9484  | 838588 |
-    //   60      | d8c8a0 | addc91 | 89b6b5 | 7eb7e8  | 889cc0 | d486b2 | e79e8e | ffce8d | baa496  | 919395 |
-    //   50      |        | bae0a2 | 9ec4c3 | 96c4ed  | 9daecc | dc9cbf | ebb0a3 | ffd8a3 | c6b4a9  | a2a3a4 |
-    //   40      |        | c7e5b3 | b4d2d1 | afd2f2  | b3c0d9 | e3b2cc | f0c3b8 | ffe1b9 | d3c5bc  | b4b5b6 |
-    //   30      | f0e8d8 | d4eac6 | c4dddc | c3ddf6  | c3cde2 | ebc9d9 | f3d1c8 | ffe8cb | ddd1c9  | c3c4c4 |
-    //   20      |        | e2efd8 | d4e7e6 | d6e8fa  | d3daeb | f0d8e2 | f7e0d9 | fff0dd | e7ddd7  | d2d3d5 |
-    //   15      |        |        |        |         |        |        |        |        |         | dcdddf |
-    //   10      |        | f0f8eb | f0f7f6 | eff8fd  | f4f6fa | fdf3f8 | fbefec | fff6ec | f8f5f2  | e7e8e9 |
-    //    5      |        |        |        |         |        |        |        |        |         | f7f8f9 |
-    //
-    // CFPB Black: 101820
-    // CFPB White: ffffff
-
-    // Beige family
-    --beige: #bea96f;
-    --beige-30: #f0e8d8;
-    --beige-60: #d8c8a0;
-
-    // Green family
-    --green-dark: #1e9642;
-    --green-mid-dark: #1fa040;
-    --green: #20aa3f; // Primary brand green color, aka "CFPB Green"
-    --green-90: #48b753;
-    --green-80: #66c368;
-    --green-70: #93cf7c;
-    --green-60: #addc91;
-    --green-50: #bae0a2;
-    --green-40: #c7e5b3;
-    --green-30: #d4eac6;
-    --green-20: #e2efd8;
-    --green-10: #f0f8eb;
-
-    // Teal family
-    --teal-dark: #005e5d;
-    --teal-mid-dark: #126b69;
-    --teal: #257675;
-    --teal-90: #3e8685;
-    --teal-80: #579695;
-    --teal-70: #70a6a5;
-    --teal-60: #89b6b5;
-    --teal-50: #9ec4c3;
-    --teal-40: #b4d2d1;
-    --teal-30: #c4dddc;
-    --teal-20: #d4e7e6;
-    --teal-10: #f0f7f6;
-
-    // Pacific family
-    --pacific-dark: #0050b4;
-    --pacific-mid-dark: #0061c1;
-    --pacific: #0072ce;
-    --pacific-90: #2284d5;
-    --pacific-80: #4497dc;
-    --pacific-70: #61a7e2;
-    --pacific-60: #7eb7e8;
-    --pacific-50: #96c4ed;
-    --pacific-40: #afd2f2;
-    --pacific-30: #c3ddf6;
-    --pacific-20: #d6e8fa;
-    --pacific-10: #eff8fd;
-
-    // Navy family
-    --navy-dark: #002d72;
-    --navy-mid-dark: #123c7c;
-    --navy: #254b87;
-    --navy-90: #3e5f95;
-    --navy-80: #5674a3;
-    --navy-70: #6f88b2;
-    --navy-60: #889cc0;
-    --navy-50: #9daecc;
-    --navy-40: #b3c0d9;
-    --navy-30: #c3cde2;
-    --navy-20: #d3daeb;
-    --navy-10: #f4f6fa;
-
-    // Purple family
-    --purple-dark: #a01b68;
-    --purple-mid-dark: #aa2071;
-    --purple: #b4267a;
-    --purple-90: #be438b;
-    --purple-80: #c55998;
-    --purple-70: #cd70a5;
-    --purple-60: #d486b2;
-    --purple-50: #dc9cbf;
-    --purple-40: #e3b2cc;
-    --purple-30: #ebc9d9;
-    --purple-20: #f0d8e2;
-    --purple-10: #fdf3f8;
-
-    // Red family
-    --red-dark: #b63014;
-    --red-mid-dark: #c3381c;
-    --red: #d14124;
-    --red-90: #d75a40;
-    --red-80: #dd735d;
-    --red-70: #e28875;
-    --red-60: #e79e8e;
-    --red-50: #ebb0a3;
-    --red-40: #f0c3b8;
-    --red-30: #f3d1c8;
-    --red-20: #f7e0d9;
-    --red-10: #fbefec;
-
-    // Gold family
-    --gold-dark: #dc731c;
-    --gold-mid-dark: #ed881b;
-    --gold: #ff9e1b;
-    --gold-90: #ffab39;
-    --gold-80: #ffb858;
-    --gold-70: #ffc372;
-    --gold-60: #ffce8d;
-    --gold-50: #ffd8a3;
-    --gold-40: #ffe1b9;
-    --gold-30: #ffe8cb;
-    --gold-20: #fff0dd;
-    --gold-10: #fff6ec;
-
-    // Neutral family
-    --neutral-dark: #745745;
-    --neutral-mid-dark: #7d604b;
-    --neutral: #8a6c57;
-    --neutral-90: #957865;
-    --neutral-80: #a18573;
-    --neutral-70: #ad9484;
-    --neutral-60: #baa496;
-    --neutral-50: #c6b4a9;
-    --neutral-40: #d3c5bc;
-    --neutral-30: #ddd1c9;
-    --neutral-20: #e7ddd7;
-    --neutral-10: #f8f5f2;
-
-    // Gray family
-    --gray-darker: #293037;
-    --gray-dark: #43484e;
-    --gray-mid-dark: #4f5257;
-    --gray: #5a5d61;
-    --gray-90: #676a6f;
-    --gray-80: #75787b;
-    --gray-70: #838588;
-    --gray-60: #919395;
-    --gray-50: #a2a3a4;
-    --gray-40: #b4b5b6;
-    --gray-30: #c3c4c4;
-    --gray-20: #d2d3d5;
-    --gray-15: #dcdddf;
-    --gray-10: #e7e8e9;
-    --gray-5: #f7f8f9;
-
-    // …with special guests.
-    --black: #101820; // Also known as "CFPB Black"
-    --white: #fff;
-  }
-}

package/src/abstracts/grid-mixins.scss

@@ -1,82 +0,0 @@
-@use 'sass:math';
-@use './vars.scss' as *;
-
-/* ==========================================================================
-   Design System
-   Grid mixins
-   ========================================================================== */
-
-//
-// Wrapper
-//
-
-/* stylelint-disable selector-class-pattern */
-@mixin u-grid-wrapper($grid-wrapper-width: $grid-wrapper-width) {
-  /* stylelint-enable */
-  max-width: ($grid-wrapper-width - $grid-gutter-width);
-  padding-right: math.div($grid-gutter-width, 2);
-  padding-left: math.div($grid-gutter-width, 2);
-  margin: 0 auto;
-  clear: both;
-}
-
-//
-// Columns
-//
-
-/* stylelint-disable selector-class-pattern */
-@mixin u-grid-column($columns: 1, $total: $grid-total-columns) {
-  /* stylelint-enable */
-  display: inline-block;
-  box-sizing: border-box;
-
-  // To calculate the percentage width of the base element, we take the number of
-  // columns it'll span and divide by the total number of columns. As columns are
-  // specified as inline-block elements, standard columns require no further math.
-  //
-  //                      num cols used
-  //  column width in % = -------------
-  //                       total cols
-
-  width: math.percentage(math.div($columns, $total));
-
-  border: solid transparent;
-  border-width: 0 math.div($grid-gutter-width, 2);
-
-  // Remove whitespace caused by setting display to inline-block
-  margin-right: -0.25em;
-  vertical-align: top;
-}
-
-//
-// Push and Pull mixins for source ordering
-//
-
-/* stylelint-disable selector-class-pattern */
-@mixin u-grid-push($offset: 1, $grid-total-columns: $grid-total-columns) {
-  /* stylelint-enable */
-  $push: math.percentage(math.div($offset, $grid-total-columns));
-
-  position: relative;
-  left: $push;
-}
-
-/* stylelint-disable selector-class-pattern */
-@mixin u-grid-pull($offset: 1, $grid-total-columns: $grid-total-columns) {
-  /* stylelint-enable */
-  $pull: math.percentage(math.div($offset, $grid-total-columns));
-
-  position: relative;
-  right: $pull;
-}
-
-//
-// Nested columns
-//
-
-@mixin u-grid-nested-col-group() {
-  display: block;
-  position: relative;
-  margin-left: math.div($grid-gutter-width, 2) * -1;
-  margin-right: math.div($grid-gutter-width, 2) * -1;
-}