@cfpb/cfpb-design-system 3.1.8 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.1.8",
+  "version": "3.2.0",
   "description": "CFPB's UI framework",
   "main": "src/index.js",
   "author": {
@@ -19,6 +19,6 @@
   "bugs": {
     "url": "https://github.com/cfpb/design-system/issues"
   },
-  "gitHead": "ce63bfcdecf687e9b96ab2420db225649b65db4b",
+  "gitHead": "1b92196c49399125ce790a1c43e47e02659e3e3e",
   "type": "module"
 }

package/src/abstracts/heading-mixins.scss

@@ -8,78 +8,91 @@
    Base styles
    ========================================================================== */
 
-@mixin heading-1() {
-  margin-bottom: math.div(15px, $size-i) + em;
+@mixin heading-1(
+  $has-margin-bottom: true,
+  $has-margin-top: true,
+  $is-responsive: true
+) {
   font-size: math.div($size-i, $base-font-size-px) + em;
   font-weight: 600;
   letter-spacing: inherit;
   line-height: 1.25;
   text-transform: inherit;
-}
 
-@mixin heading-2() {
-  margin-bottom: math.div(15px, $size-ii) + em;
-  font-size: math.div($size-ii, $base-font-size-px) + em;
-  font-weight: 600;
-  letter-spacing: inherit;
-  line-height: 1.25;
-  text-transform: inherit;
-}
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-i) + em;
+  }
 
-@mixin heading-3() {
-  margin-bottom: math.div(15px, $size-iii) + em;
-  font-size: math.div($size-iii, $base-font-size-px) + em;
-  font-weight: normal;
-  letter-spacing: inherit;
-  line-height: 1.25;
-  text-transform: inherit;
-}
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + & {
+      margin-top: math.div(60px, $size-i) + em;
+    }
 
-@mixin heading-4() {
-  margin-bottom: math.div(15px, $size-iv) + em;
-  font-size: math.div($size-iv, $base-font-size-px) + em;
-  font-weight: 500;
-  letter-spacing: inherit;
-  line-height: 1.25;
-  text-transform: inherit;
-}
+    @if $is-responsive {
+      // Mobile only.
+      @include respond-to-max($bp-xs-max) {
+        p + &,
+        ul + &,
+        ol + &,
+        dl + &,
+        figure + &,
+        img + &,
+        table + &,
+        blockquote + & {
+          margin-top: math.div(45px, $size-ii) + em;
+        }
+        h2 + &,
+        .h2 + &,
+        h3 + &,
+        .h3 + &,
+        h4 + &,
+        .h4 + &,
+        h5 + &,
+        .h5 + &,
+        h6 + &,
+        .h6 + & {
+          margin-top: math.div(30px, $size-ii) + em;
+        }
+      }
+    }
+  }
 
-@mixin heading-5() {
-  margin-bottom: math.div(15px, $size-v) + em;
-  font-size: math.div($size-v, $base-font-size-px) + em;
-  font-weight: 600;
-  letter-spacing: 1px;
-  line-height: 1.25;
-  text-transform: uppercase;
+  @if $is-responsive {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      @include heading-2(
+        $has-margin-bottom,
+        $has-margin-top,
+        $is-responsive: false
+      );
+    }
+  }
 }
 
