@explorer-1/vue 1.1.8 → 1.1.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @explorer-1/vue
 
+## 1.1.10
+
+### Patch Changes
+
+- eceeea8: Changing color of nav heading to grayscale
+
+## 1.1.9
+
+### Patch Changes
+
+- af34894: Updating background color of a featured search result.
+- 78f717a: Changing desktop nav dropdown background color to 95% black.
+- 1d12008: Showing last publish date on EDU resource page templates.
+
 ## 1.1.8
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "private": false,
   "publishConfig": {
     "access": "public"

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

@@ -44,6 +44,11 @@ export const DarkButton = {
   args: {
     ...BaseButtonData,
     variant: 'dark'
-  }
+  },
+  decorators: [
+    () => ({
+      template: `<div id="storyRoot" class="p-8 bg-gray-dark edu:bg-primary-dark"><story/></div>`
+    })
+  ]
   // globals: { themeVariant: 'ThemeVariantDark' }
 }

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -105,13 +105,22 @@
         itemprop="datePublished"
         :content="pubDatetime"
       />
-
-      <span v-if="publicationDate && !hideDate">
-        {{
-          // @ts-ignore
-          $filters.displayDate(publicationDate)
-        }}
-      </span>
+      <template v-if="!hideDate">
+        <span v-if="publicationDate">
+          {{
+            // @ts-ignore
+            $filters.displayDate(publicationDate)
+          }}
+        </span>
+        <span v-if="publicationDate && lastPublishedDate"> | </span>
+        <span v-if="lastPublishedDate">
+          Last Updated:
+          {{
+            // @ts-ignore
+            $filters.displayDate(lastPublishedDate)
+          }}
+        </span>
+      </template>
     </div>
   </div>
 </template>
