@explorer-1/vue 0.2.22 → 0.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "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.5"
+    "@explorer-1/common": "1.1.6"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseAccordionItem/BaseAccordionItem.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
-import { AccordionItemObject } from './../../interfaces.ts'
+import type { 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
@@ -58,9 +57,12 @@ const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
       <slot name="header">
         <div
           v-if="headingLevel && item"
-          class="border-b border-gray-light-mid"
+          :class="{ 'border-b border-gray-light-mid': isHidden }"
         >
-          <component :is="headingLevel">
+          <component
+            :is="headingLevel"
+            class="!font-medium"
+          >
             <button
               v-bind-once="{ id: headingId, 'aria-controls': panelId }"
               :aria-expanded="ariaExpanded"
@@ -91,15 +93,10 @@ const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
         <div
           v-bind-once="{ id: panelId, 'aria-labelledby': headingId }"
           role="region"
-          class="BaseAccordion-panel"
+          class="BaseAccordion-panel border-b border-gray-light-mid"
         >
           <slot name="panelContents">
-            <div class="px-4 pb-8">
-              <BlockStreamfield
-                :data="item.body"
-                variant="fluid"
-              />
-            </div>
+            <pre>{{ item.body }}</pre>
           </slot>
         </div>
       </slot>

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

@@ -1,29 +1,74 @@
 import BlockAccordion from './BlockAccordion.vue'
-import { BlockStreamfieldTruncatedData } from '../BlockStreamfield/BlockStreamfield.stories'
+import { BlockImageData } from './../BlockImage/BlockImage.stories'
 
 export default {
   title: 'Components/Blocks/BlockAccordion',
-  component: BlockAccordion
+  component: BlockAccordion,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
 }
 
+const AccordionItemStreamfieldData = [
+  {
+    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'
+  },
+  { ...BlockImageData, blockType: 'ImageBlock' },
+  {
+    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 BlockAccordionData = {
+  blockType: 'AccordionBlock',
+  accordionItemsHeadingLevel: '3',
+  accordionItems: [
+    {
+      blockType: 'AccordionItemBlock',
+      blocks: [
+        {
+          blockType: 'CharBlock',
+          value: 'First Accordion Item'
+        },
+        {
+          blockType: 'AccordionBodyStreamfieldBlock',
+          blocks: AccordionItemStreamfieldData
+        }
+      ]
+    },
+    {
+      blockType: 'AccordionItemBlock',
+      blocks: [
+        {
+          blockType: 'CharBlock',
+          value: 'Second Accordion Item'
+        },
+        {
+          blockType: 'AccordionBodyStreamfieldBlock',
+          blocks: AccordionItemStreamfieldData
+        }
+      ]
+    },
+    {
+      blockType: 'AccordionItemBlock',
+      blocks: [
+        {
+          blockType: 'CharBlock',
+          value: 'Third Accordion Item'
+        },
+        {
+          blockType: 'AccordionBodyStreamfieldBlock',
+          blocks: AccordionItemStreamfieldData
+        }
+      ]
+    }
+  ]
+}
 // 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
-      }
-    ]
-  }
+  args: { data: BlockAccordionData }
 }

package/src/components/BlockAccordion/BlockAccordion.vue

@@ -1,32 +1,113 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { AccordionItemObject } from '../../interfaces'
+import { computed, reactive } from 'vue'
+import type { AccordionItemObject, ImageBlock, ImageObject } from '../../interfaces'
 import BaseAccordionItem from './../BaseAccordionItem/BaseAccordionItem.vue'
+import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
+import BlockText from './../BlockText/BlockText.vue'
 
