@cfpb/cfpb-design-system 3.1.8 → 3.2.0

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

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 // Hero variables
 $hero-desktop-height: 285px;
@@ -14,7 +13,7 @@ $hero-desktop-height: 285px;
   // Tablet and above.
   @include respond-to-min($bp-sm-min) {
     .m-hero__subhead {
-      @include heading-3;
+      @include heading-3($is-responsive: false);
     }
   }
 
@@ -27,8 +26,7 @@ $hero-desktop-height: 285px;
       @include u-superheading;
     }
     .m-hero__subhead {
-      @include heading-2;
-      font-weight: 400;
+      @include heading-2($is-responsive: false, $font-weight: 400);
     }
   }
 }
@@ -51,7 +49,7 @@ $hero-desktop-height: 285px;
   }
 
   &__heading {
-    @include heading-1;
+    @include heading-1($is-responsive: false);
   }
 
   &__subhead {
@@ -130,7 +128,7 @@ $hero-desktop-height: 285px;
 @include respond-to-max($bp-sm-max) {
   .m-hero {
     &__heading {
-      @include heading-2;
+      @include heading-2($is-responsive: false);
     }
     &__subhead {
       font-size: $size-iv;

package/src/components/cfpb-tables/table.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use './vars' as *;
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Design System
@@ -77,12 +76,17 @@
     }
 
     td[data-label]::before {
-      @include heading-5;
       display: block;
       margin-top: 0;
       margin-bottom: math.div(5px, $base-font-size-px) + em;
       content: attr(data-label);
       line-height: 1.83333333;
+
+      // h5 size.
+      font-size: math.div($size-v, $base-font-size-px) + em;
+      font-weight: 600;
+      letter-spacing: 1px;
+      text-transform: uppercase;
     }
 
     td:last-child,

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

@@ -2,8 +2,8 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .a-date {
-  @include heading-5;
-
   color: $date;
   white-space: nowrap;
+
+  @include heading-5;
 }

package/src/components/cfpb-typography/meta-header.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 $meta-header-item-gap: 21px;
 
@@ -27,16 +26,11 @@ $meta-header-item-gap: 21px;
     display: grid;
     grid-template-columns: 0 auto 1fr;
     row-gap: math.div(5px, $base-font-size-px) + rem;
+    text-wrap: balance;
 
-    @include h4;
+    margin-bottom: 0;
 
-    // TODO: Move this above the h4 mixin. Mixin needs to allow margin override.
-    /* stylelint-disable no-duplicate-selectors */
-    & {
-      text-wrap: balance;
-      margin-bottom: 0;
-    }
-    /* stylelint-enable */
+    @include heading-4($has-margin-bottom: false);
 
     // Mobile only.
     @include respond-to-max($bp-xs-max) {

package/src/components/cfpb-typography/pull-quote.scss

@@ -1,24 +1,22 @@
 @use './vars' as *;
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .m-pull-quote {
   &__body {
-    @include heading-3;
-
     color: $pull-quote-body;
 
-    // Mobile only.
-    @include respond-to-max($bp-xs-max) {
-      @include heading-4;
-    }
+    @include heading-3(
+      $has-margin-bottom: false,
+      $has-margin-top: false,
+      $is-responsive: true
+    );
   }
 
   &__citation {
-    @include heading-5;
-
     color: $pull-quote-citation;
 
+    @include heading-5;
+
     &::before {
       // An em dash before the cited author name.
       content: '\2014 ';

package/src/components/cfpb-typography/slug-header.scss

@@ -1,17 +1,16 @@
 @use 'sass:math';
 @use './vars.scss' as *;
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 .m-slug-header {
   border-top: 1px solid $slug-header-border-thin;
 
   &__heading {
-    @include heading-5;
-
     display: inline-block;
     padding-top: math.div(4px, $size-v) + em;
     border-top: 5px solid $slug-header-border-thick;
     margin-top: -3px;
+
+    @include heading-5($has-margin-top: false);
   }
 }

package/src/utilities/utilities.scss

@@ -406,11 +406,11 @@
 }
 
 .u-w66pct {
-  width: math.div(2, 3) * 1%;
+  width: math.div(2, 3) * 100%;
 }
 
 .u-w33pct {
-  width: math.div(1, 3) * 1%;
+  width: math.div(1, 3) * 100%;
 }
 
 //