-@mixin heading-6() {
-  margin-bottom: math.div(15px, $size-vi) + em;
-  font-size: math.div($size-vi, $base-font-size-px) + em;
-  font-weight: 600;
-  letter-spacing: 1px;
+@mixin heading-2(
+  $has-margin-bottom: true,
+  $has-margin-top: true,
+  $is-responsive: true,
+  $font-weight: 600
+) {
+  font-size: math.div($size-ii, $base-font-size-px) + em;
+  font-weight: $font-weight;
+  letter-spacing: inherit;
   line-height: 1.25;
-  text-transform: uppercase;
-}
-
-@mixin h1() {
-  @include heading-1;
+  text-transform: inherit;
 
-  p + &,
-  ul + &,
-  ol + &,
-  dl + &,
-  figure + &,
-  img + &,
-  table + &,
-  blockquote + & {
-    margin-top: math.div(60px, $size-i) + em;
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-ii) + em;
   }
 
-  // Mobile only.
-  @include respond-to-max($bp-xs-max) {
-    @include heading-2;
-
+  @if $has-margin-top {
     p + &,
     ul + &,
     ol + &,
@@ -90,8 +103,9 @@
     blockquote + & {
       margin-top: math.div(45px, $size-ii) + em;
     }
-    h2 + &,
-    .h2 + &,
+
+    h1 + &,
+    .h1 + &,
     h3 + &,
     .h3 + &,
     h4 + &,
@@ -102,40 +116,54 @@
     .h6 + & {
       margin-top: math.div(30px, $size-ii) + em;
     }
-  }
-}
 
-@mixin h2() {
-  @include heading-2;
-
-  p + &,
-  ul + &,
-  ol + &,
-  dl + &,
-  figure + &,
-  img + &,
-  table + &,
-  blockquote + & {
-    margin-top: math.div(45px, $size-ii) + em;
+    @if $is-responsive {
+      // Mobile only.
+      @include respond-to-max($bp-xs-max) {
+        p + &,
+        ul + &,
+        ol + &,
+        dl + &,
+        figure + &,
+        img + &,
+        table + &,
+        blockquote + & {
+          margin-top: math.div(30px, $size-iii) + em;
+        }
+      }
+    }
   }
 
-  h1 + &,
-  .h1 + &,
-  h3 + &,
-  .h3 + &,
-  h4 + &,
-  .h4 + &,
-  h5 + &,
-  .h5 + &,
-  h6 + &,
-  .h6 + & {
-    margin-top: math.div(30px, $size-ii) + em;
+  @if $is-responsive {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      @include heading-3(
+        $has-margin-bottom,
+        $has-margin-top,
+        $is-responsive: false,
+        $font-weight: $font-weight
+      );
+    }
   }
+}
 
-  // Mobile only.
-  @include respond-to-max($bp-xs-max) {
-    @include heading-3;
+@mixin heading-3(
+  $has-margin-bottom: true,
+  $has-margin-top: true,
+  $is-responsive: true,
+  $font-weight: normal
+) {
+  font-size: math.div($size-iii, $base-font-size-px) + em;
+  font-weight: $font-weight;
+  letter-spacing: inherit;
+  line-height: 1.25;
+  text-transform: inherit;
+
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-iii) + em;
+  }
 
+  @if $has-margin-top {
     p + &,
     ul + &,
     ol + &,
@@ -143,136 +171,163 @@
     figure + &,
     img + &,
     table + &,
-    blockquote + & {
+    blockquote + &,
+    h1 + &,
+    .h1 + &,
+    h2 + &,
+    .h2 + &,
+    h4 + &,
+    .h4 + &,
+    h5 + &,
+    .h5 + &,
+    h6 + &,
+    .h6 + & {
       margin-top: math.div(30px, $size-iii) + em;
     }
   }
+
+  @if $is-responsive {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      @include heading-4(
+        $has-margin-bottom,
+        $has-margin-top,
+        $is-responsive: false,
+        $font-weight: $font-weight
+      );
+    }
+  }
 }
 
-@mixin h3() {
-  @include heading-3;
+@mixin heading-4(
+  $has-margin-bottom: true,
+  $has-margin-top: true,
+  $is-responsive: true,
+  $font-weight: 500
+) {
+  font-size: math.div($size-iv, $base-font-size-px) + em;
+  font-weight: $font-weight;
+  letter-spacing: inherit;
+  line-height: 1.25;
+  text-transform: inherit;
+
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-iv) + em;
+  }
 
-  p + &,
-  ul + &,
-  ol + &,
-  dl + &,
-  figure + &,
-  img + &,
-  table + &,
-  blockquote + &,
-  h1 + &,
-  .h1 + &,
-  h2 + &,
-  .h2 + &,
-  h4 + &,
-  .h4 + &,
-  h5 + &,
-  .h5 + &,
-  h6 + &,
-  .h6 + & {
-    margin-top: math.div(30px, $size-iii) + em;
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + &,
+    h1 + &,
+    .h1 + &,
+    h2 + &,
+    .h2 + &,
+    h3 + &,
+    .h3 + &,
+    h5 + &,
+    .h5 + &,
+    h6 + &,
+    .h6 + & {
+      margin-top: math.div(30px, $size-iv) + em;
+    }
   }
 