+interface AccordionItemCharBlock {
+  blockType: 'CharBlock'
+  value: string
+}
+interface RichTextBlock {
+  blockType: 'RichTextBlock'
+  text: string
+  variant: string
+}
+interface AccordionBodyStreamfieldBlock {
+  blockType: 'AccordionBodyStreamfieldBlock'
+  blocks: (ImageBlock | RichTextBlock)[]
+}
+interface AccordionItemBlock {
+  blockType: 'AccordionItemBlock'
+  blocks: (AccordionBodyStreamfieldBlock | AccordionItemCharBlock)[]
+}
+export interface AccordionBlockObject {
+  accordionItemsHeadingLevel: string
+  accordionItems: AccordionItemBlock[]
+}
 interface BlockAccordionProps {
-  autoClose?: boolean
-  headingLevel?: string
-  items?: AccordionItemObject[]
+  data: AccordionBlockObject
 }
 
 // define props
 const props = withDefaults(defineProps<BlockAccordionProps>(), {
-  autoClose: false,
-  headingLevel: 'h2',
-  items: undefined
+  data: undefined
 })
 
-const { headingLevel, items } = reactive(props)
+const { data } = reactive(props)
+
+const headingLevel = computed(() => {
+  return data ? `h${data?.accordionItemsHeadingLevel}` : undefined
+})
+
+const remappedAccordionItems = computed((): AccordionItemObject[] | undefined => {
+  if (data?.accordionItems) {
+    const remappedItems = data.accordionItems.map((item) => {
+      let title = ''
+      let body: (ImageBlock | RichTextBlock)[] = []
+
+      item.blocks.forEach((block) => {
+        if (block.blockType === 'CharBlock') {
+          title = (block as AccordionItemCharBlock).value || ''
+        } else if (block.blockType === 'AccordionBodyStreamfieldBlock') {
+          body = (block as AccordionBodyStreamfieldBlock).blocks || []
+        }
+      })
+      return {
+        title,
+        body
+      }
+    })
+    return remappedItems
+  }
+  return undefined
+})
 </script>
 <template>
-  <div class="BlockAccordion">
-    <slot>
-      <BaseAccordionItem
-        v-for="(item, index) in items"
-        :key="index"
-        :heading-level="headingLevel"
-        :item="item"
-      />
-    </slot>
+  <div class="BlockAccordion border-t border-gray-light-mid">
+    <BaseAccordionItem
+      v-for="(item, index) in remappedAccordionItems"
+      :key="index"
+      :heading-level="headingLevel"
+      :item="item"
+    >
+      <template #panelContents>
+        <div
+          v-if="item.body"
+          class="px-4 pb-8"
+        >
+          <div
+            v-for="(block, block_index) in item.body"
+            :key="block_index"
+            :class="{ 'mb-5': Number(block_index) + 1 != item.body.length }"
+          >
+            <template v-if="block.blockType === 'ImageBlock'">
+              <BlockImageStandard
+                class="AccordionItemImage"
+                :data="block.image as ImageObject"
+                :caption="block.caption"
+                :display-bacpotion="block.displayCaption"
+              />
+            </template>
+            <template v-else-if="block.blockType === 'RichTextBlock'">
+              <BlockText
+                :text="block.value"
+                variant="medium"
+              />
+            </template>
+          </div>
+        </div>
+      </template>
+    </BaseAccordionItem>
   </div>
 </template>
+<style lang="scss">
+.BlockAccordion {
+  .AccordionItemImage {
+    div.p-4 {
+      @apply px-0 #{!important};
+    }
+  }
+}
+</style>

package/src/components/BlockLinkCardList/BlockLinkCardList.stories.js

