@explorer-1/vue 0.2.8 → 0.2.9

package/lib/main.ts

@@ -44,7 +44,7 @@ import BaseModal from './../src/components/BaseModal/BaseModal.vue'
 import BasePlaceholder from './../src/components/BasePlaceholder/BasePlaceholder.vue'
 import BaseRadioGroup from './../src/components/BaseRadioGroup/BaseRadioGroup.vue'
 import BaseSwimlane from './../src/components/BaseSwimlane/BaseSwimlane.vue'
-import BaseTag from './../src/components/BaseTag/BaseTag.vue'
+import BasePill from './../src/components/BasePill/BasePill.vue'
 import BaseTimer from './../src/components/BaseTimer/BaseTimer.vue'
 import BaseUnitToggle from './../src/components/BaseUnitToggle/BaseUnitToggle.vue'
 import BaseVideo from './../src/components/BaseVideo/BaseVideo.vue'
@@ -248,7 +248,7 @@ export {
   BasePlaceholder,
   BaseRadioGroup,
   BaseSwimlane,
-  BaseTag,
+  BasePill,
   BaseTimer,
   BaseUnitToggle,
   BaseVideo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
     "vue": "^3.4.21",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.3"
+    "@explorer-1/common": "1.1.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/{BaseTag/BaseTag.stories.js → BasePill/BasePill.stories.js}

@@ -1,8 +1,8 @@
-import BaseTag from './BaseTag.vue'
+import BasePill from './BasePill.vue'
 
 export default {
-  title: 'Components/Base/BaseTag',
-  component: BaseTag,
+  title: 'Components/Base/BasePill',
+  component: BasePill,
   argTypes: {
     variant: {
       type: { name: 'string', required: false },

package/src/components/BasePill/BasePill.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Attributes } from './../../interfaces'
+import { eduMetadataDictionary } from './../../constants'
+
+// using borders to vertically center wonky font face
+const variantMap: Attributes = {
+  primary: 'bg-primary border-primary',
+  secondary: 'bg-secondary border-secondary',
+  action: 'bg-action border-action'
+}
+
+const sizeMap: Attributes = {
+  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'
+}
+
+interface BasePillProps {
+  variant?: string
+  size?: string
+  contentType?: string
+}
+
+// define props
+const props = withDefaults(defineProps<BasePillProps>(), {
+  variant: 'primary',
+  size: 'md',
+  contentType: undefined
+})
+
+const metadataType = computed(() => {
+  const validContentTypes = Object.keys(eduMetadataDictionary)
+  return props.contentType && validContentTypes.includes(props.contentType)
+    ? props.contentType
+    : undefined
+})
+const metadataAttrs = computed(() => {
+  if (metadataType.value) {
+    return eduMetadataDictionary[metadataType.value]
+  }
+  return { variant: undefined, label: undefined }
+})
+</script>
+<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"
+  >
+    <template v-if="metadataAttrs.label"> {{ metadataAttrs.label }} </template>
+    <template v-else> <slot /></template>
+    <span class="sr-only">.</span>
+  </p>
+</template>

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

@@ -7,12 +7,13 @@ export default {
   component: BlockLinkCard,
   tags: ['!autodocs'],
   excludeStories: /.*Data$/,
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3 lg:grid-cols-3"><story/></div>`
-    })
-  ],
   argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['sm', 'md', 'lg']
+      }
+    },
     headingLevel: {
       description:
         'Change the heading level for semantic markup. This does not affect the style of the heading.',
@@ -47,25 +48,39 @@ export const BlockLinkCardData = {
   },
   headingLevel: 'h2',
   startDate: undefined,
-  endDate: undefined,
-  compact: false
+  endDate: undefined
 }
 
 export const BaseStory = {
   name: 'Single Item',
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
   args: {
     ...BlockLinkCardData
   }
 }
 
 export const SingleItemCompactStyles = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
   args: {
     ...BlockLinkCardData,
     headingLevel: 'h2',
-    compact: true
+    size: 'sm'
   }
 }
 export const Compact = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
   name: 'Compact w/ Custom Props',
   parameters: {
     docs: {
@@ -89,16 +104,82 @@ export const Compact = {
       alt: 'Alt text'
     },
     headingLevel: 'h2',
-    compact: true
+    size: 'sm'
   }
 }
 export const EventItem = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
   args: {
     ...BlockLinkCardData,
     data: {
-      ...BlockLinkCardData.data,
-      startDate: '2021-11-11T00:00:00-08:00',
-      endDate: '2021-11-11T23:59:59.999999-08:00'
+      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 = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  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' }
+        ]
+      }
+    }
+  }
+}
+export const LargeEduExplainerArticle = {
+  args: {
+    ...BlockLinkCardData,
+    size: 'lg',
+    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' }
+        ]
+      }
     }
   }
 }

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -5,13 +5,13 @@
     :to="theItem.url ? theItem.url : undefined"
     :href="theItem.externalLink ? theItem.externalLink : undefined"
     class="BlockLinkCard group"
