Upgrade to LGDS 9.0 to reset prose styling (#1207)

* Upgrade to LGDS 9.0 to reset prose styling * Apply use-prose targeted to immediate content parent * Remove alert element outside maintenance window * Style page content section as prose * Remove text measure override Restore max line width within prose * Update to LGDS 9.0 final release * Update import for navigation component * Refine margins for prose icon lists * Add comment listing include parameters See: #1207 (comment) Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com> * Restore link styling to "Back to top" link * Restore link styling for help articles * Use common "Back to top" link styling for partners --------- Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>
GSA-TTS · May 6, 2024 · 1b7824c · 1b7824c
1 parent d3e8a2a
commit 1b7824c
Show file tree

Hide file tree

Showing 31 changed files with 590 additions and 331 deletions.
diff --git a/_includes/components/2-col.html b/_includes/components/2-col.html
@@ -1,5 +1,14 @@
-<div class="container container--mod {{ include.class }} page-content__prose">
-  <div class="one-account page-content__prose tablet:grid-row">
+{% comment %}
+includes
+- class
+- col1
+- bannertext
+- bannercol1
+- bannercol2
+- col2
+{% endcomment %}
+<div class="container container--mod {{ include.class }}">
+  <div class="one-account tablet:grid-row">
     <div class="tablet:grid-col-6 pad-left-element">
       <img
         alt=""
@@ -8,25 +17,25 @@
         src="{{ site.baseurl }}/assets/img/what-is-one-account@2x.png"
       />
     </div>
-    <div class="tablet:grid-col-6">
+    <div class="tablet:grid-col-6 usa-prose">
       {{ include.col1 | markdownify }}
     </div>
   </div>
-  <div class="how-it-works page-content__prose">
-    <div class="banner-text">
+  <div class="how-it-works">
+    <div class="banner-text usa-prose">
       {{ include.bannertext | markdownify }}
     </div>
     <div class="text-container grid-row">
-      <div class="text-column tablet:grid-col-6 pad-left-element">
-          <img
-            alt=""
-            aria-hidden="true"
-            class="how-it-works-image"
-            src="{{ site.baseurl }}/assets/img/how-it-works1@2x.png"
-          />
+      <div class="text-column tablet:grid-col-6 pad-left-element usa-prose">
+        <img
+          alt=""
+          aria-hidden="true"
+          class="how-it-works-image"
+          src="{{ site.baseurl }}/assets/img/how-it-works1@2x.png"
+        />
         {{ include.bannercol1 | markdownify }}
       </div>
-      <div class="text-column tablet:grid-col-6">
+      <div class="text-column tablet:grid-col-6 usa-prose">
         <img
           alt=""
           aria-hidden="true"
@@ -38,7 +47,7 @@
     </div>
   </div>
   <div class="secure-account-container grid-row">
-    <div class="page-content__prose tablet:grid-col-6">
+    <div class="usa-prose tablet:grid-col-6">
       {{ include.col2 | markdownify }}
     </div>
     <div class="image-container tablet:grid-col-6">
@@ -50,5 +59,4 @@
       />
     </div>
   </div>
-
 </div>
diff --git a/_layouts/contact_us.html b/_layouts/contact_us.html
@@ -41,7 +41,7 @@
   maintenance-start-time="{{ site.contact_maintenance_start_time }}"
   {% if site.contact_unplanned_outage %} hidden {% endif %}
   maintenance-end-time="{{ site.contact_maintenance_end_time }}"
-  class="page-content__section"
+  class="page-content__section usa-prose"
 >
   {{ page.intro_content | markdownify }}
 
@@ -54,8 +54,8 @@
   </div>
 </contact-us-form>
 
-<div class="page-content__section">{{ page.partner_content | markdownify }}</div>
-<div class="page-content__section">{{ page.report_issue_content | markdownify }}</div>
+<div class="page-content__section usa-prose">{{ page.partner_content | markdownify }}</div>
+<div class="page-content__section usa-prose">{{ page.report_issue_content | markdownify }}</div>
 
 {% if site.contact_maintenance_start_time and site.contact_maintenance_end_time %}
   <script src="{{ '/assets/js/contact_us_form_element.js' | relative_url }}"></script>

diff --git a/_layouts/help.html b/_layouts/help.html
@@ -9,7 +9,7 @@
 
 <div class="container container--mod">
   <div class="page-content grid-row">
-    <div class="page-content__prose grid-col-12 desktop:grid-col-8 help-article">
+    <div class="usa-prose grid-col-12 desktop:grid-col-8 help-article">
       <h1>{{page.title}}</h1>
       {{ page.content | markdownify }}
       <div
@@ -18,7 +18,7 @@ <h1>{{page.title}}</h1>
         data-yes="{{ site.data[page.lang].settings.feedback_form.yes }}"
         data-no="{{ site.data[page.lang].settings.feedback_form.no }}"
       ></div>
-      <a href="#main-content" class="anchor-to-top">{{ site.data[page.lang].settings.nav.anchor_to_top }}</a>
+      <a href="#main-content" class="usa-link anchor-to-top">{{ site.data[page.lang].settings.nav.anchor_to_top }}</a>
     </div>
     <div class="display-none desktop:display-block grid-offset-1 grid-col-3">
       {% include help/nav_sidenav.html %}

diff --git a/_layouts/partners/faq.html b/_layouts/partners/faq.html
@@ -21,7 +21,7 @@ <h1 class="partners-title">{{ page.title }}</h1>
                       Expand all General FAQ
                     </button>
                   </div>
-                  <div class="usa-accordion usa-accordion--bordered margin-bottom-5">
+                  <div class="usa-accordion usa-accordion--bordered margin-bottom-1">
                       {% for item in page.general_accordion %}
                         <h3 class="usa-accordion__heading">
                           <button
@@ -38,7 +38,7 @@ <h3 class="usa-accordion__heading">
                         </div>
                       {% endfor %}
                   </div>
-                  <a href="#main-content">Back to Top</a>
+                  <a href="#main-content" class="usa-link anchor-to-top">Back to top</a>
                   <div class="section-title-row margin-top-5">
                     <div id="logistics-section" class="section-title-left">{{ page.logistics_section_title | markdownify}}</div>
                     <button
@@ -47,7 +47,7 @@ <h3 class="usa-accordion__heading">
                       Expand all Logistics FAQ
                     </button>
                   </div>
-                  <div class="usa-accordion usa-accordion--bordered margin-bottom-5">
+                  <div class="usa-accordion usa-accordion--bordered margin-bottom-1">
                       {% for item in page.logistics_accordion %}
                         <h3 class="usa-accordion__heading">
                           <button
@@ -64,7 +64,7 @@ <h3 class="usa-accordion__heading">
                         </div>
                       {% endfor %}
                   </div>
-                  <a href="#main-content">Back to Top</a>
+                  <a href="#main-content" class="usa-link anchor-to-top">Back to top</a>
                   <div class="section-title-row margin-top-5">
                     <div id="development-section" class="section-title-left">{{ page.development_section_title | markdownify}}</div>
                     <button
@@ -73,7 +73,7 @@ <h3 class="usa-accordion__heading">
                       Expand all Development FAQ
                     </button>
                   </div>
-                  <div class="usa-accordion usa-accordion--bordered margin-bottom-5">
+                  <div class="usa-accordion usa-accordion--bordered margin-bottom-1">
                       {% for item in page.development_accordion %}
                         <h3 class="usa-accordion__heading">
                           <button
@@ -90,7 +90,7 @@ <h3 class="usa-accordion__heading">
                         </div>
                       {% endfor %}
                   </div>
-                  <a href="#main-content">Back to Top</a>
+                  <a href="#main-content" class="usa-link anchor-to-top">Back to top</a>
                 </div>
                 <div class="tablet:grid-col-3">
                   <section>

diff --git a/_layouts/sidenav.html b/_layouts/sidenav.html
@@ -45,9 +45,9 @@
 <div class="container">
   <div class="page-content container--mod grid-row">
     <div class="desktop:display-none grid-col-12 margin-bottom-3">{{ sidenav }}</div>
-    <div class="page-content__prose grid-col-12 desktop:grid-col-8">
+    <div class="usa-prose grid-col-12 desktop:grid-col-8">
       {{ content }}
-      <a href="#main-content" class="anchor-to-top">{{ site.data[page.lang].settings.nav.anchor_to_top }}</a>
+      <a href="#main-content" class="usa-link anchor-to-top">{{ site.data[page.lang].settings.nav.anchor_to_top }}</a>
     </div>
     <div class="display-none desktop:display-block grid-offset-1 grid-col-3">{{ sidenav }}</div>
   </div>

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -4,9 +4,6 @@
 $base-font-size: 16px;
 $base-font-sm: ($base-font-size - 3);
 $base-font-xs: ($base-font-size * 0.75);
-$line-height: 1.875rem;
-$line-height-sm: 1.75rem;
-$line-height-md: 1.375rem;
 $base-font-color: $grey-darker;
 
 $link-text-decoration: underline !default;

diff --git a/_sass/components/_alert.scss b/_sass/components/_alert.scss
diff --git a/_sass/components/_card.scss b/_sass/components/_card.scss
@@ -26,7 +26,7 @@
 
     @include at-media('tablet-lg') {
       font-size: 1.375rem;
-      line-height: $line-height;
+      line-height: line-height($theme-header-font-family, $theme-heading-line-height);
     }
   }
 