@@ -159,6 +168,12 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    /** Last published date */
+    lastPublishedDate: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     /** Approximate read time */
     readTime: {
       type: String,
@@ -214,7 +229,7 @@ export default defineComponent({
       return this.hasTag || this.readTime ? true : false
     },
     hasByline(): boolean {
-      return this.authors?.length || this.publicationDate ? true : false
+      return this.authors?.length || this.publicationDate || this.lastPublishedDate ? true : false
     },
     hasData(): boolean {
       return this.title || this.hasEyebrow || this.hasByline ? true : false

package/src/components/NavDesktop/NavDesktop.stories.js

@@ -194,7 +194,7 @@ export const NavInverted = {
       return { args }
     },
     template: `<div class="absolute inset-0">
-  <div style="height:2500px" class="nav-offset bg-jpl-blue-darker">
+  <div style="height:2500px" class="nav-offset bg-gray-dark">
     <NavDesktop v-bind="args" />
     <div v-if="invertOverride" class="-nav-offset max-w-screen-3xl mx-auto">
       <img class="w-full h-auto block" src="https://picsum.photos/1600/900" alt="Example Hero" />

package/src/components/NavDesktop/NavDesktopDropdownContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 edu:bg-primary-dark 3xl:px-0 px-4 py-10 text-white"
+    class="NavDesktopDropdownContent bg-black bg-opacity-95 edu:bg-primary-dark 3xl:px-0 px-4 py-10 text-white"
   >
     <div
       v-if="data.menuColumns"

package/src/components/NavDesktop/NavDesktopDropdownMore.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="NavDesktopDropdownMore bg-jpl-blue-darker bg-opacity-98 3xl:px-0 w-full px-4 py-10 text-white"
+    class="NavDesktopDropdownMore bg-black bg-opacity-95 3xl:px-0 w-full px-4 py-10 text-white"
   >
     <div class="BaseGrid container mx-auto">
       <div

package/src/components/NavHeading/NavHeading.stories.js

@@ -7,7 +7,7 @@ export default {
   tags: ['navigation'],
   decorators: [
     () => ({
-      template: `<div id="storyRoot" class="p-8 bg-jpl-blue-darker edu:bg-primary-dark"><story/></div>`
+      template: `<div id="storyRoot" class="p-8 bg-gray-dark edu:bg-primary-dark"><story/></div>`
     })
   ],
   parameters: {

package/src/components/NavHeading/NavHeading.vue

@@ -6,7 +6,7 @@
     <template v-if="data.headingPage && data.heading">
       <BaseLink
         variant="none"
-        class="text-subtitle text-jpl-blue-lighter edu:text-purple-300 inline-block mb-4"
+        class="text-subtitle text-gray-400 edu:text-purple-300 inline-block mb-4"
         link-class="px-2 block"
         :to="data.headingPage.url"
       >
@@ -14,7 +14,7 @@
       </BaseLink>
     </template>
     <template v-else-if="data.heading">
-      <div class="text-subtitle text-jpl-blue-lighter edu:text-purple-300 inline-block mb-4">
+      <div class="text-subtitle text-gray-400 edu:text-purple-300 inline-block mb-4">
         <span class="px-2 block">{{ data.heading }}</span>
       </div>
     </template>

package/src/components/NavLinkList/NavLinkList.stories.js

@@ -6,7 +6,7 @@ export default {
   tags: ['navigation'],
   decorators: [
     () => ({
-      template: `<div id="storyRoot" class="bg-jpl-blue-darker p-8"><story/></div>`
+      template: `<div id="storyRoot" class="bg-gray-dark p-8"><story/></div>`
     })
   ],
   parameters: {

package/src/components/NavSocial/NavSocial.stories.js

@@ -16,6 +16,6 @@ export const Dark = {
     setup() {
       return { args }
     },
-    template: `<div class="bg-jpl-blue-darker p-8"><NavSocial v-bind="args" /></div>`
+    template: `<div class="bg-gray-dark p-8"><NavSocial v-bind="args" /></div>`
   })
 }

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -168,7 +168,7 @@
       </div>
       <div
         v-else
-        class="bg-jpl-blue-darker edu:bg-stars edu:bg-primary xl:grid-cols-9 relative grid grid-cols-5 mb-10 text-white"
+        class="bg-gray-dark edu:bg-stars edu:bg-primary xl:grid-cols-9 relative grid grid-cols-5 mb-10 text-white"
       >
         <div class="xl:col-span-7 flex items-center col-span-3 p-10">
           <div class="">

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.vue

@@ -93,13 +93,14 @@ const computedClass = computed((): string => {
     >
       <DetailHeadline
         :title="data.title"
+        :last-published-date="data.lastPublishedAt"
         label="Collection"
         pill
         pill-color="primary-inverted"
       />
 
       <ShareButtonsEdu
-        class="mt-4"
+        class="mt-5"
         :title="data.title"
         :url="data.url"
       />
@@ -135,6 +136,13 @@ const computedClass = computed((): string => {
       class="mb-6 lg:mb-12"
       :class="{ '-mt-4': data.showMetaPanel }"
     >
+      <p class="text-gray-mid-dark">
+        Last Updated:
+        {{
+          // @ts-ignore
+          $filters.displayDate(data.lastPublishedAt)
+        }}
+      </p>
       <ShareButtonsEdu
         class="mt-4"
         :title="data.title"
@@ -154,19 +162,6 @@ const computedClass = computed((): string => {
       <BlockRelatedLinks :data="data.relatedLinks[0]" />
     </LayoutHelper>
 
-    <LayoutHelper
-      v-if="data.lastPublishedAt"
-      indent="col-3"
-      class="lg:my-18 my-10"
-    >
-      <p class="border-t border-gray-light-mid pt-8">
-        <strong>Collection Last Updated:</strong>
-        {{
-          // @ts-ignore
-          $filters.displayDate(data.lastPublishedAt)
-        }}
-      </p>
-    </LayoutHelper>
     <!-- explore more -->
     <div
       v-if="data.relatedContent?.length"

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -146,15 +146,25 @@ export default defineComponent({
         :read-time="data.readTime"
         :publication-date="data.publicationDate"
         :publication-time="data.publicationTime"
+        :last-published-date="data.lastPublishedAt"
         :author="data.author"
         label="Explainer Article"
         pill-color="secondary"
         schema
         pill
       />
+      <template v-if="heroTitle && data.lastPublishedAt">
+        <p class="text-gray-mid-dark mt-10">
+          Last Updated:
+          {{
+            // @ts-ignore
+            $filters.displayDate(data.lastPublishedAt)
+          }}
+        </p>
+      </template>
       <ShareButtonsEdu
         v-if="data?.url"
-        :class="heroTitle ? 'mt-10' : 'mt-4'"
+        :class="heroTitle && data.lastPublishedAt ? 'mt-4' : heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -219,13 +229,6 @@ export default defineComponent({
       indent="col-3"
       class="lg:my-18 my-10"
     >
-      <p class="border-t border-gray-light-mid pt-8">
-        <strong>Explainer Article Last Updated:</strong>
-        {{
-          // @ts-ignore
-          $filters.displayDate(data.lastPublishedAt)
-        }}
-      </p>
     </LayoutHelper>
   </div>
 </template>

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -89,10 +89,10 @@ const { data } = reactive(props)
         :title="data.title"
         label="Gallery"
         :publication-date="data.publicationDate"
+        :last-published-date="data.lastPublishedAt"
         pill-color="secondary"
         schema
         pill
-        hide-date
       />
       <ShareButtonsEdu
         v-if="data?.url"
@@ -215,23 +215,11 @@ const { data } = reactive(props)
     <LayoutHelper
       v-if="data.authors?.length"
       indent="col-3"
+      class="lg:mb-18 mb-10"
     >
       <AboutTheAuthor :authors="data.authors" />
     </LayoutHelper>
 
-    <LayoutHelper
-      v-if="data.lastPublishedAt"
-      indent="col-3"
-      class="lg:my-18 my-10"
-    >
-      <p class="border-t border-gray-light-mid pt-8">
-        <strong class="capitalize">Gallery Last Updated:</strong>
-        {{
-          // @ts-ignore
-          $filters.displayDate(data.lastPublishedAt)
-        }}
-      </p>
-    </LayoutHelper>
     <!-- Explore More -->
     <!-- <div
       v-if="data.relatedContent?.length"

package/src/templates/edu/PageEduLesson/PageEduLesson.vue

@@ -316,12 +316,22 @@ const computedClass = computed((): string => {
       <DetailHeadline
         v-if="data.title && !heroTitle"
         :title="data.title"
+        :last-published-date="data.lastPublishedAt"
         label="Lesson"
         pill
       />
+      <template v-if="heroTitle && data.lastPublishedAt">
+        <p class="text-gray-mid-dark mt-10">
+          Last Updated:
+          {{
+            // @ts-ignore
+            $filters.displayDate(data.lastPublishedAt)
+          }}
+        </p>
+      </template>
       <ShareButtonsEdu
         v-if="data?.url"
-        :class="heroTitle ? 'mt-10' : 'mt-4'"
+        :class="heroTitle && data.lastPublishedAt ? 'mt-4' : heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -427,19 +437,5 @@ const computedClass = computed((): string => {
     >
       <AboutTheAuthor :authors="data.authors" />
     </LayoutHelper>
-
-    <LayoutHelper
-      v-if="data.lastPublishedAt"
-      indent="col-3"
-      class="lg:my-18 my-10"
-    >
-      <p class="border-t border-gray-light-mid pt-8">
-        <strong>Lesson Last Updated:</strong>
-        {{
-          // @ts-ignore
-          $filters.displayDate(data.lastPublishedAt)
-        }}
-      </p>
-    </LayoutHelper>
   </div>
 </template>

package/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue

@@ -36,7 +36,7 @@ interface PageEduMultimediaObject extends PageEduResourcesObject {
 }
 
 interface PageEduMultimediaDetailProps {
-  data: PageEduMultimediaObject
+  data?: PageEduMultimediaObject
 }
 
 // define props
@@ -84,7 +84,7 @@ const typeMapping: {
   }
 }
 const mediaType = computed(() => {
-  const type = data.__typename
+  const type = data?.__typename
   if (type) {
     return typeMapping[type]?.type
   }
@@ -92,7 +92,7 @@ const mediaType = computed(() => {
 })
 
 const mediaLabel = computed(() => {
-  const type = data.__typename
+  const type = data?.__typename
   if (type) {
     return typeMapping[type]?.label
   }
@@ -100,7 +100,7 @@ const mediaLabel = computed(() => {
 })
 
 const schemaType = computed(() => {
-  const type = data.__typename
+  const type = data?.__typename
   if (type) {
     return typeMapping[type]?.schema
   }
@@ -110,17 +110,17 @@ const schemaType = computed(() => {
 const heroImage = computed(() => {
   switch (mediaType.value) {
     case 'image':
-      return data.imageAsHero
+      return data?.imageAsHero
     case 'document':
-      return data.heroImage
+      return data?.heroImage
     default:
       return undefined
   }
 })
 
 const videoBlock = computed(() => {
-  if (mediaType.value === 'video' && data.video?.length) {
-    return data.video[0]
+  if (mediaType.value === 'video' && data?.video?.length) {
+    return data?.video[0]
   }
   return undefined
 })
@@ -132,7 +132,7 @@ const downloadUrl = computed(() => {
     case 'video':
       return videoBlock.value?.video?.file
     case 'document':
-      return data.document?.url
+      return data?.document?.url
     default:
       return undefined
   }
@@ -145,15 +145,15 @@ const creditText = computed(() => {
     case 'video':
       return videoBlock.value?.credit
     case 'document':
-      return data.credit
+      return data?.credit
     default:
       return undefined
   }
 })
 
 const relatedContentHeading = computed(() => {
-  const type = data.__typename
-  let text = data.relatedContentHeading
+  const type = data?.__typename
+  let text = data?.relatedContentHeading
   if (type && !text) {
     text = typeMapping[type]?.relatedContentHeading
   }
@@ -178,9 +178,9 @@ const { data } = reactive(props)
         :title="data.title"
         :label="mediaLabel"
         :publication-date="data.publicationDate"
+        :last-published-date="data.lastPublishedAt"
         schema
         pill
-        hide-date
       />
       <ShareButtonsEdu
         v-if="data?.url"
@@ -396,19 +396,6 @@ const { data } = reactive(props)
       <AboutTheAuthor :authors="data.authors" />
     </LayoutHelper>
 
-    <LayoutHelper
-      v-if="data.lastPublishedAt"
-      indent="col-3"
-      class="lg:my-18 my-10"
-    >
-      <p class="border-t border-gray-light-mid pt-8">
-        <strong class="capitalize">{{ mediaLabel }} Last Updated:</strong>
-        {{
-          // @ts-ignore
-          $filters.displayDate(data.lastPublishedAt)
-        }}
-      </p>
-    </LayoutHelper>
     <!-- Explore More -->
     <!-- <div
       v-if="data.relatedContent?.length"

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -283,13 +283,23 @@ const computedClass = computed((): string => {
       <DetailHeadline
         v-if="data.title && !heroTitle"
         :title="data.title"
+        :last-published-date="data.lastPublishedAt"
         label="Student Project"
         pill
         pill-color="secondary"
       />
+      <template v-if="heroTitle && data.lastPublishedAt">
+        <p class="text-gray-mid-dark mt-10">
+          Last Updated:
+          {{
+            // @ts-ignore
+            $filters.displayDate(data.lastPublishedAt)
+          }}
+        </p>
+      </template>
       <ShareButtonsEdu
         v-if="data?.url"
-        :class="heroTitle ? 'mt-10' : 'mt-4'"
+        :class="heroTitle && data.lastPublishedAt ? 'mt-4' : heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"

package/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue

@@ -131,12 +131,22 @@ const computedClass = computed((): string => {
         v-if="!heroTitle"
         :title="data.title"
         :read-time="data.readTime"
+        :last-published-date="data.lastPublishedAt"
         label="Teachable Moment"
         pill
       />
+      <template v-if="heroTitle && data.lastPublishedAt">
+        <p class="text-gray-mid-dark mt-10">
+          Last Updated:
+          {{
+            // @ts-ignore
+            $filters.displayDate(data.lastPublishedAt)
+          }}
+        </p>
+      </template>
       <ShareButtonsEdu
         v-if="data?.url"
-        :class="heroTitle ? 'mt-10' : 'mt-4'"
+        :class="heroTitle && data.lastPublishedAt ? 'mt-4' : heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -180,23 +190,11 @@ const computedClass = computed((): string => {
     <LayoutHelper
       v-if="data.authors?.length"
       indent="col-3"
+      class="lg:mb-18 mb-10"
     >
       <AboutTheAuthor :authors="data.authors" />
     </LayoutHelper>
 
-    <LayoutHelper
-      v-if="data.lastPublishedAt"
-      indent="col-3"
-      class="lg:my-18 my-10"
-    >
-      <p class="border-t border-gray-light-mid pt-8">
-        <strong>Teachable Moment Last Updated:</strong>
-        {{
-          // @ts-ignore
-          $filters.displayDate(data.lastPublishedAt)
-        }}
-      </p>
-    </LayoutHelper>
     <!-- explore more -->
     <div
       v-if="data.relatedContent?.length"