@cfpb/cfpb-design-system 3.4.13 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.4.13",
+  "version": "3.5.0",
   "description": "CFPB's UI framework",
   "main": "src/index.js",
   "author": {

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

@@ -16,6 +16,21 @@
   text-align: left;
   min-width: fit-content;
 
+  .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.
+  > label {
+    display: contents;
+    pointer-events: none;
+  }
+}
+
+button.a-tag-filter {
   &:hover {
     background-color: var(--teal-40);
     cursor: pointer;
@@ -29,19 +44,6 @@
   &:active {
     background-color: var(--teal);
   }
-
-  .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.
-  > label {
-    display: contents;
-    pointer-events: none;
-  }
 }
 
 a.a-tag-filter {

package/src/components/cfpb-layout/featured-content-module.scss

@@ -70,26 +70,4 @@
       transform: translateX(-50%);
     }
   }
-
-  // Modifiers
-  &--left {
-    /* Left modifier doesn't have a border/background. If in the future we
-       have a left arranged FCM we'll want to make the border/background
-       its own modifer */
-    border: initial;
-    background-color: initial;
-
-    .o-featured-content-module__visual {
-      left: 0;
-      right: initial;
-    }
-
-    .o-featured-content-module__text {
-      // Tablet and above.
-      @include respond-to-min($bp-sm-min) {
-        padding-left: $fcm-visual-width + $grid-gutter-width;
-        padding-right: math.div($grid-gutter-width, $base-font-size-px) + em;
-      }
-    }
-  }
 }

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

@@ -108,6 +108,7 @@ $hero-desktop-height: 285px;
     &__image-wrapper {
       margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
     }
+
     &--overlay {
       .m-hero__wrapper {
         // Overwrite the image that is set in the markup because
@@ -115,6 +116,7 @@ $hero-desktop-height: 285px;
         background-image: none !important;
       }
     }
+
     &--jumbo {
       .m-hero__wrapper {
         // Keep hero image flush with container on mobile
@@ -130,6 +132,7 @@ $hero-desktop-height: 285px;
     &__heading {
       @include heading-2($is-responsive: false);
     }
+
     &__subhead {
       font-size: $size-iv;
     }
@@ -145,9 +148,11 @@ $hero-desktop-height: 285px;
       padding-left: math.div($grid-gutter-width, 2);
       min-height: $hero-desktop-height - ($grid-gutter-width * 2);
     }
+
     &__text {
-      margin: auto;
+      margin: auto 0;
     }
+
     &__image-wrapper {
       padding-right: math.div($grid-gutter-width, 2);
       padding-left: math.div(
@@ -157,6 +162,7 @@ $hero-desktop-height: 285px;
       display: flex;
       align-items: center;
     }
+
     &--bleeding {
       .m-hero__image-wrapper {
         width: 100%;
@@ -172,11 +178,13 @@ $hero-desktop-height: 285px;
         background-size: cover;
       }
     }
+
     &--overlay {
       .m-hero__image {
         display: none;
       }
     }
+
     &--jumbo {
       .m-hero__wrapper {
         background-position: 50%;
@@ -187,6 +195,7 @@ $hero-desktop-height: 285px;
         display: none;
       }
     }
+
     &--50-50 {
       .m-hero__wrapper {
         grid-template-columns: 1fr 1fr;