#582 - break off footer into comp. files

GSA-TTS · Feb 15, 2023 · e484b35 · e484b35
1 parent c97db22
commit e484b35
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 75 deletions.
diff --git a/assets/styles/theme/_uswds-theme-usagov.scss b/assets/styles/theme/_uswds-theme-usagov.scss
@@ -83,6 +83,10 @@ $AZ-button-disabled: #859cba;
   transform: translate(0, 25%);
 }
 
+.usa-social-link {
+  background-color: transparent;
+}
+
 @media (min-width: 64em) {
   .usa-navbar.position-relative > .usa-nav__secondary {
     bottom: 3rem;
@@ -172,3 +176,10 @@ h1.text-secondary {
 .usa-identifier {
   @include u-bg("blue-80v");
 }
+
+// visibility: hidden utility class.
+.is-hidden {
+  visibility: hidden;
+  opacity: opacity(0);
+  position: fixed;
+}
diff --git a/components/BetaUsaGovFooter.vue b/components/BetaUsaGovFooter.vue
@@ -7,10 +7,12 @@
             <nav
               class="usa-footer__nav"
               aria-label="Footer navigation">
-              111 <BetaUsaGovFooterNav />222
+              <!-- Footer navigation component. -->
+              <BetaUsaGovFooterNav />
             </nav>
           </div>
 
+          <!-- Subscribe to the newsletter. -->
           <div class="tablet:grid-col-4">
             <div class="usa-sign-up">
               <h2 class="usa-sign-up__heading">{{ $t("footer.GroupThree.header") }}</h2>
@@ -64,61 +66,8 @@
               </div>
             </span>
           </div>
-
-          <div class="usa-footer__contact-links mobile-lg:grid-col-6">
-            <h4 class="usa-footer__contact-heading">Find us on social media</h4>
-
-            <div class="usa-footer__social-links en-links grid-row grid-gap-1">
-              <div class="grid-col-auto">
-                <a
-                  class="usa-social-link"
-                  href="https://www.facebook.com/USAgov"
-                  alt="Facebook USAGov">
-                  <img
-                    src="/themes/custom/usagov/images/facebook34.png"
-                    alt="Facebook USAGov" />
-                  <span>Facebook</span>
-                </a>
-              </div>
-
-              <div class="grid-col-auto">
-                <a
-                  class="usa-social-link"
-                  href="https://twitter.com/USAgov"
-                  alt="Twitter USAGov">
-                  <img
-                    src="/themes/custom/usagov/images/twitter34.png"
-                    alt="Twitter USAGov" />
-                  <span>Twitter</span>
-                </a>
-              </div>
-
-              <div class="grid-col-auto">
-                <a
-                  class="usa-social-link"
-                  href="https://www.youtube.com/usagov1"
-                  alt="YouTube USAGov">
-                  <img
-                    src="/themes/custom/usagov/images/youtube34.png"
-                    alt="Youtube USAGov" />
-                  <span>YouTube</span>
-                </a>
-              </div>
-
-              <div class="grid-col-auto">
-                <a
-                  class="usa-social-link"
-                  href="https://www.instagram.com/usagov/"
-                  alt="Instagram"
-                  usagov="">
-                  <img
-                    src="/themes/custom/usagov/images/instagram34.png"
-                    alt="Instagram USAGov" />
-                  <span>Instagram</span>
-                </a>
-              </div>
-            </div>
-          </div>
+          <!-- Footer social component. -->
+          <BetaUsaGovFooterSocial />
         </div>
       </div>
     </div>

diff --git a/components/BetaUsaGovFooterNav.vue b/components/BetaUsaGovFooterNav.vue
@@ -72,6 +72,7 @@ import sanitizeUrl from "~/mixins/SanitizeBears"
 export default {
   name: "BetaUsaGovFooterNav",
   mixins: [sanitizeUrl],
+
   methods: {
     sanitizedBearsUrl(benefitUrl, defaultValue = "#") {
       if (benefitUrl && benefitUrl.length > 0) {

diff --git a/components/BetaUsaGovFooterSocial.vue b/components/BetaUsaGovFooterSocial.vue
@@ -0,0 +1,43 @@
+<template>
+  <!-- Footer social links. -->
+  <div class="usa-footer__contact-links mobile-lg:grid-col-6">
+    <h2 class="usa-footer__contact-heading">Find us on social media</h2>
+    <div class="usa-footer__social-links en-links grid-row grid-gap-1">
+      <!-- Footer social links loop. -->
+      <div
+        v-for="item in $t('beta.footer.social')"
+        :id="`social-id-${item.linkID}`"
+        :key="`social-id-${item.linkID}`"
+        class="grid-col-auto">
+        <a
+          class="usa-social-link"
+          :href="sanitizedBearsUrl(item.linkURL)">
+          <img
+            :src="require(`@/assets/img/${item.icon}`)"
+            :alt="item.name"
+            :width="item.width"
+            :height="item.height" />
+          <span class="is-hidden">{{ item.name }}</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import sanitizeUrl from "~/mixins/SanitizeBears"
+
+export default {
+  name: "BetaUsaGovFooterNav",
+  mixins: [sanitizeUrl],
+  methods: {
+    sanitizedBearsUrl(benefitUrl, defaultValue = "#") {
+      if (benefitUrl && benefitUrl.length > 0) {
+        return this.sanitizeUrl(benefitUrl)
+      } else {
+        return defaultValue
+      }
+    },
+  },
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -39,18 +39,5 @@ export default {
       },
     }
   },
-  switchLanguage() {
-    let route = ""
-    const locale = this.$i18n.locale
-
-    if (locale === "en") {
-      route = `/es/`
-      this.$i18n.setLocale("es")
-    } else {
-      // route = `/`
-      this.$i18n.setLocale("en")
-    }
-    this.$router.push(route)
-  },
 }
 </script>
diff --git a/locales/en/en.json b/locales/en/en.json
@@ -393,6 +393,40 @@
           "linkText": "Feature articles",
           "linkURL": "https://beta.usa.gov/#all_topics"
         }
+      ],
+      "social": [
+        {
+          "linkID": "social-10",
+          "linkURL": "https://www.facebook.com/USAgov",
+          "name": "Facebook",
+          "icon": "icon_facebook.svg",
+          "width": "32",
+          "height": "32"
+        },
+        {
+          "linkID": "social-20",
+          "linkURL": "https://www.facebook.com/USAgov",
+          "name": "Twitter USAGov",
+          "icon": "icon_twitter.svg",
+          "width": "39",
+          "height": "32"
+        },
+        {
+          "linkID": "social-30",
+          "linkURL": "https://www.facebook.com/USAgov",
+          "name": "YouTube",
+          "icon": "icon_youtube.svg",
+          "width": "40",
+          "height": "32"
+        },
+        {
+          "linkID": "social-40",
+          "linkURL": "https://www.facebook.com/USAgov",
+          "name": "Instagram",
+          "icon": "icon_instagram.svg",
+          "width": "32",
+          "height": "32"
+        }
       ]
     }
   }

diff --git a/locales/es/es.json b/locales/es/es.json
@@ -316,18 +316,18 @@
       "column1": [
         {
           "linkID": "c1-10",
-          "linkText": "All topics and services",
-          "linkURL": "https://beta.usa.gov/#all_topics"
+          "linkText": "Todos los temas y servicios",
+          "linkURL": "https://beta.usa.gov/es#all_topics"
         },
         {
           "linkID": "c1-20",
-          "linkText": "About the U.S. and its government",
-          "linkURL": "https://www.usa.gov/federal-agencies"
+          "linkText": "Directorios de agencias y departamentos del Gobierno de EE. UU.",
+          "linkURL": "https://www.usa.gov/espanol/agencias-federales"
         },
         {
           "linkID": "c1-30",
-          "linkText": "Branches of government",
-          "linkURL": "https://beta.usa.gov/branches-of-government"
+          "linkText": "Ramas del Gobierno",
+          "linkURL": "https://beta.usa.gov/es/ramas-gobierno-estados-unidos"
         }
       ],
       "column2Title": "About Us",