-    :link-class="`block ${compact ? 'pb-3' : 'pb-5'}`"
+    :link-class="`block ${small ? 'pb-3' : 'pb-5'} ${large ? 'sm:flex flex-row' : ''}`"
     external-target-blank
   >
     <BaseImagePlaceholder
-      aspect-ratio="16:9"
-      class="bg-gray-dark relative mb-6 overflow-hidden"
-      :class="{ 'lg:mb-10': !compact }"
+      :aspect-ratio="large ? '3:2' : '16:9'"
+      class="bg-gray-dark relative mb-6 edu:lg:mb-8 overflow-hidden"
+      :class="{ 'lg:mb-10': medium, 'sm:w-1/3': large }"
       dark-mode
       no-logo
     >
@@ -26,52 +26,100 @@
         loading="lazy"
       />
       <div v-else></div>
+      <CalendarChip
+        v-if="
+          themeStore.isEdu &&
+          ((theItem as EventCardObject).startDate || (theItem as EventCardObject).ongoing)
+        "
+        :start-date="(theItem as EventCardObject).startDate"
+        :end-date="(theItem as EventCardObject).endDate"
+        :ongoing="(theItem as EventCardObject).ongoing"
+      />
     </BaseImagePlaceholder>
 
     <div
-      class="BlockLinkCard__CardContent transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform"
-      :class="
-        compact ? 'can-hover:group-hover:-translate-y-2' : 'can-hover:group-hover:-translate-y-3'
-      "
+      class="BlockLinkCard__CardContent transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform ThemeVariantLight"
+      :class="contentClasses"
     >
-      <div class="flex flex-wrap">
-        <p
-          v-if="theItem.label || theItem.startDate"
-          class="text-subtitle divide-gray-mid flex divide-x"
-          :class="compact ? 'mb-2' : 'mb-4'"
+      <template v-if="metadataType && metadataAttrs">
+        <BasePill
+          :class="{ 'mb-2': !large, 'mb-4': large }"
+          size="sm"
+          :content-type="metadataType"
         >
-          <span
-            v-if="theItem.label"
-            :class="{ 'pr-2': theItem.startDate }"
+          {{ (theItem as EventCardObject).eventType }}
+        </BasePill>
+      </template>
+      <template v-else>
+        <div class="flex flex-wrap">
+          <p
+            v-if="theItem.label || ((theItem as EventCardObject).startDate && !themeStore.isEdu)"
+            class="text-subtitle divide-gray-mid flex divide-x"
+            :class="small ? 'mb-2' : 'mb-4'"
           >
-            {{ theItem.label }}
-          </span>
-          <span
-            v-if="theItem.startDate"
-            :class="{ 'text-gray-mid-dark pl-2': theItem.label }"
-          >
-            {{ formattedEventDates }}
-          </span>
-          <span class="sr-only">.</span>
-        </p>
-      </div>
+            <span
+              v-if="theItem.label"
+              class="edu:text-primary ThemeVariantLight"
+              :class="{ 'pr-2': (theItem as EventCardObject).startDate && !themeStore.isEdu }"
+            >
+              {{ theItem.label }}
+            </span>
+            <span
+              v-if="(theItem as EventCardObject).startDate && !themeStore.isEdu"
+              :class="{ 'text-gray-mid-dark pl-2': theItem.label }"
+            >
+              {{ formattedEventDates }}
+            </span>
+            <span class="sr-only">.</span>
+          </p>
+        </div>
+      </template>
 
       <component
         :is="headingLevel || 'p'"
         class="text-gray-dark text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
