@explorer-1/vue 0.2.14 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -27,9 +27,10 @@
     "tailwindcss": "^3.4.3",
     "twitter-widgets": "^2.0.0",
     "vue": "^3.4.21",
+    "vue-bind-once": "^0.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.4"
+    "@explorer-1/common": "1.1.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseAccordionItem/BaseAccordionItem.stories.js

@@ -0,0 +1,15 @@
+import BaseAccordionItem from './BaseAccordionItem.vue'
+import { BlockStreamfieldTruncatedData } from '../BlockStreamfield/BlockStreamfield.stories'
+export default {
+  title: 'Components/Base/BaseAccordionItem',
+  component: BaseAccordionItem
+}
+
+// stories
+export const BaseStory = {
+  name: 'BaseAccordionItem',
+  args: {
+    headingLevel: 'h3',
+    item: { title: 'Title for the accordion', body: BlockStreamfieldTruncatedData.body }
+  }
+}

package/src/components/BaseAccordionItem/BaseAccordionItem.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { AccordionItemObject } from './../../interfaces.ts'
+import { uniqueId } from 'lodash'
+import IconPlus from './../Icons/IconPlus.vue'
+import BlockStreamfield from './../BlockStreamfield/BlockStreamfield.vue'
+
+export interface BaseAccordionItemProps {
+  headingLevel?: string
+  item: AccordionItemObject
+  backgroundClass?: string
+}
+
+// define props
+const props = withDefaults(defineProps<BaseAccordionItemProps>(), {
+  headingLevel: 'h2',
+  backgroundClass: undefined,
+  item(): AccordionItemObject {
+    return {
+      title: undefined,
+      body: undefined
+    }
+  }
+})
+
+const { headingLevel, item } = reactive(props)
+
+const ariaExpanded = ref(false)
+const isHidden = ref(true)
+const itemId = ref(uniqueId())
+
+const panelId = computed(() => {
+  return `block_accordion_panel_${itemId.value}`
+})
+
+const headingId = computed(() => {
+  return `block_accordion_heading_${itemId.value}`
+})
+
+const handleClick = () => {
+  ariaExpanded.value = !ariaExpanded.value
+  isHidden.value = !isHidden.value
+  if (isHidden.value) {
+    emit('accordionItemClosed')
+  } else {
+    emit('accordionItemOpened')
+  }
+}
+
+const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
+</script>
+<template>
+  <div
+    class="BaseAccordionItem"
+    :class="{ '-open': !isHidden }"
+  >
+    <div class="BaseAccordionHeader">
+      <slot name="header">
+        <div
+          v-if="headingLevel && item"
+          class="border-b border-gray-light-mid"
+        >
+          <component :is="headingLevel">
+            <button
+              v-bind-once="{ id: headingId, 'aria-controls': panelId }"
+              :aria-expanded="ariaExpanded"
+              class="BaseAccordion-trigger group flex flex-nowrap justify-between items-center w-full can-hover:hover:underline text-body-lg"
+              @click="handleClick()"
+            >
+              <slot name="heading">
+                <div class="pointer-events-none text-left p-4 xl:py-6">
+                  {{ item.title }}
+                </div>
+              </slot>
+              <span
+                class="BaseAccordion-icon pointer-events-none text-xs text-action flex-shrink-0 transform transition-transform"
+                :class="{ 'rotate-45': !isHidden }"
+              >
+                <IconPlus />
+              </span>
+            </button>
+          </component>
+        </div>
+      </slot>
+    </div>
+    <div
+      v-show="!isHidden"
+      class="BaseAccordionContent"
+    >
+      <slot>
+        <div
+          v-bind-once="{ id: panelId, 'aria-labelledby': headingId }"
+          role="region"
+          class="BaseAccordion-panel"
+        >
+          <slot name="panelContents">
+            <div class="px-4 pb-8">
+              <BlockStreamfield
+                :data="item.body"
+                variant="fluid"
+              />
+            </div>
+          </slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>

package/src/components/BaseButton/BaseButton.vue

@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
@@ -11,6 +11,11 @@ export const variants: Variants = {
   dark: '-dark',
   social: '-social'
 }
