Skip to content

Commit

Permalink
Merge branch 'esds-3.0-vue3-primevue' into CED-1755-slider
Browse files Browse the repository at this point in the history
  • Loading branch information
@mpleroux
mpleroux committed Sep 23, 2024
2 parents 98674b5 + e4169f1 commit 7f4c434
Show file tree
Hide file tree
Showing 18 changed files with 2,204 additions and 3 deletions.
6 changes: 3 additions & 3 deletions Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ unlink:

.PHONY: lint
lint:
npm --prefix es-ds-styles run lint
npm --prefix es-ds-components run lint
npm --prefix es-ds-docs run lint
npm --prefix es-ds-styles run lint || { echo "Linting failed. Forgot to run 'make format'?"; exit 1; }
npm --prefix es-ds-components run lint || { echo "Linting failed. Forgot to run 'make format'?"; exit 1; }
npm --prefix es-ds-docs run lint || { echo "Linting failed. Forgot to run 'make format'?"; exit 1; }

.PHONY: format
format:
Expand Down
163 changes: 163 additions & 0 deletions es-ds-components/components/es-footer.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<script lang="js">
import IconFacebook from './icon/facebook.vue';
import IconInstagram from './icon/instagram.vue';
import IconLinkedin from './icon/linkedin.vue';
import IconTwitter from './icon/twitter.vue';
import IconYoutube from './icon/youtube.vue';
export default {
name: 'EsFooter',
components: {
IconFacebook,
IconInstagram,
IconLinkedin,
IconTwitter,
IconYoutube,
},
props: {
content: {
type: Object,
required: true,
},
},
computed: {
copyrightText() {
return this.content.copyrightText.replace('{currentYear}', new Date().getFullYear());
},
},
};
</script>

<template>
<div class="es-footer clearfix">
<!-- Make an impact -->
<div class="bg-blue-900 text-white py-200 py-lg-300 px-200">
<div class="container px-0">
<div class="row">
<div
class="col col-12 col-md-5 col-lg-4 font-size-200 font-size-md-400 font-weight-bold mb-150 mb-md-0">
{{ content.banner.headline }}
<br />
{{ content.banner.subHeadline }}
</div>
<div class="col col-12 col-md-7 col-lg-8">
{{ content.banner.body }}
</div>
</div>
</div>
</div>
<!-- Make an impact -->
<div class="bg-blue-800 py-200 pt-lg-200 pb-lg-150 px-200">
<div class="container px-0">
<div class="row">
<!-- Link columns -->
<div class="col col-12 col-lg-8 order-lg-1 text-white">
<div class="row">
<div
v-for="column in content.columns"
:key="column.title"
class="col col-6 col-md-3 mb-100 mb-lg-0">
<ul class="list-unstyled mb-lg-0">
<li class="font-weight-bold font-size-75 font-size-md-100 mb-100 mb-lg-50">
{{ column.title }}
</li>
<li
v-for="link in column.links"
:key="link.text"
class="mt-0 mt-lg-25 mb-100 mb-lg-50 font-size-75">
<es-nav-bar-link
:href="link.url"
:target="link.newTab ? '_blank' : null"
class="text-reset">
{{ link.text }}
</es-nav-bar-link>
</li>
</ul>
</div>
</div>
</div>
<!-- Link columns -->
<!-- Logo and Social-->
<div class="col col-12 col-lg-4 order-lg-0">
<es-nav-bar-link
class="d-block mb-150 d-flex justify-content-center justify-content-lg-start"
:href="content.home.link">
<span class="sr-only">
{{ content.home.name }}
</span>
<div class="es-footer-logo">
<slot name="logo" />
</div>
</es-nav-bar-link>
<!-- Social icons -->
<div class="d-flex text-white justify-content-center justify-content-lg-start">
<es-nav-bar-link
v-for="(iconLink, index) in content.socialLinks"
:key="iconLink.text"
class="text-reset"
:class="{ 'mr-150': index < content.socialLinks.length - 1 }"
:href="iconLink.url"
target="_blank">
<span class="sr-only">{{ iconLink.text }}</span>
<component :is="iconLink.icon" />
</es-nav-bar-link>
</div>
<!-- Social icons -->
</div>
<!-- Logo and Social -->
</div>
</div>
</div>
<div class="bg-blue-700 text-blue-50 px-200 py-100">
<div class="container px-0">
<!-- Trademark Info -->
<p class="font-size-75">
{{ content.trademarkText }}
</p>
<p class="mb-200 font-size-75">
{{ copyrightText }}
</p>
<!-- Trademark Info -->
<!-- Legal -->
<hr class="border-top border-blue-500 m-0" />
<div class="row justify-content-center pt-100">
<div
v-for="link in content.legalLinks"
:key="link.text"
class="col col-6 col-lg-auto font-size-75 font-weight-semibold font-size-md-50 font-weight-md-normal mt-25 mb-50 px-lg-300">
<es-nav-bar-link
:href="link.url"
class="text-reset font-weight-normal">
{{ link.text }}
</es-nav-bar-link>
</div>
</div>
<!-- Legal -->
</div>
</div>
<div class="bg-blue-50 px-200 py-100">
<div class="container px-0">
<!-- DOE -->
<div class="d-lg-flex align-items-end">
<!-- eslint-disable-next-line -->
<img
:src="content.departmentOfEnergy.logoUrl"
alt="department of energy logo"
aria-hidden="true"
class="mr-100 mb-100 mb-lg-0"
width="99"
height="24" />
<p class="mb-0 font-size-75 font-weight-normal font-weight-lg-semibold">
<es-nav-bar-link
:href="content.departmentOfEnergy.learnMore.link"
target="_blank"
class="text-blue-900">
{{ content.departmentOfEnergy.learnMore.text }}
</es-nav-bar-link>
</p>
</div>
<!-- DOE -->
</div>
</div>
</div>
</template>
67 changes: 67 additions & 0 deletions es-ds-components/components/es-nav-bar-account-menu.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<script lang="js">
export default {
name: 'EsNavBarAccountMenu',
props: {
authItems: {
type: Array,
default: () => [],
},
loggedOut: {
type: Object,
required: true,
},
},
};
</script>

