@cfpb/cfpb-design-system 3.1.9 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/base/index.css +1 -1
  2. package/dist/base/index.css.map +2 -2
  3. package/dist/base/index.js +1 -1
  4. package/dist/base/index.js.map +1 -1
  5. package/dist/components/cfpb-expandables/index.css +1 -1
  6. package/dist/components/cfpb-expandables/index.css.map +2 -2
  7. package/dist/components/cfpb-expandables/index.js +1 -1
  8. package/dist/components/cfpb-expandables/index.js.map +1 -1
  9. package/dist/components/cfpb-forms/index.css +1 -1
  10. package/dist/components/cfpb-forms/index.css.map +2 -2
  11. package/dist/components/cfpb-forms/index.js +1 -1
  12. package/dist/components/cfpb-forms/index.js.map +1 -1
  13. package/dist/components/cfpb-layout/index.css +1 -1
  14. package/dist/components/cfpb-layout/index.css.map +2 -2
  15. package/dist/components/cfpb-layout/index.js +1 -1
  16. package/dist/components/cfpb-layout/index.js.map +1 -1
  17. package/dist/components/cfpb-notifications/index.css +1 -1
  18. package/dist/components/cfpb-notifications/index.css.map +2 -2
  19. package/dist/components/cfpb-notifications/index.js.map +1 -1
  20. package/dist/components/cfpb-tables/index.css +1 -1
  21. package/dist/components/cfpb-tables/index.css.map +2 -2
  22. package/dist/components/cfpb-tables/index.js +1 -1
  23. package/dist/components/cfpb-tables/index.js.map +1 -1
  24. package/dist/components/cfpb-typography/index.css +1 -1
  25. package/dist/components/cfpb-typography/index.css.map +2 -2
  26. package/dist/components/cfpb-typography/index.js +1 -1
  27. package/dist/components/cfpb-typography/index.js.map +1 -1
  28. package/dist/index.css +1 -1
  29. package/dist/index.css.map +2 -2
  30. package/dist/index.js +1 -1
  31. package/dist/index.js.map +3 -3
  32. package/dist/utilities/index.css +1 -1
  33. package/dist/utilities/index.css.map +2 -2
  34. package/dist/utilities/index.js +1 -1
  35. package/dist/utilities/index.js.map +3 -3
  36. package/package.json +2 -2
  37. package/src/abstracts/heading-mixins.scss +245 -190
  38. package/src/base/base.scss +12 -15
  39. package/src/components/cfpb-forms/label.scss +3 -9
  40. package/src/components/cfpb-layout/card-group.scss +1 -2
  41. package/src/components/cfpb-layout/card.scss +2 -3
  42. package/src/components/cfpb-layout/hero.scss +4 -6
  43. package/src/components/cfpb-tables/table.scss +6 -2
  44. package/src/components/cfpb-typography/date.scss +2 -2
  45. package/src/components/cfpb-typography/meta-header.scss +3 -9
  46. package/src/components/cfpb-typography/pull-quote.scss +7 -9
  47. package/src/components/cfpb-typography/slug-header.scss +2 -3
  48. package/src/utilities/utilities.scss +2 -2
@@ -1,7 +1,6 @@
1
1
  @use 'sass:math';
2
2
  @use './vars' as *;
3
3
  @use '@cfpb/cfpb-design-system/src/abstracts' as *;
4
- @use '@cfpb/cfpb-design-system/src/abstracts' as *;
5
4
 