-        :class="{ 'lg:text-3xl': !compact }"
+        :class="{ 'lg:text-3xl': !small }"
       >
         {{ theItem.title }}
       </component>
       <p
         v-if="theItem.date"
         class="text-gray-mid-dark mt-2"
+        :class="{ 'mt-2': !large, 'mt-4': large }"
       >
         {{ theItem.date }}
       </p>
+      <p
+        v-if="large && theItem.summary"
+        class="mt-4 text-gray-mid-dark"
+      >
+        {{ theItem.summary }}
+      </p>
+      <div
+        v-if="metadataType && metadataAttrs"
+        :class="{ 'mt-4': large, 'mt-2 mb-1': medium, 'mt-1 mb-0': small }"
+      >
+        <MetadataEvent
+          v-if="metadataType === 'EDUEventPage'"
+          :event="theItem"
+          compact
+        />
+        <MetadataEduResource
+          v-else-if="metadataType === 'EDUExplainerArticlePage'"
+          :resource="theItem as EduResourceCardObject"
+          :variant="eduMetadataDictionaryComputed[metadataType].variant"
+          compact
+        />
+      </div>
     </div>
     <div
-      class="BlockLinkCard__CardArrow ThemeVariantLight can-hover:block text-action 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"
+      v-if="!large"
+      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>
@@ -80,14 +128,21 @@
 
 <script lang="ts">
 import type { PropType } from 'vue'
+import type { Card, EventCardObject, EduResourceCardObject } from '../../interfaces'
 import { defineComponent } from 'vue'
