@explorer-1/vue 0.2.26 → 0.2.27

package/package.json

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

package/src/components/BasePill/BasePill.vue

@@ -6,6 +6,7 @@ import { eduMetadataDictionary } from './../../constants'
 // using borders to vertically center wonky font face
 const variantMap: Attributes = {
   primary: 'bg-primary border-primary',
+  'primary-inverted': 'bg-gray-light-mid !text-primary-darker border-gray-light-mid',
   secondary: 'bg-secondary border-secondary',
   action: 'bg-action border-action'
 }
@@ -20,13 +21,15 @@ interface BasePillProps {
   variant?: string
   size?: string
   contentType?: string
+  invert?: boolean
 }
 
 // define props
 const props = withDefaults(defineProps<BasePillProps>(), {
   variant: 'primary',
   size: 'md',
-  contentType: undefined
+  contentType: undefined,
+  invert: false
 })
 
 const metadataType = computed(() => {

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -124,7 +124,7 @@
         <MetadataEduResource
           v-else-if="metadataAttrs.type === 'resource'"
           :resource="theItem as EduResourceCardObject"
-          :variant="metadataAttrs.variant"
+          :variant="metadataAttrs.icons"
           compact
         />
       </div>
@@ -132,7 +132,7 @@
     <div
       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="metadataAttrs ? `text-${metadataAttrs.variant}` : 'text-primary'"
+      :class="metadataAttrs ? `text-${metadataAttrs.icons}` : 'text-primary'"
     >
       <IconArrow />
     </div>

package/src/components/HeroInlineMedia/HeroInlineMedia.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
+import BlockImageComparison from './../BlockImageComparison/BlockImageComparison.vue'
+import BlockImageCarousel from './../BlockImageCarousel/BlockImageCarousel.vue'
+import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
+import BlockVideo from './../BlockVideo/BlockVideo.vue'
+import type { StreamfieldBlockData } from './../../interfaces'
+
+interface HeroInlineMediaProps {
+  heroBlocks: StreamfieldBlockData[]
+  constrain?: boolean
+}
+
+const props = withDefaults(defineProps<HeroInlineMediaProps>(), {
+  heroBlocks: undefined,
+  constrain: false
+})
+
+const { heroBlocks, constrain } = reactive(props)
+
+const heroInline = computed(() => {
+  // heroes with interactive elements have special handling
+  if (heroBlocks?.length) {
+    // excludes VideoBlock as this will autoplay
+    if (heroBlocks[0].blockType === 'VideoBlock') {
+      return false
+    } else if (
+      heroBlocks[0].blockType === 'HeroImageBlock' ||
+      heroBlocks[0].blockType === 'CarouselBlock' ||
+      heroBlocks[0].blockType === 'IframeEmbedBlock' ||
+      heroBlocks[0].blockType === 'VideoEmbedBlock' ||
+      heroBlocks[0].blockType === 'ImageComparisonBlock'
+    ) {
+      return true
+    }
+  }
+  return false
+})
+</script>
+<template>
+  <div v-if="heroBlocks?.length && heroInline">
+    <BlockImageStandard
+      v-if="heroBlocks[0].blockType === 'HeroImageBlock'"
+      :data="heroBlocks[0].imageInline"
+      :display-caption="heroBlocks[0].displayCaption"
+      :caption="heroBlocks[0].caption"
+      :constrain="constrain"
+    />
+    <BlockImageCarousel
+      v-else-if="heroBlocks[0].blockType === 'CarouselBlock'"
+      :items="heroBlocks[0].blocks"
+      :block-id="heroBlocks[0].id"
+    />
+    <BlockIframeEmbed
+      v-else-if="heroBlocks[0].blockType === 'IframeEmbedBlock'"
+      :data="heroBlocks[0]"
+    />
+    <BlockVideo
+      v-else-if="heroBlocks[0].blockType === 'VideoBlock'"
+      :data="heroBlocks[0]"
+      autoplay
+    />
+    <BaseImagePlaceholder
+      v-else-if="heroBlocks[0].blockType === 'VideoEmbedBlock'"
+      aspect-ratio="16:9"
+      dark-mode
+    >
+      <div v-html="heroBlocks[0].embed?.embed"></div>
+    </BaseImagePlaceholder>
+    <BlockImageComparison
+      v-else-if="heroBlocks[0].blockType === 'ImageComparisonBlock'"
+      :data="heroBlocks[0]"
+    />
+  </div>
+</template>

package/src/components/HeroLarge/HeroLarge.vue

@@ -31,15 +31,30 @@
             :class="{ 'pt-10': hasOverlay }"
           >
             <div
-              v-if="eyebrow"
-              class="lg:mb-6 font-secondary mb-4 text-base font-semibold tracking-wider no-underline uppercase"
+              v-if="customPill || customPillType || label"
+              class="lg:mb-6 mb-4"
             >
-              {{ eyebrow }}
-              <span class="sr-only">.</span>
+              <BasePill
+                v-if="customPill || customPillType"
+                variant="primary"
+                size="lg"
+                class="mr-3"
+                :content-type="customPillType"
+              >
+                {{ customPill }}
+              </BasePill>
+              <div
+                v-else-if="label"
+                class="font-secondary text-base font-semibold tracking-wider no-underline uppercase"
+              >
+                {{ label }}
+                <span class="sr-only">.</span>
+              </div>
             </div>
             <h1
               v-if="title"
-              class="lg:w-3/4 xl:w-3/5 xl:text-10xl lg:text-9xl md:text-8xl text-7xl lg:tracking-tightest lg:leading-tighter mb-5 font-bold leading-tight uppercase"
+              class="lg:w-3/4 xl:w-3/5 xl:text-10xl lg:text-9xl md:text-8xl text-7xl lg:tracking-tightest lg:leading-tighter mb-5 font-bold leading-tight"
+              :class="{ uppercase: !themeStore.isEdu }"
             >
               {{ title }}
             </h1>
@@ -58,24 +73,45 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { mixinTransparentHeader } from './../../utils/mixins'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+import BasePill from './../BasePill/BasePill.vue'
+
 export default defineComponent({
   name: 'HeroLarge',
+  components: {
+    BasePill
+  },
   props: {
-    eyebrow: {
+    label: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    customPill: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
+    },
+    customPillType: {
+      type: String,
+      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
     },
     // If secondary nav is also on this page, will add more space above hero text
     hasOverlay: {
@@ -83,6 +119,9 @@ export default defineComponent({
       default: false
     }
   },
+  computed: {
+    ...mapStores(useThemeStore)
+  },
   mounted() {
     mixinTransparentHeader()
   }

package/src/components/HeroMedium/HeroMedium.vue

@@ -52,7 +52,7 @@
           class="lg:w-1/2 xl:w-5/12 block"
         >
           <div
-            v-if="customPill || customLabel || feature.label"
+            v-if="customPill || customPillType || customLabel || feature.label"
             class="flex items-center lg:mb-3 mb-2"
           >
             <BasePill

package/src/components/MetaPanel/MetaPanel.vue

@@ -126,7 +126,7 @@ const standardsIste = computed(() => {
         class="col-start-container lg:col-start-indent-col-2 col-end-bleed lg:grid grid-cols-subgrid"
         :class="backgroundClass"
       >
-        <div class="is-this-needed col-start-container lg:col-start-indent-col-2 col-end-container">
+        <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-2 py-6 lg:py-10">
               <MetaPanelItems

package/src/components/MetaPanelItems/MetaPanelItems.vue

@@ -13,7 +13,7 @@ import IconTime from './../Icons/IconTime.vue'
 
 interface MetaPanelProps {
   theme?: MetaPanelTheme
-  primarySubject: EduResourcesSubject
+  primarySubject?: EduResourcesSubject
   additionalSubjects?: EduResourcesSubject[]
   gradeLevels?: EduResourcesGradeLevel[]
   time?: EduResourcesTime
@@ -35,14 +35,17 @@ const audience = computed(() => {
 })
 
 const subjects = computed(() => {
-  let combinedArray = [primarySubject.subject]
-  let output = undefined
-  if (additionalSubjects) {
-    const filteredArray = additionalSubjects.map((item) => item.subject)
-    combinedArray = combinedArray.concat(filteredArray)
+  if (primarySubject?.subject) {
+    let combinedArray = [primarySubject.subject]
+    let output = undefined
+    if (additionalSubjects) {
+      const filteredArray = additionalSubjects.map((item) => item.subject)
+      combinedArray = combinedArray.concat(filteredArray)
+    }
+    output = combinedArray.join(', ')
+    return output
   }
-  output = combinedArray.join(', ')
-  return output
+  return undefined
 })
 
 const iconColor = computed(() => {

package/src/constants.ts

@@ -1,23 +1,33 @@
 import type { DictionaryInterface, PillDictionaryInterface } from './interfaces'
 
 export const eduMetadataDictionary: PillDictionaryInterface = {
+  EDUCollectionsDetailPage: {
+    label: 'Collection',
+    variant: 'primary-inverted',
+    icons: 'primary',
+    type: 'resource'
+  },
   EDUExplainerArticlePage: {
     label: 'Explainer Article',
     variant: 'secondary',
+    icons: 'secondary',
     type: 'resource'
   },
   EDULessonPage: {
     label: 'Lesson',
     variant: 'primary',
+    icons: 'primary',
     type: 'resource'
   },
   EDUTeachableMomentPage: {
     label: 'Teachable Moment',
     variant: 'primary',
+    icons: 'primary',
     type: 'resource'
   },
   EDUEventPage: {
     variant: 'primary',
+    icons: 'primary',
     type: 'event'
   }
 }
@@ -28,6 +38,7 @@ export const searchContentTypeToPageType: DictionaryInterface = {
   events_eventpage: 'EventPage',
   missions_mission: 'Mission',
   eduevents_edueventpage: 'EDUEventPage',
+  eduresources_educollectionsdetailpage: 'EDUCollectionsDetailPage',
   eduresources_eduexplainerarticlepage: 'EDUExplainerArticlePage',
   eduresources_edulessonpage: 'EDULessonPage',
   eduresources_eduteachablemomentpage: 'EDUTeachableMomentPage'

package/src/interfaces.ts

@@ -196,6 +196,7 @@ export type MetadataType = 'event' | 'resource'
 export interface LabelObject {
   label?: string
   variant: string
+  icons?: string
   type?: MetadataType
 }
 export interface PillDictionaryInterface {

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

@@ -0,0 +1,103 @@
+import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { BlockStreamfieldMinimalData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import PageEduCollectionsDetail from './PageEduCollectionsDetail.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduCollectionsDetail',
+  component: PageEduCollectionsDetail,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BaseStory = {
+  name: 'PageEduCollectionsDetail',
+  args: {
+    data: {
+      __typename: 'EDUCollectionsDetailPage',
+      title: 'A collections page',
+      lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
+      url: 'http://localhost:3000/edu/resources/collections-detail',
+      pageType: 'EDUCollectionsDetailPage',
+      contentType: 'edu_resources.EDUCollectionsDetailPage',
+      showJumpMenu: true,
+      showMetaPanel: true,
+      thumbnailImage: {
+        __typename: 'CustomImage',
+        original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
+        alt: ''
+      },
+      heroImage: {
+        src: {
+          url: 'https://picsum.photos/id/973/1800/1200',
+          width: 1800,
+          height: 1200
+        },
+        srcSet:
+          'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+        screenMd: {
+          url: 'https://picsum.photos/id/921/800/640'
+        },
+        screenSm: {
+          url: 'https://picsum.photos/id/247/640/900'
+        },
+        alt: 'The alt text'
+      },
+      heroImageCaption: '<p>Lorem ipsum dolor sit amet</p>',
+      heroConstrain: true,
+      heroPosition: 'full_bleed',
+      primarySubject: {
+        subject: 'Arts'
+      },
+      additionalSubjects: [
+        {
+          subject: 'Science'
+        }
+      ],
+      gradeLevels: [
+        {
+          gradeLevel: 'K'
+        },
+        {
+          gradeLevel: '1'
+        }
+      ],
+
+      body: BlockStreamfieldMinimalData.body,
+
+      relatedLinks: BlockRelatedLinksData.data,
+      relatedContentHeading: 'Related Content',
+      relatedContent: BlockLinkCardCarouselData
+    }
+  }
+}
+
+export const Inline = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline',
+      heroConstrain: false
+    }
+  }
+}
+
+export const NoMetaPanel = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      showMetaPanel: false
+    }
+  }
+}

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type { ImageObject, PageEduResourcesObject } from './../../../interfaces'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
+
+interface PageEduCollectionsDetail extends PageEduResourcesObject {
+  heroImage: ImageObject
+  heroImageCaption: string
+  showMetaPanel: boolean
+  heroSubtitle: string
+}
+interface PageEduCollectionsDetailProps {
+  data?: PageEduCollectionsDetail
+}
+
+const props = withDefaults(defineProps<PageEduCollectionsDetailProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+
+const PageEduCollectionsDetailJumpMenu = ref()
+
+defineExpose({
+  PageEduCollectionsDetailJumpMenu
+})
+
+const heroInline = computed((): boolean => {
+  return data?.heroPosition === 'inline'
+})
+
+const computedClass = computed((): string => {
+  if (heroInline.value || !data?.heroImage) {
+    return 'pt-5 lg:pt-12'
+  } else if (!heroInline.value) {
+    return '-nav-offset'
+  }
+  return ''
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="ThemeEdu ThemeVariantLight"
+    :class="computedClass"
+  >
+    <!-- hero large -->
+    <HeroLarge
+      v-if="!heroInline && data.heroImage"
+      :title="data.title"
+      :image="data.heroImage"
+      :summary="'Test test test lorem ipsum dolor sit amet yep.'"
+      :custom-pill-type="data.__typename"
+      :class="!data.showMetaPanel ? 'mb-10 lg:mb-22' : ''"
+    />
+
+    <NavJumpMenu
+      ref="PageEduCollectionsDetailJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+      :enabled="data.showJumpMenu"
+      dropdown-text="In this collection"
+    />
+
+    <LayoutHelper
+      v-if="heroInline || !data.heroImage"
+      indent="col-2"
+      class="mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        label="Collection"
+        pill
+        pill-color="primary-inverted"
+      />
+    </LayoutHelper>
+    <MetaPanel
+      v-if="data.showMetaPanel"
+      theme="primary"
+      :class="{ 'mb-10 lg:mb-14': true }"
+      :primary-subject="data.primarySubject"
+      :additional-subjects="data.additionalSubjects"
+      :grade-levels="data.gradeLevels"
+      :negative-top="!heroInline"
+      :negative-bottom="heroInline"
+    />
+
+    <!-- TODO: put this in a component (exclude layout though) -->
+    <LayoutHelper
+      v-if="data.heroImage && heroInline"
+      class="lg:mb-22 mb-10"
+    >
+      <BlockImageStandard
+        :data="data.heroImage"
+        :display-caption="data.heroImageCaption ? true : false"
+        :caption="data.heroImageCaption"
+        :constrain="data.heroConstrain"
+      />
+    </LayoutHelper>
+
+    <!-- streamfield blocks -->
+    <BlockStreamfield :data="data.body" />
+
+    <!-- related links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <LayoutHelper
+      v-if="data.lastPublishedAt"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <p class="border-t border-gray-light-mid pt-8">
+        <strong>Collection Last Updated:</strong>
+        {{
+          // @ts-ignore
+          $filters.displayDate(data.lastPublishedAt)
+        }}
+      </p>
+    </LayoutHelper>
+    <!-- explore more -->
+    <div
+      v-if="data.relatedContent?.length"
+      class="bg-stars bg-primary-darker pt-14 pb-20 ThemeVariantDark text-white"
+    >
+      <BlockLinkCarousel
+        item-type="cards"
+        heading="Explore more"
+        :items="data.relatedContent"
+      />
+    </div>
+  </div>
+</template>

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -1,38 +1,28 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
-import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
-import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
-import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
-import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
-import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
-import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
 
 export default defineComponent({
   name: 'PageEduExplainerArticle',
   components: {
     HeroMedia,
-    BaseImagePlaceholder,
+    HeroInlineMedia,
     LayoutHelper,
     DetailHeadline,
-    BlockImageStandard,
-    BlockIframeEmbed,
     ShareButtonsEdu,
     BlockStreamfield,
-    BlockImageCarousel,
-    BlockImageComparison,
     BlockLinkCarousel,
     BlockRelatedLinks,
     BlockText,
-    BlockVideo,
     NavJumpMenu
   },
   props: {
@@ -134,43 +124,16 @@ export default defineComponent({
       dropdown-text="In this article"
     />
     <!-- inline hero content -->
+
     <LayoutHelper
       v-if="!heroEmpty && heroInline"
       indent="col-2"
       class="lg:mb-22 mt-10 mb-10"
     >
-      <BlockImageStandard
-        v-if="data.hero[0].blockType === 'HeroImageBlock'"
-        :data="data.hero[0].imageInline"
-        :display-caption="data.hero[0].displayCaption"
-        :caption="data.hero[0].caption"
+      <HeroInlineMedia
+        :hero-blocks="data.hero"
         :constrain="data.heroConstrain"
       />
-      <BlockImageCarousel
-        v-else-if="data.hero[0].blockType === 'CarouselBlock'"
-        :items="data.hero[0].blocks"
-        :block-id="data.hero[0].id"
-      />
-      <BlockIframeEmbed
-        v-else-if="data.hero[0].blockType === 'IframeEmbedBlock'"
-        :data="data.hero[0]"
-      />
-      <BlockVideo
-        v-else-if="data.hero[0].blockType === 'VideoBlock'"
-        :data="data.hero[0]"
-        autoplay
-      />
-      <BaseImagePlaceholder
-        v-else-if="data.hero[0].blockType === 'VideoEmbedBlock'"
-        aspect-ratio="16:9"
-        dark-mode
-      >
-        <div v-html="data.hero[0].embed.embed"></div>
-      </BaseImagePlaceholder>
-      <BlockImageComparison
-        v-else-if="data.hero[0].blockType === 'ImageComparisonBlock'"
-        :data="data.hero[0]"
-      />
     </LayoutHelper>
 
     <LayoutHelper