+export const colors: Variants = {
+  primary: '-color-primary',
+  secondary: '-color-secondary',
+  action: '-color-action'
+}
 
 export default defineComponent({
   name: 'BaseButton',
@@ -21,6 +26,12 @@ export default defineComponent({
       default: 'primary',
       validator: (prop: string): boolean => Object.keys(variants).includes(prop)
     },
+    color: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: (prop: string): boolean => Object.keys(colors).includes(prop)
+    },
     compact: {
       type: Boolean,
       default: false,

package/src/components/BaseImage/BaseImage.vue

@@ -5,7 +5,7 @@ import type { PropType } from 'vue'
 export type ImageLoader = 'lazy' | 'eager' | undefined
 
 interface ObjectFitClasses {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const objectFitClasses: ObjectFitClasses = {

package/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue

@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue'
 
 interface AspectRatios {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const aspectRatios: AspectRatios = {

package/src/components/BaseLink/BaseLink.vue

@@ -4,7 +4,7 @@ import { eventBus } from './../../utils/eventBus'
 import MixinAnimationCaret from './../MixinAnimationCaret/MixinAnimationCaret.vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {

package/src/components/BaseTimer/BaseTimer.vue

@@ -51,9 +51,12 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
-import dayjs from './../../utils/dayjs'
-import { type Dayjs } from 'dayjs'
-import { type Duration } from 'dayjs/plugin/duration.js'
+import dayjs, { type Dayjs } from 'dayjs'
+import duration, { type Duration } from 'dayjs/plugin/duration.js'
+import minMax from 'dayjs/plugin/minMax.js'
+
+dayjs.extend(duration)
+dayjs.extend(minMax)
 
 const calculateDuration = (start: Dayjs): Duration | undefined => {
   // Use round seconds so the datetime string stays valid and can be read by screen readers.

package/src/components/BlockAccordion/BlockAccordion.stories.js

@@ -0,0 +1,29 @@
+import BlockAccordion from './BlockAccordion.vue'
+import { BlockStreamfieldTruncatedData } from '../BlockStreamfield/BlockStreamfield.stories'
+
+export default {
+  title: 'Components/Blocks/BlockAccordion',
+  component: BlockAccordion
+}
+
+// stories
+export const BaseStory = {
+  name: 'BlockAccordion',
+  args: {
+    headingLevel: 'h5',
+    items: [
+      {
+        title: 'Title for the accordion',
+        body: BlockStreamfieldTruncatedData.body
+      },
+      {
+        title: 'Another',
+        body: BlockStreamfieldTruncatedData.body
+      },
+      {
+        title: 'Yet another',
+        body: BlockStreamfieldTruncatedData.body
+      }
+    ]
+  }
+}

package/src/components/BlockAccordion/BlockAccordion.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { AccordionItemObject } from '../../interfaces'
+import BaseAccordionItem from './../BaseAccordionItem/BaseAccordionItem.vue'
+
+interface BlockAccordionProps {
+  autoClose?: boolean
+  headingLevel?: string
+  items?: AccordionItemObject[]
+}
+
+// define props
+const props = withDefaults(defineProps<BlockAccordionProps>(), {
+  autoClose: false,
+  headingLevel: 'h2',
+  items: undefined
+})
+
+const { headingLevel, items } = reactive(props)
+</script>
+<template>
+  <div class="BlockAccordion">
+    <slot>
+      <BaseAccordionItem
+        v-for="(item, index) in items"
+        :key="index"
+        :heading-level="headingLevel"
+        :item="item"
+      />
+    </slot>
+  </div>
+</template>

package/src/components/BlockHeading/BlockHeading.stories.js

@@ -1,5 +1,4 @@
 import BlockHeading from './BlockHeading.vue'
-
 export default {
   title: 'Components/Blocks/BlockHeading',
   component: BlockHeading,
@@ -10,7 +9,8 @@ export const BlockHeadingData = {
   blockType: 'HeadingBlock',
   heading: 'Heading Text',
   level: 'h2',
-  size: 'h2'
+  size: 'h2',
+  blockId: `${Math.random().toString(36).slice(2)}`
 }
 
 // stories

package/src/components/BlockHeading/BlockHeading.vue

@@ -11,10 +11,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import { type HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import { getHeadingId } from '../../utils/getHeadingId'
+
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
+export interface BlockHeadingObject {
+  blockType?: string
+  heading: HeadingLevel
+  level?: HeadingLevel
+  size?: string
+  blockId?: string
+}
+
 export default defineComponent({
   name: 'BlockHeading',
   components: {
@@ -22,11 +32,7 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object,
-      required: false
-    },
-    index: {
-      type: Number,
+      type: Object as PropType<BlockHeadingObject>,
       required: false,
       default: undefined
     },
@@ -37,7 +43,9 @@ export default defineComponent({
   },
   computed: {
     getId() {
-      return this.generateId ? getHeadingId(this.data?.heading, this.index) : undefined
+      return this.data && this.generateId
+        ? getHeadingId(this.data.heading, this.data.blockId)
+        : undefined
     }
   }
 })

package/src/components/BlockLinkCarousel/BlockLinkCarousel.vue

@@ -21,7 +21,7 @@ import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
 import BlockLinkTile from './../BlockLinkTile/BlockLinkTile.vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const itemTypes: Variants = {

package/src/components/BlockRelatedLinks/RelatedLink.vue

@@ -24,7 +24,7 @@ import IconDownload from './../Icons/IconDownload.vue'
 import IconExternal from './../Icons/IconExternal.vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {

package/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -32,24 +32,42 @@ export default {
   excludeStories: /.*(Data)$/
 }
 
+export const BlockStreamfieldMinimalData = {
+  body: [
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
+    },
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+    }
+  ]
+}
 export const BlockStreamfieldTruncatedData = {
   body: [
     BlockKeyPointsData,
-    BlockHeadingData,
     {
       blockType: 'RichTextBlock',
       value:
         '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
     },
-    BlockImageComparisonData,
-    BlockHeadingData,
+    { ...BlockHeadingData, blockId: Math.random().toString(36).slice(2) },
     {
       blockType: 'RichTextBlock',
       value:
         '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
     },
-    BlockInlineImageData.block,
-    BlockIframeEmbedData
+    BlockImageData,
+    { ...BlockHeadingData, blockId: Math.random().toString(36).slice(2) },
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+    },
+    BlockInlineImageData.block
   ]
 }
 export const BlockStreamfieldData = {

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -12,7 +12,7 @@
         class="mb-5"
       >
         <BlockHeading
-          :data="block"
+          :data="block as BlockHeadingObject"
           :index="index"
           generate-id
         />
@@ -212,13 +212,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { BlockData, ImageObject } from '../../interfaces'
-import type { BlockData as VideoBlockEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
-import type { BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
+import type { StreamfieldBlockData } from '../../interfaces'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
 import BlockCardGrid from './../BlockCardGrid/BlockCardGrid.vue'
 import BlockCta from './../BlockCta/BlockCta.vue'
-import BlockHeading from './../BlockHeading/BlockHeading.vue'
+import BlockHeading, { BlockHeadingObject } from './../BlockHeading/BlockHeading.vue'
 import BlockImage from './../BlockImage/BlockImage.vue'
 import BlockImageCarousel from './../BlockImageCarousel/BlockImageCarousel.vue'
 import BlockImageComparison from './../BlockImageComparison/BlockImageComparison.vue'
@@ -226,7 +224,7 @@ import BlockImageGallery from './../BlockImageGallery/BlockImageGallery.vue'
 import BlockInlineImage from './../BlockInlineImage/BlockInlineImage.vue'
 import BlockKeyPoints from './../BlockKeyPoints/BlockKeyPoints.vue'
 import BlockListCards from './../BlockListCards/BlockListCards.vue'
-import BlockQuote from './../BlockQuote/BlockQuote.vue'
+import BlockQuote, { type BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
 import BlockRelatedLinks, {
   type BlockRelatedLinksObject
 } from './../BlockRelatedLinks/BlockRelatedLinks.vue'
@@ -236,10 +234,12 @@ import BlockText from './../BlockText/BlockText.vue'
 import BlockTwitterEmbed from './../BlockTwitterEmbed/BlockTwitterEmbed.vue'
 import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockVideo from './../BlockVideo/BlockVideo.vue'
-import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockVideoEmbed, {
+  type BlockData as VideoBlockEmbedData
+} from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
@@ -247,24 +247,6 @@ export const variants: Variants = {
   fluid: '-fluid'
 }
 
-export interface StreamfieldBlockData extends BlockData {
-  id: string
-  fullBleed: boolean
-  heading: string
-  galleryTitle: string
-  galleryDescription: string
-  coverImage: ImageObject
-  gallerySlides: ImageObject[]
-  blocks: object[]
-  value: string
-  customLabel: string
-  introduction: string
-  teaserPage: object | string[]
-  image: ImageObject
-  buttonText: string
-  fullWidthImage: boolean
-}
-
 export default defineComponent({
   name: 'BlockStreamfield',
   components: {

package/src/components/BlockText/BlockText.vue

@@ -9,7 +9,7 @@
 import { defineComponent } from 'vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {

package/src/components/HeroMedia/HeroMedia.vue

@@ -53,6 +53,8 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import MixinVideoBg from './../MixinVideoBg/MixinVideoBg.vue'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 import IconInfo from './../Icons/IconInfo.vue'
@@ -105,6 +107,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theImageCaption(): string | undefined {
       if (this.image && this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -149,7 +152,13 @@ export default defineComponent({
     },
     hasCaptionArea(): string | boolean {
       if (this.theImageData) {
-        return this.theImageCaption || this.image?.credit || this.image?.detailUrl
+        if (this.themeStore.isEdu) {
+          // For EDU, only show the caption area if there is a caption
+          return this.theImageCaption ? this.theImageCaption : false
+        } else {
+          // For others, show the caption area if there is also a credit or detail URL
+          return this.theImageCaption || this.image?.credit || this.image?.detailUrl
+        }
       } else if (this.customCaption) {
         return true
       }

package/src/components/LayoutHelper/LayoutHelper.vue

@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue'
 
 interface Indents {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const indents: Indents = {

package/src/components/MetaPanel/MetaPanel.stories.js

@@ -0,0 +1,112 @@
+import MetaPanel from './MetaPanel.vue'
+
+export default {
+  title: 'Components/Utilities/MetaPanel',
+  component: MetaPanel,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div><div class="h-40 w-full max-w-screen-3xl mx-auto bg-gray-dark"><p class="text-white">Dark background for demo purposes only and not part of the component.</p></div><div id="storyDecorator"><story/></div><div class="h-40 w-full max-w-screen-3xl mx-auto bg-gray-dark"><p class="text-white">Dark background for demo purposes only and not part of the component.</p></div></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen'
+  },
+  argTypes: {
+    theme: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'stars']
+    }
+  }
+}
+
+// stories
+export const BaseStory = {
+  name: 'MetaPanel',
+  args: {
+    negativeTop: true,
+    negativeBottom: true,
+    button: 'View Standards',
+    primarySubject: 'Math',
+    additionalSubjects: ['Science'],
+    time: '30mins - hr',
+    gradeLevels: [
+      { gradeLevel: 'All Ages' },
+      { gradeLevel: 'K' },
+      { gradeLevel: '1' },
+      { gradeLevel: '2' },
+      { gradeLevel: '5' },
+      { gradeLevel: '6' },
+      { gradeLevel: '7' },
+      { gradeLevel: '8' }
+    ],
+    standards: [
+      {
+        standard: {
+          code: 'CCRA.R.1',
+          definition:
+            'Read closely to determine what the text says explicitly and to make logical inferences from it; cite specific textual evidence when writing or speaking to support conclusions drawn from the text.',
+          domain: {
+            domain: 'College and Career Readiness Anchor Standards for Reading'
+          },
+          type: 'ccss_english_language_arts'
+        }
+      },
+      {
+        standard: {
+          code: 'RL.3.2',
+          definition:
+            'Recount stories, including fables, folktales, and myths from diverse cultures; determine the central message, lesson, or moral and explain how it is conveyed through key details in the text.',
+          domain: {
+            domain: 'Reading Standards for Literature'
+          },
+          type: 'ccss_english_language_arts'
+        }
+      },
+      {
+        standard: {
+          code: 'RL.1.5',
+          definition:
+            'Explain major differences between books that tell stories and books that give information, drawing on a wide reading of a range of text types.',
+          domain: {
+            domain: 'Reading Standards for Literature'
+          },
+          type: 'ccss_english_language_arts'
+        }
+      },
+      {
+        standard: {
+          code: 'K.CC.A',
+          definition: 'Know number names and the count sequence.',
+          domain: {
+            domain: 'Counting and Cardinality'
+          },
+          type: 'ccss_maths'
+        }
+      },
+      {
+        standard: {
+          code: 'K.CC.A.3',
+          definition:
+            'Write numbers from 0 to 20. Represent a number of objects with a written numeral 0-20 (with 0 representing a count of no objects).',
+          domain: {
+            domain: 'Counting and Cardinality'
+          },
+          type: 'ccss_maths'
+        }
+      },
+      {
+        standard: {
+          code: 'K-PS2-1',
+          definition:
+            'Plan and conduct an investigation to compare the effects of different strengths or different directions of pushes and pulls on the motion of an object.',
+          domain: {
+            domain: 'Physical Sciences'
+          },
+          type: 'ngss'
+        }
+      }
+    ]
+  }
+}