@explorer-1/vue 0.3.9 → 1.0.0

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"

package/src/docs/foundation/FontVariants.vue

@@ -1,49 +1,69 @@
 <template>
-  <div class="Fonts md:grid-cols-2 grid gap-2 mt-4">
-    <div>
+  <div class="Fonts mt-4">
+    <div class="mb-5">
       <h3
-        id="primary"
-        class="inline-block align-top mr-4 font-primary"
+        id="display"
+        class="inline-block align-top mr-4 font-display w-1/2"
       >
-        Metropolis
+        Helvetica Now Display
         <br />
-        <code class="text-base">.font-primary</code>
+        <code class="text-base">.font-display</code>
       </h3>
       <ol class="list-none inline-block">
         <li>
           <span class="leading-loose">
-            <span class="capitalize font-primary font-light"> Metropolis light </span>
-            <code>.font-light</code>
+            <span class="capitalize font-display font-normal"> Helvetica Now Display normal </span>
+            <code>.font-normal</code>
           </span>
         </li>
         <li>
           <span class="leading-loose">
-            <span class="capitalize font-primary font-normal"> Metropolis normal </span>
-            <code>.font-normal</code>
+            <span class="capitalize font-display font-medium"> Helvetica Now Display medium </span>
+            <code>.font-medium</code>
           </span>
         </li>
         <li>
           <span class="leading-loose">
-            <span class="capitalize font-primary font-medium"> Metropolis medium </span>
-            <code>.font-medium</code>
+            <span class="capitalize font-display font-bold">Helvetica Now Display bold</span>
+            <code>.font-bold</code>
           </span>
         </li>
         <li>
           <span class="leading-loose">
-            <span class="capitalize font-primary font-semibold"> Metropolis semi bold </span>
-            <code>.font-semibold</code>
+            <span class="capitalize font-display font-extrabold">
+              Helvetica Now Display extra bold
+            </span>
+            <code>.font-extrabold</code>
           </span>
         </li>
+      </ol>
+    </div>
+    <div class="mb-5">
+      <h3
+        id="primary"
+        class="inline-block align-top mr-4 font-primary w-1/2"
+      >
+        Helvetica Now Text
+        <br />
+        <code class="text-base">.font-primary</code>
+      </h3>
+      <ol class="list-none inline-block">
         <li>
           <span class="leading-loose">
-            <span class="capitalize font-primary font-bold">Metropolis bold</span>
-            <code>.font-bold</code>
+            <span class="capitalize font-primary font-normal"> Helvetica Now Text normal </span>
+            <code>.font-normal</code>
           </span>
         </li>
         <li>
           <span class="leading-loose">
-            <span class="capitalize font-primary font-extrabold"> Metropolis extra bold </span>
-            <code>.font-extrabold</code>
+            <span class="capitalize font-primary font-medium"> Helvetica Now Text medium </span>
+            <code>.font-medium</code>
+          </span>
+        </li>
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-primary font-bold">Helvetica Now Text bold</span>
+            <code>.font-bold</code>
           </span>
         </li>
       </ol>
@@ -51,29 +71,31 @@
     <div>
       <h3
         id="secondary"
-        class="inline-block align-top mr-4 font-secondary"
+        class="inline-block align-top mr-4 font-secondary w-1/2"
       >
-        Archivo Narrow
+        Helvetica Now Micro
         <br />
         <code class="text-base">.font-secondary</code>
       </h3>
       <ol class="list-none inline-block">
-        <li></li>
-        <li></li>
-        <li></li>
         <li>
           <span class="leading-loose">
-            <span class="capitalize font-secondary font-semibold"> Archivo Narrow semi bold </span>
-            <code>.font-semibold</code>
+            <span class="capitalize font-secondary font-normal"> Helvetica Now Micro normal </span>
+            <code>.font-normal</code>
+          </span>
+        </li>
+        <li>
+          <span class="leading-loose">
+            <span class="capitalize font-secondary font-medium"> Helvetica Now Micro medium </span>
+            <code>.font-medium</code>
           </span>
         </li>
         <li>
           <span class="leading-loose">
-            <span class="capitalize font-secondary font-bold"> Archivo Narrow bold </span>
+            <span class="capitalize font-secondary font-bold"> Helvetica Now Micro bold </span>
             <code>.font-bold</code>
           </span>
         </li>
-        <li></li>
       </ol>
     </div>
   </div>