Skip to content

Commit

Permalink
Feature: EDU header and footer (#497)
Browse files Browse the repository at this point in the history
* adding edu main navigation desktop and mobile

* showing social icons in defaultTheme NavMobile only

* minor cleanup

* edu modifications to TheFooter

* removing unneeded stories

* adding edu social links to footer

* updating a header in the edu footer

* minor cleanup

* removing iniline test
  • Loading branch information
stephiescastle authored Jul 18, 2024
1 parent 8658e80 commit 83e8262
Show file tree
Hide file tree
Showing 21 changed files with 881 additions and 116 deletions.
2 changes: 1 addition & 1 deletion apps/vue-storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"prepare": "pnpm prepare:public && pnpm prepare:fontcss",
"prepare:public": "cp -R ./node_modules/@explorer-1/common/src/public/explorer-1/ ./public/explorer-1",
"prepare:fontcss": "cp ./node_modules/@explorer-1/common/src/scss/_fonts.scss ./public/css/font-face.css",
"storybook": "storybook dev -c .storybook -p 6006 --ci --force-build-preview",
"storybook": "storybook dev -c .storybook -p 6006 --ci",
"build": "storybook build -c .storybook -o storybook_compiled NODE_ENV='production'",
"percy": "percy storybook http://localhost:6006",
"percy:dry-run": "percy storybook http://localhost:6006 --dry-run",
Expand Down
24 changes: 18 additions & 6 deletions packages/common/tailwind.colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,16 +140,19 @@ export const socialColors = {
// custom css vars
export const themeVariantColors = {
primary: 'var(--color-primary)',
'primary-lighter': 'var(--color-primary-lighter)',
'primary-light': 'var(--color-primary-light)',
'primary-dark': 'var(--color-primary-dark)',
'primary-darker': 'var(--color-primary-darker)',
'primary-hover': 'var(--color-primary-dark)',
secondary: 'var(--color-secondary)',
'secondary-lighter': 'var(--color-secondary-lighter)',
'secondary-light': 'var(--color-secondary-light)',
'secondary-dark': 'var(--color-secondary-dark)',
'secondary-darker': 'var(--color-secondary-darker)',
'secondary-hover': 'var(--color-secondary-dark)',
action: 'var(--color-action)',
'action-lighter': 'var(--color-action-lighter)',
'action-light': 'var(--color-action-light)',
'action-dark': 'var(--color-action-dark)',
'action-darker': 'var(--color-action-darker)',
Expand All @@ -160,44 +163,53 @@ export const themeVariantColors = {
export const ThemeWww = {
default: {
'--color-primary': foundationColors['jpl-red'],
'--color-primary-lighter': foundationColors['jpl-red-lighter'],
'--color-primary-light': foundationColors['jpl-red-light'],
'--color-primary-dark': foundationColors['jpl-red-dark'],
'--color-primary-darker': foundationColors['jpl-red-darker'],
'--color-secondary': 'var(--color-primary)',
'--color-secondary-lighter': 'var(--color-primary-lighter)',
'--color-secondary-light': 'var(--color-primary-light)',
'--color-secondary-dark': 'var(--color-primary-dark)',
'--color-secondary-darker': 'var(--color-primary-darker)',
'--color-action': 'var(--color-primary)',
'--color-action-lighter': 'var(--color-primary-lighter)',
'--color-action-light': 'var(--color-primary-light)',
'--color-action-dark': 'var(--color-primary-dark)',
'--color-action-darker': 'var(--color-primary-darker)'
},
dark: {
'--color-primary': foundationColors['jpl-red-light'],
'--color-primary-lighter': foundationColors['jpl-red-lighter'],
'--color-primary-light': foundationColors['jpl-red-light'],
'--color-primary-dark': foundationColors['jpl-red'],
'--color-primary-darker': foundationColors['jpl-red-dark'],
'--color-secondary': 'var(--color-primary)',
'--color-secondary-lighter': 'var(--color-primary-lighter)',
'--color-secondary-light': 'var(--color-primary-light)',
'--color-secondary-dark': 'var(--color-primary-dark)',
'--color-secondary-darker': 'var(--color-primary-darker)',
'--color-action': 'var(--color-primary)',
'--color-action-lighter': 'var(--color-primary-lighter)',
'--color-action-light': 'var(--color-primary-light)',
'--color-action-dark': 'var(--color-primary-dark)',
'--color-action-darker': 'var(--color-primary-darker)'
},
gray: {
'--color-primary': foundationColors['jpl-red-dark'],
'--color-primary-lighter': foundationColors['jpl-red-light'],
'--color-primary-light': foundationColors['jpl-red'],
'--color-primary-dark': foundationColors['jpl-red-darker'],
'--color-primary-darker': foundationColors['jpl-red-darker'],
'--color-secondary': 'var(--color-primary)',
'--color-secondary-light': 'var(--color-primary-light)',
'--color-secondary-dark': 'var(--color-primary-dark)',
'--color-secondary': 'var(--color-secondary-dark)',
'--color-secondary-lighter': 'var(--color-primary-light)',
'--color-secondary-light': 'var(--color-primary)',
'--color-secondary-dark': 'var(--color-primary-darker)',
'--color-secondary-darker': 'var(--color-primary-darker)',
'--color-action': 'var(--color-primary)',
'--color-action-light': 'var(--color-primary-light)',
'--color-action-dark': 'var(--color-primary-dark)',
'--color-action': 'var(--color-action-dark)',
'--color-action-lighter': 'var(--color-action-light)',
'--color-action-light': 'var(--color-action)',
'--color-action-dark': 'var(--color-primary-darker)',
'--color-action-darker': 'var(--color-primary-darker)'
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/vue/lib/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ import MissionDetailStats from './../src/components/MissionDetailStats/MissionDe
import MissionDetailStreamfield from './../src/components/MissionDetailStreamfield/MissionDetailStreamfield.vue'
import MixinAnimationCaret from './../src/components/MixinAnimationCaret/MixinAnimationCaret.vue'
import MixinCarousel from './../src/components/MixinCarousel/MixinCarousel.vue'
import MixinDropdownToggle from './../src/components/MixinDropdownToggle/MixinDropdownToggle.vue'
import NavDropdownToggle from './../src/components/NavDropdownToggle/NavDropdownToggle.vue'
import MixinFancybox from './../src/components/MixinFancybox/MixinFancybox.vue'
import MixinVideoBg from './../src/components/MixinVideoBg/MixinVideoBg.vue'
import NavDesktop from './../src/components/NavDesktop/NavDesktop.vue'
Expand Down Expand Up @@ -363,7 +363,7 @@ export {
MissionDetailStreamfield,
MixinAnimationCaret,
MixinCarousel,
MixinDropdownToggle,
NavDropdownToggle,
MixinFancybox,
MixinVideoBg,
NavDesktop,
Expand Down
20 changes: 10 additions & 10 deletions packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="NavDesktopDropdown">
<MixinDropdownToggle
<NavDropdownToggle
v-click-outside="closeDropdown"
:aria-expanded="dropdownVisible ? true : false"
class="group relative z-20 px-4 font-medium border-t-2 border-transparent"
Expand All @@ -16,7 +16,7 @@
>
<slot name="dropdownLabel">Dropdown</slot>
</span>
</MixinDropdownToggle>
</NavDropdownToggle>

<transition name="navfade">
<div
Expand All @@ -39,12 +39,12 @@
import { defineComponent } from 'vue'
import { mapStores } from 'pinia'
import { useHeaderStore } from './../../store/header'
import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
export default defineComponent({
name: 'NavDesktopDropdown',
components: {
MixinDropdownToggle
NavDropdownToggle
},
props: {
parentScrolled: {
Expand Down Expand Up @@ -125,27 +125,27 @@ export default defineComponent({
&.-open {
> span {
@apply border-jpl-red;
@apply border-primary edu:border-white;
.-transparent & {
@apply border-white;
}
.-transparent.-scrolled & {
@apply border-jpl-red;
@apply border-primary edu:border-white;
}
}
}
&:hover {
> span {
@apply border-jpl-red;
@apply border-primary edu:border-white;
.-transparent & {
@apply border-white;
}
.-transparent.-scrolled & {
@apply border-jpl-red;
@apply border-primary edu:border-white;
}
}
}
Expand All @@ -154,14 +154,14 @@ export default defineComponent({
&.-active {
> button {
> span {
@apply border-jpl-red font-bold;
@apply border-primary edu:border-white font-bold;
.-transparent & {
@apply border-white;
}
.-transparent.-scrolled & {
@apply border-jpl-red;
@apply border-primary edu:border-white;
}
&.hasSecondary {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div
v-if="data"
class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 3xl:px-0 px-4 py-10 text-white"
class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 edu:bg-gradient-to-r edu:bg-transparent edu:from-black/[.98] edu:to-jpl-violet/[.98] edu:to-90% 3xl:px-0 px-4 py-10 text-white"
>
<div
v-if="data.menuColumns"
Expand Down
186 changes: 186 additions & 0 deletions packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
import { MenuHighlightColumnData } from './../NavHighlight/NavHighlight.stories'
import { MenuLinkColumnWithHeaderData } from './../NavLinkList/NavLinkList.stories'
import NavDesktop from './NavDesktopEdu.vue'
import NavDesktopTopHat from './../NavDesktop/NavDesktopTopHat.vue'
import NavDesktopDropdown from './../NavDesktop/NavDesktopDropdown.vue'
import NavDesktopDropdownContent from './../NavDesktop/NavDesktopDropdownContent.vue'
import NavDesktopDropdownMore from './../NavDesktop/NavDesktopDropdownMore.vue'

export default {
title: 'Navigation/Headers/EDU/NavDesktopEdu',
component: NavDesktop,
excludeStories: /.*Data$/,
parameters: {
viewMode: 'canvas'
}
}

export const NavDesktopTopHatData = {
topHat: [
{
linkPage: {
title: 'Home',
url: '/'
},
title: 'JPL',
path: null
},
{
linkPage: null,
title: 'Career',
path: 'https://jpl.jobs/'
},
{
linkPage: null,
title: 'Science and Technology',
path: 'https://scienceandtechnology.jpl.nasa.gov/'
}
]
}

// combined dropdown data
export const NavDesktopDropdownContentData = {
blockType: 'MenuPanel',
titleLink: {
linkPage: {
title: 'About',
url: '/about/'
},
title: null
},
menuColumns: [
MenuHighlightColumnData,
{
blockType: 'MenuDescriptionColumn',
description: 'Lorem ipsum dolor sit amet.',
title: 'About'
},
{
...MenuLinkColumnWithHeaderData,
heading: null,
headingPage: null
},
{
...MenuLinkColumnWithHeaderData,
heading: null,
headingPage: null
}
]
}
// combined dropdown data for "more" menu
export const NavDesktopDropdownMoreData = {
blockType: 'MenuMorePanel',
titleText: 'More',
strapline:
'JPL is a unique research facility that carries out robotic space and Earth science missions.',
menuColumns: [
{
blockType: 'MenuDescriptionColumn',
description: 'Lorem ipsum dolor sit amet.',
title: 'About'
},
{
...MenuLinkColumnWithHeaderData,
heading: 'More from JPL',
headingPage: null
},
{
...MenuLinkColumnWithHeaderData,
heading: 'Explore Topics',
headingPage: null
},
{
blockType: 'MenuMoreHighlightsColumn',
heading: 'Discover',
headingPage: null,
highlights: [MenuHighlightColumnData, MenuHighlightColumnData]
}
]
}

// combined header data // desktop and mobile

export const NavDesktopData = {
breadcrumb:
'{"/": [{"path": "http://www.jpl.nasa.gov/", "title": "Asteroid watch"}, {"path": "http://www.jpl.nasa.gov/", "title": "Asteroid fast facts"}, {"path": "http://www.jpl.nasa.gov/", "title": "Meteor shower viewing guide"}, {"path": "http://www.jpl.nasa.gov/", "title": "Yeoman\'s top 10"}, {"path": "http://www.jpl.nasa.gov/", "title": "Glossary of space rocks"}, {"path": "/robotics-at-jpl/", "title": "Robotics"}, {"path": "http://www.jpl.nasa.gov/", "title": "Apps"}, {"path": "/jpl-life/", "title": "JPL Life"}, {"path": "/stars-and-galaxies/", "title": "Stars and Galaxies"}, {"path": "/exoplanets/", "title": "Exoplanets"}, {"path": "/solar-system/", "title": "Solar System"}, {"path": "/asteroids/", "title": "Asteroids"}, {"path": "/comets/", "title": "Comets"}, {"path": "/technology/", "title": "Technology"}, {"path": "/mars/", "title": "Mars"}, {"path": "/earth/", "title": "Earth"}, {"path": "/climate-change/", "title": "Climate Change"}, {"path": "/earthquakes/", "title": "Earthquakes"}, {"path": "/weather/", "title": "Weather"}, {"path": "/robotics/", "title": "Robotics"}], "/missions/": [{"path": "/missions/", "title": "Current"}, {"path": "/missions/", "title": "Past"}, {"path": "/missions/", "title": "Future"}, {"path": "/missions/", "title": "Proposed"}, {"path": "/missions/", "title": "All"}], "/news/": [{"path": "/news/", "title": "All news"}, {"path": "/news/", "title": "Press kits"}, {"path": "/news/", "title": "Fact sheets"}, {"path": "/news/", "title": "Media Information"}, {"path": "/news/", "title": "JPL newsletter"}]}',
...NavDesktopTopHatData,
primaryNavigation: [
NavDesktopDropdownContentData,
{
...NavDesktopDropdownContentData,
titleLink: {
linkPage: {
title: 'Missions',
url: '/missions/'
},
title: null
},
menuColumns: [
MenuHighlightColumnData,
{
blockType: 'MenuDescriptionColumn',
description: 'Lorem ipsum dolor sit amet.',
title: 'Missions'
},
{
...MenuLinkColumnWithHeaderData,
heading: null,
headingPage: null
},
{
...MenuLinkColumnWithHeaderData,
heading: null,
headingPage: null
}
]
},
{
...NavDesktopDropdownContentData,
titleLink: {
linkPage: {
title: 'News',
url: '/news/'
},
title: null
}
},
{
...NavDesktopDropdownContentData,
titleLink: {
linkPage: {
title: 'Galleries',
url: '/galleries/'
},
title: null
}
},
{
...NavDesktopDropdownContentData,
titleLink: {
linkPage: {
title: 'Engage',
url: '/engage/'
},
title: null
}
}
]
}

export const BaseStory = {
name: 'NavDesktop',
args: {
data: NavDesktopData,
headerVisible: true,
scrolledUp: false,
scrollTop: 0,
invertOverride: false
},
render: (args) => ({
components: { NavDesktop },
setup() {
return { args }
},
template: `<NavDesktop v-bind="args" />`
})
}
Loading

0 comments on commit 83e8262

Please sign in to comment.