Migrates global footer styles to USDS (#798)

- enables colors in settings file
- updates snapshots

client/src/components/J40Footer.tsx

@@ -97,7 +97,6 @@ const J40Footer = () => {
           <Logo
             size="medium"
             key={'logoimg'}
-            className={'j40-footer-logo'}
             image={
               <img
                 className={'usa-footer__logo-img'}

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -152,7 +152,7 @@ exports[`J40Footer renders correctly 1`] = `
         data-testid="gridContainer"
       >
         <div
-          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
           data-testid="footerLogo"
         >
           <div

client/src/pages/__snapshots__/contact.test.tsx.snap

@@ -462,7 +462,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         data-testid="gridContainer"
       >
         <div
-          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
           data-testid="footerLogo"
         >
           <div

client/src/pages/__snapshots__/index.test.tsx.snap

@@ -782,7 +782,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         data-testid="gridContainer"
       >
         <div
-          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
           data-testid="footerLogo"
         >
           <div

client/src/pages/__snapshots__/methodology.test.tsx.snap

@@ -1268,7 +1268,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         data-testid="gridContainer"
       >
         <div
-          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
           data-testid="footerLogo"
         >
           <div

client/src/styles/global.scss

@@ -35,9 +35,8 @@ There are 3 things that should be included in this file:
 
 /***************** GLOBAL STYLES **************************************************************/
 
-$primary-color: #112f4e;
+$primary-color: #112f4e;  // Used for header font color - selection color is #005EA2
-$j40-blue-background-color: #EFF6FB;
+$j40-blue-background-color: #e7f2f5;  // Hex value of 'blue-cool-5'
-$sidePanelBorderColor: #f2f2f2;
 
 // The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
 // Arguments to the mixins must be tokens from USWDS
@@ -113,6 +112,9 @@ components include:
 .j40-header,
 .j40-primary-nav,
 .j40-header > li > a {
+
+  // Todo color: remove this global
+  // May be able to place importance like this: u-bg('red-warm-50v', !important)
   color: $primary-color !important; 
   z-index: 5;
 
@@ -122,7 +124,7 @@ components include:
 
   span {
     // make sure the open close chevron is colored correctly
-    color: $primary-color;
+    color: $primary-color; // Todo color: remove this global
   }
 
   // this is the title
@@ -195,10 +197,12 @@ components include:
 
 /* this is used by J40MainGridContainer to show a blue background */
 .j40-main-grid-blue-bk {
-  background-color: $j40-blue-background-color;
+  @include u-bg('blue-cool-5');  
   
   // This style is to remove the margin collapse occuring
-  border-top: 1px solid $j40-blue-background-color;
+  @include u-border-top(1px);
+  @include u-border-top('solid');
+  @include u-border-top('blue-cool-5');
 }
 
 #main-content {
@@ -218,21 +222,16 @@ components include:
     @include u-padding-bottom(2);
   }
 
-  .j40-footer-logo {
-    font-weight: bold;
-  }
-
   .j40-footer-address {
     .usa-footer__contact-info {
-      font-weight: normal;
+      @include typeset('sans', 4, 5); 
-      text-align: left;
+      @include u-text('normal');  
-      display: inline-block;
+      @include u-display('inline-block');
-      line-height: 1.5;
     }
   }
   
   .footer-link-first-child{
-    display: inline-block;
+    @include u-display('inline-block');
     @include u-margin-top(1.5)
   }
 }
@@ -406,8 +405,8 @@ p.secondary.j40-indicator {
 *************************************** 
 */ 
 
-.usa-process-list__heading{
+.usa-process-list__item{
-  border-left-color: $j40-blue-background-color;
+  @include u-border-left('base-lightest');
 }
 
 
@@ -459,36 +458,3 @@ p.secondary.j40-indicator {
     }
   }
 }
-
-
-/* 
-******************************
-*      ACCORDION STYLES
-****************************** 
-*/
-
-.usa-accordion__heading button.usa-accordion__button {
-  @include j40-element('3xs', 1, 'normal', 0);
-  border-bottom: 1px solid $sidePanelBorderColor;
-} 
-.usa-accordion__heading:first-child button.usa-accordion__button {
-  @include j40-element('3xs', 1, 'normal', 0);
-  background-color: white;
-} 
-.usa-accordion__heading button.usa-accordion__button {
-  @include j40-element('3xs', 1, 'normal', 0);
-  background-color: #F3F3F3;
-}
-
-.usa-accordion__heading:not(:first-child){
-  @include u-margin-top(0);
-}
-
-#prioritization-indicators, #additional-indicators {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-#additional-indicators {
-  background-color:#F3F3F3;
-}

client/src/styles/uswds-settings.scss

@@ -1,13 +1,9 @@
 // This setting file will instantiate styles that are needed for J40 from the styles/theme folder
 
-/*
+// Import the entire theme spacing folder
-  Import the entire theme spacing folder
-*/
 @import "./theme/uswds-theme-spacing";
 
-/*
+// Selected general styles found in styles/theme/_uswds-theme-general.scss:
- Selected general styles found in styles/theme/_uswds-theme-general.scss:
-*/
 $theme-image-path: "../../node_modules/uswds/src/img";
 $theme-show-compile-warnings: false;
 $theme-show-notifications: false;
@@ -23,7 +19,5 @@ $theme-namespace: (
   ),
 );
 
-/*
+// Selected typography styles, found in styles/theme/_uswds-theme-typography.scss:
-Selected typography styles, found in styles/theme/_uswds-theme-typography.scss:
-*/
 $theme-font-path: "../../node_modules/uswds/src/fonts";