fix: header and footer feedback (#536)

* fixing violet-lighter color, add NASA OSTEM link * adding NASA OSTEM link to mobile nav for EDU * fixing alignment in NavHeading, linking Education in NasDesktopEdu to education homepage
nasa-jpl · Aug 7, 2024 · 349d362 · 349d362
1 parent 0c86c88
commit 349d362
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 29 deletions.
diff --git a/packages/common/tailwind.colors.ts b/packages/common/tailwind.colors.ts
@@ -217,6 +217,7 @@ export const ThemeWww = {
 export const ThemeEdu = {
   default: {
     '--color-primary': foundationColors['jpl-violet'],
+    '--color-primary-lighter': foundationColors['jpl-violet-lighter'],
     '--color-primary-light': foundationColors['jpl-violet-light'],
     '--color-primary-dark': foundationColors['jpl-violet-dark'],
     '--color-primary-darker': foundationColors['jpl-violet-darker'],
@@ -231,6 +232,7 @@ export const ThemeEdu = {
   },
   dark: {
     '--color-primary': foundationColors['jpl-violet-light'],
+    '--color-primary-lighter': foundationColors['jpl-violet-lighter'],
     '--color-primary-light': foundationColors['jpl-violet-light'],
     '--color-primary-dark': foundationColors['jpl-violet'],
     '--color-primary-darker': foundationColors['jpl-violet-dark'],
@@ -245,6 +247,7 @@ export const ThemeEdu = {
   },
   gray: {
     '--color-primary': foundationColors['jpl-violet-dark'],
+    '--color-primary-lighter': foundationColors['jpl-violet-light'],
     '--color-primary-light': foundationColors['jpl-violet'],
     '--color-primary-dark': foundationColors['jpl-violet-darker'],
     '--color-primary-darker': foundationColors['jpl-violet-darker'],
@@ -262,6 +265,7 @@ export const ThemeEdu = {
 export const ThemeInternal = {
   default: {
     '--color-primary': foundationColors['jpl-teal'],
+    '--color-primary-lighter': foundationColors['jpl-teal-lighter'],
     '--color-primary-light': foundationColors['jpl-teal-light'],
     '--color-primary-dark': foundationColors['jpl-teal-dark'],
     '--color-primary-darker': foundationColors['jpl-teal-darker'],
@@ -276,6 +280,7 @@ export const ThemeInternal = {
   },
   dark: {
     '--color-primary': foundationColors['jpl-teal-light'],
+    '--color-primary-lighter': foundationColors['jpl-teal-lighter'],
     '--color-primary-light': foundationColors['jpl-teal-light'],
     '--color-primary-dark': foundationColors['jpl-teal'],
     '--color-primary-darker': foundationColors['jpl-teal-dark'],
@@ -290,6 +295,7 @@ export const ThemeInternal = {
   },
   gray: {
     '--color-primary': foundationColors['jpl-teal-dark'],
+    '--color-primary-lighter': foundationColors['jpl-teal-light'],
     '--color-primary-light': foundationColors['jpl-teal'],
     '--color-primary-dark': foundationColors['jpl-teal-darker'],
     '--color-primary-darker': foundationColors['jpl-teal-darker'],

diff --git a/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue b/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
@@ -3,7 +3,7 @@
     <NavDropdownToggle
       v-click-outside="closeDropdown"
       :aria-expanded="dropdownVisible ? true : false"
-      class="group relative z-20 px-4 font-medium border-t-2 border-transparent"
+      class="group relative z-20 px-4 font-medium border-t-2 border-transparent edu:text-sm edu:xl:text-base edu:px-2 edu:xl:px-4"
       :class="{
         '-open': dropdownVisible
       }"

diff --git a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.stories.js b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.stories.js
@@ -56,16 +56,8 @@ export const NavDesktopDropdownContentData = {
       description: 'Lorem ipsum dolor sit amet.',
       title: 'About'
     },
-    {
-      ...MenuLinkColumnWithHeaderData,
-      heading: null,
-      headingPage: null
-    },
-    {
-      ...MenuLinkColumnWithHeaderData,
-      heading: null,
-      headingPage: null
-    }
+    MenuLinkColumnWithHeaderData,
+    MenuLinkColumnWithHeaderData
   ]
 }
 // combined dropdown data for "more" menu
@@ -106,12 +98,11 @@ export const NavDesktopData = {
     '{"/": [{"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',
+          title: 'K-12 Resources',
           url: '/missions/'
         },
         title: null
@@ -139,7 +130,7 @@ export const NavDesktopData = {
       ...NavDesktopDropdownContentData,
       titleLink: {
         linkPage: {
-          title: 'News',
+          title: 'Internships',
           url: '/news/'
         },
         title: null
@@ -149,7 +140,7 @@ export const NavDesktopData = {
       ...NavDesktopDropdownContentData,
       titleLink: {
         linkPage: {
-          title: 'Galleries',
+          title: 'News & Events',
           url: '/galleries/'
         },
         title: null
@@ -159,7 +150,7 @@ export const NavDesktopData = {
       ...NavDesktopDropdownContentData,
       titleLink: {
         linkPage: {
-          title: 'Engage',
+          title: 'About',
           url: '/engage/'
         },
         title: null

diff --git a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
@@ -25,8 +25,15 @@
           />
         </NavLogoLinks>
         <!-- site title -->
-        <div class="ml-3 pl-5 border-l border-white border-opacity-30 z-20">
-          <span class="text-white font-bold text-3xl">Education</span>
+        <div class="ml-2 pl-3 xl:ml-3 xl:pl-5 border-l border-white border-opacity-30 z-20">
+          <BaseLink
+            class="text-white font-bold text-2xl xl:text-3xl"
+            to="/edu/"
+            link-class="py-2"
+            variant="none"
+          >
+            Education
+          </BaseLink>
         </div>
         <!-- main nav with dropdowns -->
         <nav
@@ -51,6 +58,16 @@
                 <NavDesktopDropdownContent :data="item" />
               </NavDesktopDropdown>
             </template>
+            <BaseLink
+              href="https://www.nasa.gov/learning-resources/"
+              variant="none"
+              class="NavDesktopLink group relative z-20 font-medium border-t-2 border-transparent text-sm xl:text-base px-2 xl:px-4"
+              link-class="inline-block py-2 transition-colors duration-100 ease-in border-b-2 border-transparent group-hover:border-white flex flex-wrap-none items-center"
+              external-target-blank
+            >
+              NASA OSTEM
+              <IconExternal class="text-sm -mt-0.5 ml-2" />
+            </BaseLink>
           </div>
           <!-- search -->
           <div
@@ -93,10 +110,12 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
+import BaseLink from './../BaseLink/BaseLink.vue'
 import NavDesktopDropdown from './../NavDesktop/NavDesktopDropdown.vue'
 import NavDesktopDropdownContent from './../NavDesktop/NavDesktopDropdownContent.vue'
 import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
 import NavSearchForm from './../NavSearchForm/NavSearchForm.vue'
+import IconExternal from './../Icons/IconExternal.vue'
 import IconSearch from './../Icons/IconSearch.vue'
 import IconClose from './../Icons/IconClose.vue'
 import type { LinkObject, BreadcrumbObject } from './../../utils/mixins'
@@ -112,12 +131,14 @@ import {
 export default defineComponent({
   name: 'NavDesktop',
   components: {
+    BaseLink,
     NavDesktopDropdown,
     NavDesktopDropdownContent,
     NavLogoLinks,
     NavSearchForm,
     IconSearch,
-    IconClose
+    IconClose,
+    IconExternal
   },
   props: {
     data: {
@@ -278,11 +299,6 @@ export default defineComponent({
   .main-navigation {
     > * {
       @apply text-white;
-
-      .NavDesktopDropdown > button {
-        // mimics .text-contrast class
-        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-      }
     }
   }
 }

diff --git a/packages/vue/src/components/NavHeading/NavHeading.stories.js b/packages/vue/src/components/NavHeading/NavHeading.stories.js
@@ -6,7 +6,7 @@ export default {
   component: NavHeading,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="p-8 bg-jpl-blue-darker"><story/></div>`
+      template: `<div id="storyDecorator" class="p-8 bg-jpl-blue-darker edu:bg-primary-dark"><story/></div>`
     })
   ],
   parameters: {

diff --git a/packages/vue/src/components/NavHeading/NavHeading.vue b/packages/vue/src/components/NavHeading/NavHeading.vue
@@ -7,7 +7,7 @@
       <BaseLink
         variant="none"
         class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4"
-        link-class="p-2"
+        link-class="px-2 block"
         :to="data.headingPage.url"
       >
         {{ data.heading }}

diff --git a/packages/vue/src/components/NavLinkList/NavLinkList.vue b/packages/vue/src/components/NavLinkList/NavLinkList.vue
@@ -12,7 +12,7 @@
       >
         <BaseLink
           variant="none"
-          class="block text-lg font-medium leading-tight text-white"
+          class="block text-base xl:text-lg font-medium leading-tight text-white"
           :href="item.path && !getRouterLink(item) ? item.path : undefined"
           :to="getRouterLink(item) ? getRouterLink(item) : undefined"
           link-class="can-hover:hover:underline inline-block px-2 py-3 -ml-2"

diff --git a/packages/vue/src/components/NavMobile/NavMobile.vue b/packages/vue/src/components/NavMobile/NavMobile.vue
@@ -87,6 +87,18 @@
                 :start-open="checkActive(item.titleLink) && !hasSecondary"
               />
             </template>
+            <template v-if="themeStore.isEdu">
+              <BaseLink
+                variant="none"
+                href="https://www.nasa.gov/learning-resources/"
+                class="group relative block w-full px-4 py-2 text-xl font-medium text-left"
+                link-class="flex flex-wrap-none overflow-visible whitespace-nowrap items-center py-0 pl-6 -ml-4 border-l-4 border-transparent"
+                external-target-blank
+              >
+                <span class="pr-2">NASA OSTEM</span>
+                <IconExternal class="shrink-0 text-sm -mt-0.5" />
+              </BaseLink>
+            </template>
           </nav>
           <div class="pl-8">
             <nav
@@ -122,6 +134,8 @@ import { useHeaderStore } from './../../store/header'
 import { useThemeStore } from './../../store/theme'
 import IconMenu from './../Icons/IconMenu.vue'
 import IconClose from './../Icons/IconClose.vue'
+import IconExternal from './../Icons/IconExternal.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
 import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
 import NavMobileDropdown from './../NavMobile/NavMobileDropdown.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
@@ -140,7 +154,9 @@ export default defineComponent({
     NavMobileDropdown,
     NavMobileLink,
     NavSocial,
-    NavSearchForm
+    NavSearchForm,
+    BaseLink,
+    IconExternal
   },
   props: {
     data: {

diff --git a/packages/vue/src/components/TheFooter/TheFooter.vue b/packages/vue/src/components/TheFooter/TheFooter.vue
@@ -26,6 +26,18 @@
               {{ getLinkText(link) }}
             </BaseLink>
           </div>
+          <template v-if="themeStore.isEdu">
+            <BaseLink
+              variant="none"
+              href="https://www.nasa.gov/learning-resources/"
+              class="text-subtitle text-blue edu:text-white mb-3"
+              link-class="flex flex-wrap-none overflow-visible whitespace-nowrap items-center"
+              external-target-blank
+            >
+              <span class="pr-2">NASA OSTEM</span>
+              <IconExternal class="shrink-0 text-sm -mt-0.5" />
+            </BaseLink>
+          </template>
         </div>
       </div>
       <!-- footer extras -->
@@ -180,6 +192,7 @@ import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from './../../store/theme'
 import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
+import IconExternal from './../Icons/IconExternal.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
 import NavSocial from './../NavSocial/NavSocial.vue'
@@ -193,7 +206,8 @@ export default defineComponent({
     BaseButton,
     NavSocial,
     TheFooterSignUp,
-    LogoCaltech
+    LogoCaltech,
+    IconExternal
   },
   props: {
     data: {