Merge pull request #8586 from cfpb/ans_headings

Migrate to new heading mixins
cfpb · Sep 26, 2024 · 844706a · 844706a
2 parents d257d0c + 5d16d90
commit 844706a
Show file tree

Hide file tree

Showing 21 changed files with 50 additions and 68 deletions.
diff --git a/cfgov/unprocessed/apps/ask-cfpb/css/main.scss b/cfgov/unprocessed/apps/ask-cfpb/css/main.scss
@@ -30,7 +30,7 @@
     .term__name {
       display: block;
 
-      @include h2;
+      @include heading-2;
     }
 
     .term__definition {
@@ -193,7 +193,7 @@
     display: block;
     color: var(--gray-90);
 
-    @include h5;
+    @include heading-5;
   }
 
   // Tablet and above.
@@ -215,11 +215,11 @@
   }
 
   form[action='/ask-cfpb/search/'] h2 {
-    @include heading-4;
+    @include heading-4($is-responsive: false);
 
     // Desktop and above.
     @include respond-to-min($bp-med-min) {
-      @include heading-3;
+      @include heading-3($is-responsive: false);
     }
   }
 }

diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss b/cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss
@@ -95,7 +95,7 @@ x/y positioning on the SVG elements.
         transform: translateY(370px);
         left: calc(50% - 64px) !important;
 
-        @include h6;
+        @include heading-6;
       }
 
       .highcharts-axis-title {

diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.scss b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.scss
@@ -9,27 +9,23 @@
   }
 
   h2 {
-    @include h1;
-    // Override for h1 margin.
     margin-top: 60px;
+    @include heading-1($has-margin-top: false);
   }
 
   h3 {
-    @include h2;
-    // Override for h2 margin.
     margin-top: 45px;
+    @include heading-2($has-margin-top: false);
   }
 
   &:not(.m-info-unit__heading-text) > h4 {
-    @include h3;
-    // Override for h3 margin.
     margin-top: 30px;
+    @include heading-3($has-margin-top: false);
   }
 
   h5 {
-    @include h4;
-    // Override for h4 margin.
     margin-top: 30px;
+    @include heading-4($has-margin-top: false);
   }
 
   pre {

diff --git a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.scss b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.scss
@@ -81,9 +81,8 @@
   }
 
   &__text {
-    @include h4;
-    // Override for h4 margin.
     margin: 0;
+    @include heading-4($has-margin-bottom: false, $has-margin-top: false);
   }
 }
 

diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.scss b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.scss
@@ -73,7 +73,7 @@
       .financial-item {
         &__label div,
         &__value span {
-          @include h3;
+          @include heading-3;
         }
       }
 
@@ -84,7 +84,7 @@
 
         &__label.h4,
         &__link span {
-          @include h3;
+          @include heading-3;
         }
       }
 

diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss
@@ -41,9 +41,8 @@
   &--total {
     .financial-item__label > :not(p),
     .financial-item__value {
-      @include heading-4;
-      // Override for h4 margin.
       margin-bottom: 0;
+      @include heading-4($has-margin-bottom: false, $is-responsive: false);
     }
   }
 

diff --git a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.scss b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.scss
@@ -64,13 +64,13 @@ $bp-graph-cols-min: 740px;
 
 .step {
   &__heading {
-    @include heading-2;
+    @include heading-2($is-responsive: false);
   }
 
   &__intro {
     // Tablet and above.
     @include respond-to-min($bp-sm-min) {
-      @include heading-3;
+      @include heading-3($is-responsive: false);
     }
   }
 }
