fix: listing metadata for EDU News and External Links (#635)

* adding both BasePill and label for EDU News listing items * adding external link icon to BlockLinkCard
nasa-jpl · Sep 25, 2024 · cad081f · cad081f
1 parent 404c61d
commit cad081f
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 0 deletions.
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
@@ -258,6 +258,7 @@ export const LargeEduExplainerArticle = {
     }
   }
 }
+
 export const EduCollection = {
   decorators: [
     () => ({
@@ -325,3 +326,50 @@ export const EduCollectionLarge = {
     }
   }
 }
+
+export const EduNewsItem = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    ...BlockLinkCardData,
+    data: {
+      page: {
+        ...BlockLinkCardData.data,
+        __typename: 'EDUNewsPage'
+      }
+    },
+    headingLevel: 'h2',
+    size: 'sm'
+  }
+}
+
+export const ExternalLink = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    data: {
+      __typename: 'ExternalLinkCardWithDescription',
+      externalLink: 'https://nasa.gov',
+      title: 'External Link',
+      label: 'Dolor Sit',
+      summary:
+        'Cras rhoncus lorem condimentum tellus rhoncus dictum. Maecenas finibus nibh lorem, quis ornare est vulputate et. Nulla imperdiet ultrices est, ac mattis justo consequat sit amet.',
+      thumbnailImage: {
+        __typename: 'CustomImage',
+        src: {
+          __typename: 'CustomRendition',
+          url: 'https://picsum.photos/512/288',
+          width: '512',
+          height: '288'
+        }
+      }
+    },
+    headingLevel: 'h2'
+  }
+}
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -59,10 +59,17 @@
               :content-type="metadataType"
               :text="(theItem as EventCardObject).eventType"
             />
+            <template v-if="metadataType === 'EDUNewsPage' && theItem.label">
+              <!-- include the topic label for EDU News -->
+              <span class="text-subtitle text-gray-mid-dark uppercase ThemeVariantLight pl-3">
+                {{ theItem.label }}
+              </span>
+            </template>
           </template>
           <template
             v-else-if="themeStore.isEdu && theItem.parent?.title && theItem.parent?.title !== 'EDU'"
           >
+            <!-- use parent page's title as the label for EDU Content cards, unless the EDU homepage is the parent -->
             <div class="flex flex-wrap">
               <p
                 class="text-subtitle"
@@ -98,6 +105,12 @@
                 </span>
                 <span class="sr-only">.</span>
               </p>
+              <template v-if="theItem.externalLink">
+                <IconExternal
+                  class="text-primary ml-2"
+                  :class="{ 'text-sm mt-1px': small, '-mt-1px': medium, '-mt-.5': large }"
+                />
+              </template>
             </div>
           </template>
 
@@ -177,6 +190,7 @@ import { useThemeStore } from '../../store/theme'
 import { mixinFormatEventDates } from './../../utils/mixins'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import IconArrow from './../Icons/IconArrow.vue'
+import IconExternal from './../Icons/IconExternal.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
@@ -191,6 +205,7 @@ export default defineComponent({
   name: 'BlockLinkCard',
   components: {
     IconArrow,
+    IconExternal,
     BaseLink,
     BaseImage,
     BaseImagePlaceholder,

diff --git a/packages/vue/src/constants.ts b/packages/vue/src/constants.ts
@@ -1,6 +1,12 @@
 import type { PillDictionaryInterface } from './interfaces'
 
 export const eduMetadataDictionary: PillDictionaryInterface = {
+  EDUNewsPage: {
+    label: 'News',
+    variant: 'primary',
+    icons: 'primary',
+    type: undefined
+  },
   EDUEventPage: {
     label: 'Event',
     variant: 'primary',