-  // Mobile only.
-  @include respond-to-max($bp-xs-max) {
-    @include heading-4;
+  @if $is-responsive {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      margin-bottom: math.div(10px, $base-font-size-px) + em;
+      font-size: 1em;
+      line-height: math.div(18px, $base-font-size-px);
+    }
   }
 }
 
-@mixin h4() {
-  @include heading-4;
+@mixin heading-5($has-margin-bottom: true, $has-margin-top: true) {
+  font-size: math.div($size-v, $base-font-size-px) + em;
+  font-weight: 600;
+  letter-spacing: 1px;
+  line-height: 1.25;
+  text-transform: uppercase;
 
-  p + &,
-  ul + &,
-  ol + &,
-  dl + &,
-  figure + &,
-  img + &,
-  table + &,
-  blockquote + &,
-  h1 + &,
-  .h1 + &,
-  h2 + &,
-  .h2 + &,
-  h3 + &,
-  .h3 + &,
-  h5 + &,
-  .h5 + &,
-  h6 + &,
-  .h6 + & {
-    margin-top: math.div(30px, $size-iv) + em;
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-v) + em;
   }
 
-  // Mobile only.
-  @include respond-to-max($bp-xs-max) {
-    $h4-font-size-on-xs: $base-font-size-px;
-    margin-bottom: math.div(10px, $h4-font-size-on-xs) + em;
-    font-size: math.div($h4-font-size-on-xs, $base-font-size-px) + em;
-    line-height: math.div(18px, $h4-font-size-on-xs);
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + &,
+    h1 + &,
+    .h1 + &,
+    h2 + &,
+    .h2 + &,
+    h3 + &,
+    .h3 + &,
+    h4 + &,
+    .h4 + &,
+    h6 + &,
+    .h6 + & {
+      margin-top: math.div(30px, $size-v) + em;
+    }
   }
 }
 
