Merge pull request #768 from GSA/757-update-footer-styles

757 update footer styles
GSA-TTS · May 2, 2023 · 9afd7b2 · 9afd7b2
2 parents c18703d + 2da5cd7
commit 9afd7b2
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 52 deletions.
diff --git a/assets/styles/theme/_uswds-theme-color.scss b/assets/styles/theme/_uswds-theme-color.scss
@@ -139,9 +139,9 @@ $theme-text-reverse-color: "white";
 
 // Links
 $theme-link-color: "primary";
-$theme-link-visited-color: "violet-70v";
+$theme-link-visited-color: "violet-60v";
 $theme-link-hover-color: "primary-darker";
-$theme-link-active-color: "primary-darker";
+$theme-link-active-color: "blue-warm-70v";
 $theme-link-reverse-color: "base-lighter";
 $theme-link-reverse-hover-color: "base-lightest";
-$theme-link-reverse-active-color: "white";
+$theme-link-reverse-active-color: "white";
diff --git a/assets/styles/theme/_uswds-theme-usagov.scss b/assets/styles/theme/_uswds-theme-usagov.scss
@@ -105,6 +105,7 @@ $AZ-button-disabled: #859cba;
 }
 
 .usa-footer {
+  // more specified styles to align with parent web property usa.gov
   &__primary-section {
     @include u-bg("gray-cool-10");
   }
@@ -118,25 +119,69 @@ $AZ-button-disabled: #859cba;
     text-decoration: none;
   }
 
