@cfpb/cfpb-design-system 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "CFPB's UI framework",
   "main": "src/index.js",
   "author": {
@@ -19,6 +19,6 @@
   "bugs": {
     "url": "https://github.com/cfpb/design-system/issues"
   },
-  "gitHead": "95e07185441126cf0376f28f49180a77168ee413",
+  "gitHead": "def4f440c6e4df31e9c9001a3630e14011c2c840",
   "type": "module"
 }

package/src/abstracts/heading-mixins.scss

@@ -8,78 +8,54 @@
    Base styles
    ========================================================================== */
 
-/* stylelint-disable selector-class-pattern */
-@mixin heading-1($fs: $size-i) {
-  /* stylelint-enable */
-  $font-size: $fs;
-
-  margin-bottom: math.div(15px, $font-size) + em;
-  font-size: math.div($font-size, $base-font-size-px) + em;
+@mixin heading-1() {
+  margin-bottom: math.div(15px, $size-i) + em;
+  font-size: math.div($size-i, $base-font-size-px) + em;
   font-weight: 600;
   letter-spacing: inherit;
   line-height: 1.25;
   text-transform: inherit;
 }
 
-/* stylelint-disable selector-class-pattern */
-@mixin heading-2($fs: $size-ii) {
-  /* stylelint-enable */
-  $font-size: $fs;
-
-  margin-bottom: math.div(15px, $font-size) + em;
-  font-size: math.div($font-size, $base-font-size-px) + em;
+@mixin heading-2() {
+  margin-bottom: math.div(15px, $size-ii) + em;
+  font-size: math.div($size-ii, $base-font-size-px) + em;
   font-weight: 600;
   letter-spacing: inherit;
   line-height: 1.25;
   text-transform: inherit;
 }
 
-/* stylelint-disable selector-class-pattern */
-@mixin heading-3($fs: $size-iii) {
-  /* stylelint-enable */
-  $font-size: $fs;
-
-  margin-bottom: math.div(15px, $font-size) + em;
-  font-size: math.div($font-size, $base-font-size-px) + em;
+@mixin heading-3() {
+  margin-bottom: math.div(15px, $size-iii) + em;
+  font-size: math.div($size-iii, $base-font-size-px) + em;
   font-weight: normal;
   letter-spacing: inherit;
   line-height: 1.25;
   text-transform: inherit;
 }
 
-/* stylelint-disable selector-class-pattern */
-@mixin heading-4($fs: $size-iv) {
-  /* stylelint-enable */
-  $font-size: $fs;
-
-  margin-bottom: math.div(15px, $font-size) + em;
-  font-size: math.div($font-size, $base-font-size-px) + em;
+@mixin heading-4() {
+  margin-bottom: math.div(15px, $size-iv) + em;
+  font-size: math.div($size-iv, $base-font-size-px) + em;
   font-weight: 500;
   letter-spacing: inherit;
   line-height: 1.25;
   text-transform: inherit;
 }
 
-/* stylelint-disable selector-class-pattern */
-@mixin heading-5($fs: $size-v) {
-  /* stylelint-enable */
-  $font-size: $fs;
-
-  margin-bottom: math.div(15px, $font-size) + em;
-  font-size: math.div($font-size, $base-font-size-px) + em;
+@mixin heading-5() {
+  margin-bottom: math.div(15px, $size-v) + em;
+  font-size: math.div($size-v, $base-font-size-px) + em;
   font-weight: 600;
   letter-spacing: 1px;
   line-height: 1.25;
   text-transform: uppercase;
 }
 
-/* stylelint-disable selector-class-pattern */
-@mixin heading-6($fs: $size-vi) {
-  /* stylelint-enable */
-  $font-size: $fs;
-
-  margin-bottom: math.div(15px, $font-size) + em;
-  font-size: math.div($font-size, $base-font-size-px) + em;
+@mixin heading-6() {
+  margin-bottom: math.div(15px, $size-vi) + em;
+  font-size: math.div($size-vi, $base-font-size-px) + em;
   font-weight: 600;
   letter-spacing: 1px;
   line-height: 1.25;
@@ -89,8 +65,6 @@
 @mixin h1() {
   @include heading-1;
 
-  $font-size: $size-i;
-
   p + &,
   ul + &,
   ol + &,
@@ -99,15 +73,13 @@
   img + &,
   table + &,
   blockquote + & {
-    margin-top: math.div(60px, $font-size) + em;
+    margin-top: math.div(60px, $size-i) + em;
   }
 
   // Mobile only.
   @include respond-to-max($bp-xs-max) {
     @include heading-2;
 
-    $font-size: $size-ii;
-
     p + &,
     ul + &,
     ol + &,
@@ -116,7 +88,7 @@
     img + &,
     table + &,
     blockquote + & {
-      margin-top: math.div(45px, $font-size) + em;
+      margin-top: math.div(45px, $size-ii) + em;
     }
     h2 + &,
     .h2 + &,
@@ -128,7 +100,7 @@
     .h5 + &,
     h6 + &,
     .h6 + & {
-      margin-top: math.div(30px, $font-size) + em;
+      margin-top: math.div(30px, $size-ii) + em;
     }
   }
 }
@@ -136,8 +108,6 @@
 @mixin h2() {
   @include heading-2;
 
-  $font-size: $size-ii;
-
   p + &,
   ul + &,
   ol + &,
@@ -146,7 +116,7 @@
   img + &,
   table + &,
   blockquote + & {
-    margin-top: math.div(45px, $font-size) + em;
+    margin-top: math.div(45px, $size-ii) + em;
   }
 
   h1 + &,
@@ -159,15 +129,13 @@
   .h5 + &,
   h6 + &,
   .h6 + & {
-    margin-top: math.div(30px, $font-size) + em;
+    margin-top: math.div(30px, $size-ii) + em;
   }
 
   // Mobile only.
   @include respond-to-max($bp-xs-max) {
     @include heading-3;
 
-    $font-size: $size-iii;
-
     p + &,
     ul + &,
     ol + &,
@@ -176,7 +144,7 @@
     img + &,
     table + &,
     blockquote + & {
-      margin-top: math.div(30px, $font-size) + em;
+      margin-top: math.div(30px, $size-iii) + em;
     }
   }
 }
@@ -184,8 +152,6 @@
 @mixin h3() {
   @include heading-3;
 
-  $font-size: $size-iii;
-
   p + &,
   ul + &,
   ol + &,
@@ -204,7 +170,7 @@
   .h5 + &,
   h6 + &,
   .h6 + & {
-    margin-top: math.div(30px, $font-size) + em;
+    margin-top: math.div(30px, $size-iii) + em;
   }
 
   // Mobile only.
@@ -216,8 +182,6 @@
 @mixin h4() {
   @include heading-4;
 
-  $font-size: $size-iv;
-
   p + &,
   ul + &,
   ol + &,
@@ -236,7 +200,7 @@
   .h5 + &,
   h6 + &,
   .h6 + & {
-    margin-top: math.div(30px, $font-size) + em;
+    margin-top: math.div(30px, $size-iv) + em;
   }
 
   // Mobile only.
@@ -251,8 +215,6 @@
 @mixin h5() {
   @include heading-5;
 
-  $font-size: $size-v;
-
   p + &,
   ul + &,
   ol + &,
@@ -271,15 +233,13 @@
   .h4 + &,
   h6 + &,
   .h6 + & {
-    margin-top: math.div(30px, $font-size) + em;
+    margin-top: math.div(30px, $size-v) + em;
   }
 }
 
 @mixin h6() {
   @include heading-6;
 
-  $font-size: $size-vi;
-
   p + &,
   ul + &,
   ol + &,
@@ -298,7 +258,7 @@
   .h4 + &,
   h5 + &,
   .h5 + & {
-    margin-top: math.div(30px, $font-size) + em;
+    margin-top: math.div(30px, $size-vi) + em;
   }
 }
 
@@ -310,17 +270,15 @@
 
   // Mobile only.
   @include respond-to-max($bp-xs-max) {
-    // Use the same regular weight but reduce the sizes to h4 size
+    // Use the same regular weight but reduce the sizes to h4 size.
     font-size: math.div(18px, $base-font-size-px) + em;
   }
 }
 
+// For when you want a heading that's bigger than a normal H1.
 @mixin u-superheading() {
-  // For when you want a heading that's bigger than a normal H1
-  $font-size: $size-xl;
-
-  margin-bottom: math.div(20px, $font-size) + em;
-  font-size: math.div($font-size, $base-font-size-px) + em;
+  margin-bottom: math.div(20px, $size-xl) + em;
+  font-size: math.div($size-xl, $base-font-size-px) + em;
   font-weight: normal;
   line-height: 1.25;
 }

package/src/components/cfpb-expandables/expandable-group.js

@@ -20,7 +20,7 @@ const BASE_CLASS = 'o-expandable-group';
 function ExpandableGroup(element) {
   // Internal vars.
   const _dom = checkDom(element, BASE_CLASS);
-  const _isAccordion = _dom.classList.contains(`${BASE_CLASS}__accordion`);
+  const _isAccordion = _dom.classList.contains(`${BASE_CLASS}--accordion`);
   let _expandables;
   let _lastExpanded;
 

package/src/components/cfpb-expandables/expandable.spec.js

@@ -169,7 +169,7 @@ describe('accordion Expandables', () => {
   beforeEach(() => {
     document.body.innerHTML = HTML_SNIPPET;
     expandableGroup = document.querySelector('.o-expandable-group');
-    expandableGroup.classList.add('o-expandable-group__accordion');
+    expandableGroup.classList.add('o-expandable-group--accordion');
     expandableDom1 = document.querySelector('#test-subject-one');
     expandableDom2 = document.querySelector('#test-subject-two');
     contentDom1 = expandableDom1.querySelector('.o-expandable__content');

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

@@ -66,6 +66,7 @@ a.a-tag-filter {
   line-height: 1rem;
 }
 
+// Tablet and above.
 @include respond-to-min($bp-sm-min) {
   .a-tag-topic__text {
     // Colors for :link, :visited, :hover, :focus, :active
@@ -84,9 +85,7 @@ a.a-tag-filter {
   .a-tag-topic:focus,
   .a-tag-topic:active {
     border-bottom: none;
-
-    // Normally we offset the focus 2px, but we need 3px here for the underline.
-    outline-offset: 3px;
+    outline-offset: 1px;
 
     .a-tag-topic__text {
       // Move the underline down 1px.
@@ -98,6 +97,14 @@ a.a-tag-filter {
   .a-tag-topic:hover .a-tag-topic__text {
     border-bottom: 1px solid var(--gold-80);
   }
+
+  .a-tag-topic:focus {
+    outline-color: var(--gray);
+
+    .a-tag-topic__text {
+      border-bottom-style: solid !important;
+    }
+  }
 }
 
 // Tag group sets the spacing between tags.

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

@@ -17,4 +17,5 @@
 .a-link--jump {
   @include u-jump-link;
 }
+
 @include u-jump-link-group;

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

@@ -28,6 +28,7 @@
 
   // 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;
@@ -41,6 +42,24 @@
     // 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;
+      }
+    }
+
     // Only right-hand align arrow icons.
     .cf-icon-svg--right {
       margin-left: auto;
@@ -66,7 +85,8 @@
         border-top: none;
       }
 
-      .#{$jump-link-class}:hover::before {
+      .#{$jump-link-class}:hover::before,
+      .#{$jump-link-class}:focus::before {
         position: absolute;
         top: -1px;
         content: '';

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

@@ -9,10 +9,8 @@
   &__heading {
     @include heading-5;
 
-    $font-size: $size-v;
-
     display: inline-block;
-    padding-top: math.div(4px, $font-size) + em;
+    padding-top: math.div(4px, $size-v) + em;
     border-top: 5px solid $slug-header-border-thick;
     margin-top: -3px;
   }

package/src/index.scss

@@ -1,17 +1,20 @@
 @forward 'abstracts';
 @forward 'base';
+
 // Buttons.
 @forward 'components/cfpb-buttons/vars';
 @forward 'components/cfpb-buttons/button';
 @forward 'components/cfpb-buttons/button-group';
 @forward 'components/cfpb-buttons/button-link';
 @forward 'components/cfpb-buttons/button-with-icon';
+
 // Expandables.
 @forward 'components/cfpb-expandables/vars';
 @forward 'components/cfpb-expandables/expandable';
 @forward 'components/cfpb-expandables/expandable-group';
 @forward 'components/cfpb-expandables/summary';
 @forward 'components/cfpb-expandables/summary-minimal';
+
 // Forms.
 @forward 'components/cfpb-forms/form';
 @forward 'components/cfpb-forms/form-alert';
@@ -22,8 +25,10 @@
 @forward 'components/cfpb-forms/search-input';
 @forward 'components/cfpb-forms/select';
 @forward 'components/cfpb-forms/text-input';
+
 // Icons.
 @forward 'components/cfpb-icons/icon';
+
 // Layout.
 @forward 'components/cfpb-layout/card-group';
 @forward 'components/cfpb-layout/card';
@@ -33,16 +38,20 @@
 @forward 'components/cfpb-layout/layout';
 @forward 'components/cfpb-layout/text-introduction';
 @forward 'components/cfpb-layout/well';
+
 // Notifications.
 @forward 'components/cfpb-notifications/vars';
 @forward 'components/cfpb-notifications/banner';
 @forward 'components/cfpb-notifications/notification';
+
 // Pagination.
 @forward 'components/cfpb-pagination/vars';
 @forward 'components/cfpb-pagination/pagination';
+
 // Tables.
 @forward 'components/cfpb-tables/vars';
 @forward 'components/cfpb-tables/table';
+
 // Typography.
 @forward 'components/cfpb-typography/vars';
 @forward 'components/cfpb-typography/date';
@@ -52,5 +61,6 @@
 @forward 'components/cfpb-typography/pull-quote';
 @forward 'components/cfpb-typography/slug-header';
 @forward 'components/cfpb-typography/tagline';
+
 // Utilities.
 @forward 'utilities';