@@ -38,6 +38,6 @@
 
   p {
     font-size: $base-font-size;
-    line-height: $line-height;
+    line-height: line-height($theme-body-font-family, $theme-body-line-height);
   }
 }
diff --git a/_sass/components/_hero.scss b/_sass/components/_hero.scss
@@ -29,7 +29,7 @@
 
   .hero__description {
     font-size: 1.125rem; // 18px
-    line-height: $line-height;
+    line-height: line-height($theme-body-font-family, $theme-body-line-height);
 
     @include at-media('desktop') {
       font-size: 1.25rem; // 20px

diff --git a/_sass/components/_icon-list.scss b/_sass/components/_icon-list.scss
@@ -1,5 +1,5 @@
 ul.usa-icon-list {
-  .page-content__prose & {
+  .usa-prose & {
     padding-left: 0;
   }
 }
diff --git a/_sass/components/_layout.scss b/_sass/components/_layout.scss
@@ -91,7 +91,7 @@ article.container,
   }
 }
 
-.page-content__prose hr {
+.usa-prose hr {
   @include u-border-top(1px, 'base-lighter');
   @include u-margin-top(4);
 }

diff --git a/_sass/components/_list.scss b/_sass/components/_list.scss
@@ -13,7 +13,7 @@ ul.help-question-list {
   margin-left: 0;
 
   &,
-  .page-content__prose & {
+  .usa-prose & {
     padding-left: 0;
   }
 
@@ -24,7 +24,10 @@ ul.help-question-list {
 
     &::before {
       @include u-pin-left;
-      top: math.div(rem-to-px($line-height) - 25px, 2);
+      top: math.div(
+        ($base-font-size * line-height($theme-body-font-family, $theme-body-line-height)) - 25px,
+        2
+      );
       background-color: $navy;
       border-radius: 50%;
       color: $white;

diff --git a/_sass/components/_nav.scss b/_sass/components/_nav.scss
@@ -120,5 +120,4 @@
   @include u-display('inline-block');
   @include u-margin-top(4);
   font-size: $base-font-sm;
-  text-decoration: none;
 }
diff --git a/_sass/components/_sticky-table.scss b/_sass/components/_sticky-table.scss
@@ -1,7 +1,7 @@
 @use 'uswds-core' as *;
 
 .usa-table--sticky-header,
-.page-content__prose .usa-table--sticky-header {
+.usa-prose .usa-table--sticky-header {
   position: relative;
 
   .usa-table__header--sticky,

diff --git a/_sass/components/_typography.scss b/_sass/components/_typography.scss
@@ -9,32 +9,7 @@ body {
 }
 
 .container--mod p {
-  line-height: $line-height;
-}
-
-.page-content__prose {
-  @include usa-content-styles;
-
-  &,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    // TODO: Remove this once we assign `$theme-body-line-height` design system variable.
-    line-height: $line-height;
-  }
-
-  p,
-  ol,
-  ul {
-    // TODO: Remove this once we assign `$theme-body-line-height` design system variable.
-    line-height: $line-height;
-
-    // TODO: Consider respecting or customizing `$theme-text-measure` design system variable.
-    max-width: none;
-  }
+  line-height: line-height($theme-body-font-family, $theme-body-line-height);
 }
 
 .font-xs {

diff --git a/_sass/components/all.scss b/_sass/components/all.scss
@@ -1,4 +1,3 @@
-@forward 'alert';
 @forward 'already-have-an-account';
 @forward 'banner';
 @forward 'card';

diff --git a/_sass/components/partners/_hero.scss b/_sass/components/partners/_hero.scss
@@ -20,7 +20,7 @@
   }
   .hero__description {
     font-size: 1.125rem;
-    line-height: $line-height;
+    line-height: line-height($theme-body-font-family, $theme-body-line-height);
     @include at-media('desktop') {
       font-size: 1.25rem;
     }

diff --git a/_sass/pages/_who_uses_login.scss b/_sass/pages/_who_uses_login.scss
@@ -2,7 +2,7 @@
 @use '../variables' as *;
 
 #our-partners {
-  line-height: $line-height;
+  line-height: line-height($theme-body-font-family, $theme-body-line-height);
 }
 
 .container.who-uses-login {
@@ -21,7 +21,7 @@
     > p {
       flex-basis: 0;
       flex-grow: 1;
-      line-height: $line-height;
+      line-height: line-height($theme-body-font-family, $theme-body-line-height);
 
       &:first-child {
         background: url(../img/who-uses-login/icon-shield/icon-shield.svg) left top no-repeat;

diff --git a/assets/js/contact_us_form_element.ts b/assets/js/contact_us_form_element.ts
@@ -39,6 +39,8 @@ class ContactUsFormElement extends HTMLElement {
     if (this.isInMaintenanceWindow) {
       this.showAlert();
       this.hide();
+    } else {
+      this.removeAlert();
     }
   }
 
@@ -81,6 +83,10 @@ class ContactUsFormElement extends HTMLElement {
     this.maintenanceAlert.removeAttribute('hidden');
   }
 
+  removeAlert() {
+    this.maintenanceAlert?.remove();
+  }
+
   hide() {
     this.setAttribute('hidden', '');
   }

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,4 +1,4 @@
-import { accordion, banner, comboBox, datePicker, header } from '@18f/identity-design-system';
+import { accordion, banner, comboBox, datePicker, navigation } from '@18f/identity-design-system';
 
-const components = [accordion, banner, comboBox, datePicker, header];
+const components = [accordion, banner, comboBox, datePicker, navigation];
 components.forEach((component) => component.on());
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -2,7 +2,9 @@
   $theme-utility-breakpoints: (
     'tablet': true,
     'desktop': true,
-  )
+  ),
+  $theme-body-line-height: 6,
+  $theme-heading-line-height: 6
 );
 @forward 'uswds';
 @forward '../../_sass/index';
diff --git a/content/_help/verify-your-identity/accepted-identification-documents._en.md b/content/_help/verify-your-identity/accepted-identification-documents._en.md
@@ -24,8 +24,7 @@ alert: <strong>If you do not have a valid driver's license or state ID card, you
 
 ## We do not accept military IDs, U.S. Passports, or other identification documents.
 
-{% include alert.html content=page.alert type='error' role='alert' %}
-
+{% include alert.html content=page.alert type='error' role='alert' class='margin-bottom-2' %}
 
 {% include components/icon-list.html items=page.dont_list size='md' icon_color='error' icon_shape='cancel' %}
 

diff --git a/content/_help/verify-your-identity/accepted-identification-documents._es.md b/content/_help/verify-your-identity/accepted-identification-documents._es.md
@@ -22,7 +22,7 @@ dont_list:
 ## No aceptamos identificaciones militares, pasaportes estadounidenses ni otros documentos de identificación.
 
 
-{% include alert.html content=page.alert type='error' role='alert' %}
+{% include alert.html content=page.alert type='error' role='alert' class='margin-bottom-2' %}
 
 {% include components/icon-list.html items=page.dont_list size='md' icon_color='error' icon_shape='cancel' %}
 

diff --git a/content/_help/verify-your-identity/accepted-identification-documents._fr.md b/content/_help/verify-your-identity/accepted-identification-documents._fr.md
@@ -21,7 +21,7 @@ dont_list:
 
 ## Nous n’acceptons pas les cartes d’identité militaires, les passeports américains ou d’autres documents d’identification.
 
-{% include alert.html content=page.alert type='error' role='alert' %}
+{% include alert.html content=page.alert type='error' role='alert' class='margin-bottom-2' %}
 
 {% include components/icon-list.html items=page.dont_list size='md' icon_color='error' icon_shape='cancel' %}