@explorer-1/vue 0.2.53 → 0.2.55

package/package.json

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

package/src/components/BaseImage/BaseImage.vue

@@ -53,11 +53,6 @@ export default defineComponent({
       default: 'lazy'
     }
   },
-  data() {
-    return {
-      lazyNative: true
-    }
-  },
   computed: {
     computedClass(): string {
       let classes = ''
@@ -67,31 +62,10 @@ export default defineComponent({
       if (this.objectFitClass) {
         classes = classes + ' ' + objectFitClasses[this.objectFitClass]
       }
-      if (!this.lazyNative) {
-        classes = classes + ' lazyload'
-      }
       return classes
     }
   },
-  mounted() {
-    this.featureDetectImageLazyLoad()
-  },
   methods: {
-    featureDetectImageLazyLoad() {
-      if ('loading' in HTMLImageElement.prototype) {
-        const image = this.$refs.BaseImage ? (this.$refs.BaseImage as HTMLImageElement) : null
-        this.lazyNative = true
-        // reassign dataset attributes
-        if (image && image.dataset.src) {
-          image.src = image.dataset.src
-        }
-        if (image && image.dataset.srcset) {
-          image.srcset = image.dataset.srcset
-        }
-      } else {
-        this.lazyNative = false
-      }
-    },
     imageFailed() {
       console.log('Image failed to load.')
     }
@@ -105,8 +79,8 @@ export default defineComponent({
       ref="BaseImage"
       class="BaseImage print:border print:border-gray-mid"
       :class="computedClass"
-      :data-src="src"
-      :data-srcset="srcset"
+      :src="src"
+      :srcset="srcset"
       :alt="alt"
       :width="width"
       :height="height"

package/src/components/BlockHeading/BlockHeading.vue

@@ -19,7 +19,7 @@ import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
 export interface BlockHeadingObject {
   blockType?: string
-  heading: HeadingLevel
+  heading: string
   level?: HeadingLevel
   size?: string
   blockId?: string

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -1,14 +1,13 @@
 <template>
-  <div v-if="data">
+  <div v-if="data?.url">
     <template v-if="data.height">
       <iframe
         v-if="data.url"
         ref="BlockIframeEmbed"
         loading="lazy"
         class="w-full border-none print:!border print:border-gray-dark"
-        :class="{ lazyload: !lazyNative }"
         :title="data.title"
-        :data-src="data.url"
+        :src="data.url"
         width="90%"
         :height="data.height"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
@@ -28,9 +27,8 @@
             ref="BlockIframeEmbed"
             loading="lazy"
             class="w-full border-none"
-            :class="{ lazyload: !lazyNative }"
             :title="data.title"
-            :data-src="data.url"
+            :src="data.url"
             data-chromatic="ignore"
             width="90%"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
@@ -60,29 +58,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      required: false
-    }
-  },
-  data() {
-    return {
-      lazyNative: true
-    }
-  },
-  mounted() {
-    this.featureDetectIframeLazyLoad()
-  },
-  methods: {
-    featureDetectIframeLazyLoad() {
-      if ('loading' in HTMLIFrameElement.prototype) {
-        const iframe = this.$refs.BlockIframeEmbed as HTMLIFrameElement
-        this.lazyNative = true
-        // move data-src attribute to src
-        if (iframe.dataset.src) {
-          iframe.src = iframe.dataset.src
-        }
-      } else {
-        this.lazyNative = false
-      }
+      default: undefined
     }
   },
   computed: {

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

@@ -10,9 +10,9 @@ export default {
   argTypes: {
     size: {
       control: {
-        type: 'select',
-        options: ['sm', 'md', 'lg']
-      }
+        type: 'select'
+      },
+      options: ['sm', 'md', 'lg']
     },
     headingLevel: {
       description:
@@ -152,6 +152,29 @@ export const EventItemWithChip = {
     }
   }
 }
+export const EventWithDateNoTime = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    ...BlockLinkCardData,
+    showCalendarChip: true,
+    data: {
+      page: {
+        ...BlockLinkCardData.data,
+        __typename: 'EDUEventPage',
+        startDate: '2021-11-11',
+        startDatetime: null,
+        endDatetime: null,
+        endDate: '2021-11-12',
+        ongoing: false,
+        eventType: 'Workshop'
+      }
+    }
+  }
+}
 export const EduLesson = {
   decorators: [
     () => ({
@@ -160,6 +183,7 @@ export const EduLesson = {
   ],
   args: {
     ...BlockLinkCardData,
+    size: 'sm',
     data: {
       page: {
         __typename: 'EDULessonPage',
@@ -172,7 +196,10 @@ export const EduLesson = {
           { gradeLevel: '1' },
           { gradeLevel: '2' },
           { gradeLevel: '8' }
-        ]
+        ],
+        time: {
+          time: '1-2 hrs'
+        }
       }
     }
   }

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -98,7 +98,7 @@
       </component>
       <p
         v-if="(theItem as EventCardObject).targetAudience"
-        :class="{ 'mt-2': !large, 'mt-4': large }"
+        :class="{ 'mt-1': !large, 'mt-4': large }"
       >
         <strong>Target Audience:</strong> {{ (theItem as EventCardObject).targetAudience }}
       </p>

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -63,8 +63,6 @@ export default defineComponent({
       if (!this.data?.embed) {
         return
       }
-
-      // TODO: not using feature detect as that would require rewriting the html output from wagtail to set data-src instead of src
       // get the iframe in this component
       const iframe = this.$el.querySelector('iframe')
       if (iframe) {

package/src/components/HeroMedia/HeroMedia.vue

@@ -109,7 +109,7 @@ export default defineComponent({
   computed: {
     ...mapStores(useThemeStore),
     theImageCaption(): string | undefined {
-      if (this.image && this.caption && this.caption.length > 2 && this.displayCaption) {
+      if (this.displayCaption && this.image && this.caption && this.caption.length > 2) {
         return this.caption
       } else if (
         this.image &&
@@ -135,10 +135,12 @@ export default defineComponent({
     },
     // to handle captions for videos
     customCaption(): Partial<ImageObject> | undefined {
-      if ((this.caption && this.caption.length > 2) || this.credit) {
-        return {
-          caption: this.caption,
-          credit: this.credit
+      if (this.displayCaption) {
+        if ((this.caption && this.caption.length > 2) || this.credit) {
+          return {
+            caption: this.caption,
+            credit: this.credit
+          }
         }
       }
       return undefined

package/src/components/HeroMedium/HeroMedium.vue

@@ -20,7 +20,7 @@
           media="(min-width: 420px)"
           :srcset="theImage.screenMd?.url"
         />
-        <source :data-srcset="theImage.screenSm?.url" />
+        <source :srcset="theImage.screenSm?.url" />
         <img
           class="object-cover w-full h-full"
           :src="theImage.src.url"

package/src/components/MetaPanel/MetaPanel.vue

@@ -128,7 +128,7 @@ const standardsIste = computed(() => {
       >
         <div class="col-start-container lg:col-start-indent-col-2 col-end-container">
           <div class="MetaPanel-heading lg:grid grid-cols-12 col-end-container container">
-            <div class="col-start-1 col-end-10 xl:col-end-9 pl-4 lg:pl-10 pr-6 py-6 lg:py-10">
+            <div class="col-start-1 col-end-9 xl:col-end-9 pl-4 lg:pl-10 pr-6 py-6 lg:py-10">
               <MetaPanelItems
                 :theme="theme"
                 :primary-subject="primarySubject"
@@ -138,8 +138,8 @@ const standardsIste = computed(() => {
               />
             </div>
             <div
-              v-if="button"
-              class="ThemeVariantLight col-start-10 col-end-13 pl-4 lg:pl-0 pt-4 pb-6 lg:pr-4 xl:pr-10 2xl:pr-0 lg:py-10 lg:text-right"
+              v-if="button && (standards?.length || $slots.metaInfo)"
+              class="ThemeVariantLight col-start-9 col-end-13 pl-4 lg:pl-0 pt-4 pb-6 lg:pr-4 xl:pr-10 2xl:pr-0 lg:py-10 lg:text-right"
             >
               <BaseButton
                 variant="secondary"
@@ -164,7 +164,7 @@ const standardsIste = computed(() => {
           </div>
         </div>
         <div
-          v-if="standards || $slots.metaInfo"
+          v-if="standards?.length || $slots.metaInfo"
           v-show="metaPanelOpen"
           class="MetaPanel-panel col-start-container lg:col-start-indent-col-2 col-end-bleed lg:grid grid-cols-subgrid bg-gray-light pb-3 lg:pb-6"
         >
@@ -176,11 +176,11 @@ const standardsIste = computed(() => {
                 <slot name="metaInfo" />
               </div>
               <div
-                v-if="standards"
+                v-if="standards?.length"
                 class="pt-6 lg:pt-7"
               >
                 <div
-                  class="text-subtitle mb-5"
+                  class="ThemeVariantGray text-subtitle mb-5"
                   :class="headingClass"
                 >
                   Standards

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -42,7 +42,7 @@ const time = computed(() => {
 <template>
   <div
     class="MetadataEduResource"
-    :class="{ '-compact text-body-sm': props.compact, 'text-body-lg': !props.compact }"
+    :class="{ '-compact text-sm xl:text-base': props.compact, 'text-body-lg': !props.compact }"
   >
     <div
       v-if="primarySubject"
@@ -69,6 +69,7 @@ const time = computed(() => {
     <div
       v-if="time && showTime"
       class="MetadataEduResourceItem"
+      :class="primarySubject && audience && time ? '-xlScreensOnly' : ''"
     >
       <IconTime
         class="MetadataEduResourceIcon text-[1.15em]"
@@ -102,10 +103,14 @@ const time = computed(() => {
   }
 
   &.-compact {
-    @apply flex flex-grow;
+    @apply flex flex-grow flex-wrap;
     .MetadataEduResourceItem {
+      @apply whitespace-nowrap;
       @apply max-w-none min-w-[4em];
       @apply mr-6 mb-0;
+      &.-xlScreensOnly {
+        @apply hidden xl:flex;
+      }
     }
   }
 }

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -76,7 +76,7 @@ const location = computed(() => {
   <div
     class="MetadataEvent"
     :class="{
-      '-compact text-body-sm': props.compact,
+      '-compact text-sm xl:text-base': props.compact,
       'text-body-lg': !props.compact,
       '-allow-break': props.allowBreak
     }"
@@ -173,8 +173,9 @@ const location = computed(() => {
   }
 
   &.-compact {
-    @apply flex flex-grow;
+    @apply flex flex-grow flex-wrap;
     .MetadataEventItem {
+      @apply whitespace-nowrap;
       @apply max-w-none min-w-[4em];
       @apply mr-6 mb-0;
     }

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -19,6 +19,7 @@
           <NavJumpMenuContent
             :key="index"
             :item="item"
+            v-bind="$attrs"
           />
         </NavSecondaryDropdown>
       </template>
@@ -41,17 +42,20 @@ import NavSecondary from './../NavSecondary/NavSecondary.vue'
 import NavSecondaryDropdown from './../NavSecondary/NavSecondaryDropdown.vue'
 import NavSecondaryLink from './../NavSecondary/NavSecondaryLink.vue'
 import NavJumpMenuContent from './../NavJumpMenu/NavJumpMenuContent.vue'
+import type { BlockHeadingObject } from './../BlockHeading/BlockHeading.vue'
 import type { BlockData, BreadcrumbPathObject } from './../../interfaces'
 import { getHeadingId } from '../../utils/getHeadingId'
 
 interface NavJumpMenuProps {
   title?: string
   jumpLinks?: BreadcrumbPathObject[]
-  blocks?: BlockData[]
+  blocks?: BlockData[] | BlockHeadingObject[]
   headingLevel?: string
   invert?: boolean
   enabled?: boolean
   dropdownText?: string
+  // stepsNumbering?: boolean
+  // stepClasses?: string
 }
 
 const props = withDefaults(defineProps<NavJumpMenuProps>(), {
@@ -63,6 +67,8 @@ const props = withDefaults(defineProps<NavJumpMenuProps>(), {
   invert: true,
   hidden: false,
   dropdownText: 'Jump to…'
+  // stepsNumbering: false,
+  // stepClasses: 'text-primary'
 })
 
 const NavJumpMenuRef = ref()

package/src/components/NavJumpMenu/NavJumpMenuContent.vue

@@ -11,6 +11,12 @@
         :link-class="linkClass(child)"
       >
         <span>
+          <span
+            v-if="$attrs['steps-numbering']"
+            :class="$attrs['steps-classes']"
+            aria-hidden
+            >{{ `Step ${index + 1}:` }}</span
+          >
           {{ child.title }}
         </span>
       </BaseLink>
@@ -33,7 +39,6 @@ export default defineComponent({
     BaseLink
   },
   props: {
-    // the tertiary nav item object that includes path, title, and children
     item: {
       type: Object,
       required: true

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -139,6 +139,7 @@ export default {
           if (newVal.length > 0) {
             query = {
               ...this.$route.query,
+              page: 1,
               [this.groupKey]: newVal.toString()
             }
           } else {

package/src/components/SearchInput/SearchInput.vue

@@ -8,6 +8,7 @@ interface SearchInputProps {
   placeholder?: string
   autoFocus?: boolean
   defaultColors?: boolean
+  withButton?: boolean
 }
 
 // define props
@@ -16,10 +17,11 @@ const props = withDefaults(defineProps<SearchInputProps>(), {
   underlinedInputValue: undefined,
   placeholder: '',
   autoFocus: false,
-  defaultColors: true
+  defaultColors: true,
+  withButton: false
 })
 
-const emit = defineEmits(['input', 'esc'])
+const emit = defineEmits(['input', 'esc', 'submit'])
 
 const model = defineModel()
 const isFocused = ref(false)
@@ -67,20 +69,29 @@ onMounted(() => {
     <input
       ref="searchQueryRef"
       v-model="model"
-      class="pl-14 focus:ring-2 relative z-10 w-full pr-5 text-lg bg-transparent border-0"
+      class="pl-14 h-full focus:ring-2 relative z-10 w-full px-5 text-sm md:text-base lg:text-lg bg-transparent border-0"
       :class="{
         'text-gray-dark': defaultColors,
         'py-1': underlinedInput,
-        'py-4': !underlinedInput
+        'py-3.5 lg:py-5': !underlinedInput
       }"
       type="search"
       aria-label="Query"
       :placeholder="placeholder"
       @keydown.esc="emit('esc')"
+      @keydown.enter="emit('submit')"
       @input="emit('input', $event.target)"
       @focus="isFocused = true"
       @blur="isFocused = false"
     />
+    <button
+      v-if="withButton"
+      class="z-10 cursor-pointer bg-action p-4 lg:p-5 border border-white"
+      aria-label="Search resources"
+      @click="emit('submit')"
+    >
+      <IconSearch class="relative z-10 text-xl sm:text-2xl lg:text-3xl text-white" />
+    </button>
   </div>
 </template>
 <style lang="scss" scoped>

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

@@ -66,9 +66,20 @@ export const PodcastEpisodeCard = {
 export const EduEventCard = {
   args: {
     ...SearchResultCardData,
-    pageContentType: 'eduevents_edueventpage',
+    __typename: 'EDUEventPage',
+    pageType: 'EDUEventPage',
+    contentType: 'EDUEventPage',
+    topic: null,
+    date: null,
+    isEvents: true,
+    type: 'Event',
     startDate: '2021-11-11',
     endDate: '2021-11-11',
-    eventType: 'Internship'
+    eventType: 'Internship',
+    startTime: '00:00:00-08:00',
+    endTime: '23:59:59.999999-08:00',
+    location: 'Hybrid',
+    targetAudience: 'All ages',
+    pageContentType: 'edu_events_edueventpage'
   }
 }

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -150,20 +150,25 @@ export default defineComponent({
                     : null
               const pageType = page._source[handle + '__label']
               if (handle === 'events_eventpage') {
+                // WWW Events
                 date = 'Event date: ' + parseDate(page._source[handle + '__start_datetime'])
               } else if (handle === 'edu_events_edueventpage') {
+                // EDU Events
                 date = null
                 location = page._source[handle + '__location_filter']
               } else if (handle === 'missions_mission') {
+                // WWW Missions
                 date = page._source.display_date_filter
                   ? 'Launch date: ' + page._source.display_date_filter
                   : typeof page._source.publication_date_filter !== 'undefined'
                     ? 'Published: ' + parseDate(page._source.publication_date_filter)
                     : 'Published: ' + parseDate(page._source.first_published_at_filter)
               } else if (handle === 'profiles_profilepage') {
+                // WWW Profiles
                 topic = page._source[handle + '__go_site_name']
                 date = null
               } else if (handle.startsWith('edu_resources')) {
+                // EDU Resources
                 date = null
                 primarySubject = page._source[handle + '__primary_subject'] as PrimarySubjectObject
                 if (
@@ -178,6 +183,7 @@ export default defineComponent({
                 }
                 time = { time: page._source.activity_time_label_filter } as EduResourcesTime
               } else {
+                // Fallback publication date
                 date =
                   typeof page._source.publication_date_filter !== 'undefined'
                     ? parseDate(page._source.publication_date_filter)
@@ -195,11 +201,11 @@ export default defineComponent({
                 handle === 'events_eventpage' ? page._source[handle + '__location'] : location
               page.startDate =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
-                  ? page._source[handle + '__start_datetime']
+                  ? page._source[handle + '__start_date']
                   : null
               page.endDate =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
-                  ? page._source[handle + '__end_datetime']
+                  ? page._source[handle + '__end_date']
                   : null
               page.startTime =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'

package/src/interfaces.ts

@@ -38,6 +38,7 @@ export interface StreamfieldBlockData extends BlockData {
   caption?: string
   credit?: string
   imageInline?: ImageObject
+  heroSummary?: string
 }
 
 export interface ImageSrcObject {

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js

@@ -109,6 +109,22 @@ export const BaseStory = {
     }
   }
 }
+
+export const HeroTitle = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...HeroMediaData,
+          heroSummary: 'Text appears below the title',
+          blockType: 'HeroTitleBlock'
+        }
+      ]
+    }
+  }
+}
+
 export const InlineHero = {
   args: {
     data: {