@explorer-1/vue 0.3.8 → 1.0.0

package/src/components/NavHighlight/NavHighlight.vue

@@ -35,7 +35,12 @@
         {{ customLabel || highlight.label }}
       </p>
       <span class="sr-only">.</span>
-      <p v-if="highlight.title">{{ highlight.title }}</p>
+      <p
+        v-if="highlight.title"
+        class="text-base"
+      >
+        {{ highlight.title }}
+      </p>
     </BaseLink>
   </div>
 </template>

package/src/components/NavJumpMenu/NavJumpMenuContent.vue

@@ -3,7 +3,7 @@
     <li
       v-for="(child, index) in item.children"
       :key="index"
-      class="text-base border-b border-gray-light"
+      class="text-base border-b border-gray-300"
     >
       <BaseLink
         :href="child.path"

package/src/components/NavLinkList/NavLinkList.vue

@@ -15,7 +15,7 @@
       >
         <BaseLink
           variant="none"
-          class="block text-base xl:text-lg font-medium leading-tight text-white"
+          class="block font-display 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"

package/src/components/NavMobile/NavMobile.stories.js

@@ -17,6 +17,7 @@ export default {
       }
     }
   },
+
   globals: {
     viewport: {
       value: 'mobile2',

package/src/components/NavMobile/NavMobile.vue

@@ -7,16 +7,14 @@
     >
       <!-- navbar -->
       <div class="relative w-full">
-        <div
-          class="h-18 flex w-full justify-between items-center px-5 edu:bg-gradient-to-r edu:from-black edu:to-primary edu:to-90% edu:bg-black"
-        >
+        <div class="h-18 flex w-full justify-between items-center px-5 edu:bg-primary-dark">
           <!-- branding -->
           <div class="flex items-center">
             <NavLogoLinks class="lg:p-0 w-72 z-20 p-2 pl-0 -ml-3 edu:w-[12rem]">
               <template v-if="themeStore.theme === 'ThemeEdu'">
                 <img
                   class="print:hidden"
-                  :src="LogoWhite"
+                  :src="LogoOutline"
                   alt="JPL Logo"
                   width="324"
                   height="72"
@@ -42,7 +40,7 @@
               class="-ml-1 pl-2 border-l border-white border-opacity-30 z-20 print:border-black"
             >
               <BaseLink
-                class="text-white font-bold text-xl pl-px"
+                class="text-white font-display font-bold text-xl pl-px"
                 to="/edu/"
                 variant="none"
               >
@@ -146,6 +144,7 @@ import { mapStores } from 'pinia'
 import { eventBus } from './../../utils/eventBus'
 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 LogoOutline from '@explorer-1/common/src/images/svg/logo-tribrand-outline.svg'
 import { useHeaderStore } from './../../store/header'
 import { useThemeStore } from './../../store/theme'
 import IconMenu from './../Icons/IconMenu.vue'
@@ -219,7 +218,8 @@ export default defineComponent({
       menuVisible: false,
       searchQuery: null,
       LogoColor,
-      LogoWhite
+      LogoWhite,
+      LogoOutline
     }
   },
   computed: {

package/src/components/NavMobile/NavMobileDropdown.vue

@@ -5,7 +5,7 @@
   >
     <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
-      class="group relative block w-full px-4 py-2 text-xl font-medium text-left"
+      class="group relative block w-full px-4 py-2 text-xl font-bold font-display text-left"
       :class="{
         '-open': dropdownVisible
       }"

package/src/components/NavMobile/NavMobileLink.vue

@@ -3,7 +3,7 @@
     v-if="data"
     variant="none"
     class="NavMobileLink"
-    :link-class="`flex items-center py-2 text-lg leading-tight ${linkClass}`"
+    :link-class="`flex items-center py-2 text-lg font-display leading-tight ${linkClass}`"
     :href="data.path && !getRouterLink(data) ? data.path : undefined"
     :to="getRouterLink(data) ? getRouterLink(data) : undefined"
     :exact="exact"

package/src/components/NavSecondary/NavSecondary.vue

@@ -13,10 +13,10 @@
   >
     <div
       class="w-full mx-auto"
-      :class="{ 'bg-gradient-to-r from-black to-primary bg-transparent to-90% text-white': invert }"
+      :class="{ 'bg-primary-dark text-white': invert }"
     >
       <div
-        :class="`nav-secondary-container edu:border-0 lg:container lg:px-0 lg:whitespace-normal lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap ${invert ? 'border-0' : 'border-t border-gray-mid text-gray-mid-dark border-opacity-50'}`"
+        :class="`nav-secondary-container edu:border-0 lg:container lg:px-0 lg:whitespace-normal lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-base font-medium whitespace-nowrap ${invert ? 'border-0' : 'border-t border-gray-mid text-gray-mid-dark border-opacity-50'}`"
       >
         <div class="lg:ml-0 2xl:-mr-3 lg:justify-end flex -ml-3">
           <template v-for="(item, index) in theBreadcrumb">

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-click-outside="closeDropdown"
-    class="NavSecondaryDropdown relative"
+    class="NavSecondaryDropdown relative font-display"
     :class="{
       'mr-auto': index === 0
     }"
@@ -121,11 +121,11 @@ export default defineComponent({
       return this.invert
         ? {
             'mr-auto text-white font-bold secondary-root': index === 0,
-            'text-white font-semibold mt-[.2rem]': index !== 0,
+            'text-white font-bold mt-[.2rem]': index !== 0,
             '-open': this.dropdownVisible
           }
         : {
-            'mr-auto text-primary font-semibold secondary-root': index === 0,
+            'mr-auto text-primary font-bold secondary-root': index === 0,
             'text-gray-dark font-medium mt-[.2rem]': index !== 0,
             '-open': this.dropdownVisible
           }

package/src/components/NavSecondary/NavSecondaryDropdownContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="NavSecondaryDropdownContent">
+  <ul class="NavSecondaryDropdownContent text-base">
     <li v-if="includeOverview">
       <BaseLink
         :to="item.path"
@@ -91,13 +91,13 @@ export default defineComponent({
   methods: {
     linkClass(item?: NavItemObject, isLast?: Boolean) {
       // default
-      let computedClass = 'py-2 lg:py-4'
+      let computedClass = 'pt-2 lg:pt-4'
       if (!item) {
         // if first (aka Overview)
-        computedClass = 'py-2 lg:pt-4 lg:pb-4'
+        computedClass = 'pt-2 lg:pt-4'
       } else if (item.children && item.children.length > 0) {
         // if has children
-        computedClass = 'pt-2 pb-1 lg:pt-4 lg:pb-2'
+        computedClass = 'pt-2 lg:pt-4'
       } else if (isLast) {
         // if the very last
         computedClass = 'py-2 lg:pt-4 lg:pb-6'
@@ -106,11 +106,11 @@ export default defineComponent({
     },
     nestedLinkClass(isLast: Boolean, parentIsLast: Boolean) {
       // default
-      let computedClass = 'pt-2 pb-1 lg:py-2'
+      let computedClass = 'pt-2 lg:pt-2'
       if (isLast) {
         // if the last
         if (!parentIsLast) {
-          computedClass = 'py-2 lg:pt-2 lg:pb-4'
+          computedClass = 'pt-2 lg:pt-2'
         } else {
           // the last of the last parent
           computedClass = 'pt-2 pb-3 lg:pt-2 lg:pb-6'

package/src/components/NavSecondary/NavSecondaryLink.vue

@@ -2,7 +2,7 @@
   <BaseLink
     :href="isExternal(item.path) ? item.path : undefined"
     :to="!isExternal(item.path) ? item.path : undefined"
-    link-class="block px-3 py-2"
+    link-class="block px-3 py-2 font-display"
     variant="none"
     class="NavSecondaryLink border-t-2 border-transparent"
     :class="baseLinkClasses(index)"
@@ -53,9 +53,9 @@ export default defineComponent({
       let rootClasses = 'mr-auto secondary-root'
       rootClasses = this.invert
         ? `${rootClasses} text-white font-bold -invert`
-        : `${rootClasses} text-primary font-semibold`
+        : `${rootClasses} text-primary font-bold`
       const regularClasses = this.invert
-        ? 'text-white -invert font-semibold'
+        ? 'text-white -invert font-bold'
         : 'text-gray-dark font-medium'
       return index === 0 ? rootClasses : regularClasses
     },

package/src/components/NavSocial/NavSocial.vue

@@ -4,12 +4,13 @@
       v-for="(item, index) in socialLinks"
       :key="index"
       :variant="dark ? 'dark' : 'social'"
-      class="-facebook w-12 h-12 text-2xl"
+      class="-facebook w-12 h-12 !text-2xl"
       :class="{
         '-facebook': item.facebook,
         '-twitter': item.twitter,
         '-instagram': item.instagram,
-        '-youtube': item.youtube
+        '-youtube': item.youtube,
+        '-mr-px': index !== socialLinks.length - 1
       }"
       :href="item.url"
       :aria-label="item.label"

package/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue

@@ -5,11 +5,7 @@
   >
     <!-- tabs -->
     <LayoutHelper indent="col-2">
-      <h2
-        class="text-gray-dark text-3xl lg:text-6xl font-semibold leading-normal tracking-normal uppercase mb-2 lg:mb-5"
-      >
-        More {{ series.title }} Episodes
-      </h2>
+      <h2 class="text-gray-dark text-h3 mb-2 lg:mb-5">More {{ series.title }} Episodes</h2>
 
       <ul class="flex flex-wrap mb-6 lg:mb-10">
         <li

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -5,7 +5,7 @@
     class="border-gray-light-mid col-span-3 pb-4 mb-4 border-b"
   >
     <!-- bucket key param -->
-    <legend class="md:mb-3 text-body-md mb-2 font-bold leading-normal tracking-wide">
+    <legend class="md:mb-3 text-body-md mb-2 font-display font-bold leading-normal">
       {{ groupTitle }}
     </legend>
     <div
@@ -49,7 +49,7 @@
                 "
                 class="form-check-label pl-2 tracking-normal align-middle"
               >
-                <span class="font-extrabold">{{
+                <span class="font-bold font-display">{{
                   prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key)
                 }}</span>
                 <span class="text-gray-mid-dark font-normal text-sm">
@@ -103,7 +103,7 @@
                   : generateId(bucket.key, groupKey)
               "
               class="form-check-label pl-2 tracking-normal align-middle"
-              :class="{ 'font-extrabold': styleAsAccordion }"
+              :class="{ 'font-display font-bold': styleAsAccordion }"
             >
               {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
               <span class="text-gray-mid-dark text-sm font-normal">

package/src/components/SearchInput/SearchInput.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+/**
+ * A somewhat generic component that can be used for handling search input
+ * We do this in at least two places:
+ * -  on pages (such as the search page and listing pages)
+ * -  for site-wide search
+ */
 import { onMounted, ref } from 'vue'
 import IconSearch from './../Icons/IconSearch.vue'
 
@@ -36,11 +42,6 @@ onMounted(() => {
 })
 </script>
 <template>
-  <!--
-    A somewhat generic component that can be used for handling search input
-    We do this in at least two places:
-      * on pages (such as the search page and listing pages)
-      * for site-wide search -->
   <div
     class="relative flex items-center SearchInput"
     :class="{
@@ -69,7 +70,7 @@ onMounted(() => {
     <input
       ref="searchQueryRef"
       v-model="model"
-      class="pl-14 h-full focus:ring-2 relative z-10 w-full px-5 text-base lg:text-lg bg-transparent border-0"
+      class="pl-14 h-full focus:ring-2 relative z-10 w-full px-5 text-base bg-transparent border-0"
       :class="{
         'text-gray-dark': defaultColors,
         'py-1': underlinedInput,

package/src/components/SearchPagination/SearchPagination.vue

@@ -4,6 +4,7 @@
     class="SearchPagination flex items-center justify-center"
   >
     <BaseButton
+      class="xl:!text-base"
       aria-label="Previous"
       rel="prev"
       :disabled="currentPage === 1"
@@ -46,6 +47,7 @@
     </div>
 
     <BaseButton
+      class="xl:!text-base"
       :disabled="currentPage === totalPages"
       rel="next"
       aria-label="Next"

package/src/components/SearchResultGridItem/SearchResultGridItem.vue

@@ -87,7 +87,7 @@
       </div>
       <component
         :is="headingLevel || 'p'"
-        class="text-lg leading-normal mt-2 lg:mt-3 font-normal tracking-normal text-gray-dark can-hover:group-hover:text-gray-mid-dark"
+        class="text-lg leading-tight mt-2 lg:mt-3 font-normal tracking-normal text-gray-dark can-hover:group-hover:text-gray-mid-dark"
       >
         <span>
           {{ title }}

package/src/components/SearchSelectMenu/SearchSelectMenu.vue

@@ -8,7 +8,7 @@
     <select
       :id="generateId()"
       v-model="selectValueHandler"
-      class="border-0 text-action can-hover:hover:text-action-dark font-secondary font-semibold tracking-wider uppercase align-middle"
+      class="border-0 text-action can-hover:hover:text-action-dark text-subtitle align-middle"
     >
       <option
         disabled

package/src/components/ShareButtons/ShareButtons.vue

@@ -5,7 +5,7 @@
   >
     <BaseButton
       variant="social"
-      class="-facebook w-12 h-12 text-2xl"
+      class="-facebook w-12 h-12 !text-2xl"
       :href="facebookLink"
       aria-label="Share to Facebook"
       target="_blank"
@@ -18,7 +18,7 @@
 
     <BaseButton
       variant="social"
-      class="-twitter w-12 h-12 -ml-px text-2xl"
+      class="-twitter w-12 h-12 -ml-px !text-2xl"
       :class="{ 'lg:ml-0 lg:-mt-px': !inline }"
       :href="twitterLink"
       aria-label="Share to X"
@@ -32,7 +32,7 @@
 
     <BaseButton
       variant="social"
-      class="-reddit w-12 h-12 -ml-px text-2xl"
+      class="-reddit w-12 h-12 -ml-px !text-2xl"
       :class="{ 'lg:ml-0 lg:-mt-px': !inline }"
       :href="redditLink"
       aria-label="Share to Reddit"
@@ -46,7 +46,7 @@
 
     <BaseButton
       variant="social"
-      class="w-12 h-12 -ml-px text-2xl"
+      class="w-12 h-12 -ml-px !text-2xl"
       :class="{ 'lg:ml-0 lg:-mt-px': !inline }"
       :href="mailLink"
       aria-label="Share via Email"

package/src/components/ShareButtonsEdu/ShareButtonsEdu.vue

@@ -112,7 +112,7 @@ const buttonClass = computed(() => {
         @click="toggle()"
         @keydown.esc="toggle()"
       >
-        <span class="flex flex-row flex-wrap-none items-start xl:items-center">
+        <span class="flex flex-row flex-wrap-none items-center">
           <IconShare class="text-lg mr-2" />
           <span class="text-sm">Share…</span>
         </span>

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -17,7 +17,7 @@
       >
         <div class="absolute inset-0 z-10 bg-black bg-opacity-25"></div>
         <div
-          class="lg:pr-12 lg:py-5 lg:flex-row relative z-20 flex flex-col justify-center w-full px-5 py-6 font-primary"
+          class="lg:pr-12 lg:py-5 lg:flex-row relative z-20 flex flex-col justify-center w-full px-5 py-6 font-display"
         >
           <div class="lg:flex-row lg:pr-3 lg:pb-0 flex flex-col items-center justify-center pb-2">
             <div class="text-contrast relative z-20 p-2 pl-0">
@@ -43,7 +43,7 @@
               </template>
             </div>
             <div class="lg:p-1 text-contrast relative z-20 pt-2 pl-0">
-              <p class="text-secondary text-white lg:text-7xl mb-0 text-4xl font-medium">
+              <p class="text-secondary text-white lg:text-7xl mb-0 text-4xl font-bold">
                 is a place for
               </p>
             </div>
@@ -69,7 +69,7 @@
         :class="'SwimlaneCTA lg:hidden block' + computedClass"
       >
         <div
-          class="lg:flex-row lg:pr-12 lg:py-5 flex flex-col justify-center w-full px-5 py-6 bg-black bg-opacity-25 font-primary"
+          class="lg:flex-row lg:pr-12 lg:py-5 flex flex-col justify-center w-full px-5 py-6 bg-black bg-opacity-25 font-display"
         >
           <div class="lg:flex-row lg:pr-3 lg:pb-0 flex flex-col items-center justify-center pb-2">
             <div class="relative z-20 p-2 pl-0">
@@ -95,9 +95,7 @@
               </template>
             </div>
             <div class="lg:p-1 relative z-20 pt-2 pl-0">
-              <p
-                class="text-secondary text-white text-contrast lg:text-7xl mb-0 text-4xl font-medium"
-              >
+              <p class="text-white text-contrast lg:text-7xl mb-0 text-4xl font-bold">
                 is a place for
               </p>
             </div>

package/src/components/TheFooter/TheFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="TheFooter bg-jpl-blue-darker edu:bg-stars edu:bg-primary text-white relative z-20 print:px-4 print:border-t print:border-black"
+    class="TheFooter bg-jpl-blue-darker edu:bg-stars edu:bg-primary-dark text-white relative z-20 print:px-4 print:border-t print:border-black"
   >
     <div class="footer-main lg:BaseGrid 3xl:px-0 lg:pt-20 container px-4 pt-10 mx-auto">
       <div class="footer-navigation lg:block lg:col-span-9 hidden col-span-12">
@@ -21,7 +21,7 @@
               v-for="(link, index_links) in item.links"
               :key="index_links"
               variant="none"
-              link-class="can-hover:hover:underline inline-block px-4 py-1 -ml-4"
+              link-class="text-base can-hover:hover:underline inline-block px-4 py-1 -ml-4"
               :href="link.path && !getRouterLink(link) ? link.path : null"
               :to="getRouterLink(link) ? getRouterLink(link) : null"
             >
@@ -70,7 +70,7 @@
           >
             <LogoCaltech class="lg:text-base text-sm text-white" />
           </BaseLink>
-          <p class="mb-12">
+          <p class="font-display text-lg mb-12">
             JPL is a federally funded research and development center managed for NASA by Caltech.
           </p>
         </template>

package/src/components/TimelineDialog/TimelineDialog.vue

@@ -7,7 +7,7 @@
     @hide="() => $emit('hide')"
   >
     <div class="p-3 sm:p-10">
-      <p class="font-primary text-xl sm:text-4xl font-bold leading-relaxed">
+      <p class="text-h4">
         <template v-if="data.displayDate">
           {{ data.displayDate }}
         </template>
@@ -21,17 +21,17 @@
       />
       <div
         tabindex="0"
-        class="dialog-main py-3 overflow-auto relative"
+        class="dialog-main pb-3 overflow-auto relative"
       >
         <h2
           :id="`${data.id}-heading`"
-          class="mt-4 mb-2 font-primary text-xl sm:text-2xl font-bold sm:leading-normal"
+          class="mt-4 mb-3 text-h5"
         >
           {{ data.heading }}
         </h2>
         <p
           v-if="data.milestoneLabel"
-          class="font-primary text-gray-mid-dark text-lg sm:text-2xl font-normal leading-relaxed uppercase my-3"
+          class="text-subtitle text-gray-mid-dark"
         >
           {{ data.milestoneLabel }}
         </p>
@@ -39,7 +39,7 @@
           v-if="data.image"
           aspect-ratio="16:9"
           transparent-mode
-          class="sm:mx-20 mb-5 sm:mb-8"
+          class="sm:mx-20 my-5"
         >
           <BaseImage
             :src="data.image.src.url"
@@ -61,10 +61,10 @@
       <div class="my-3">
         <BaseLink
           v-if="data.milestoneLink"
-          variant="default"
+          variant="primary"
           :to="data.milestoneLink.page ? data.milestoneLink.page.url : undefined"
           :href="data.milestoneLink.externalLink"
-          link-class="block mt-3 text-center sm:text-left text-2xl"
+          link-class="block mt-3"
         >
           {{ getLinkLabel() }}
         </BaseLink>

package/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.vue

@@ -33,13 +33,13 @@
         <div class="text-contrast p-4 text-white">
           <p
             v-if="data.title"
-            class="mb-1 text-xl font-semibold leading-tight"
+            class="mb-1 text-h6 leading-tight"
           >
             {{ data.title }}
           </p>
           <p
             v-if="data.status || data.showClock"
-            class="text-subtitle text-jpl-blue-light"
+            class="text-subtitle text-blue-200"
           >
             <span class="sr-only">.</span>
             <template v-if="data.showClock">

package/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.vue

@@ -33,12 +33,10 @@
             class="lg:px-10 2xl:px-0 lg:pt-10 lg:pb-14 xl:col-end-6 col-start-1 col-end-10 px-4 pb-10"
           >
             <h2>
-              <span class="text-gray-light-mid text-contrast text-subtitle block mb-3">
+              <span class="text-white text-contrast text-subtitle block mb-3">
                 {{ eyebrow }}
               </span>
-              <div
-                class="lg:text-9xl md:text-8xl text-7xl lg:tracking-tight lg:leading-tighter text-contrast mb-4 font-medium leading-tight text-white"
-              >
+              <div class="text-h1 lg:leading-tighter text-contrast mb-4 leading-tight text-white">
                 {{ data.title }}
               </div>
             </h2>

package/src/components/TopicDetailMore/TopicDetailMore.vue

@@ -2,11 +2,7 @@
   <div class="TopicDetailMore max-w-screen-3xl relative mx-auto">
     <template v-if="theData && theData.length">
       <div class="lg:BaseGrid mt-18 lg:px-0 container px-4 mx-auto mb-12">
-        <h2
-          class="font-primary text-gray-dark lg:text-6xl col-span-11 col-start-2 text-3xl font-semibold leading-normal tracking-normal uppercase"
-        >
-          More About {{ topic }}
-        </h2>
+        <h2 class="text-h3 text-gray-dark col-span-11 col-start-2">More About {{ topic }}</h2>
       </div>
       <template
         v-for="(item, index) in theData"