#579 - starting beta footer

components/BetaUsaGovFooter.vue

@@ -0,0 +1,71 @@
+<template>
+  <footer class="usa-footer usa-footer--big">
+    <div class="usa-footer__primary-section">
+      <div class="grid-container">
+        <div class="grid-row grid-gap">
+          <div class="tablet:grid-col-8">left</div>
+
+          <div class="tablet:grid-col-4">right</div>
+          <ul>
+            <li
+              v-for="item in beta.footer.column1"
+              :key="item.linkText"
+              class="usa-process-list__item padding-bottom-4">
+              <p>
+                {{ $t("item.linkText") }}
+                {{ item.linkText }}
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+import _ from "lodash"
+// import { tObj } from "~/services/translation"
+import sanitizeUrl from "~/mixins/SanitizeBears"
+
+export default {
+  mixins: [sanitizeUrl],
+  props: {
+    testEnv: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      uniqueId: _.uniqueId("foo-"),
+    }
+  },
+  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)
+  },
+  mounted() {
+    this.uniqueId = _.uniqueId("id-")
+  },
+  methods: {
+    sanitizedBearsUrl(benefitUrl, defaultValue = "#") {
+      if (benefitUrl && benefitUrl.length > 0) {
+        return this.sanitizeUrl(benefitUrl)
+      } else {
+        return defaultValue
+      }
+    },
+  },
+}
+</script>

components/FooterDisclaimer.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="grid-container">
+      <div class="grid-row">
+        <div class="grid-col">
+          <div
+            class="usa-summary-box footer-summary-box"
+            role="region"
+            aria-labelledby="summary-box-key-information-disclaimer">
+            <div class="usa-summary-box__body">
+              <h2
+                id="summary-box-key-information-disclaimer"
+                class="usa-summary-box__heading">
+                {{ disclaimer.heading }}
+              </h2>
+              <div class="usa-summary-box__text">
+                <ul class="usa-list">
+                  <li style="max-width: unset">
+                    {{ disclaimer.bullet }}
+                  </li>
+                  <li style="max-width: unset">
+                    {{ disclaimer.bullet1 }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid-container usa-footer__return-to-top">
+      <a
+        id="return-to-top"
+        href="#"
+        @click.prevent="scrollToTop">
+        {{ $t("returnToTop") }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { tObj } from "~/services/translation"
+export default {
+  props: {
+    testEnv: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      disclaimer: {},
+    }
+  },
+  async fetch() {
+    this.disclaimer = tObj.call(this, await this.$content("disclaimer").fetch())
+  },
+  methods: {
+    scrollToTop() {
+      window.scrollTo(0, 0)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.footer-summary-box {
+  border-color: transparent;
+  background-color: transparent;
+  color: #1b1b1b;
+}
+</style>

layouts/default.vue

@@ -10,11 +10,15 @@
       </div>
     </div>
     <div v-else>
+      <!-- Beta USA Header. /-->
       <BetaUsaGovHeader />
       <main id="main-content">
         <Nuxt />
       </main>
-      <Footer />
+      <!--Footer Disclaimer. /-->
+      <FooterDisclaimer />
+      <!-- Beta USA Footer. /-->
+      <BetaUsaGovFooter />
     </div>
   </div>
 </template>

locales/en/en.json

@@ -298,6 +298,32 @@
       "usaGov": "USA.gov",
       "main": ". If you don't find what you're looking for, return to the main site."
     },
+
+    "footer": [
+      {
+        "column1": [
+          {
+            "linkText": "All topics and services",
+            "linkURL": "https://beta.usa.gov/#all_topics"
+          },
+          {
+            "linkText": "About the U.S. and its government",
+            "linkURL": "https://beta.usa.gov/about-the-us/"
+          }
+        ],
+        "column2": [
+          {
+            "linkText": "All topics and services",
+            "linkURL": "https://beta.usa.gov/#all_topics"
+          },
+          {
+            "linkText": "About the U.S. and its government",
+            "linkURL": "https://beta.usa.gov/about-the-us/"
+          }
+        ]
+      }
+    ],
+
     "header": {
       "languageToggle": "Español",
       "menu": "Menu",