@explorer-1/vue 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
     "vue": "^3.4.21",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.1"
+    "@explorer-1/common": "1.1.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseButton/BaseButton.vue

@@ -94,7 +94,7 @@ export default defineComponent({
 <template>
   <component
     :is="tag"
-    class="BaseButton text-contrast-none"
+    class="BaseButton text-contrast-none print:border print:!border-gray-dark print:text-center"
     :class="variantClass"
     :aria-label="ariaLabel"
     :disabled="disabled"

package/src/components/BaseImage/BaseImage.vue

@@ -103,7 +103,7 @@ export default defineComponent({
     <img
       v-if="src"
       ref="BaseImage"
-      class="BaseImage"
+      class="BaseImage print:border print:border-gray-mid"
       :class="computedClass"
       :data-src="src"
       :data-srcset="srcset"

package/src/components/BaseTag/BaseTag.vue

@@ -11,7 +11,7 @@ const variantMap: Attributes = {
 const sizeMap: Attributes = {
   sm: 'text-xs border-t-2 py-1 px-2.5',
   md: 'text-xs lg:text-base border-t py-1.5 px-3.5',
-  lg: 'text-base lg:text-lg border-t py-1.5 px-5'
+  lg: 'text-base lg:text-lg border-t pt-1.5 pb-1 px-5'
 }
 
 interface BaseTagProps {
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<BaseTagProps>(), {
 <template>
   <p
     :class="`${variantMap[props.variant]} ${sizeMap[props.size]}`"
-    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase"
+    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase print:border-none print:px-0"
   >
     <slot />
     <span class="sr-only">.</span>

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -5,7 +5,7 @@
         v-if="data.url"
         ref="BlockIframeEmbed"
         loading="lazy"
-        class="w-full border-none"
+        class="w-full border-none print:!border print:border-gray-dark"
         :class="{ lazyload: !lazyNative }"
         :title="data.title"
         :data-src="data.url"
@@ -18,6 +18,7 @@
     <template v-else>
       <BaseImagePlaceholder
         v-if="data.url"
+        class="print:border print:border-gray-dark"
         aspect-ratio="16:9"
         dark-mode
       >
@@ -39,7 +40,7 @@
     </template>
     <div
       v-if="data.caption && data.caption.length > 2"
-      class="lg:px-0 p-4 pb-0"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

package/src/components/BlockImage/BlockImageStandard.vue

@@ -98,7 +98,7 @@ export default defineComponent({
     </MixinFancybox>
     <div
       v-if="theData && hasCaptionArea"
-      class="lg:px-0 p-4 pb-0"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="theData" />
     </div>

package/src/components/BlockKeyPoints/BlockKeyPoints.vue

@@ -7,11 +7,11 @@
       class="mb-5"
       :data="{ heading: data.heading }"
     />
-    <ul>
+    <ul class="print:!list-disc">
       <li
         v-for="(item, index) in data.listItem"
         :key="index"
-        class="flex"
+        class="flex print:!list-item print:ml-4"
         :class="index + 1 === data.listItem.length ? 'mb-0' : 'mb-4'"
       >
         <BlockText

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -208,6 +208,7 @@ export default defineComponent({
     .BlockLinkCard__CardContent,
     .BlockLinkCard__CardArrow {
       @apply px-6;
+      @apply print:px-0;
     }
     .BaseImagePlaceholder {
       @apply bg-gray-mid-dark;

package/src/components/BlockRelatedLinks/BlockRelatedLinks.vue

@@ -8,36 +8,38 @@
     >
       {{ data.heading }}
     </BaseHeading>
-    <div
+    <ul
       v-for="(link, index) in data.links"
       :key="index"
-      class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2"
+      class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2 print:list-disc print:ml-4"
     >
-      <template v-if="link.externalLink">
-        <RelatedLink
-          variant="external"
-          :href="link.externalLink"
-        >
-          {{ link.text }}
-        </RelatedLink>
-      </template>
-      <template v-else-if="link.document">
-        <RelatedLink
-          variant="document"
-          :href="link.document.url"
-        >
-          {{ link.text }}
-        </RelatedLink>
-      </template>
-      <template v-else-if="link.page">
-        <RelatedLink
-          variant="page"
-          :to="link.page.url"
-        >
-          {{ link.text }}
-        </RelatedLink>
-      </template>
-    </div>
+      <li>
+        <template v-if="link.externalLink">
+          <RelatedLink
+            variant="external"
+            :href="link.externalLink"
+          >
+            {{ link.text }}
+          </RelatedLink>
+        </template>
+        <template v-else-if="link.document">
+          <RelatedLink
+            variant="document"
+            :href="link.document.url"
+          >
+            {{ link.text }}
+          </RelatedLink>
+        </template>
+        <template v-else-if="link.page">
+          <RelatedLink
+            variant="page"
+            :to="link.page.url"
+          >
+            {{ link.text }}
+          </RelatedLink>
+        </template>
+      </li>
+    </ul>
   </div>
 </template>
 <script lang="ts">

package/src/components/BlockRelatedLinks/RelatedLink.vue

@@ -3,16 +3,16 @@
     :is="tag"
     :to="to"
     :href="href"
-    class="bg-gray-light group text-body-lg flex items-center justify-between px-4 py-4 cursor-pointer"
+    class="bg-gray-light group text-body-lg flex items-center justify-between px-4 py-4 cursor-pointer print:px-0 print:py-0 print:block"
     :target="target"
     rel="noopener"
   >
-    <span class="can-hover:group-hover:underline min-w-12 block w-auto break-words">
+    <span class="can-hover:group-hover:underline min-w-12 block w-auto break-words print:inline">
       <slot />
     </span>
     <component
       :is="icon"
-      class="text-action xl:mx-4 flex-none ml-4 text-2xl leading-normal"
+      class="text-action xl:mx-4 flex-none ml-4 text-2xl leading-normal print:inline print:text-sm print:mx-2"
       :class="variant === 'external' ? 'text-lg' : 'text-3xl'"
     />
   </component>

package/src/components/BlockVideo/BlockVideo.vue

@@ -10,7 +10,7 @@
 
     <div
       v-if="(data.caption && data.caption.length > 2) || data.credit"
-      class="lg:px-0 p-4 pb-0"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -11,7 +11,7 @@
     </BaseImagePlaceholder>
     <div
       v-if="data.caption"
-      class="lg:px-0 p-4"
+      class="lg:px-0 p-4 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

package/src/components/CalendarButton/CalendarButton.vue

@@ -64,13 +64,18 @@ export default defineComponent({
       options: undefined
     }
   },
+  computed: {
+    icsDescription() {
+      return `${(this.description ? this.description + '\n\n' : '') + window?.location.href}`
+    }
+  },
 
   mounted() {
     this.init()
   },
   methods: {
     init() {
-      let recurrence = {}
+      let recurrence = undefined
       if (this.endDatetime && this.isAllDay) {
         // Calculate how many full days
         const startDateDayjs = dayjs(this.startDatetime)
@@ -81,21 +86,15 @@ export default defineComponent({
 
       this.options = {
         title: this.title ? this.title : undefined,
-        location: this.location ? this.addSlashes(this.location) : undefined,
-        description: this.description ? this.description : undefined,
+        location: this.location ? this.location : undefined,
+        description: this.icsDescription,
         start: new Date(this.startDatetime),
         end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
         recurrence
       }
+
       this.icalendar = new ICalendar(this.options)
     },
-    addSlashes(string: string): string {
-      // Escape special characters COMMA, SEMI-COLON and BACKSLASH
-      // as temporary fix for this issue https://github.com/jshor/datebook/issues/179
-      // regex based of https://stackoverflow.com/a/770533
-      // eslint-disable-next-line
-      return string.replace(/[,;\\]/g, '\\$&').replace(/\u0000/g, '\\0')
-    },
     handleDownload() {
       const ics = this.icalendar.render()
       const blob = new Blob([ics], {

package/src/components/EventCard/EventCard.vue

@@ -65,12 +65,22 @@
             v-if="splitDate"
             class="hidden md:block absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
           >
-            <div class="font-extrabold text-6xl leading-tight tracking-wider">
-              {{ splitDate.day }}
-            </div>
-            <div class="text-subtitle">
-              {{ splitDate.monthAndYear }}
-            </div>
+            <template v-if="themeStore.isEdu">
+              <div class="font-extrabold text-6xl leading-tight tracking-wider">
+                {{ splitDate.month }}
+              </div>
+              <div class="text-subtitle">
+                {{ splitDate.year }}
+              </div>
+            </template>
+            <template v-else>
+              <div class="font-extrabold text-6xl leading-tight tracking-wider">
+                {{ splitDate.day }}
+              </div>
+              <div class="text-subtitle">
+                {{ splitDate.monthAndYear }}
+              </div>
+            </template>
           </div>
         </BaseImagePlaceholder>
       </div>
@@ -84,8 +94,11 @@ import { defineComponent } from 'vue'
 import {
   mixinFormatEventDates,
   mixinFormatSplitEventDates,
-  mixinFormatEventTimeInHoursAndMinutes
+  mixinFormatEventTimeInHoursAndMinutes,
+  type EventDateObject
 } from './../../utils/mixins'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -145,7 +158,8 @@ export default defineComponent({
     }
   },
   computed: {
-    splitDate(): { day: string; monthAndYear: string } | null {
+    ...mapStores(useThemeStore),
+    splitDate(): EventDateObject | null {
       if (this.startDate) {
         return mixinFormatSplitEventDates(this.startDate, this.endDate)
       }

package/src/components/EventDetailHero/EventDetailHero.vue

@@ -4,41 +4,55 @@
     class="EventDetailHero mb-10 md:mb-10 lg:mb-14 -mx-4 lg:mx-0"
   >
     <div class="hero">
-      <BaseImage
-        v-if="image.src"
-        :src="image.src.url"
-        :srcset="getSrcSet"
-        :width="image.src.width"
-        :height="image.src.height"
-        :alt="image.alt"
-        image-class="w-full h-auto"
-        object-fit-class="cover"
-        loading="lazy"
-      />
-      <div
-        v-if="startDateSplit"
-        class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+      <BaseImagePlaceholder
+        :aspect-ratio="constrain ? '16:9' : 'none'"
+        dark-mode
       >
-        <div class="font-extrabold text-6xl leading-tight tracking-wider">
-          {{ startDateSplit.day }}
+        <BaseImage
+          v-if="image.src"
+          :src="image.src.url"
+          :srcset="getSrcSet"
+          :width="image.src.width"
+          :height="image.src.height"
+          :alt="image.alt"
+          image-class="w-full h-auto"
+          object-fit-class="cover"
+          loading="lazy"
+        />
+        <div
+          v-if="startDateSplit || ongoing"
+          class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary print:hidden"
+        >
+          <template v-if="ongoing">
+            <div class="text-subtitle">Ongoing</div>
+          </template>
+          <template v-else>
+            <div class="font-extrabold text-6xl leading-tight tracking-wider uppercase">
+              {{ themeStore.isEdu ? startDateSplit?.month : startDateSplit?.day }}
+            </div>
+            <div class="text-subtitle">
+              {{ themeStore.isEdu ? startDateSplit?.year : startDateSplit?.monthAndYear }}
+            </div>
+          </template>
         </div>
-        <div class="text-subtitle">
-          {{ startDateSplit.monthAndYear }}
-        </div>
-      </div>
+      </BaseImagePlaceholder>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseImage from '../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from '../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import { mixinGetSrcSet, type EventDateObject } from './../../utils/mixins'
 import type { PropType } from 'vue'
 
 export default defineComponent({
   name: 'EventDetailHero',
   components: {
-    BaseImage
+    BaseImage,
+    BaseImagePlaceholder
   },
   props: {
     data: {
@@ -50,13 +64,23 @@ export default defineComponent({
       type: Object as PropType<EventDateObject | undefined>,
       required: true
     },
+    ongoing: {
+      type: Boolean,
+      default: false
+    },
     image: {
       type: Object,
       required: false,
       default: undefined
+    },
+    constrain: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     getSrcSet() {
       return this.image ? mixinGetSrcSet(this.image) : undefined
     }

package/src/components/HeroMedia/HeroMedia.vue

@@ -25,7 +25,7 @@
         </div>
         <div
           v-if="hasCaptionArea"
-          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto"
+          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
         >
           <button
             class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
@@ -44,7 +44,7 @@
       <div
         v-if="hasCaptionArea"
         :class="captionVisibilityClass"
-        class="max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto"
+        class="max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
       >
         <BaseImageCaption :data="theImageData || customCaption" />
       </div>

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -12,7 +12,7 @@
       <div
         v-if="heading || link"
         :class="colStart"
-        class="lg:pl-0 col-start-1 col-end-13 px-4 mb-1"
+        class="lg:pl-0 col-start-1 col-end-13 px-4 mb-1 print:px-0"
       >
         <div class="sm:flex flex-wrap items-center justify-between">
           <h2
@@ -35,7 +35,7 @@
       </div>
       <div
         :class="colStart"
-        class="lg:pl-0 sm:col-end-11 3xl:col-end-12 col-start-1 col-end-13 pl-4 overflow-x-visible"
+        class="lg:pl-0 sm:col-end-11 3xl:col-end-12 col-start-1 col-end-13 pl-4 print:pl-0 overflow-x-visible"
       >
         <!-- Slider main container -->
         <div

package/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
       }"

package/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

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -19,14 +19,29 @@
         <NavLogoLinks class="w-[17rem] z-20 flex flex-shrink-0 my-2 -ml-1">
           <img
             :src="LogoWhite"
+            class="print:hidden"
+            alt="JPL Logo"
+            width="324"
+            height="72"
+          />
+          <img
+            :src="LogoColor"
+            class="hidden print:block"
             alt="JPL Logo"
             width="324"
             height="72"
           />
         </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 +66,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,13 +118,16 @@
 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'
+import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
 import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import type { BreadcrumbPathObject } from '../../interfaces'
 import {
@@ -112,12 +140,14 @@ import {
 export default defineComponent({
   name: 'NavDesktop',
   components: {
+    BaseLink,
     NavDesktopDropdown,
     NavDesktopDropdownContent,
     NavLogoLinks,
     NavSearchForm,
     IconSearch,
-    IconClose
+    IconClose,
+    IconExternal
   },
   props: {
     data: {
@@ -158,7 +188,8 @@ export default defineComponent({
       // This is used in transition logic to avoid distracting animations on route changes
       // without this check, the nav would swoop in/out on a route change if it was visible before the route change occured (e.g. partially scrolled up on a page)
       scrolledCurrentPage: false,
-      LogoWhite: LogoWhite
+      LogoWhite: LogoWhite,
+      LogoColor: LogoColor
     }
   },
   computed: {
@@ -278,11 +309,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);
-      }
     }
   }
 }

package/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: {

package/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 }}