@cfpb/cfpb-design-system 3.1.5 → 3.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.1.5",
+  "version": "3.1.7",
   "description": "CFPB's UI framework",
   "main": "src/index.js",
   "author": {
@@ -19,6 +19,6 @@
   "bugs": {
     "url": "https://github.com/cfpb/design-system/issues"
   },
-  "gitHead": "37c1b91a345ebaf7098509a05ec1e972cbcd91c3",
+  "gitHead": "415453147d44ab32977359f985c50a66799818c1",
   "type": "module"
 }

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

@@ -53,12 +53,12 @@ a.a-tag-filter {
 .a-tag-topic {
   display: flex;
   gap: math.div(5px, $btn-font-size) + rem;
-
-  @include u-jump-link(
-    $is-gold: true,
-    $jump-link-text-class: 'a-tag-topic__text'
-  );
 }
+@include u-jump-link(
+  $jump-link-class: 'a-tag-topic',
+  $jump-link-text-class: 'a-tag-topic__text',
+  $is-gold: true
+);
 @include u-jump-link-group($jump-link-class: 'a-tag-topic');
 
 .a-tag-topic__bullet {
@@ -68,7 +68,7 @@ a.a-tag-filter {
 
 // Tablet and above.
 @include respond-to-min($bp-sm-min) {
-  .a-tag-topic__text {
+  a.a-tag-topic__text {
     // Colors for :link, :visited, :hover, :focus, :active
     @include u-link-colors(
       var(--gray),
@@ -79,11 +79,11 @@ a.a-tag-filter {
     );
   }
 
-  .a-tag-topic,
-  .a-tag-topic:visited,
-  .a-tag-topic:hover,
-  .a-tag-topic:focus,
-  .a-tag-topic:active {
+  a.a-tag-topic,
+  a.a-tag-topic:visited,
+  a.a-tag-topic:hover,
+  a.a-tag-topic:focus,
+  a.a-tag-topic:active {
     border-bottom: none;
     outline-offset: 1px;
 
@@ -94,11 +94,11 @@ a.a-tag-filter {
     }
   }
 
-  .a-tag-topic:hover .a-tag-topic__text {
+  a.a-tag-topic:hover .a-tag-topic__text {
     border-bottom: 1px solid var(--gold-80);
   }
 
-  .a-tag-topic:focus {
+  a.a-tag-topic:focus {
     outline-color: var(--gray);
 
     .a-tag-topic__text {
@@ -113,17 +113,14 @@ a.a-tag-filter {
   padding-left: 0;
   list-style-type: none;
 
-  // Mobile only.
-  @include respond-to-max($bp-xs-max) {
-    li {
-      margin-bottom: 0;
-    }
+  li {
+    margin-bottom: 0;
   }
 
   // Tablet and above.
   @include respond-to-min($bp-sm-min) {
     display: flex;
-    column-gap: math.div(15px, $btn-font-size) + em;
+    gap: math.div(15px, $btn-font-size) + em;
     flex-wrap: wrap;
 
     &--stacked {

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

@@ -13,9 +13,5 @@
 //
 // Jump link
 //
-
-.a-link--jump {
-  @include u-jump-link;
-}
-
-@include u-jump-link-group;
+@include u-jump-link('a-link--jump', 'a-link__text');
+@include u-jump-link-group('a-link--jump');

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

@@ -6,71 +6,92 @@
 // Jump link
 //
 
-@mixin u-jump-link($is-gold: false, $jump-link-text-class: 'a-link__text') {
-  @if $is-gold {
-    font-size: math.div(12px, $base-font-size-px) + rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--gold-80);
-    border-color: var(--gold-80);
-    letter-spacing: 1px;
-
-    @include u-link-colors(var(--gold-80));
-
-    .#{$jump-link-text-class} {
-      color: var(--gray);
-      border-bottom-color: var(--gold-80);
-      word-break: break-word;
+@mixin u-jump-link(
+  $jump-link-class: 'a-link--jump',
+  $jump-link-text-class: 'a-link__text',
+  $is-gold: false
+) {
+  .#{$jump-link-class} {
+    @if $is-gold {
+      font-size: math.div(12px, $base-font-size-px) + rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: var(--gold-80);
+      letter-spacing: 1px;
+
+      .#{$jump-link-class}__text {
+        color: var(--gray);
+        word-break: break-word;
+      }
+    } @else {
+      font-weight: 500;
     }
-  } @else {
-    font-weight: 500;
-  }
 
-  // Mobile only.
-  @include respond-to-max($bp-xs-max) {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: math.div(5px, $base-font-size-px) + rem;
-
-    box-sizing: border-box;
-    padding-top: math.div(10px, $base-font-size-px) + em;
-    padding-bottom: math.div(10px, $base-font-size-px) + em;
-    border-top-width: 1px;
-    border-bottom-width: 1px;
-
-    // 100% width is needed when block or jump link are applied to a <button>.
-    width: 100%;
-
-    // We create a faux focus rectangle in the ::after pseudoelement to better
-    // control the positioning of the focus rectangle, which would overwise
-    // overlap the top border of the jumplink when it appears in a group.
-    &:focus {
-      outline: none;
-
-      &::after {
-        position: absolute;
-        content: '';
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        outline: 1px dotted var(--gray);
-        outline-offset: 2px;
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: math.div(5px, $base-font-size-px) + rem;
+
+      box-sizing: border-box;
+      padding-top: math.div(10px, $base-font-size-px) + em;
+      padding-bottom: math.div(10px, $base-font-size-px) + em;
+
+      // 100% width is needed when block or jump link are applied to a <button>.
+      width: 100%;
+
+      // Only right-hand align arrow icons.
+      .cf-icon-svg--right {
+        margin-left: auto;
+      }
+
+      .#{$jump-link-text-class} {
+        border-bottom-width: 0;
+
+        // Arbitrary high value for flex-shrink to prevent squeezing of the icon
+        // when the link text is very long.
+        flex-shrink: 10;
       }
     }
+  }
 
-    // Only right-hand align arrow icons.
-    .cf-icon-svg--right {
-      margin-left: auto;
+  // We need to separate out the jump link
+  a.#{$jump-link-class} {
+    @if $is-gold {
+      border-color: var(--gold-80);
+
+      @include u-link-colors(var(--gold-80));
+
+      .#{$jump-link-class}__text {
+        border-bottom-color: var(--gold-80);
+      }
+    } @else {
+      font-weight: 500;
     }
 
-    .a-link__text {
-      border-bottom-width: 0;
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      border-top-width: 1px;
+      border-bottom-width: 1px;
 
-      // Arbitrary high value for flex-shrink to prevent squeezing of the icon
-      // when the link text is very long.
-      flex-shrink: 10;
+      // We create a faux focus rectangle in the ::after pseudoelement to better
+      // control the positioning of the focus rectangle, which would overwise
+      // overlap the top border of the jumplink when it appears in a group.
+      &:focus {
+        outline: none;
+
+        &::after {
+          position: absolute;
+          content: '';
+          display: block;
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          outline: 1px dotted var(--gray);
+          outline-offset: 2px;
+        }
+      }
     }
   }
 }
@@ -85,8 +106,8 @@
         border-top: none;
       }
 
-      .#{$jump-link-class}:hover::before,
-      .#{$jump-link-class}:focus::before {
+      a.#{$jump-link-class}:hover::before,
+      a.#{$jump-link-class}:focus::before {
         position: absolute;
         top: -1px;
         content: '';