@cfpb/cfpb-design-system 3.7.1 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.7.1",
+  "version": "3.9.0",
   "description": "CFPB's UI framework",
   "exports": {
     ".": "./src/index.js",

package/src/abstracts/media-queries.scss

@@ -12,7 +12,7 @@
 @mixin respond-to-min($bp) {
   $ems: math.div($bp, $base-font-size-px) + em;
 
-  @media only all and (min-width: $ems) {
+  @media only screen and (min-width: $ems) {
     @content;
   }
 }
@@ -20,7 +20,7 @@
 @mixin respond-to-max($bp) {
   $ems: math.div($bp, $base-font-size-px) + em;
 
-  @media only all and (max-width: $ems) {
+  @media only screen and (max-width: $ems) {
     @content;
   }
 }
@@ -29,16 +29,7 @@
   $ems1: math.div($bp1, $base-font-size-px) + em;
   $ems2: math.div($bp2, $base-font-size-px) + em;
 
-  @media only all and (min-width: $ems1) and (max-width: $ems2) {
-    @content;
-  }
-}
-
-@mixin respond-to-print() {
-  @media print {
-    @content;
-  }
-  .print {
+  @media only screen and (min-width: $ems1) and (max-width: $ems2) {
     @content;
   }
 }

package/src/base/base.scss

@@ -44,6 +44,12 @@ input[type='date'] {
   }
 }
 
+// Globally remove inset border style from HR elements.
+hr {
+  border: none;
+  border-top: 1px solid var(--gray-40);
+}
+
 strong,
 b {
   font-weight: 600;

package/src/base/normalize.scss

@@ -208,7 +208,11 @@ button,
   html input[type="button"], /* 1 */
   input[type="reset"],
   input[type="submit"] {
+  /* TODO: stylelint wants to convert `appearance: button` to `appearance: auto`
+     Investigate why. */
+  /* stylelint-disable */
   appearance: button; /* 2 */
+  /* stylelint-enable */
   cursor: pointer; /* 3 */
 }
 

package/src/components/cfpb-expandables/expandable-group.scss

@@ -22,7 +22,7 @@
     }
   }
 
-  @include respond-to-print {
+  @media print {
     // Hide the interactive expandable cues when printing
     &__header[aria-expanded='true'] &__cue-close,
     &__header[aria-expanded='false'] &__cue-open {

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

@@ -158,7 +158,7 @@
     }
   }
 
-  @include respond-to-print {
+  @media print {
     // Hide the interactive expandable cues when printing
     &__header[aria-expanded='true'] &__cue-close,
     &__header[aria-expanded='false'] &__cue-open {

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

@@ -43,14 +43,18 @@
 
       // 4px is needed because the 2px movement of the content's bounding box.
       top: calc(-100% + 2px);
+
+      /* TODO: stylelint wants to convert rgba to rgb. Investigate why. */
+      /* stylelint-disable */
       background: linear-gradient(
         to bottom,
         rgba(255, 255, 255, 0%) 0%,
         rgba(255, 255, 255, 100%) 100%
       );
+      /* stylelint-enable */
       content: '';
 
-      @include respond-to-print {
+      @media print {
         background: none;
       }
     }

package/src/components/cfpb-forms/form-alert.scss

@@ -2,14 +2,17 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .a-form-alert {
+  display: flex;
+  gap: math.div(5px, $base-font-size-px) + rem;
+
   .cf-icon-svg {
     color: $input-icon;
-    float: left;
+    flex: none;
+    margin-top: math.div(1px, $base-font-size-px) + rem;
   }
 
   &__text {
     display: block;
-    margin-left: math.div(20px, $base-font-size-px) + em;
   }
 
   &--success .cf-icon-svg {

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

@@ -42,7 +42,7 @@ button.a-tag-filter {
   }
 
   &:active {
-    background-color: var(--teal);
+    background-color: var(--teal-60);
   }
 }
 
@@ -60,7 +60,7 @@ a.a-tag-filter {
     var(--teal),
     var(--teal),
     var(--teal),
-    var(--teal)
+    var(--teal-60)
   );
 }
 

package/src/components/cfpb-notifications/notification.scss

@@ -9,13 +9,12 @@
 
 .m-notification {
   display: none;
-  position: relative;
-  padding: $notification-padding-px;
+  padding: math.div(15px, $base-font-size-px) + rem;
   background: $notification-bg;
   border: 1px solid $notification-border;
 
   & > .cf-icon-svg {
-    position: absolute;
+    flex: none;
     fill: $notification-icon;
   }
 
@@ -63,7 +62,8 @@
   }
 
   &--visible {
-    display: block;
+    display: flex;
+    gap: math.div(5px, $base-font-size-px) + rem;
   }
 
   &__content {
@@ -72,7 +72,7 @@
 
   // Only adding left padding if an icon is present.
   .cf-icon-svg + &__content {
-    padding-left: math.div(25px, $base-font-size-px) + rem;
+    flex-grow: 1;
   }
 
   &__message {

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

@@ -21,7 +21,3 @@ $notification-icon: var(--gray);
 $notification-icon-success: var(--green);
 $notification-icon-warning: var(--gold);
 $notification-icon-error: var(--red);
-
-// Sizing variables
-
-$notification-padding-px: 15px;

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

@@ -21,7 +21,12 @@
 
       .#{$jump-link-class}__text {
         color: var(--gray);
+
+        /* TODO: `word-break: break-word` is deprecated should be converted to
+           `overflow-wrap: anywhere` combined with `word-break: normal` */
+        /* stylelint-disable declaration-property-value-keyword-no-deprecated */
         word-break: break-word;
+        /* stylelint-enable declaration-property-value-keyword-no-deprecated */
       }
     } @else {
       font-weight: 500;