@explorer-1/vue 0.2.26 → 0.2.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.26",
+  "version": "0.2.28",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.7"
+    "@explorer-1/common": "1.1.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/AboutTheAuthor/AboutTheAuthor.stories.js

@@ -0,0 +1,50 @@
+import AboutTheAuthor from './AboutTheAuthor.vue'
+
+export default {
+  title: 'Components/Utilities/AboutTheAuthor',
+  component: AboutTheAuthor,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
+}
+
+export const AboutTheAuthorData = [
+  {
+    author: {
+      biography:
+        '<p data-block-key="8meb7">I&#x27;m someone that has a bio!  Test <a href="http://localhost:3000/edu/news">link</a>.</p>',
+      image: {
+        src: {
+          url: 'https://picsum.photos/512/512',
+          width: 512,
+          height: 512
+        },
+        alt: ''
+      },
+      jobTitle: 'Job title',
+      name: 'Author name',
+      organization: 'Organization'
+    }
+  },
+  {
+    author: {
+      biography:
+        '<p data-block-key="8meb7">I&#x27;m someone that has a bio!  Test <a href="http://localhost:3000/edu/news">link</a>. Lorem ipsum dolor sit amet long author bio here.</p><p>Lorem ipsum dolor site amet consectatur.</p>',
+      image: {
+        src: {
+          url: 'https://picsum.photos/512/512',
+          width: 512,
+          height: 512
+        },
+        alt: ''
+      },
+      jobTitle: 'Job title',
+      name: 'Another author',
+      organization: 'Organization'
+    }
+  }
+]
+// stories
+export const BaseStory = {
+  name: 'AboutTheAuthor',
+  args: { authors: AboutTheAuthorData }
+}

package/src/components/AboutTheAuthor/AboutTheAuthor.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import type { AuthorObject } from '../../interfaces'
+import BlockText from './../BlockText/BlockText.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+
+interface AboutTheAuthorProps {
+  authors: {
+    author?: AuthorObject
+  }[]
+}
+
+// define props
+const props = withDefaults(defineProps<AboutTheAuthorProps>(), {
+  authors: undefined
+})
+
+const { authors } = reactive(props)
+
+const headingString = computed(() => {
+  let noun = 'Author'
+  if (authors?.length > 1) {
+    noun = 'Authors'
+  }
+  return `About the ${noun}`
+})
+</script>
+<template>
+  <div class="AboutTheAuthor">
+    <h3 class="text-h4 sm:ml-[130px] pl-10 mb-6">
+      {{ headingString }}
+    </h3>
+    <template
+      v-for="(author, index) in authors"
+      :key="index"
+    >
+      <div
+        v-if="author.author"
+        class="sm:flex flex-row"
+        :class="{ ' mb-10 sm:mb-12': index + 1 !== authors.length }"
+      >
+        <div class="sm:mr-10">
+          <BaseImagePlaceholder
+            aspect-ratio="1:1"
+            class="relative mb-6 sm:mb-0 overflow-hidden rounded-full w-[130px]"
+            transparent-mode
+            no-logo
+          >
+            <BaseImage
+              v-if="author.author.image?.src"
+              :src="author.author.image.src.url"
+              :width="author.author.image.src.width"
+              :height="author.author.image.src.height"
+              :alt="author.author.name"
+              object-fit-class="cover"
+              image-class="can-hover:group-hover:delay-200 can-hover:group-hover:scale-100 absolute top-0 left-0 w-full transition-all duration-200 ease-in transform scale-105"
+              loading="lazy"
+            />
+          </BaseImagePlaceholder>
+        </div>
+        <div>
+          <div class="mb-4">
+            <h3
+              v-if="author.author.name"
+              class="!font-medium !tracking-normal !text-lg mb-1"
+            >
+              {{ author.author.name }}
+            </h3>
+            <p
+              v-if="author.author.jobTitle || author.author.organization"
+              class="text-lg"
+            >
+              {{
+                (author.author.jobTitle ? author.author.jobTitle : '') +
+                (author.author.jobTitle && author.author.organization ? ', ' : '')
+              }}
+              {{ author.author.organization }}
+            </p>
+          </div>
+          <BlockText
+            v-if="author.author.biography"
+            :text="author.author.biography"
+            variant="small"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

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/BlockText/BlockText.vue

@@ -13,9 +13,9 @@ interface Variants {
 }
 
 export const variants: Variants = {
-  small: 'text-body-sm',
-  medium: 'text-body-md',
-  large: 'text-body-lg'
+  small: 'text-body-sm -small',
+  medium: 'text-body-md -medium',
+  large: 'text-body-lg -large'
 }
 
 export default defineComponent({

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -140,7 +140,7 @@ export default defineComponent({
       default: undefined
     },
     author: {
-      type: Object as PropType<AuthorObject | AuthorObject[]>,
+      type: Object as PropType<AuthorObject | { author: AuthorObject }[]>,
       required: false,
       default: undefined
     },
@@ -208,11 +208,10 @@ export default defineComponent({
       const returnDate = new Date(this.publicationDate + ' ' + currentTime)
       return returnDate.toISOString()
     },
-    authors(): { name: string; organization: string }[] | undefined {
+    authors(): AuthorObject[] | undefined {
       let authors: AuthorObject[] | undefined = undefined
       if (this.author && this.author.constructor === Array) {
         authors = []
-        // @ts-expect-error we know it's an array at this point
         this.author.forEach((author: { author: AuthorObject }) => {
           // @ts-expect-error authors array is defined above
           authors.push(author.author)

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

@@ -183,7 +183,10 @@ export interface Attributes {
 
 export interface AuthorObject {
   name: string
-  organization: string
+  organization?: string
+  image?: ImageObject
+  jobTitle?: string
+  biography?: string
 }
 
 export interface Topic {
@@ -196,6 +199,7 @@ export type MetadataType = 'event' | 'resource'
 export interface LabelObject {
   label?: string
   variant: string
+  icons?: string
   type?: MetadataType
 }
 export interface PillDictionaryInterface {
@@ -261,6 +265,7 @@ export interface EduResourceStandardItem {
 
 export interface PageEduResourcesObject extends PageObject {
   hero?: StreamfieldBlockData[]
+  authors?: { author: AuthorObject }[]
   primarySubject?: EduResourcesSubject
   additionalSubjects?: EduResourcesSubject[]
   gradeLevels?: EduResourcesGradeLevel[]

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
+    }
+  }
+}