@cfpb/cfpb-design-system 3.4.5 → 3.4.7

package/package.json

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

package/src/components/cfpb-buttons/button-group.scss

@@ -6,4 +6,5 @@
   gap: math.div(10px, $base-font-size-px) + rem;
   flex-wrap: wrap;
   align-items: center;
+  width: fit-content;
 }

package/src/components/cfpb-buttons/button-link.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use './vars.scss' as *;
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
@@ -5,109 +6,97 @@
 // Button link
 //
 
-// TODO: Refactor the rule combos for simplicity
-
-.a-btn--link {
-  padding: 0;
-
-  // Padding added so the focus rectangle falls below the underline.
-  padding-bottom: 1.5px;
-  border-radius: 0;
-  text-decoration-line: underline;
-  text-decoration-thickness: 1px;
-  text-decoration-style: dotted;
-  text-underline-offset: 4.5px;
-
-  &,
-  &:link,
-  &:visited {
-    text-decoration-color: $link-underline;
-    background-color: transparent;
-    color: $link-text;
-  }
-
-  &:hover,
-  &.hover {
-    text-decoration-color: $link-underline-hover;
-    text-decoration-style: solid;
-    background-color: transparent;
-    color: $link-text-hover;
-  }
-
-  &:focus,
-  &.focus {
-    text-decoration-style: solid;
-    background-color: transparent;
-    outline: 1px dotted $link-underline;
-  }
-
-  &:active,
-  &.active {
-    text-decoration-color: $link-underline-active;
-    text-decoration-style: solid;
-    background-color: transparent;
-    color: $link-text-active;
-  }
-
-  //
-  // Secondary button link
-  //
-
-  &.a-btn--secondary {
+/*
+Link text and underline.
+$v: Link link and visited color.
+$h: Link hover color.
+$f: Link focus color.
+$a: Link active color.
+*/
+@mixin u-btn-link-states($selector, $v, $h, $f, $a) {
+  #{$selector} {
     &,
     &:link,
     &:visited {
-      text-decoration-color: $btn-secondary-bg;
+      text-decoration-color: $v;
       background-color: transparent;
-      color: $btn-secondary-bg;
+      color: $v;
     }
 
     &:hover,
     &.hover {
-      text-decoration-color: $btn-secondary-bg-hover;
-      color: $btn-secondary-bg-hover;
+      text-decoration-color: $h;
+      text-decoration-style: solid;
+      background-color: transparent;
+      color: $h;
     }
 
     &:focus,
     &.focus {
-      outline-color: $btn-secondary-bg;
+      text-decoration-style: solid;
+      background-color: transparent;
+      outline: 1px dotted $f;
+      color: $f;
     }
 
     &:active,
     &.active {
-      text-decoration-color: $btn-secondary-bg-active;
-      color: $btn-secondary-bg-active;
-    }
-  }
-
-  //
-  // Destructive action button link
-  //
-
-  &.a-btn--warning {
-    &,
-    &:link,
-    &:visited {
-      text-decoration-color: $btn-warning-bg;
+      text-decoration-color: $a;
+      text-decoration-style: solid;
       background-color: transparent;
-      color: $btn-warning-bg;
+      color: $a;
     }
+  }
+}
 
-    &:hover,
-    &.hover {
-      text-decoration-color: $btn-warning-bg-hover;
-      color: $btn-warning-bg-hover;
-    }
+.a-btn--link {
+  // Padding added so the focus rectangle falls below the underline.
+  padding: 1.5px 0;
+  border-radius: 0;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-style: dotted;
+  text-underline-offset: 4.5px;
 
-    &:focus,
-    &.focus {
-      outline-color: $btn-warning-bg;
-    }
+  &:has(svg) {
+    // Button links should be closer to their icon.
+    gap: math.div(5px, $base-font-size-px) + rem;
 
-    &:active,
-    &.active {
-      text-decoration-color: $btn-warning-bg-active;
-      color: $btn-warning-bg-active;
+    // Button links shouldn't have a divider.
+    &::before {
+      display: none;
     }
   }
 }
+
+@include u-btn-link-states(
+  '.a-btn--link',
+  $link-text,
+  $link-text-hover,
+  $link-text,
+  $link-text-active
+);
+
+//
+// Secondary button link
+//
+
+@include u-btn-link-states(
+  '.a-btn--link.a-btn--secondary',
+  $btn-secondary-bg,
+  $btn-secondary-bg-hover,
+  $btn-secondary-bg,
+  $btn-secondary-bg-active
+);
+
+//
+// Destructive action button link
+//
+
+@include u-btn-link-states(
+  '.a-btn--link.a-btn--warning',
+  $btn-warning-bg,
+  $btn-warning-bg-hover,
+  $btn-warning-bg,
+  $btn-warning-bg-active
+);

package/src/components/cfpb-buttons/button.scss

@@ -13,7 +13,7 @@ input.a-btn::-moz-focus-inner {
   border: 0;
 }
 
-@mixin a-btn-divider() {
+@mixin u-btn-divider() {
   content: '';
   border-left: 1px solid $btn-divider;
   order: 2;
@@ -24,7 +24,6 @@ input.a-btn::-moz-focus-inner {
   appearance: none;
   display: flex;
   gap: math.div(10px, $base-font-size-px) + rem;
-  justify-content: center;
 
   box-sizing: border-box;
   padding: math.div($btn-v-padding, $btn-font-size) + em
@@ -39,6 +38,9 @@ input.a-btn::-moz-focus-inner {
   text-align: center;
   text-decoration: none;
   transition: background-color 0.1s;
+  width: fit-content;
+  height: fit-content;
+  justify-content: center;
 
   &,
   &:link,
@@ -167,42 +169,44 @@ input.a-btn::-moz-focus-inner {
     }
   }
 
-  // Handle button with icon logic.
-  &:not(.a-btn--hide-icon):has(svg)::before {
-    @include a-btn-divider;
+  // Set either the text or icon as the last item in the button.
+  &:has(svg + span) {
+    span {
+      order: 3;
+    }
   }
 
-  // Hide the icon if the a-btn--hide-icon modifier is set.
-  // Useful for showing and hiding a loading icon, for example.
-  &--hide-icon {
+  &:has(span + svg) {
     svg {
-      display: none;
+      order: 3;
     }
   }
 
+  // Handle button with icon divider logic.
+  &:not(.a-btn--hide-icon):has(svg + span)::before,
+  &:not(.a-btn--hide-icon):has(span + svg)::before {
+    @include u-btn-divider;
+  }
+
+  // Handle different coloring in divider.
   &--secondary:has(svg)::before {
-    border-color: $btn-secondary-divider;
+    border-color: $btn-secondary-divider !important;
   }
 
   &--warning:has(svg)::before {
-    border-color: $btn-warning-divider;
+    border-color: $btn-warning-divider !important;
   }
 
   &--disabled:has(svg)::before,
   &[disabled]:has(svg)::before {
-    border-color: $btn-disabled-divider;
-  }
-
-  // Set either the text or icon as the last item in the button.
-  &:has(svg + span) {
-    span {
-      order: 3;
-    }
+    border-color: $btn-disabled-divider !important;
   }
 
-  &:has(span + svg) {
+  // Hide the icon if the a-btn--hide-icon modifier is set.
+  // Useful for showing and hiding a loading icon, for example.
+  &--hide-icon {
     svg {
-      order: 3;
+      display: none;
     }
   }
 }

package/src/utilities/utilities.scss

@@ -158,6 +158,21 @@
 // Link mixins
 //
 
+/*
+Link text and underline, unless otherwise specified.
+$c: Link color.
+$v: Link visited color.
+$h: Link hover color.
+$f: Link focus color.
+$a: Link active color.
+
+// Separate out a different underline color.
+$bc: Link underline color.
+$bv: Link underline visited color.
+$bh: Link underline hover color.
+$bf: Link underline focus color.
+$ba: Link underline active color.
+*/
 /* stylelint-disable selector-class-pattern */
 @mixin u-link-colors(
   $c: '',