@explorer-1/vue 0.2.7 → 0.2.9

package/src/components/MetadataEduResource/MetadataEduResource.stories.js

@@ -0,0 +1,59 @@
+import MetadataEduResource from './MetadataEduResource.vue'
+
+export default {
+  title: 'Components/Utilities/MetadataEduResource',
+  component: MetadataEduResource,
+  tags: ['!autodocs'],
+  argTypes: {
+    variant: {
+      type: { name: 'string', required: false },
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary']
+      }
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+// data
+export const MetadataEduResourceData = {
+  resource: {
+    title: 'Event title',
+    primarySubject: {
+      subject: 'Engineering'
+    },
+    gradeLevels: [
+      {
+        gradeLevel: 'All Ages'
+      }
+    ]
+  },
+  compact: false,
+  variant: 'primary'
+}
+
+export const BaseStory = {
+  name: 'MetadataEduResource',
+  args: { ...MetadataEduResourceData }
+}
+
+export const MultipleGradeLevels = {
+  args: {
+    ...MetadataEduResourceData,
+    resource: {
+      ...MetadataEduResourceData.resource,
+      gradeLevels: [
+        { gradeLevel: 'All Ages' },
+        { gradeLevel: 'K' },
+        { gradeLevel: '1' },
+        { gradeLevel: '2' },
+        { gradeLevel: '5' },
+        { gradeLevel: '6' },
+        { gradeLevel: '7' },
+        { gradeLevel: '8' }
+      ]
+    },
+    variant: 'secondary'
+  }
+}

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { EduResourceCardObject } from './../../interfaces.ts'
+import IconSubject from './../Icons/IconSubject.vue'
+import IconProfile from './../Icons/IconProfile.vue'
+// import IconTime from './../Icons/IconTime.vue'
+import {} from './../../utils/mixins'
+import { rangeifyGrades } from './../../utils/rangeifyGrades'
+
+interface MetadataEduResourceProps {
+  resource: EduResourceCardObject
+  compact?: boolean
+  variant?: string
+}
+
+// define props
+const props = withDefaults(defineProps<MetadataEduResourceProps>(), {
+  resource: undefined,
+  compact: false,
+  variant: 'primary'
+})
+
+const iconClass = computed(() => {
+  return props.variant === 'primary' ? 'text-primary' : 'text-secondary'
+})
+const primarySubject = computed(() => {
+  return props.resource?.primarySubject?.subject
+})
+const audience = computed(() => {
+  return rangeifyGrades(props.resource?.gradeLevels)
+})
+</script>
+<template>
+  <div
+    class="MetadataEduResource"
+    :class="{ '-compact text-body-sm': props.compact, 'text-body-lg': !props.compact }"
+  >
+    <div
+      v-if="primarySubject"
+      class="MetadataEduResourceItem"
+    >
+      <IconSubject
+        class="MetadataEduResourceIcon text-[1.25em]"
+        :class="iconClass"
+      />
+      <span>
+        {{ primarySubject }}
+      </span>
+    </div>
+    <div
+      v-if="audience"
+      class="MetadataEduResourceItem"
+    >
+      <IconProfile
+        class="MetadataEduResourceIcon text-[1.3em]"
+        :class="iconClass"
+      />
+      <span>{{ audience }}</span>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.MetadataEduResource {
+  @apply lg:flex lg:flex-grow;
+  .MetadataEduResourceItem {
+    @apply flex;
+    @apply items-start;
+    @apply mr-4 md:mr-4 xl:mr-8;
+    @apply mb-5 lg:mb-7;
+    @apply lg:min-w-[10rem];
+
+    span {
+      @apply text-gray-dark;
+    }
+
+    svg {
+      min-width: 1.25rem;
+      @apply top-0.5;
+    }
+    .MetadataEduResourceIcon {
+      @apply relative mr-3 lg:mr-2 xl:mr-3;
+    }
+  }
+
+  &.-compact {
+    @apply flex flex-grow;
+    .MetadataEduResourceItem {
+      @apply max-w-none min-w-[4em];
+      @apply mr-6 mb-0;
+    }
+  }
+}
+</style>

package/src/components/MetadataEvent/MetadataEvent.stories.js

@@ -0,0 +1,31 @@
+import MetadataEvent from './MetadataEvent.vue'
+
+export default {
+  title: 'Components/Utilities/MetadataEvent',
+  component: MetadataEvent,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
+}
+
+// data
+export const MetadataEventData = {
+  event: {
+    title: 'Event title',
+    location: 'Location',
+    startDate: '2021-11-11',
+    startDatetime: '2021-11-11T00:00:00-08:00',
+    endDate: '2021-11-11',
+    ongoing: false,
+    isVirtualEvent: false,
+    endDatetime: '2021-11-11T23:59:59.999999-08:00',
+    locationName: 'Webcast',
+    locationLink: 'https://www.nasa.gov',
+    customDate: undefined
+  },
+  compact: false
+}
+
+export const BaseStory = {
+  name: 'MetadataEvent',
+  args: MetadataEventData
+}

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useThemeStore } from '../../store/theme'
+import type { EventCardObject } from './../../interfaces.ts'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import IconCalendar from './../Icons/IconCalendar.vue'
+import IconTime from './../Icons/IconTime.vue'
+import IconLocation from './../Icons/IconLocation.vue'
+import { mixinFormatEventDates, mixinFormatEventTimeInHoursAndMinutes } from './../../utils/mixins'
+const themeStore = useThemeStore()
+
+interface MetadataEventProps {
+  event: EventCardObject
+  compact?: boolean
+  allowBreak?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<MetadataEventProps>(), {
+  event: undefined,
+  compact: false,
+  allowBreak: false
+})
+
+const startDatetimeForFormatting = computed(() => {
+  return props.event?.startDatetime || props.event?.startDate
+})
+
+const formattedEventDates = computed((): string | undefined => {
+  return props.event && startDatetimeForFormatting.value
+    ? mixinFormatEventDates(
+        startDatetimeForFormatting.value,
+        props.event.endDatetime || props.event.endDate
+      )
+    : undefined
+})
+const displayTime = computed((): string => {
+  if (!props.event.customDate) {
+    const time =
+      props.event && startDatetimeForFormatting.value
+        ? mixinFormatEventTimeInHoursAndMinutes(
+            startDatetimeForFormatting.value,
+            props.event.endDatetime || props.event.endDate,
+            props.event.endTime
+          )
+        : undefined
+    return time ? (themeStore.isEdu ? time.replaceAll(':00', '') : time) : ''
+  }
+  return ''
+})
+const locationName = computed(() => {
+  return props.event?.locationName || props.event?.location
+})
+</script>
+<template>
+  <div
+    class="MetadataEvent"
+    :class="{
+      '-compact text-body-sm': props.compact,
+      'text-body-lg': !props.compact,
+      '-allow-break': props.allowBreak
+    }"
+  >
+    <div
+      v-if="props.event.ongoing || props.event.customDate || formattedEventDates"
+      class="MetadataEventItem"
+    >
+      <IconCalendar class="MetadataEventIcon text-[1.05em]" />
+      <span>{{
+        props.event.ongoing ? 'Ongoing' : props.event.customDate || formattedEventDates
+      }}</span>
+    </div>
+    <div
+      v-show="displayTime"
+      class="MetadataEventItem"
+    >
+      <IconTime class="MetadataEventIcon text-[1.15em]" />
+      <span>{{ displayTime }}</span>
+    </div>
+    <!--Virtual location -->
+    <div
+      v-if="props.event.isVirtualEvent && props.event.locationLink && !props.compact"
+      itemprop="location"
+      itemscope
+      itemtype="https://schema.org/VirtualLocation"
+      class="MetadataEventItem"
+    >
+      <link
+        itemprop="url"
+        :href="props.event.locationLink"
+      />
+      <meta
+        itemprop="name"
+        :content="locationName"
+      />
+      <IconLocation class="MetadataEventIcon text-[1.1em]" />
+      <BaseLink
+        variant="none"
+        class="text-action"
+        :href="props.event.locationLink"
+        external-target-blank
+      >
+        {{ locationName }}
+      </BaseLink>
+    </div>
+    <!-- Normal location -->
+    <div
+      v-else-if="locationName"
+      class="MetadataEventItem"
+    >
+      <meta
+        v-if="!props.compact"
+        itemprop="location"
+        :content="locationName"
+      />
+      <IconLocation class="MetadataEventIcon text-[1.2em]" />
+      <BaseLink
+        v-if="props.event.locationLink && !props.compact"
+        variant="none"
+        class="text-action"
+        :href="props.event.locationLink"
+        external-target-blank
+      >
+        {{ locationName }}
+      </BaseLink>
+      <span v-else>{{ locationName }}</span>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.MetadataEvent {
+  @apply lg:flex lg:flex-grow;
+  .MetadataEventItem {
+    @apply flex;
+    @apply items-start;
+    @apply mr-4 md:mr-4 xl:mr-8;
+    @apply mb-5 lg:mb-7;
+    @apply lg:min-w-[10rem];
+
+    span {
+      @apply text-gray-dark;
+    }
+
+    svg {
+      min-width: 1.25rem;
+      @apply top-0.5;
+    }
+    .MetadataEventIcon {
+      @apply text-primary relative mr-3 lg:mr-2 xl:mr-3;
+    }
+  }
+
+  &.-compact {
+    @apply flex flex-grow;
+    .MetadataEventItem {
+      @apply max-w-none min-w-[4em];
+      @apply mr-6 mb-0;
+    }
+    &.-allow-break {
+      @apply block lg:flex;
+    }
+  }
+}
+</style>