-@mixin h5() {
-  @include heading-5;
+@mixin heading-6($has-margin-bottom: true, $has-margin-top: true) {
+  font-size: math.div($size-vi, $base-font-size-px) + em;
+  font-weight: 600;
+  letter-spacing: 1px;
+  line-height: 1.25;
+  text-transform: uppercase;
 
-  p + &,
-  ul + &,
-  ol + &,
-  dl + &,
-  figure + &,
-  img + &,
-  table + &,
-  blockquote + &,
-  h1 + &,
-  .h1 + &,
-  h2 + &,
-  .h2 + &,
-  h3 + &,
-  .h3 + &,
-  h4 + &,
-  .h4 + &,
-  h6 + &,
-  .h6 + & {
-    margin-top: math.div(30px, $size-v) + em;
+  @if $has-margin-bottom {
+    margin-bottom: math.div(15px, $size-vi) + em;
   }
-}
-
-@mixin h6() {
-  @include heading-6;
 
-  p + &,
-  ul + &,
-  ol + &,
-  dl + &,
-  figure + &,
-  img + &,
-  table + &,
-  blockquote + &,
-  h1 + &,
-  .h1 + &,
-  h2 + &,
-  .h2 + &,
-  h3 + &,
-  .h3 + &,
-  h4 + &,
-  .h4 + &,
-  h5 + &,
-  .h5 + & {
-    margin-top: math.div(30px, $size-vi) + em;
+  @if $has-margin-top {
+    p + &,
+    ul + &,
+    ol + &,
+    dl + &,
+    figure + &,
+    img + &,
+    table + &,
+    blockquote + &,
+    h1 + &,
+    .h1 + &,
+    h2 + &,
+    .h2 + &,
+    h3 + &,
+    .h3 + &,
+    h4 + &,
+    .h4 + &,
+    h5 + &,
+    .h5 + & {
+      margin-top: math.div(30px, $size-vi) + em;
+    }
   }
 }
 
 @mixin u-lead-paragraph() {
-  @include heading-3;
-
   margin-top: 0;
   margin-bottom: 15px;
 
-  // Mobile only.
-  @include respond-to-max($bp-xs-max) {
-    // Use the same regular weight but reduce the sizes to h4 size.
-    font-size: math.div(18px, $base-font-size-px) + em;
-  }
+  @include heading-3(
+    $has-margin-bottom: false,
+    $has-margin-top: false,
+    $is-responsive: true,
+    $font-weight: normal
+  );
 }
 
 // For when you want a heading that's bigger than a normal H1.

package/src/base/base.scss

@@ -44,32 +44,32 @@ h6 {
 
 h1,
 .h1 {
-  @include h1;
+  @include heading-1;
 }
 
 h2,
 .h2 {
-  @include h2;
+  @include heading-2;
 }
 
 h3,
 .h3 {
-  @include h3;
+  @include heading-3;
 }
 
 h4,
 .h4 {
-  @include h4;
+  @include heading-4;
 }
 
 h5,
 .h5 {
-  @include h5;
+  @include heading-5;
 }
 
 h6,
 .h6 {
-  @include h6;
+  @include heading-6;
 }
 
 .lead-paragraph {
@@ -275,15 +275,12 @@ th {
     .h5,
     h6,
     .h6 {
-      @include h5;
-
-      // TODO: Move this above the h4 mixin. Mixin needs to allow margin override.
-      /* stylelint-disable no-duplicate-selectors */
-      & {
-        margin: 0;
-        font-size: inherit;
-      }
-      /* stylelint-enable */
+      margin: 0;
+      font-size: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      line-height: inherit;
+      text-transform: inherit;
     }
   }
 }

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

@@ -18,17 +18,11 @@
   }
 
   &--heading {
-    @include h4;
+    display: block;
 
-    // TODO: Move this above the h4 mixin. Mixin needs to allow margin override.
-    /* stylelint-disable no-duplicate-selectors */
-    & {
-      display: block;
+    margin-bottom: math.div(10px, $size-iv) + em;
 
-      // Overwrites heading-4 margin.
-      margin-bottom: math.div(10px, $size-iv) + em;
-    }
-    /* stylelint-enable */
+    @include heading-4($has-margin-bottom: false);
 
     // Add a gap between the label helper and label heading
     .a-label__helper--block {

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

@@ -18,6 +18,8 @@
   background-color: var(--teal-20);
   border-radius: math.div(3px, $base-font-size-px) + rem;
   color: var(--black);
+  text-align: left;
+  min-width: fit-content;
 
   &:hover {
     background-color: var(--teal-40);
@@ -35,6 +37,9 @@
 
   .cf-icon-svg {
     pointer-events: none;
+
+    // Prevent flexbox from squishing icon when tag text is long.
+    flex: none;
   }
 
   // If the contents are wrapped in a label, negate the label's display.
@@ -122,6 +127,7 @@ a.a-tag-filter {
 
   li {
     margin-bottom: 0;
+    display: contents;
   }
 
   // Tablet and above.

package/src/components/cfpb-layout/card-group.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 // Grid-based "column" card group layouts.
 .o-card-group {
@@ -125,7 +124,7 @@ _:-ms-lang(x),
     // center the content of the first card and increase the heading.
     .m-card:nth-of-type(1) {
       h3 {
-        @include h2;
+        @include heading-2;
       }
 
       > a {

package/src/components/cfpb-layout/card.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 // $c = default state.
 // $v = `:visited` state.
@@ -101,7 +100,7 @@
   // Shrink heading at smaller screen sizes.
   &__heading {
     @include respond-to-max($bp-med-min) {
-      @include h3;
+      @include heading-3;
     }
   }
 
@@ -235,7 +234,7 @@
 
     // Breakout cards have larger links.
     .m-card__footer > span {
-      @include heading-3;
+      @include heading-3($is-responsive: false);
     }
   }
 }