<template>
<div class="icon-dropdown">
<div class="nav-item">
<div class="nav-link dropdown-toggle d-none d-lg-flex flex-nowrap py-100">
<icon-person
class="align-self-center account-icon"
width="20px"
height="20px" />
<span class="sr-only">
{{ loggedOut.menuButtonText }}
</span>
</div>
<div class="menu">
<ul
class="loggedIn dropdown-menu account-menu rounded mt-0 py-100 list-unstyled"
style="display: none">
<li
v-for="item in authItems"
:key="item.name">
<es-nav-bar-link
class="dropdown-item nav-link"
:href="item.link">
<span class="mx-50">
{{ item.name }}
</span>
</es-nav-bar-link>
</li>
</ul>
<ul
class="loggedOut dropdown-menu account-menu rounded mt-0"
style="display: none">
<li class="d-flex justify-content-center">
<es-button
:href="loggedOut.signIn.link"
class="m-100 w-100 text-white font-weight-bold">
{{ loggedOut.signIn.name }}
</es-button>
</li>
<li class="d-flex justify-content-center">
<es-button
:href="loggedOut.createAccount.link"
:outline="true"
class="mx-100 w-100 font-weight-bold">
{{ loggedOut.createAccount.name }}
</es-button>
</li>
</ul>
</div>
</div>
</div>
</template>
60 changes: 60 additions & 0 deletions es-ds-components/components/es-nav-bar-featured-article.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<script lang="js">
export default {
name: 'EsNavBarFeaturedArticle',
props: {
eyebrow: {
type: String,
required: true,
},
link: {
type: String,
required: true,
},
newTab: {
type: Boolean,
default: false,
},
name: {
type: String,
required: true,
},
image500: {
type: String,
required: true,
},
imageAlt: {
type: String,
default: '',
},
},
computed: {
graphicId() {
return this.name.replace(/\s/g, '-').replace(/[^a-zA-Z]/g, '');
},
},
};
</script>

<template>
<div class="dropdown-cta-right">
<es-nav-bar-link
class="d-block cta-link text-gray-900 text-decoration-none"
:href="link"
:target="newTab ? '_blank' : null"
:title="name">
<nuxt-img
:id="graphicId"
class="featured-article-image mb-100 w-100 rounded"
:alt="imageAlt"
loading="lazy"
:src="image500" />
<div class="eyebrow mb-50 link-name">
{{ eyebrow }}
</div>

<p class="font-weight-bold link-subheading">
{{ name }}
</p>
</es-nav-bar-link>
</div>
</template>
27 changes: 27 additions & 0 deletions es-ds-components/components/es-nav-bar-link.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<script setup>
// specific workaround for getting a reference to an auto-imported but not globally registered
// component like NuxtLink, so that it can be used in a <component :is=""> context.
// this resolves to an import statement, according to:
// https://github.com/nuxt/nuxt/issues/13659#issuecomment-1573568006
const NuxtLink = resolveComponent('NuxtLink');
const props = defineProps({
href: {
type: String,
default: '',
},
tag: {
type: String,
default: 'nuxt-link',
},
});
</script>

<template>
<component
:is="props.tag === 'nuxt-link' ? NuxtLink : props.tag"
:href="props.href"
v-bind="$attrs">
<slot />
</component>
</template>
Loading

0 comments on commit 7f4c434

Please sign in to comment.