finished adding metadata to blocklinkcard for resources

nasa-jpl · Aug 13, 2024 · bbe7cf0 · bbe7cf0
1 parent 59a66ae
commit bbe7cf0
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 51 deletions.
diff --git a/packages/vue/src/components/BasePill/BasePill.vue b/packages/vue/src/components/BasePill/BasePill.vue
@@ -1,21 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import type { Attributes } from './../../interfaces'
 
-interface LabelObject {
-  label: string
-  variant: string
-}
-interface labelDictionaryInterface {
-  [EDUExplainerArticlePage: string]: LabelObject
-}
-const labelDictionary: labelDictionaryInterface = {
-  EDUExplainerArticlePage: {
-    label: 'Explainer Article',
-    variant: 'secondary'
-  }
-}
-
 // using borders to vertically center wonky font face
 const variantMap: Attributes = {
   primary: 'bg-primary border-primary',
@@ -41,24 +26,13 @@ const props = withDefaults(defineProps<BasePillProps>(), {
   size: 'md',
   contentType: undefined
 })
-
-const label = computed(() => {
-  return props.contentType && labelDictionary[props.contentType]
-    ? labelDictionary[props.contentType]?.label
-    : undefined
-})
 </script>
 <template>
   <p
-    :class="`${variantMap[label && props.contentType ? labelDictionary[props.contentType]?.variant : props.variant]} ${sizeMap[props.size]}`"
+    :class="`${variantMap[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"
   >
-    <template v-if="!label">
-      <slot>{{ label }}</slot>
-    </template>
-    <template v-else>
-      {{ label }}
-    </template>
+    <slot />
     <span class="sr-only">.</span>
   </p>
 </template>
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
@@ -96,13 +96,40 @@ export const EventItem = {
   args: {
     ...BlockLinkCardData,
     data: {
-      ...BlockLinkCardData.data,
-      startDate: '2021-11-11',
-      startDatetime: '2021-11-11T00:00:00-08:00',
-      endDatetime: '2021-11-11T23:59:59.999999-08:00',
-      endDate: '2021-11-11',
-      ongoing: false,
-      eventType: 'Workshop'
+      page: {
+        ...BlockLinkCardData.data,
+        __typename: 'EDUEventPage',
+        startDate: '2021-11-11',
+        startDatetime: '2021-11-11T00:00:00-08:00',
+        endDatetime: '2021-11-11T23:59:59.999999-08:00',
+        endDate: '2021-11-11',
+        ongoing: false,
+        eventType: 'Workshop'
+      }
+    }
+  }
+}
+export const EduExplainerArticle = {
+  args: {
+    ...BlockLinkCardData,
+    data: {
+      page: {
+        __typename: 'EDUExplainerArticlePage',
+        ...BlockLinkCardData.data,
+        primarySubject: {
+          subject: 'Engineering'
+        },
+        gradeLevels: [
+          { gradeLevel: 'All Ages' },
+          { gradeLevel: 'K' },
+          { gradeLevel: '1' },
+          { gradeLevel: '2' },
+          { gradeLevel: '5' },
+          { gradeLevel: '6' },
+          { gradeLevel: '7' },
+          { gradeLevel: '8' }
+        ]
+      }
     }
   }
 }
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -38,24 +38,21 @@
     </BaseImagePlaceholder>
 
     <div
-      class="BlockLinkCard__CardContent transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform"
+      class="BlockLinkCard__CardContent transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform ThemeVariantLight"
       :class="
         compact
           ? 'can-hover:group-hover:-translate-y-2'
           : 'can-hover:group-hover:-translate-y-3 edu:can-hover:group-hover:-translate-y-2'
       "
     >
-      <template
-        v-if="
-          themeStore.isEdu && ((theItem as EventCardObject).eventType || data?.page?.__typename)
-        "
-      >
+      <template v-if="metadataType && metadataAttrs">
         <BasePill
           class="mb-2"
           size="sm"
-          :content-type="data?.page?.__typename"
-          >{{ (theItem as EventCardObject).eventType }}</BasePill
+          :variant="metadataAttrs.variant"
         >
+          {{ (theItem as EventCardObject).eventType || metadataAttrs.label }}
+        </BasePill>
       </template>
       <template v-else>
         <div class="flex flex-wrap">
@@ -95,16 +92,30 @@
       >
         {{ theItem.date }}
       </p>
-      <template v-if="themeStore.isEdu">
+      <div
+        v-if="metadataType && metadataAttrs"
+        :class="{ 'mt-2 mb-1': !compact, 'mt-1 mb-0': compact }"
+      >
         <MetadataEvent
-          class="mt-2"
+          v-if="metadataType === 'EDUEventPage'"
           :event="theItem"
           compact
         />
-      </template>
+        <MetadataEduResource
+          v-else
+          :resource="theItem as EduResourceCardObject"
+          :variant="eduMetadataDictionaryComputed[metadataType].variant"
+          compact
+        />
+      </div>
     </div>
     <div
-      class="BlockLinkCard__CardArrow ThemeVariantLight can-hover:block text-primary can-hover:-ml-3 can-hover:group-hover:delay-200 can-hover:opacity-0 can-hover:group-hover:ml-0 can-hover:group-hover:opacity-100 hidden -mt-1 text-2xl leading-normal transition-all duration-200 ease-in"
+      class="BlockLinkCard__CardArrow ThemeVariantLight can-hover:block can-hover:-ml-3 can-hover:group-hover:delay-200 can-hover:opacity-0 can-hover:group-hover:ml-0 can-hover:group-hover:opacity-100 hidden -mt-1 text-2xl leading-normal transition-all duration-200 ease-in"
+      :class="
+        metadataType && metadataAttrs
+          ? `text-${eduMetadataDictionaryComputed[metadataType].variant}`
+          : 'text-primary'
+      "
     >
       <IconArrow />
     </div>
@@ -113,7 +124,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue'
-import type { Card, EventCardObject } from '../../interfaces'
+import type { Card, EventCardObject, EduResourceCardObject } from '../../interfaces'
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
@@ -126,6 +137,8 @@ import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder
 import BasePill from './../BasePill/BasePill.vue'
 import CalendarChip from './../CalendarChip/CalendarChip.vue'
 import MetadataEvent from './../MetadataEvent/MetadataEvent.vue'
+import MetadataEduResource from './../MetadataEduResource/MetadataEduResource.vue'
+import { eduMetadataDictionary } from './../../constants'
 
 export default defineComponent({
   name: 'BlockLinkCard',
@@ -136,7 +149,8 @@ export default defineComponent({
     BaseImagePlaceholder,
     BasePill,
     CalendarChip,
-    MetadataEvent
+    MetadataEvent,
+    MetadataEduResource
   },
   props: {
     data: {
@@ -221,6 +235,9 @@ export default defineComponent({
   },
   computed: {
     ...mapStores(useThemeStore),
+    eduMetadataDictionaryComputed() {
+      return eduMetadataDictionary
+    },
     // to allow for various data shapes and sources
     // use-case: content pages provide this.data.page with non-page siblings (i.e. external link cards)
     // use-case: search and listing pages pass individual props
@@ -236,9 +253,9 @@ export default defineComponent({
         this.label ||
         this.title ||
         this.date ||
-        this.eventType ||
         this.startDate ||
         this.endDate ||
+        this.eventType ||
         this.startDatetime ||
         this.endDatetime ||
         this.ongoing ||
@@ -263,6 +280,18 @@ export default defineComponent({
       }
       return undefined
     },
+    metadataType() {
+      const validContentTypes = Object.keys(eduMetadataDictionary)
+      return this.data?.page?.__typename && validContentTypes.includes(this.data?.page?.__typename)
+        ? this.data?.page?.__typename
+        : undefined
+    },
+    metadataAttrs() {
+      if (this.metadataType) {
+        return eduMetadataDictionary[this.metadataType]
+      }
+      return undefined
+    },
     formattedEventDates() {
       return (this.theItem as EventCardObject)?.startDate
         ? mixinFormatEventDates(

diff --git a/packages/vue/src/components/CalendarChip/CalendarChip.vue b/packages/vue/src/components/CalendarChip/CalendarChip.vue
@@ -40,7 +40,7 @@ const splitDate = computed(() => {
         {{ splitDate.year }}
       </div>
     </template>
-    <template v-else>
+    <template v-else-if="splitDate">
       <div class="font-extrabold text-6xl leading-tight tracking-wider">
         {{ splitDate.day }}
       </div>

diff --git a/packages/vue/src/constants.ts b/packages/vue/src/constants.ts
@@ -0,0 +1,11 @@
+import type { PillDictionaryInterface } from './interfaces'
+
+export const eduMetadataDictionary: PillDictionaryInterface = {
+  EDUExplainerArticlePage: {
+    label: 'Explainer Article',
+    variant: 'secondary'
+  },
+  EDUEventPage: {
+    variant: 'primary'
+  }
+}
diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts
@@ -162,3 +162,11 @@ export interface Topic {
 }
 
 export type MetadataType = 'event' | 'resource'
+
+export interface LabelObject {
+  label?: string
+  variant: string
+}
+export interface PillDictionaryInterface {
+  [EDUExplainerArticlePage: string]: LabelObject
+}