Skip to content
This repository has been archived by the owner on May 6, 2024. It is now read-only.

Commit

Permalink
#582 footer / json updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@danny-englander
danny-englander committed Jan 31, 2023
1 parent c53d501 commit 93d5d52
Show file tree
Hide file tree
Showing 5 changed files with 300 additions and 49 deletions.
158 changes: 112 additions & 46 deletions components/BetaUsaGovFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,134 @@
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-8">
<!-- footer nav column 1-->
<h2 class="usa-gov-footer__primary-link">{{ $t("beta.footer.column1Title") }}</h2>
<ul>
<li
v-for="item in $t('beta.footer.column1')"
:key="item.uniqueId"
class="">
<a :href="sanitizedBearsUrl(item.linkURL)">{{ item.linkText }}</a>
</li>
</ul>
<nav
class="usa-footer__nav"
aria-label="Footer navigation">
111 <BetaUsaGovFooterNav />222
</nav>
</div>

<div class="tablet:grid-col-4">right</div>
<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="email">
{{ $t("footer.GroupThree.formLabel") }}
</label>
<input
:id="email"
class="usa-input"
name="email"
type="email" />
<button
class="usa-button"
type="submit">
{{ $t("footer.GroupThree.buttonText") }}
</button>
</form>
</div>
</div>
</div>
</div>
</div>

<div class="usa-footer__secondary-section">secondary</div>
<div class="usa-footer__secondary-section">
<div class="grid-container">
<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">
<div class="mobile-lg:grid-col-auto">
<h2 class="usa-footer__logo-heading">{{ $t("footer.GroupTwo.header") }}</h2>
</div>

<div class="mobile-lg:grid-col-auto">
<p>{{ $t("footer.GroupTwo.subHeader") }}</p>

<address class="usa-footer__address">
<div class="usa-footer__contact-info grid-row grid-gap">
<a
class="margin-bottom-3"
:href="sanitizedBearsUrl($t('footer.GroupOne.linkOneUrl'))">
{{ $t("footer.GroupTwo.linkOne") }}
</a>
</div>
</address>
</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>
</div>
</div>
</div>

<div class="usa-identifier">identifier</div>
</footer>
</template>

<script>
import _ from "lodash"
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) {
Expand All @@ -71,9 +140,6 @@ export default {
return defaultValue
}
},
pushFilter(item) {
// console.log(category.name)
},
},
}
</script>
85 changes: 85 additions & 0 deletions components/BetaUsaGovFooterNav.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<template>
<div class="grid-row grid-gap-4">
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<!-- footer nav column 1-->
<h2 class="usa-gov-footer__primary-link">{{ $t("beta.footer.column1Title") }}</h2>
<ul class="usa-list usa-list--unstyled">
<li
v-for="item in $t('beta.footer.column1')"
:id="`item-id-${item.linkID}`"
:key="`item-id-${item.linkID}`"
class="usa-footer__secondary-link">
<a :href="sanitizedBearsUrl(item.linkURL)">{{ item.linkText }}</a>
</li>
</ul>
</section>
</div>

<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<!-- footer nav column 1-->
<h2 class="usa-gov-footer__primary-link">{{ $t("beta.footer.column2Title") }}</h2>
<ul class="usa-list usa-list--unstyled">
<li
v-for="item in $t('beta.footer.column2')"
:id="`item-id-${item.linkID}`"
:key="`item-id-${item.linkID}`"
class="usa-footer__secondary-link">
<a :href="sanitizedBearsUrl(item.linkURL)">{{ item.linkText }}</a>
</li>
</ul>
</section>
</div>

<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<!-- footer nav column 1-->
<h2 class="usa-gov-footer__primary-link">{{ $t("beta.footer.column3Title") }}</h2>
<ul class="usa-list usa-list--unstyled">
<li
v-for="item in $t('beta.footer.column3')"
:id="`item-id-${item.linkID}`"
:key="`item-id-${item.linkID}`"
class="usa-footer__secondary-link">
<a :href="sanitizedBearsUrl(item.linkURL)">{{ item.linkText }}</a>
</li>
</ul>
</section>
</div>

<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<!-- footer nav column 1-->
<h2 class="usa-gov-footer__primary-link">{{ $t("beta.footer.column4Title") }}</h2>
<ul class="usa-list usa-list--unstyled">
<li
v-for="item in $t('beta.footer.column4')"
:id="`item-id-${item.linkID}`"
:key="`item-id-${item.linkID}`"
class="usa-footer__secondary-link">
<a :href="sanitizedBearsUrl(item.linkURL)">{{ item.linkText }}</a>
</li>
</ul>
</section>
</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>
15 changes: 15 additions & 0 deletions layouts/default.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<div>
<!-- One life event version. -->
<div v-if="isUsaGov">
<div>
<UsaGovHeader />
Expand All @@ -9,6 +10,7 @@
<UsaGovFooter />
</div>
</div>
<!-- Multi life event version. (uses beta site design) -->
<div v-else>
<!-- Beta USA Header. /-->
<BetaUsaGovHeader />
Expand Down Expand Up @@ -37,5 +39,18 @@ 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>
46 changes: 44 additions & 2 deletions locales/en/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,8 @@
"linkFiveUrl": "https://www.usa.gov/#tpcs"
},
"GroupTwo": {
"header": "Ask USA.gov a Question",
"header": "USAGov Contact Center",
"subHeader": "Ask USA.gov a question at",
"linkOne": "Call 1-844-USAGOV1 (1-844-872-4681)",
"linkOneUrl": "https://www.usa.gov/phone",
"linkTwo": "En Español",
Expand Down Expand Up @@ -329,27 +330,68 @@
"column1Title": "Government information",
"column1": [
{
"linkID": "c1-10",
"linkText": "All topics and services",
"linkURL": "https://beta.usa.gov/#all_topics"
},
{
"linkID": "c1-20",
"linkText": "About the U.S. and its government",
"linkURL": "https://www.usa.gov/federal-agencies"
},
{
"linkID": "c1-30",
"linkText": "Branches of government",
"linkURL": "https://beta.usa.gov/branches-of-government"
}
],
"column2Title": "",
"column2Title": "About Us",
"column2": [
{
"linkID": "c2-10",
"linkText": "Our mission and history",
"linkURL": "https://beta.usa.gov/#all_topics"
},
{
"linkID": "c2-20",
"linkText": "Privacy and security policies",
"linkURL": "https://beta.usa.gov/about-the-us/"
},
{
"linkID": "c2-30",
"linkText": "Accessibility policy",
"linkURL": "https://beta.usa.gov/about-the-us/"
},
{
"linkID": "c2-40",
"linkText": "How to cite USA.gov",
"linkURL": "https://beta.usa.gov/about-the-us/"
},
{
"linkID": "c2-50",
"linkText": "Real-time website data",
"linkURL": "https://beta.usa.gov/about-the-us/"
}
],
"column3Title": "For federal agencies",
"column3": [
{
"linkID": "c3-10",
"linkText": "Partner with us",
"linkURL": "https://beta.usa.gov/#all_topics"
},
{
"linkID": "c3-20",
"linkText": "USAGov blog",
"linkURL": "https://beta.usa.gov/about-the-us/"
}
],
"column4Title": "For media",
"column4": [
{
"linkID": "c4-10",
"linkText": "Feature articles",
"linkURL": "https://beta.usa.gov/#all_topics"
}
]
}
Expand Down
Loading

0 comments on commit 93d5d52

Please sign in to comment.