@@ -157,19 +157,18 @@ $bp-graph-cols-min: 740px;
   }
 
   &__prompt {
-    @include heading-2;
-    // Override for h2 heading.
     margin-bottom: math.div(30px, $size-ii) + em;
+    @include heading-2($has-margin-bottom: false, $is-responsive: false);
   }
 
   &__school,
   &__location {
-    @include heading-3;
-
+    margin-bottom: math.div(15px, $size-iii) + em;
     // Tablet and above.
     @include respond-to-min($bp-sm-min) {
       margin-bottom: math.div(5px, $size-iii) + em;
     }
+    @include heading-3($has-margin-bottom: false, $is-responsive: false);
   }
   &__school {
     margin-bottom: 0;
@@ -188,9 +187,8 @@ $bp-graph-cols-min: 740px;
 
   &__heading,
   &__label {
-    @include heading-5;
-    // Override for h5 margin.
     margin-bottom: 0;
+    @include heading-5($has-margin-bottom: false);
   }
 
   &__value {
@@ -258,7 +256,7 @@ $bp-graph-cols-min: 740px;
   }
 
   &__subheading {
-    @include heading-4;
+    @include heading-4($is-responsive: false);
   }
 
   &__about-wrapper {
@@ -431,7 +429,7 @@ $bp-graph-cols-min: 740px;
     padding-bottom: math.div(5px, $size-iv) + em;
     border-bottom: 1px solid var(--black);
 
-    @include heading-4;
+    @include heading-4($is-responsive: false);
 
     // Tablet and above.
     @include respond-to-min($bp-sm-min) {
@@ -511,7 +509,7 @@ $bp-graph-cols-min: 740px;
   @include u-grid-nested-col-group;
   margin-bottom: math.div(15px, $size-iv) + em;
 
-  @include heading-4;
+  @include heading-4($is-responsive: false);
 
   &__sign {
     display: inline-block;
@@ -657,7 +655,7 @@ $bp-graph-cols-min: 740px;
   }
 
   &__heading {
-    @include heading-3;
+    @include heading-3($is-responsive: false);
   }
 
   &__form-wrapper {
@@ -801,7 +799,7 @@ $bp-graph-cols-min: 740px;
   }
 
   &__heading-text {
-    @include heading-4;
+    @include heading-4($is-responsive: false);
   }
 
   &__remove-btn,
@@ -838,7 +836,7 @@ $bp-graph-cols-min: 740px;
 
 .debt-summary {
   .aid-form__summary-heading {
-    @include heading-3;
+    @include heading-3($is-responsive: false);
 
     // Tablet and above.
     @include respond-to-min($bp-sm-min) {
@@ -885,7 +883,7 @@ $bp-graph-cols-min: 740px;
   }
 
   &__heading {
-    @include heading-3;
+    @include heading-3($is-responsive: false);
   }
 
   &__wrapper {
@@ -950,7 +948,7 @@ $bp-graph-cols-min: 740px;
   }
 
   &__heading {
-    @include heading-4;
+    @include heading-4($is-responsive: false);
   }
 
   &__explanation {
@@ -1027,12 +1025,12 @@ $bp-graph-cols-min: 740px;
 
   &__projection-name {
     @include u-grid-column(7);
-    @include heading-4;
+    @include heading-4($is-responsive: false);
   }
 
   &__projection-value {
     @include u-grid-column(5);
-    @include heading-4;
+    @include heading-4($is-responsive: false);
     text-align: right;
   }
 
@@ -1665,7 +1663,7 @@ $bp-graph-cols-min: 740px;
   &__heading {
     padding-top: math.div(210px, $size-iv) + em;
 
-    @include heading-4;
+    @include heading-4($is-responsive: false);
 
     // Desktop and above.
     @include respond-to-min($bp-med-min) {
@@ -1674,7 +1672,7 @@ $bp-graph-cols-min: 740px;
   }
 
   &--take-action-header {
-    @include heading-3;
+    @include heading-3($is-responsive: false);
   }
 
   // Top borders on all but the first option on small screens and only the second row of options on larger screens
@@ -1799,7 +1797,7 @@ $bp-graph-cols-min: 740px;
   }
 
   &__list-intro {
-    @include heading-4;
+    @include heading-4($is-responsive: false);
   }
 
   &__controls {

diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/main.scss b/cfgov/unprocessed/apps/prepaid-agreements/css/main.scss
@@ -21,15 +21,9 @@
   }
 
   dt {
-    letter-spacing: 0;
-    font-weight: normal;
-    text-transform: none;
-    font-size: inherit;
-
-    @include heading-4;
-    // Override for h4 margin.
     margin-bottom: math.div(math.div($grid-gutter-width, 6), $base-font-size-px) +
       em;
+    @include heading-4($has-margin-bottom: false, $is-responsive: false);
   }
 
   dd + dt {

diff --git a/cfgov/unprocessed/apps/tccp/css/main.scss b/cfgov/unprocessed/apps/tccp/css/main.scss
@@ -107,15 +107,15 @@
       (math.div(45px, $base-font-size-px) + rem);
 
     p:first-child {
-      @include h3;
+      @include heading-3;
     }
 
     // Make everything bigger on desktop
     @include respond-to-min($bp-sm-min) {
       padding-right: math.div(60px, $base-font-size-px) + rem;
 
       p:last-child {
-        @include heading-3;
+        @include heading-3($is-responsive: false);
       }
     }
   }
@@ -244,7 +244,7 @@
 
 .o-apr-rating-group {
   &--heading {
-    @include h3;
+    @include heading-3;
   }
 
   .m-apr-rating {

diff --git a/cfgov/unprocessed/css/enhancements/layout.scss b/cfgov/unprocessed/css/enhancements/layout.scss
@@ -90,6 +90,6 @@
 // $TODO: Expose heading class modifiers in wagtail
 .content__supersize-headings {
   .o-full-width-text-group h2 {
-    @include h1;
+    @include heading-1;
   }
 }
diff --git a/cfgov/unprocessed/css/enhancements/tables.scss b/cfgov/unprocessed/css/enhancements/tables.scss
@@ -15,7 +15,7 @@
     color: $table-head-text;
     background: $table-head-bg;
 
-    @include h5;
+    @include heading-5;
 
     &:first-child {
       border-top: 1px solid $table-head-bg;

diff --git a/cfgov/unprocessed/css/enhancements/typography.scss b/cfgov/unprocessed/css/enhancements/typography.scss
@@ -3,9 +3,8 @@
 dt {
   display: inline-block;
 
-  @include h5;
-  // Override h5 margin.
   margin-bottom: 0.5em;
+  @include heading-5($has-margin-bottom: false);
 
   &:last-of-type {
     margin-bottom: 0;

diff --git a/cfgov/unprocessed/css/molecules/social-media.scss b/cfgov/unprocessed/css/molecules/social-media.scss
@@ -25,9 +25,8 @@
   // Only for elements in "share" (m-social-media--share) section.
   &--share {
     .m-social-media__heading {
-      @include heading-5;
-      // Override for h5 margin.
       margin: auto 0;
+      @include heading-5($has-margin-bottom: false, $has-margin-top: false);
     }
 
     .m-social-media__print {

diff --git a/cfgov/unprocessed/css/on-demand/event.scss b/cfgov/unprocessed/css/on-demand/event.scss
@@ -124,7 +124,7 @@
   }
 
   .datetime {
-    @include h5;
+    @include heading-5;
   }
 
   .event-meta__address {
@@ -162,5 +162,5 @@
   padding: math.div(9px, $base-font-size-px) + rem;
   text-align: center;
 
-  @include h6;
+  @include heading-6;
 }
diff --git a/cfgov/unprocessed/css/organisms/item-introduction.scss b/cfgov/unprocessed/css/organisms/item-introduction.scss
@@ -19,7 +19,7 @@
     margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + rem;
 
     .byline {
-      @include heading-4;
+      @include heading-4($is-responsive: false);
     }
   }
 }
diff --git a/cfgov/unprocessed/css/organisms/post-preview.scss b/cfgov/unprocessed/css/organisms/post-preview.scss
@@ -75,9 +75,8 @@
   }
 
   &__subtitle {
-    @include heading-6;
-
     clear: both;
+    @include heading-6;
   }
 
   &__byline-group,