@@ -0,0 +1,110 @@
+import BlockLinkCardList from './BlockLinkCardList.vue'
+
+export default {
+  title: 'Components/Blocks/BlockLinkCardList',
+  component: BlockLinkCardList,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
+}
+export const BlockLinkCardData = {
+  data: {
+    url: '/news/placeholder-slug-1',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    slug: 'placeholder-slug-1',
+    label: 'Solar System',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    }
+  },
+  headingLevel: 'h2',
+  startDate: undefined,
+  endDate: undefined
+}
+
+export const BlockLinkCardCarouselData = [
+  {
+    page: {
+      ...BlockLinkCardData.data,
+      __typename: 'EDUEventPage',
+      startDate: '2021-11-11',
+      startDatetime: '2021-11-11T00:00:00-08:00',
+      endDatetime: '2021-11-11T23:59:59.999999-08:00',
+      endDate: '2021-11-11',
+      ongoing: false,
+      eventType: 'Workshop'
+    }
+  },
+  {
+    page: {
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at tortor placerat, varius ante in, imperdiet dolor. Morbi vel arcu eu purus efficitur consequat sit amet vel nisi. Duis convallis volutpat scelerisque.',
+
+      ...BlockLinkCardData.data,
+      __typename: 'EDULessonPage',
+      primarySubject: {
+        subject: 'Math'
+      },
+      gradeLevels: [
+        { gradeLevel: 'K' },
+        { gradeLevel: '1' },
+        { gradeLevel: '2' },
+        { gradeLevel: '8' }
+      ],
+      time: {
+        time: '1-2 hrs'
+      }
+    }
+  },
+  {
+    page: {
+      ...BlockLinkCardData.data,
+      __typename: 'EDUExplainerArticlePage',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at tortor placerat, varius ante in, imperdiet dolor. Morbi vel arcu eu purus efficitur consequat sit amet vel nisi. Duis convallis volutpat scelerisque.',
+      primarySubject: {
+        subject: 'Engineering'
+      },
+      gradeLevels: [
+        { gradeLevel: 'All Ages' },
+        { gradeLevel: 'K' },
+        { gradeLevel: '1' },
+        { gradeLevel: '2' },
+        { gradeLevel: '5' },
+        { gradeLevel: '6' },
+        { gradeLevel: '7' },
+        { gradeLevel: '8' }
+      ]
+    }
+  },
+  {
+    url: '/news/placeholder-slug-4',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    slug: 'placeholder-slug-4',
+    summary:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at tortor placerat, varius ante in, imperdiet dolor. Morbi vel arcu eu purus efficitur consequat sit amet vel nisi. Duis convallis volutpat scelerisque.',
+    label: 'Technology',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    }
+  }
+]
+
+// stories
+export const BaseStory = {
+  name: 'BlockLinkCardList',
+  args: {
+    itemType: 'cards',
+    heading: 'Related Pages',
+    items: BlockLinkCardCarouselData
+  }
+}

package/src/components/BlockLinkCardList/BlockLinkCardList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Card } from './../../interfaces'
+import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
+
+export interface BlockLinkCardListProps {
+  items: Card[]
+}
+
+const props = withDefaults(defineProps<BlockLinkCardListProps>(), {
+  items: undefined
+})
+</script>
+<template>
+  <div class="BlockLinkCardList">
+    <!-- Slides -->
+    <BlockLinkCard
+      v-for="(item, index) in props.items"
+      :key="index"
+      class="border-b border-gray-light-mid mb-5"
+      :class="{ 'pt-3': index !== 0 }"
+      :data="item"
+      size="lg"
+    />
+  </div>
+</template>
+<style lang="scss">
+.BlockLinkCardList {
+  .BlockLinkCard {
+    div.bg-gray-dark.relative.mb-6 {
+      @apply mb-3 #{!important};
+    }
+  }
+}
+</style>

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

@@ -1,3 +1,4 @@
+import { BlockAccordionData } from './../BlockAccordion/BlockAccordion.stories'
 import { BlockCardGridData } from './../BlockCardGrid/BlockCardGrid.stories'
 import { BlockCtaData } from './../BlockCta/BlockCta.stories'
 import { BlockHeadingData } from './../BlockHeading/BlockHeading.stories'
@@ -86,6 +87,7 @@ export const BlockStreamfieldData = {
       heading: 'Heading 2',
       level: 'h2'
     },
