#582 - add footer signup comp.

GSA-TTS · Feb 1, 2023 · 2f1ebee · 2f1ebee
1 parent 0faf9ff
commit 2f1ebee
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 29 deletions.
diff --git a/components/BetaUsaGovFooter.vue b/components/BetaUsaGovFooter.vue
@@ -11,33 +11,8 @@
               <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>
-              <form
-                class="usa-form"
-                action="https://connect.usa.gov/subscribe"
-                method="get">
-                <label
-                  class="usa-label"
-                  for="signup-email">
-                  {{ $t("footer.GroupThree.formLabel") }}
-                </label>
-                <input
-                  id="signup-email"
-                  class="usa-input"
-                  name="email"
-                  type="email" />
-                <button
-                  class="usa-button"
-                  type="submit">
-                  {{ $t("footer.GroupThree.buttonText") }}
-                </button>
-              </form>
-            </div>
-          </div>
+          <!-- Newsletter signup component-->
+          <BetaUsaGovFooterSignUp />
         </div>
       </div>
     </div>
@@ -66,7 +41,6 @@
               </div>
             </span>
           </div>
-
           <!-- Footer social component. -->
           <BetaUsaGovFooterSocial />
         </div>

diff --git a/components/BetaUsaGovFooterSignUp.vue b/components/BetaUsaGovFooterSignUp.vue
@@ -0,0 +1,46 @@
+<template>
+  <!-- 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>
+      <form
+        class="usa-form"
+        action="https://connect.usa.gov/subscribe"
+        method="get">
+        <label
+          class="usa-label"
+          for="signup-email">
+          {{ $t("footer.GroupThree.formLabel") }}
+        </label>
+        <input
+          id="signup-email"
+          class="usa-input"
+          name="email"
+          type="email" />
+        <button
+          class="usa-button"
+          type="submit">
+          {{ $t("footer.GroupThree.buttonText") }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import sanitizeUrl from "~/mixins/SanitizeBears"
+
+export default {
+  name: "BetaUsaGovFooterSignUp",
+  mixins: [sanitizeUrl],
+  methods: {
+    sanitizedBearsUrl(benefitUrl, defaultValue = "#") {
+      if (benefitUrl && benefitUrl.length > 0) {
+        return this.sanitizeUrl(benefitUrl)
+      } else {
+        return defaultValue
+      }
+    },
+  },
+}
+</script>
diff --git a/components/BetaUsaGovFooterSocial.vue b/components/BetaUsaGovFooterSocial.vue
@@ -28,7 +28,7 @@
 import sanitizeUrl from "~/mixins/SanitizeBears"
 
 export default {
-  name: "BetaUsaGovFooterNav",
+  name: "BetaUsaGovFooterSocial",
   mixins: [sanitizeUrl],
   methods: {
     sanitizedBearsUrl(benefitUrl, defaultValue = "#") {