package/src/components/NavMobile/NavMobile.vue

@@ -295,7 +295,9 @@ export default defineComponent({
   // styles for default vs transparent header
   // underline color and logo inversion styles handled within their respective components
   &.-scrolled {
-    @apply fixed;
+    @media not print {
+      @apply fixed;
+    }
   }
 }
 // vue-transition classes

package/src/components/SearchResultCard/SearchResultCard.stories.js

@@ -1,7 +1,7 @@
 import SearchResultCard from './SearchResultCard.vue'
 
 export default {
-  title: 'Components/Search/SearchResultCard',
+  title: 'Components/Cards/SearchResultCards',
   component: SearchResultCard,
   argTypes: {
     headingLevel: {
@@ -32,17 +32,16 @@ export const SearchResultCardData = {
     },
     alt: 'Alt text'
   },
-  headingLevel: 'h3',
-  featured: false
+  headingLevel: 'h3'
 }
 
-export const BaseStory = { name: 'Standard Result', args: SearchResultCardData }
+export const BaseStory = { name: 'SearchResultCard', args: SearchResultCardData }
 
 export const FeaturedResult = {
   args: { ...SearchResultCardData, featured: true }
 }
 
-export const EventResult = {
+export const EventCard = {
   args: {
     ...SearchResultCardData,
     isEvents: true,
@@ -55,3 +54,21 @@ export const EventResult = {
     compact: false
   }
 }
+export const PodcastEpisodeCard = {
+  args: {
+    ...SearchResultCardData,
+    isPodcastSeason: true,
+    type: 'Podcast',
+    compact: false
+  }
+}
+
+export const EduEventCard = {
+  args: {
+    ...SearchResultCardData,
+    pageContentType: 'eduevents_edueventpage',
+    startDate: '2021-11-11',
+    endDate: '2021-11-11',
+    eventType: 'Internship'
+  }
+}

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -1,7 +1,32 @@
 <template>
   <div>
+    <BlockLinkCard
+      v-if="themeStore.isEdu"
+      :heading-level="headingLevel"
+      size="lg"
+      :data="{
+        page: {
+          __typename: pageContentType
+            ? (searchContentTypeToPageType[pageContentType] as string)
+            : undefined,
+          url,
+          type,
+          label: topic,
+          date,
+          title,
+          summary,
+          thumbnailImage: image,
+          startTime,
+          startDate,
+          endTime,
+          endDate,
+          location,
+          eventType: eventType
+        }
+      }"
+    />
     <EventCard
-      v-if="isEvents"
+      v-else-if="isEvents"
       :url="url"
       :title="title"
       :summary="summary"
@@ -170,7 +195,7 @@
             :src="image.src.url"
             :width="image.src.width"
             :height="image.src.height"
-            :alt="image.alt"
+            :alt="image.alt || ''"
             class="object-cover w-full h-full"
             loading="lazy"
             data-chromatic="ignore"
@@ -184,12 +209,16 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import PodcastEpisodeCard from './../PodcastEpisodeCard/PodcastEpisodeCard.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import EventCard from './../EventCard/EventCard.vue'
+import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
+import { searchContentTypeToPageType } from './../../constants'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 
 export default defineComponent({
@@ -200,6 +229,7 @@ export default defineComponent({
     BaseImage,
     BaseImagePlaceholder,
     EventCard,
+    BlockLinkCard,
     PodcastEpisodeCard
   },
   props: {
@@ -210,27 +240,38 @@ export default defineComponent({
     },
     type: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
+    },
+    eventType: {
+      type: String,
+      required: false,
+      default: undefined
     },
     topic: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     date: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     summary: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     image: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
     featured: {
       type: Boolean,
@@ -256,27 +297,43 @@ export default defineComponent({
     },
     media: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     startTime: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     startDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     endTime: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     endDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     location: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
+    },
+    pageContentType: {
+      type: String,
+      default: undefined
+    }
+  },
+  computed: {
+    ...mapStores(useThemeStore),
+    searchContentTypeToPageType() {
+      return searchContentTypeToPageType
     }
   }
 })

package/src/components/SearchResultGridItem/SearchResultGridItem.stories.js

@@ -1,7 +1,7 @@
 import SearchResultGridItem from './SearchResultGridItem.vue'
 
 export default {
-  title: 'Components/Search/SearchResultGridItem',
+  title: 'Components/Cards/SearchResultGridItem',
   component: SearchResultGridItem,
   decorators: [
     () => ({
@@ -69,3 +69,10 @@ export const MissionResult = {
     headingLevel: 'h2'
   }
 }
+export const Event = {
+  args: {
+    ...SearchResultGridCardData.page,
+    startTime: '00:00:00-08:00',
+    startDate: '2021-11-11'
+  }
+}