@cfpb/cfpb-design-system 4.2.0 → 4.2.2

package/package.json

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

package/src/components/cfpb-icons/icon.scss

@@ -7,7 +7,7 @@
 
 .cf-icon-svg {
   height: $cf-icon-height;
-  vertical-align: text-top;
+  vertical-align: middle;
   fill: currentcolor;
 
   &--updating,

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

@@ -9,17 +9,14 @@
 @mixin u-link-card-colors($c, $v, $h, $f, $a) {
   .m-card__footer > span {
     display: inline;
-    border-width: 0;
-    border-bottom-width: 1px;
-    border-color: $c;
-    border-style: dotted;
+    text-decoration-color: $c;
+    text-decoration-style: dotted;
     font-weight: 500;
     color: $c;
-    text-decoration: none;
   }
 
   & > a:visited .m-card__footer > span {
-    border-color: $v;
+    text-decoration-color: $v;
     color: $v;
   }
 
@@ -28,19 +25,19 @@
   // instead of on the link. This differs from the visited, focus,
   // and active states, which add styles onto the link.
   &:hover .m-card__footer > span {
-    border-style: solid;
-    border-color: $h;
+    text-decoration-style: solid;
+    text-decoration-color: $h;
     color: $h;
   }
 
   & > a:focus .m-card__footer > span {
-    border-color: $f;
+    text-decoration-color: $f;
     color: $f;
   }
 
   & > a:active .m-card__footer > span {
-    border-color: $a;
-    border-style: solid;
+    text-decoration-color: $a;
+    text-decoration-style: solid;
     color: $a;
   }
 }

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

@@ -13,6 +13,12 @@
     // See https://github.com/cfpb/consumerfinance.gov/pull/8252
     overflow-wrap: break-word;
   }
+
+  &:hover {
+    .a-link__text {
+      text-decoration-style: solid;
+    }
+  }
 }
 
 //

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

@@ -52,7 +52,7 @@
       }
 
       .#{$jump-link-text-class} {
-        border-bottom-width: 0;
+        text-decoration: none;
 
         // Arbitrary high value for flex-shrink to prevent squeezing of the icon
         // when the link text is very long.
@@ -71,8 +71,6 @@
       .#{$jump-link-class}__text {
         border-bottom-color: var(--gold-80);
       }
-    } @else {
-      font-weight: 500;
     }
 
     // Mobile only.

package/src/elements/cfpb-icon-text/cfpb-icon-text.component.scss

@@ -16,6 +16,7 @@
     // This prevents the child button from having an empty gap after the button.
     display: flex;
     width: fit-content;
+    align-items: center;
 
     // Hide SVG by default.
     & ::slotted(svg) {

package/src/elements/cfpb-pagination/cfpb-pagination.component.scss

@@ -7,7 +7,7 @@
 
   .cf-icon-svg {
     height: $cf-icon-height;
-    vertical-align: text-top;
+    vertical-align: middle;
     fill: currentcolor;
   }