@explorer-1/vue 0.3.8 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @explorer-1/vue
 
+## 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
+
+- 604b717: Fixing url handling in BlockCsrTable, adding option to disable trailing slash in BaseLink.
+
 ## 0.3.8
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.3.8",
+  "version": "1.0.0",
   "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.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

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/BaseLink/BaseLink.vue

@@ -50,6 +50,11 @@ export default defineComponent({
       type: String,
       default: undefined
     },
+    /** Links are normalized to add a trailing slash (handles links to files, query params etc.). Set to false to disable. */
+    addSlash: {
+      type: Boolean,
+      default: true
+    },
     title: {
       type: String,
       default: undefined
@@ -196,46 +201,49 @@ export default defineComponent({
       eventBus.emit('linkClicked')
     },
     addTrailingSlash(path: string) {
-      let filteredPath = path
-      if (path && typeof path === 'string') {
-        const isFilePath = () => {
-          const afterLastSlash = path.split('/').pop()
-          if (afterLastSlash && afterLastSlash.includes('.')) {
-            return true
-          }
-          return false
-        }
-        const isQueryPath = path.includes('?')
-        const isAnchorPath = path.includes('#')
-        if (
-          !isQueryPath &&
-          !isAnchorPath &&
-          !isFilePath() &&
-          path !== '/' &&
-          !path.endsWith('/') &&
-          !path.startsWith('/preview')
-        ) {
-          // add a trailing slash if there isn't one
-          filteredPath += '/'
-        } else if (isQueryPath) {
-          if (!path.includes('/?')) {
-            // also add a trailing slash to paths with query params
-            const urlParts = filteredPath.split('?')
-            const pathWithSlash = `${urlParts[0]}/`
-            const queryParams = urlParts[1]
-            filteredPath = pathWithSlash + '?' + queryParams
+      if (this.addSlash) {
+        let filteredPath = path
+        if (path && typeof path === 'string') {
+          const isFilePath = () => {
+            const afterLastSlash = path.split('/').pop()
+            if (afterLastSlash && afterLastSlash.includes('.')) {
+              return true
+            }
+            return false
           }
-        } else if (isAnchorPath) {
-          if (!path.includes('/#')) {
-            // also add a trailing slash to paths with anchors
-            const urlParts = filteredPath.split('#')
-            const pathWithSlash = `${urlParts[0]}/`
-            const anchor = urlParts[1]
-            filteredPath = pathWithSlash + '#' + anchor
+          const isQueryPath = path.includes('?')
+          const isAnchorPath = path.includes('#')
+          if (
+            !isQueryPath &&
+            !isAnchorPath &&
+            !isFilePath() &&
+            path !== '/' &&
+            !path.endsWith('/') &&
+            !path.startsWith('/preview')
+          ) {
+            // add a trailing slash if there isn't one
+            filteredPath += '/'
+          } else if (isQueryPath) {
+            if (!path.includes('/?')) {
+              // also add a trailing slash to paths with query params
+              const urlParts = filteredPath.split('?')
+              const pathWithSlash = `${urlParts[0]}/`
+              const queryParams = urlParts[1]
+              filteredPath = pathWithSlash + '?' + queryParams
+            }
+          } else if (isAnchorPath) {
+            if (!path.includes('/#')) {
+              // also add a trailing slash to paths with anchors
+              const urlParts = filteredPath.split('#')
+              const pathWithSlash = `${urlParts[0]}/`
+              const anchor = urlParts[1]
+              filteredPath = pathWithSlash + '#' + anchor
+            }
           }
         }
+        return filteredPath
       }
-      return filteredPath
+      return path
     }
   }
 })

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/BlockCsrTable/CsrAttachment.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { computed, onMounted } from 'vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 
 interface CsrAttachmentProps {
@@ -15,14 +15,26 @@ interface CsrAttachmentProps {
 const props = withDefaults(defineProps<CsrAttachmentProps>(), {
   params: undefined
 })
-const { params } = reactive(props)
+
+const encodedAttachmentUrl = computed(() => {
+  let url = ''
+  if (props.params.data?.Attachment && props.params.attachmentPrefix) {
+    url = props.params.attachmentPrefix + props.params.data.Attachment
+  }
+  return encodeURI(url)
+})
+
+onMounted(() => {
+  console.log(encodedAttachmentUrl.value)
+})
 </script>
 <template>
   <BaseLink
-    v-if="params?.data?.Attachment"
-    :href="params.attachmentPrefix + params.data.Attachment"
+    v-if="props.params?.data?.Attachment"
+    :href="encodedAttachmentUrl"
     variant="default"
     target="_blank"
+    :add-slash="false"
     >Download</BaseLink
   >
 </template>

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>`