+    BlockAccordionData,
     {
       blockType: 'HeadingBlock',
       heading: 'Heading 3',

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -207,6 +207,32 @@
         <BlockCardGrid :cards="block.items" />
       </div>
 
+      <div
+        v-else-if="block.blockType === 'LinkCarouselBlock' && block.blocks?.length"
+        :key="`linkCarouselBlock${index}`"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockLinkCarousel :items="block.blocks" />
+      </div>
+
+      <LayoutHelper
+        v-else-if="block.blockType === 'LinkCardListBlock' && block.blocks?.length"
+        :key="`linkCardListBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockLinkCardList :items="block.blocks" />
+      </LayoutHelper>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'AccordionBlock'"
+        :key="`accordionBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockAccordion :data="block as unknown as AccordionBlockObject" />
+      </LayoutHelper>
+
       <div
         v-else
         :key="index"
@@ -222,6 +248,8 @@ import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { StreamfieldBlockData } from '../../interfaces'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
+import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
+import BlockAccordion, { type AccordionBlockObject } from './../BlockAccordion/BlockAccordion.vue'
 import BlockCardGrid from './../BlockCardGrid/BlockCardGrid.vue'
 import BlockCta from './../BlockCta/BlockCta.vue'
 import BlockHeading, { BlockHeadingObject } from './../BlockHeading/BlockHeading.vue'
@@ -231,6 +259,8 @@ import BlockImageComparison from './../BlockImageComparison/BlockImageComparison
 import BlockImageGallery from './../BlockImageGallery/BlockImageGallery.vue'
 import BlockInlineImage from './../BlockInlineImage/BlockInlineImage.vue'
 import BlockKeyPoints from './../BlockKeyPoints/BlockKeyPoints.vue'
+import BlockLinkCardList from './../BlockLinkCardList/BlockLinkCardList.vue'
+import BlockLinkCarousel from './../BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockListCards from './../BlockListCards/BlockListCards.vue'
 import BlockQuote, { type BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
 import BlockRelatedLinks, {
@@ -246,7 +276,7 @@ import BlockVideo from './../BlockVideo/BlockVideo.vue'
 import BlockVideoEmbed, {
   type BlockData as VideoBlockEmbedData
 } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
-import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
+
 interface Variants {
   [key: string]: string
 }
@@ -260,6 +290,8 @@ export default defineComponent({
   name: 'BlockStreamfield',
   components: {
     LayoutHelper,
+    BlockAnchor,
+    BlockAccordion,
     BlockCardGrid,
     BlockCta,
     BlockHeading,
@@ -269,6 +301,8 @@ export default defineComponent({
     BlockImageGallery,
     BlockInlineImage,
     BlockKeyPoints,
+    BlockLinkCardList,
+    BlockLinkCarousel,
     BlockListCards,
     BlockQuote,
     BlockRelatedLinks,
@@ -279,8 +313,7 @@ export default defineComponent({
     BlockIframeEmbed,
     BlockGist,
     BlockVideo,
-    BlockVideoEmbed,
-    BlockAnchor
+    BlockVideoEmbed
   },
   props: {
     variant: {

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

@@ -50,7 +50,10 @@ export const MultipleGradeLevels = {
         { gradeLevel: '6' },
         { gradeLevel: '7' },
         { gradeLevel: '8' }
-      ]
+      ],
+      time: {
+        time: 'Under 30 mins'
+      }
     },
     variant: 'secondary'
   }

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -3,7 +3,7 @@ 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 IconTime from './../Icons/IconTime.vue'
 import {} from './../../utils/mixins'
 import { rangeifyGrades } from './../../utils/rangeifyGrades'
 
@@ -29,6 +29,9 @@ const primarySubject = computed(() => {
 const audience = computed(() => {
   return rangeifyGrades(props.resource?.gradeLevels)
 })
+const time = computed(() => {
+  return props.resource?.time?.time
+})
 </script>
 <template>
   <div
@@ -57,6 +60,16 @@ const audience = computed(() => {
       />
       <span>{{ audience }}</span>
     </div>
+    <div
+      v-if="time"
+      class="MetadataEduResourceItem"
+    >
+      <IconTime
+        class="MetadataEduResourceIcon text-[1.15em]"
+        :class="iconClass"
+      />
+      <span>{{ time }}</span>
+    </div>
   </div>
 </template>
 <style lang="scss">

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -50,6 +50,7 @@ interface NavJumpMenuProps {
   headingLevel?: string
   invert?: boolean
   enabled?: boolean
+  dropdownText?: string
 }
 
 const props = withDefaults(defineProps<NavJumpMenuProps>(), {
@@ -59,7 +60,8 @@ const props = withDefaults(defineProps<NavJumpMenuProps>(), {
   headingLevel: 'h2',
   enabled: true,
   invert: true,
-  hidden: false
+  hidden: false,
+  dropdownText: 'Jump to…'
 })
 
 const NavJumpMenuRef = ref()
@@ -102,7 +104,7 @@ const theBreadcrumbs = computed(() => {
         path: '#siteTop'
       }
   const jumpMenu: BreadcrumbPathObject = {
-    title: 'Jump to…',
+    title: props.dropdownText,
     path: '#',
     children: theJumpLinks.value as BreadcrumbPathObject[]
   }
@@ -139,5 +141,15 @@ watch(
       @apply opacity-100 transition-all pointer-events-auto;
     }
   }
+  .NavSecondaryLink.secondary-root {
+    span {
+      @apply border-primary #{!important};
+    }
+    &.-invert {
+      span {
+        @apply border-white #{!important};
+      }
+    }
+  }
 }
 </style>

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -9,7 +9,7 @@
     <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
-      class="font-medium border-t-2 border-transparent block px-3 py-2"
+      class="-t-2 border-transparent block px-3 py-2"
       :class="dropdownToggleClasses(index)"
       :invert="invert"
       @toggle-clicked="toggleDropdown()"
@@ -69,7 +69,6 @@ export default defineComponent({
       type: Object,
       required: true
     },
-
     invert: {
       type: Boolean,
       required: false,
@@ -121,13 +120,13 @@ export default defineComponent({
     dropdownToggleClasses(index: number) {
       return this.invert
         ? {
-            'mr-auto text-white font-semibold secondary-root': index === 0,
-            'text-white': index !== 0,
+            'mr-auto text-white font-bold secondary-root': index === 0,
+            'text-white font-semibold !pt-[.6rem]': index !== 0,
             '-open': this.dropdownVisible
           }
         : {
             'mr-auto text-primary font-semibold secondary-root': index === 0,
-            'text-gray-dark': index !== 0,
+            'text-gray-dark font-medium !pt-[.6rem]': index !== 0,
             '-open': this.dropdownVisible
           }
     },

package/src/components/NavSecondary/NavSecondaryLink.vue

@@ -50,11 +50,13 @@ export default defineComponent({
       return false
     },
     baseLinkClasses(index: number | undefined) {
-      let rootClasses = 'mr-auto font-semibold secondary-root'
+      let rootClasses = 'mr-auto secondary-root'
       rootClasses = this.invert
-        ? `${rootClasses} text-white -invert`
-        : `${rootClasses} text-primary`
-      const regularClasses = this.invert ? 'text-white -invert' : 'text-gray-dark'
+        ? `${rootClasses} text-white font-bold -invert`
+        : `${rootClasses} text-primary font-semibold`
+      const regularClasses = this.invert
+        ? 'text-white -invert font-semibold'
+        : 'text-gray-dark font-medium'
       return index === 0 ? rootClasses : regularClasses
     },
     spanClasses(index: number | undefined) {

package/src/components/SearchSelectMenu/SearchSelectMenu.vue

@@ -8,7 +8,7 @@
     <select
       :id="generateId()"
       v-model="selectValueHandler"
-      class="border-0 text-primary can-hover:hover:text-primary-dark font-secondary font-semibold tracking-wider uppercase align-middle"
+      class="border-0 text-action can-hover:hover:text-action-dark font-secondary font-semibold tracking-wider uppercase align-middle"
     >
       <option
         disabled