-  .usa-list--unstyled > li {
-    @include u-margin-bottom(1);
+  &__contact-links {
+    margin-top: 0;
   }
 
-  &__primary-content {
-    @include at-media(mobile-lg) {
-      @include u-border-top(1px, "solid", "base-light");
-    }
+  &__contact-heading {
+    margin-bottom: .5rem;
+  }
 
-    @include at-media(tablet) {
-      border: 0;
+  #bottom-phone {
+    p,
+    a {
+      font-size: 17.6px;
     }
   }
 }
 
-.usa-footer--big .usa-footer__primary-content--collapsible .usa-list--unstyled {
-  @include at-media-max("tablet") {
-    @include u-padding-x(2);
-    @include u-padding-y(2);
+.usa-footer--big .usa-footer__primary-section {
+  // more specified styles to align with parent web property usa.gov
+  h3 {
+    margin-top: 0;
+  }
+
+  .usa-list--unstyled {
+    padding-bottom: 2rem;
+    padding-top: .75rem;
+    margin-top: 1rem;
+
+    .usa-footer__secondary-link {
+      margin-bottom: 0;
+    }  
+  }
+  // this keeps links aligned because title lengths are different
+  @include at-media(desktop) {
+    #col-2,
+    #col-4 {
+      > li:first-of-type {
+        padding-top: 22.4px;
+      }
+    }
+  }
+
+  .usa-accordion {
+    &__content{
+      background-color: initial;
+    }
+
+    &__button {
+      background-color: #efefef;
+      font-size: 19.2px;
+      padding: 16px 16px 16px 40px;
+    }
+
+    &__button[aria-expanded=false],
+    &__button[aria-expanded=true] {
+      background-image: url("../../assets/img/usa-icons/navigate_next.svg");
+      background-position: left 1rem center;
+      background-size: 20px;
+    }
+
+    &__button[aria-expanded=true] {
+      background-image: url("../../assets/img/usa-icons/expand_more.svg");
+      text-decoration: underline;
+    }
   }
 }
 
@@ -146,6 +191,7 @@ $AZ-button-disabled: #859cba;
   .usa-button {
     background-color: color("cyan-30v");
     color: $black;
+    border: 1px $black solid;
 
     &:hover {
       background-color: #00a6d2;
@@ -196,7 +242,6 @@ h1.text-secondary {
 }
 
 .usa-gov-footer__primary-link {
-  min-height: units(6);
   font-size: size("ui", 7);
 }
 
@@ -205,10 +250,11 @@ h1.text-secondary {
 }
 
 .usa-sign-up {
-  @include u-padding-top(5);
+  @include u-padding-top(3);
 }
 
 .usa-identifier__section {
+  text-align: center;
   @include u-padding-bottom(0);
 }
 

diff --git a/components/BetaUsaGovFooter.vue b/components/BetaUsaGovFooter.vue
@@ -21,7 +21,7 @@
 
     <!-- Lower contact info block. -->
     <div class="usa-footer__secondary-section">
-      <div class="grid-container">
+      <div class="grid-container padding-bottom-4">
         <div class="grid-row grid-gap">
           <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
             <span id="bottom-phone">
@@ -30,12 +30,11 @@
               </div>
 
               <div class="mobile-lg:grid-col-auto">
-                <p class="margin-bottom-0">{{ $t("footer.GroupTwo.subHeader") }}</p>
+                <p>{{ $t("footer.GroupTwo.subHeader") }}</p>
 
                 <address class="usa-footer__address">
                   <div class="usa-footer__contact-info">
                     <a
-                      class="margin-bottom-3"
                       :href="sanitizedBearsUrl($t('footer.GroupOne.linkOneUrl'))">
                       {{ $t("footer.GroupTwo.linkOne") }}
                     </a>

diff --git a/components/BetaUsaGovFooterNav.vue b/components/BetaUsaGovFooterNav.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="grid-row grid-gap-4">
     <div
-      :class="match_isNarrowPlus ? '' : 'footer-nav-accordion-wrap'"
-      class="tablet:grid-col-6 desktop:grid-col-3">
+      :class="match_isNarrowMedium ? '' : 'footer-nav-accordion-wrap'"
+      class="mobile-lg:grid-col-6 desktop:grid-col-3">
       <section
-        :class="match_isNarrowPlus ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
+        :class="match_isNarrowMedium ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
         class="usa-footer__primary-content">
         <!-- footer nav column 1.-->
-        <h3 :class="match_isNarrowPlus ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
-          <span v-if="match_isNarrowPlus">{{ $t("beta.footer.column1Title") }}</span>
+        <h3 :class="match_isNarrowMedium ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
+          <span v-if="match_isNarrowMedium">{{ $t("beta.footer.column1Title") }}</span>
           <button
             v-else
             type="button"
@@ -21,7 +21,7 @@
 
         <ul
           id="col-1"
-          :class="match_isNarrowPlus ? '' : 'usa-accordion__content'"
+          :class="match_isNarrowMedium ? '' : 'usa-accordion__content'"
           class="usa-list usa-list--unstyled">
           <li
             v-for="item in $t('beta.footer.column1')"
@@ -35,14 +35,14 @@
     </div>
 
     <div
-      :class="match_isNarrowPlus ? '' : 'footer-nav-accordion-wrap'"
-      class="tablet:grid-col-6 desktop:grid-col-3">
+      :class="match_isNarrowMedium ? '' : 'footer-nav-accordion-wrap'"
+      class="mobile-lg:grid-col-6 desktop:grid-col-3">
       <section
-        :class="match_isNarrowPlus ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
+        :class="match_isNarrowMedium ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
         class="usa-footer__primary-content">
         <!-- footer nav column 2.-->
-        <h3 :class="match_isNarrowPlus ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
-          <span v-if="match_isNarrowPlus">{{ $t("beta.footer.column2Title") }}</span>
+        <h3 :class="match_isNarrowMedium ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
+          <span v-if="match_isNarrowMedium">{{ $t("beta.footer.column2Title") }}</span>
           <button
             v-else
             type="button"
@@ -55,7 +55,7 @@
 
         <ul
           id="col-2"
-          :class="match_isNarrowPlus ? '' : 'usa-accordion__content'"
+          :class="match_isNarrowMedium ? '' : 'usa-accordion__content'"
           class="usa-list usa-list--unstyled">
           <li
             v-for="item in $t('beta.footer.column2')"
@@ -69,14 +69,14 @@
     </div>
 
     <div
-      :class="match_isNarrowPlus ? '' : 'footer-nav-accordion-wrap'"
-      class="tablet:grid-col-6 desktop:grid-col-3">
+      :class="match_isNarrowMedium ? '' : 'footer-nav-accordion-wrap'"
+      class="mobile-lg:grid-col-6 desktop:grid-col-3">
       <section
-        :class="match_isNarrowPlus ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
+        :class="match_isNarrowMedium ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
         class="usa-footer__primary-content">
         <!-- footer nav column 3.-->
-        <h3 :class="match_isNarrowPlus ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
-          <span v-if="match_isNarrowPlus">{{ $t("beta.footer.column3Title") }}</span>
+        <h3 :class="match_isNarrowMedium ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
+          <span v-if="match_isNarrowMedium">{{ $t("beta.footer.column3Title") }}</span>
           <button
             v-else
             type="button"
@@ -89,7 +89,7 @@
 
         <ul
           id="col-3"
-          :class="match_isNarrowPlus ? '' : 'usa-accordion__content'"
+          :class="match_isNarrowMedium ? '' : 'usa-accordion__content'"
           class="usa-list usa-list--unstyled">
           <li
             v-for="item in $t('beta.footer.column3')"
@@ -103,14 +103,14 @@
     </div>
 
     <div
-      :class="match_isNarrowPlus ? '' : 'footer-nav-accordion-wrap'"
-      class="tablet:grid-col-6 desktop:grid-col-3">
+      :class="match_isNarrowMedium ? '' : 'footer-nav-accordion-wrap'"
+      class="mobile-lg:grid-col-6 desktop:grid-col-3">
       <section
-        :class="match_isNarrowPlus ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
+        :class="match_isNarrowMedium ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
         class="usa-footer__primary-content">
         <!-- footer nav column 4.-->
-        <h3 :class="match_isNarrowPlus ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
-          <span v-if="match_isNarrowPlus">{{ $t("beta.footer.column4Title") }}</span>
+        <h3 :class="match_isNarrowMedium ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
+          <span v-if="match_isNarrowMedium">{{ $t("beta.footer.column4Title") }}</span>
           <button
             v-else
             type="button"
@@ -123,7 +123,7 @@
 
         <ul
           id="col-4"
-          :class="match_isNarrowPlus ? '' : 'usa-accordion__content'"
+          :class="match_isNarrowMedium ? '' : 'usa-accordion__content'"
           class="usa-list usa-list--unstyled">
           <li
             v-for="item in $t('beta.footer.column4')"
@@ -148,7 +148,11 @@ export default {
   name: "BetaUsaGovFooterNav",
 
   // Register the MatchMedia mixin with the queries we want plus optional names.
-  mixins: [sanitizeUrl, FooterAccordion, MatchMedia("narrow", "isNarrow"), MatchMedia("narrowPlus", "isNarrowPlus")],
+  mixins: [
+    sanitizeUrl, 
+    FooterAccordion, 
+    MatchMedia("narrowMedium", "isNarrowMedium"),
+  ],
 
   methods: {
     sanitizedBearsUrl(benefitUrl, defaultValue = "#") {
@@ -160,4 +164,4 @@ export default {
     },
   },
 }
-</script>
+</script>
diff --git a/locales/en/en.json b/locales/en/en.json
@@ -225,12 +225,12 @@
       "linkTwoUrl": "https://usa.gov/espanol/contactenos"
     },
     "GroupThree": {
-      "header": "Sign Up to Receive Email Updates",
+      "header": "Sign up to receive email updates",
       "formLabel": "Enter your email",
       "buttonText": "Sign Up"
     },
     "subFooterLabel": "USAGov tagline",
-    "subFooter": "USAGov is the Official Guide to Government Information and Services"
+    "subFooter": "USAGov is the official guide to government information and services"
   },
   "crossSell": {
     "title": "Other benefits that might be relevant to you."

diff --git a/mixins/FooterAccordion.js b/mixins/FooterAccordion.js
@@ -11,16 +11,16 @@ export default {
       // Loop through each accordion wrap.
       accordionWrap.forEach((item) => {
         // Define the media query.
-        const mq640 = window.matchMedia("(min-width: 640px)")
+        const mq480 = window.matchMedia("(min-width: 480px)")
         // Add a Listener.
-        mq640.addListener(WidthChange640)
+        mq480.addListener(WidthChange640)
         // Define the width change.
-        WidthChange640(mq640)
+        WidthChange640(mq480)
         // Media query change function for width specific functions.
         function WidthChange640(mq) {
           // Define the accordion content within.
           const accordionContent = item.querySelector(".usa-list")
-          if (mq640.matches) {
+          if (mq480.matches) {
             // If wider than 640px.
             accordionContent.removeAttribute("hidden")
           } else {

diff --git a/mixins/MatchMedia.js b/mixins/MatchMedia.js
@@ -6,6 +6,7 @@
 const theme = {
   screens: {
     narrow: "320px",
+    narrowMedium: "480px",
     narrowPlus: "640px",
     medium: "768px",
     mediumPlus: "840px",