@explorer-1/vue 0.3.9 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @explorer-1/vue
 
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [9655fc2]
+  - @explorer-1/common@2.0.1
+
+## 1.0.0
+
+### Major Changes
+
+- 27c013c: Updating Explorer-1 with JPL's new branding colors and typefaces.
+
+### Patch Changes
+
+- 27c013c: Documentation updates, Storybook improvements.
+- Updated dependencies [27c013c]
+  - @explorer-1/common@2.0.0
+
 ## 0.3.9
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.3.9",
+  "version": "1.0.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.3.3"
+    "@explorer-1/common": "2.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/assets/fonts/README.md

@@ -1,12 +1,6 @@
 # Fonts
 
-Place optimized fonts file in this folder. We provide font files as WOFF 2.0 for all modern browsers.
+Font files are intentionally not tracked in this repo. To use the correct fonts locally:
 
-- WOFF 2.0 conversion: [woff2](https://github.com/google/woff2)
-
-Fonts:
-
-- [Metropolis](https://fontsarena.com/metropolis-by-chris-simpson/)
-- [Archivo Narrow](https://fonts.google.com/specimen/Archivo+Narrow)
-
-See the styleguide for font usage guidelines.
+1. Retrieve fonts from this repo: https://github.com/nasa-jpl/explorer-1-fonts/tree/main/core/fonts/helvetica-now
+2. Place `woff2` files directly in the `helvetica-now` folder of this repo (`/packages/common/src/fonts/helvetica-now/`)

package/src/components/AboutTheAuthor/AboutTheAuthor.vue

@@ -63,13 +63,13 @@ const headingString = computed(() => {
           <div class="mb-4">
             <h3
               v-if="author.author.name"
-              class="!font-medium !tracking-normal !text-lg mb-1"
+              class="!text-lg mb-1"
             >
               {{ author.author.name }}
             </h3>
             <p
               v-if="author.author.jobTitle || author.author.organization"
-              class="text-lg"
+              class="font-display text-lg"
             >
               {{
                 (author.author.jobTitle ? author.author.jobTitle : '') +

package/src/components/AsteroidWatchWidget/AsteroidWatchWidget.vue

@@ -78,9 +78,9 @@
               :href="item.externalLink"
               external-target-blank
             >
-              <span class="flex flex-nowrap items-center">
+              <span class="font-secondary text-base flex flex-nowrap items-center">
                 <span>{{ item.name }}</span>
-                <IconExternal class="text-jpl-red ml-3 text-lg" />
+                <IconExternal class="text-jpl-red ml-3 text-base" />
               </span>
             </BaseLink>
           </div>
@@ -89,10 +89,12 @@
             class="lg:col-span-4 col-span-full"
           >
             <p class="label text-subtitle text-jpl-red">Date</p>
-            {{
-              // @ts-ignore
-              $filters.displayDate(item.date)
-            }}
+            <div class="font-secondary text-base">
+              {{
+                // @ts-ignore
+                $filters.displayDate(item.date)
+              }}
+            </div>
           </div>
         </div>
       </div>

package/src/components/BaseAccordionItem/BaseAccordionItem.vue

@@ -101,7 +101,7 @@ defineSlots<{
         >
           <component
             :is="headingLevel"
-            class="!font-normal !tracking-normal"
+            class="!font-normal"
           >
             <button
               v-bind-once="{ id: headingId, 'aria-controls': panelId }"

package/src/components/BaseAudio/BaseAudio.vue

@@ -27,7 +27,7 @@
           </div>
           <div class="flex flex-col w-full z-20">
             <div
-              class="BaseAudio__playback-time-wrapper cursor-pointer relative inline-block w-full border-t border-jpl-red bg-gray-mid-dark bg-opacity-25 h-2"
+              class="BaseAudio__playback-time-wrapper cursor-pointer relative inline-block w-full border-t border-jpl-red bg-gray-mid bg-opacity-25 h-2"
               title="Playback Position"
               @click="setPosition"
             >

package/src/components/BaseButton/BaseButton.stories.ts

@@ -15,12 +15,6 @@ export default {
       description: {
         component: 'Simple button with style variations.'
       }
-    },
-    to: {
-      description: 'If populated, a router-link will be generated. Overrides `href`'
-    },
-    click: {
-      type: '@click emit'
     }
   }
 }

package/src/components/BaseButton/BaseButton.vue

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

package/src/components/BaseCheckboxGroup/BaseCheckboxGroup.vue

@@ -2,7 +2,7 @@
   <div class="BaseCheckboxGroup">
     <label
       v-if="heading"
-      class="text-lg font-semibold text-gray-900"
+      class="text-lg font-bold text-gray-900"
       >{{ heading }}</label
     >
     <p
@@ -41,11 +41,11 @@
           <div class="mb-1">
             <label
               :for="`${group}_${option.id}`"
-              class="ml-3 block text-md text-gray-700"
+              class="ml-3 block text-md text-gray-mid-dark"
             >
               <span
                 v-if="option.title"
-                class="font-semibold"
+                class="font-bold"
                 >{{ option.title }}</span
               >
               <span v-if="option.text"> - </span>

package/src/components/BaseImageCaption/BaseImageCaption.vue

@@ -33,7 +33,7 @@ export default defineComponent({
 <template>
   <div
     v-if="data"
-    class="BaseImageCaption text-body-sm"
+    class="BaseImageCaption text-body-sm -tracking-[0.03rem]"
   >
     <div
       v-if="data.caption || data.credit"

package/src/components/BasePill/BasePill.vue

@@ -13,9 +13,9 @@ const variantMap = {
 type VariantMapKey = keyof typeof variantMap
 
 const sizeMap = {
-  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 pt-1.5 pb-1 px-5'
+  sm: 'text-subtitle border-t-2 py-1 px-2.5',
+  md: 'text-subtitle lg:text-base border-t py-1.5 px-3.5',
+  lg: 'text-subtitle lg:text-lg border-t py-1.5 px-5'
 } as const
 type SizeMapKey = keyof typeof sizeMap
 
@@ -69,7 +69,7 @@ const theText = computed(() => {
 <template>
   <p
     :class="`${variantMap[metadataAttrs.variant || 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 print:border-none print:px-0"
+    class="ThemeVariantLight text-contrast-none inline-block text-white !font-bold rounded-full leading-tight m-0 uppercase print:border-none print:px-0"
   >
     {{ theText }}
     <span class="sr-only">.</span>

package/src/components/BaseRadioGroup/BaseRadioGroup.vue

@@ -2,12 +2,12 @@
   <div class="BaseRadioGroup">
     <label
       v-if="heading"
-      class="text-lg font-semibold text-gray-900"
+      class="font-display text-lg font-bold text-gray-900"
       >{{ heading }}</label
     >
     <p
       v-if="subHeading"
-      class="text-lg pt-4 pb-2 pr-4"
+      class="text-body-md pt-4 pb-2 pr-4"
     >
       {{ subHeading }}
     </p>
@@ -39,18 +39,17 @@
           />
           <label
             :for="`${group}_${option.id}`"
-            class="ml-3 block text-md text-gray-700"
+            class="ml-3 block text-md text-gray-mid-dark"
           >
             <span
               v-if="option.title"
-              :class="option.text ? 'font-semibold' : ''"
+              :class="option.text ? 'font-medium' : ''"
               >{{ option.title }}</span
             >
             <span v-if="option.text"> - </span>
             <span
               v-if="option.text"
               :id="`${group}_${option.id}_description`"
-              class="font-light"
               >{{ option.text }}</span
             >
           </label>

package/src/components/BaseTimer/BaseTimer.vue

@@ -42,7 +42,8 @@
           </span>
           <br v-if="!inline" />
           <span
-            class="unit text-body-xs uppercase"
+            class="unit font-secondary text-xs uppercase"
+            :class="{ 'pl-2': unit === 'seconds' }"
             data-chromatic="ignore"
           >
             {{ shortLabel(unit) }}

package/src/components/BlockCardGridItem/BlockCardGridItemElement.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="shadow-jpl relative h-full bg-white"
-    :class="{ 'flex items-center min-h-32': !image }"
+    :class="{ 'flex items-start min-h-32': !image }"
   >
     <div
       v-if="image"
@@ -24,7 +24,7 @@
         />
       </BaseImagePlaceholder>
     </div>
-    <div class="px-6 py-6 ThemeVariantLight">
+    <div class="px-6 py-6 w-full ThemeVariantLight">
       <template v-if="label">
         <div class="text-primary text-subtitle internal:text-black">
           {{ label }}

package/src/components/BlockCsrTable/BlockCsrTable.vue

@@ -76,7 +76,7 @@ const theme = themeMaterial.withParams({
 })
 
 const headerClass = [
-  'min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white text-sm border-gray-light-mid lg:p-5 p-3 border-b text-left'
+  'min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker font-display text-white text-sm border-gray-light-mid lg:p-5 p-3 border-b text-left'
 ]
 const defaultcolDef = {
   flex: 1,
@@ -245,7 +245,7 @@ const onFilterTextBoxChanged = () => {
               >
             </p>
           </div>
-          <h2 class="text-lg tracking-tight mb-3">Test Limits</h2>
+          <h2 class="text-lg mb-3">Test Limits</h2>
           <CsrTestLimitsTable :data="modalData.ExportPackageRates" />
         </div>
       </BaseModalDialog>

package/src/components/BlockCta/BlockCta.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="bg-gray-light edu:bg-stars edu:bg-primary md:mx-0 sm:py-8 md:py-10 md:px-0 sm:mx-20 px-6 py-6 text-center"
+    class="bg-gray-light edu:bg-stars edu:bg-primary-dark md:mx-0 sm:py-8 md:py-10 md:px-0 sm:mx-20 px-6 py-6 text-center"
   >
     <div class="md:mx-16 xl:mx-24">
-      <p class="text-h6 edu:text-white edu:font-extrabold">{{ data.heading }}</p>
+      <p class="text-h6 edu:text-white">{{ data.heading }}</p>
     </div>
     <BaseButton
       v-if="data.page"

package/src/components/BlockImageCarousel/BlockImageCarousel.vue

@@ -24,7 +24,7 @@
         <div class="absolute inset-0">
           <div class="absolute bottom-0 right-0 z-10 flex">
             <BaseButton
-              class="swiper-prev xl:text-xl border-collapse"
+              class="swiper-prev !text-lg xl:!text-xl border-collapse"
               aria-label="Previous slide"
             >
               <template #icon>
@@ -32,7 +32,7 @@
               </template>
             </BaseButton>
             <BaseButton
-              class="swiper-next xl:text-xl border-collapse"
+              class="swiper-next !text-lg xl:!text-xl border-collapse"
               aria-label="Next slide"
             >
               <template #icon>

package/src/components/BlockKeyPoints/BlockKeyPoints.vue

@@ -8,7 +8,7 @@
       class="mb-5"
       :data="{ heading: data.heading }"
     />
-    <ul class="print:!list-disc">
+    <ul class="print:!list-disc font-text">
       <li
         v-for="(item, index) in data.listItem"
         :key="index"

package/src/components/BlockLinkCard/BlockLinkCard.stories.js

@@ -41,7 +41,8 @@ export const BaseStory = {
     })
   ],
   args: {
-    ...BlockLinkCardData
+    ...BlockLinkCardData,
+    size: 'md'
   }
 }
 
@@ -343,6 +344,7 @@ export const EduNewsItem = {
 }
 
 export const ExternalLink = {
+  globals: { theme: 'defaultTheme' },
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -54,7 +54,7 @@
         >
           <template v-if="metadataAttrs">
             <BasePill
-              :class="{ 'mb-2': !large, 'mb-4': large }"
+              :class="{ 'mb-2': !large, 'mb-4': large, 'text-xs': true }"
               size="sm"
               :content-type="metadataType"
               :text="(theItem as EventCardObject).eventType"
@@ -114,7 +114,7 @@
               >
                 <IconExternal
                   class="text-primary ml-2"
-                  :class="{ 'text-sm mt-1px': small, '-mt-1px': medium, '-mt-.5': large }"
+                  :class="{ 'text-sm mt-1px': small, 'text-sm -mt-1px': medium, '-mt-.5': large }"
                 />
               </template>
             </div>
@@ -122,7 +122,7 @@
 
           <component
             :is="headingLevel || 'p'"
-            class="text-gray-dark text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
+            class="text-gray-dark text-xl font-bold font-display leading-tight"
             :class="{ 'lg:text-3xl': !small }"
           >
             {{ theItem.title }}
@@ -136,13 +136,13 @@
           <p
             v-if="theItem.date && !themeStore.isEdu"
             class="text-gray-mid-dark"
-            :class="{ 'mt-2': !large, 'mt-4': large }"
+            :class="{ 'mt-2 text-sm font-secondary': !large, 'mt-4 text-base': large }"
           >
             {{ theItem.date }}
           </p>
           <p
             v-if="large && theItem.summary"
-            class="mt-4 text-gray-mid-dark"
+            class="mt-4 text-gray-mid-dark text-base"
             :class="{
               'line-clamp-2 sm:line-clamp-1 lg:line-clamp-2 xl:line-clamp-3': themeStore.isEdu
             }"
@@ -152,7 +152,7 @@
           <p
             v-if="theItem.date && themeStore.isEdu"
             class="text-gray-mid-dark"
-            :class="{ 'mt-2': !large, 'mt-4': large }"
+            :class="{ 'mt-2 text-sm font-secondary': !large, 'mt-4 text-base': large }"
           >
             {{ theItem.date }}
           </p>

package/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue

@@ -88,7 +88,7 @@ const isSmall = computed(() => {
 
         <component
           :is="headingLevel || 'p'"
-          class="text-white text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
+          class="text-white text-xl font-medium leading-tight tracking-tight"
           :class="{
             'lg:text-3xl': !isSmall
           }"