6
5
  /* ==========================================================================
7
6
  Design System
@@ -77,12 +76,17 @@
77
76
  }
78
77
 
79
78
  td[data-label]::before {
80
- @include heading-5;
81
79
  display: block;
82
80
  margin-top: 0;
83
81
  margin-bottom: math.div(5px, $base-font-size-px) + em;
84
82
  content: attr(data-label);
85
83
  line-height: 1.83333333;
84
+
85
+ // h5 size.
86
+ font-size: math.div($size-v, $base-font-size-px) + em;
87
+ font-weight: 600;
88
+ letter-spacing: 1px;
89
+ text-transform: uppercase;
86
90
  }
87
91
 
88
92
  td:last-child,
@@ -2,8 +2,8 @@
2
2
  @use '@cfpb/cfpb-design-system/src/abstracts' as *;
3
3
 
4
4
  .a-date {
5
- @include heading-5;
6
-
7
5
  color: $date;
8
6
  white-space: nowrap;
7
+
8
+ @include heading-5;
9
9
  }
@@ -1,6 +1,5 @@
1
1
  @use 'sass:math';
2
2
  @use '@cfpb/cfpb-design-system/src/abstracts' as *;
3
- @use '@cfpb/cfpb-design-system/src/abstracts' as *;
4
3
 
5
4
  $meta-header-item-gap: 21px;
6
5
 
@@ -27,16 +26,11 @@ $meta-header-item-gap: 21px;
27
26
  display: grid;
28
27
  grid-template-columns: 0 auto 1fr;
29
28
  row-gap: math.div(5px, $base-font-size-px) + rem;
29
+ text-wrap: balance;
30
30
 
31
- @include h4;
31
+ margin-bottom: 0;
32
32
 
33
- // TODO: Move this above the h4 mixin. Mixin needs to allow margin override.
34
- /* stylelint-disable no-duplicate-selectors */
35
- & {
36
- text-wrap: balance;
37
- margin-bottom: 0;
38
- }
39
- /* stylelint-enable */
33
+ @include heading-4($has-margin-bottom: false);
40
34
 
41
35
  // Mobile only.
42
36
  @include respond-to-max($bp-xs-max) {
@@ -1,24 +1,22 @@
1
1
  @use './vars' as *;
2
2
  @use '@cfpb/cfpb-design-system/src/abstracts' as *;
3
- @use '@cfpb/cfpb-design-system/src/abstracts' as *;
4
3
 
5
4
  .m-pull-quote {
6
5
  &__body {
7
- @include heading-3;
8
-
9
6
  color: $pull-quote-body;
10
7
 
11
- // Mobile only.
12
- @include respond-to-max($bp-xs-max) {
13
- @include heading-4;
14
- }
8
+ @include heading-3(
9
+ $has-margin-bottom: false,
10
+ $has-margin-top: false,
11
+ $is-responsive: true
12
+ );
15
13
  }
16
14
 
17
15
  &__citation {
18
- @include heading-5;
19
-
20
16
  color: $pull-quote-citation;
21
17
 
18
+ @include heading-5;
19
+
22
20
  &::before {
23
21
  // An em dash before the cited author name.
24
22
  content: '\2014 ';
@@ -1,17 +1,16 @@
1
1
  @use 'sass:math';
2
2
  @use './vars.scss' as *;
3
3
  @use '@cfpb/cfpb-design-system/src/abstracts' as *;
4
- @use '@cfpb/cfpb-design-system/src/abstracts' as *;
5
4
 
6
5
  .m-slug-header {
7
6
  border-top: 1px solid $slug-header-border-thin;
8
7
 
9
8
  &__heading {
10
- @include heading-5;
11
-
12
9
  display: inline-block;
13
10
  padding-top: math.div(4px, $size-v) + em;
14
11
  border-top: 5px solid $slug-header-border-thick;
15
12
  margin-top: -3px;
13
+
14
+ @include heading-5($has-margin-top: false);
16
15
  }
17
16
  }
@@ -406,11 +406,11 @@
406
406
  }
407
407
 
408
408
  .u-w66pct {
409
- width: math.div(2, 3) * 1%;
409
+ width: math.div(2, 3) * 100%;
410
410
  }
411
411
 
412
412
  .u-w33pct {
413
- width: math.div(1, 3) * 1%;
413
+ width: math.div(1, 3) * 100%;
414
414
  }
415
415
 
416
416
  //