-import type { Card } from '../../interfaces'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import { mixinFormatEventDates } from './../../utils/mixins'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import IconArrow from './../Icons/IconArrow.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
-import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
+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',
@@ -95,7 +150,11 @@ export default defineComponent({
     IconArrow,
     BaseLink,
     BaseImage,
-    BaseImagePlaceholder
+    BaseImagePlaceholder,
+    BasePill,
+    CalendarChip,
+    MetadataEvent,
+    MetadataEduResource
   },
   props: {
     data: {
@@ -135,6 +194,10 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    eventType: {
+      type: String,
+      default: undefined
+    },
     startDate: {
       type: String,
       required: false,
@@ -145,11 +208,27 @@ export default defineComponent({
       required: false,
       default: undefined
     },
-    // if styling should be compact
-    compact: {
+    ongoing: {
       type: Boolean,
       default: false
     },
+    startDatetime: {
+      type: String,
+      default: undefined
+    },
+    endDatetime: {
+      type: String,
+      default: undefined
+    },
+    location: {
+      type: String,
+      default: undefined
+    },
+    // if styling should be compact
+    size: {
+      type: String,
+      default: 'md'
+    },
     // if a heading should be used and at what level
     headingLevel: {
       type: (String as PropType<HeadingLevel>) || null,
@@ -158,10 +237,34 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
+    small() {
+      return this.size === 'sm'
+    },
+    medium() {
+      return this.size === 'md'
+    },
+    large() {
+      return this.size === 'lg'
+    },
+    contentClasses() {
+      let classes = ''
+      if (this.small) {
+        classes = 'can-hover:group-hover:-translate-y-2'
+      } else if (this.medium) {
+        classes = 'can-hover:group-hover:-translate-y-3 edu:can-hover:group-hover:-translate-y-2'
+      } else if (this.large) {
+        classes = 'sm:pl-8 sm:w-2/3'
+      }
+      return classes
+    },
+    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
-    theItem(): Card | undefined {
+    theItem(): Card | EventCardObject | EduResourceCardObject | undefined {
       if ((this.data as Card)?.page) {
         return (this.data as Card).page
       } else if (this.data) {
@@ -174,7 +277,12 @@ export default defineComponent({
         this.title ||
         this.date ||
         this.startDate ||
-        this.endDate
+        this.endDate ||
+        this.eventType ||
+        this.startDatetime ||
+        this.endDatetime ||
+        this.ongoing ||
+        this.location
       ) {
         // form a custom object
         return {
@@ -185,14 +293,34 @@ export default defineComponent({
           title: this.title,
           date: this.date,
           startDate: this.startDate,
-          endDate: this.endDate
+          endDate: this.endDate,
+          eventType: this.eventType,
+          startDatetime: this.startDatetime,
+          endDatetime: this.endDatetime,
+          ongoing: this.ongoing,
+          locationName: this.location
         }
       }
       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?.startDate
-        ? mixinFormatEventDates(this.theItem.startDate, this.theItem.endDate)
+      return (this.theItem as EventCardObject)?.startDate
+        ? mixinFormatEventDates(
+            (this.theItem as EventCardObject).startDate,
+            (this.theItem as EventCardObject).endDate
+          )
         : undefined
     }
   }
@@ -214,5 +342,18 @@ export default defineComponent({
       @apply bg-gray-mid-dark;
     }
   }
+  .MetadataEvent,
+  .MetadataEduResource {
+    &.-compact {
+      .MetadataEventItem,
+      .MetadataEduResourceItem {
+        @apply mr-2.5;
+      }
+    }
+    .MetadataEventIcon,
+    .MetadataEduResourceIcon {
+      @apply mr-1;
+    }
+  }
 }
 </style>

package/src/components/BlockLinkCarousel/BlockLinkCarousel.stories.js

@@ -143,10 +143,18 @@ export const EventsBlockLinkCarouselData = [
       }
     },
     title: 'Past event',
-    url: '/events/becoming-a-nasa-engineer'
+    url: '/events/becoming-a-nasa-engineer',
+    startDatetime: '2019-11-11T00:00:00-08:00',
+    ongoing: false,
+    isVirtualEvent: false,
+    endDatetime: null,
+    eventType: 'Internship',
+    locationName: 'Webcast',
+    locationLink: 'https://www.nasa.gov',
+    customDate: undefined
   },
   {
-    endDate: null,
+    endDate: '2021-12-1',
     startDate: '2021-11-27',
     thumbnailImage: {
       src: {
@@ -156,7 +164,56 @@ export const EventsBlockLinkCarouselData = [
       }
     },
     title: 'Future event',
-    url: '/events/becoming-a-nasa-engineer'
+    eventType: 'Workshop',
+    url: '/events/becoming-a-nasa-engineer',
+    startDatetime: '2021-11-11T00:00:00-08:00',
+    ongoing: false,
+    isVirtualEvent: false,
+    endDatetime: '2021-12-01T23:59:59.999999-08:00',
+    locationName: 'Webcast',
+    locationLink: 'https://www.nasa.gov',
+    customDate: undefined
+  },
+  {
+    endDate: '2021-12-1',
+    startDate: '2021-11-27',
+    thumbnailImage: {
+      src: {
+        height: '288',
+        url: 'https://picsum.photos/512/288',
+        width: '512'
+      }
+    },
+    title: 'Custom event',
+    eventType: 'Workshop',
+    url: '/events/becoming-a-nasa-engineer',
+    startDatetime: '2021-11-11T00:00:00-08:00',
+    customDate: 'Custom date goes here',
+    ongoing: false,
+    isVirtualEvent: false,
+    endDatetime: '2021-12-01T23:59:59.999999-08:00',
+    locationName: 'Webcast',
+    locationLink: 'https://www.nasa.gov'
+  },
+  {
+    endDate: '2021-12-1',
+    startDate: '2021-11-27',
+    thumbnailImage: {
+      src: {
+        height: '288',
+        url: 'https://picsum.photos/512/288',
+        width: '512'
+      }
+    },
+    title: 'Ongoing event',
+    url: '/events/becoming-a-nasa-engineer',
+    startDatetime: '2021-11-11T00:00:00-08:00',
+    customDate: 'Custom date goes here',
+    ongoing: true,
+    isVirtualEvent: false,
+    endDatetime: '2021-12-01T23:59:59.999999-08:00',
+    locationName: 'Webcast',
+    locationLink: 'https://www.nasa.gov'
   }
 ]