@explorer-1/vue 0.2.23 → 0.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.23",
+  "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/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.vue

@@ -207,6 +207,23 @@
         <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}`"
@@ -231,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'
@@ -240,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, {
@@ -255,9 +276,6 @@ import BlockVideo from './../BlockVideo/BlockVideo.vue'
 import BlockVideoEmbed, {
   type BlockData as VideoBlockEmbedData
 } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
-import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
-import BlockAccordion from './../BlockAccordion/BlockAccordion.vue'
-import { type AccordionBlockObject } from './../BlockAccordion/BlockAccordion.vue'
 
 interface Variants {
   [key: string]: string
@@ -272,6 +290,8 @@ export default defineComponent({
   name: 'BlockStreamfield',
   components: {
     LayoutHelper,
+    BlockAnchor,
+    BlockAccordion,
     BlockCardGrid,
     BlockCta,
     BlockHeading,
@@ -281,6 +301,8 @@ export default defineComponent({
     BlockImageGallery,
     BlockInlineImage,
     BlockKeyPoints,
+    BlockLinkCardList,
+    BlockLinkCarousel,
     BlockListCards,
     BlockQuote,
     BlockRelatedLinks,
@@ -291,9 +313,7 @@ export default defineComponent({
     BlockIframeEmbed,
     BlockGist,
     BlockVideo,
-    BlockVideoEmbed,
-    BlockAnchor,
-    BlockAccordion
+    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/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

package/src/docs/foundation/typography.stories.js

@@ -78,6 +78,8 @@ export const TextStyles = {
   <code>.text-body-xs</code>
   <p class="mt-8"><mark>Highlighted text</mark></p>
   <code>mark</code>
+  <p class="mt-8"><span class="math-text">This is math text. a<sup>2</sup> + a<sub>b</sub> = c</span></p>
+  <code>.math-text</code>
 </div>`
   })
 }

package/src/interfaces.ts

@@ -140,6 +140,7 @@ export interface GradeLevelsObject {
 export interface EduResourceCardObject extends Card {
   primarySubject: PrimarySubjectObject
   gradeLevels: GradeLevelsObject[]
+  time: EduResourcesTime
 }
 
 export interface LinkObject {

package/src/utils/rangeifyGrades.ts

@@ -63,7 +63,7 @@ export const rangeifyGrades = (gradeLevels: GradeLevelsObject[]) => {
     const filteredGrades = rangeify(gradesArray.filter(Number.isFinite))
     let preparedGrades: string = ''
     if (filteredGrades?.length) {
-      const gradeString = filteredGrades.length > 0 ? 'Grades: ' : 'Grade: '
+      const gradeString = filteredGrades.length > 0 ? 'Grades ' : 'Grade '
       preparedGrades = filteredGrades
         .map((grade, index) => (index === 0 ? gradeString + grade : grade))
         .join(', ')