@explorer-1/vue 0.2.0 → 0.2.2

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -33,7 +33,7 @@
       />
 
       <LayoutHelper
-        v-else-if="block.blockType == 'ListBlock'"
+        v-else-if="block.blockType == 'ListBlock' && block.field === 'content_card_list'"
         :key="`listBlock${index}`"
         indent="col-3"
         class="lg:mb-18 mb-10"
@@ -186,6 +186,15 @@
         :data="block"
       />
 
+      <LayoutHelper
+        v-else-if="block.blockType == 'ListBlock' && block.field === 'card_grid'"
+        :key="`gridBlock${index}`"
+        indent="col-1"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockCardGrid :cards="block.items" />
+      </LayoutHelper>
+
       <div
         v-else
         :key="index"
@@ -199,10 +208,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { ImageObject } from '../../interfaces'
+import type { BlockData, ImageObject } from '../../interfaces'
 import type { BlockData as VideoBlockEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import type { BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
 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 BlockImage from './../BlockImage/BlockImage.vue'
@@ -233,8 +243,7 @@ export const variants: Variants = {
   fluid: '-fluid'
 }
 
-export interface StreamfieldBlockData {
-  blockType: string
+export interface StreamfieldBlockData extends BlockData {
   id: string
   fullBleed: boolean
   heading: string
@@ -256,6 +265,7 @@ export default defineComponent({
   name: 'BlockStreamfield',
   components: {
     LayoutHelper,
+    BlockCardGrid,
     BlockCta,
     BlockHeading,
     BlockImage,
@@ -316,6 +326,9 @@ export default defineComponent({
   &.-fluid {
     .LayoutHelper {
       @apply block;
+      &.container {
+        @apply px-0;
+      }
     }
 
     .BlockInlineImage {

package/src/components/CalendarButton/CalendarButton.stories.js

@@ -15,22 +15,4 @@ export const CalendarButtonData = {
   endDatetime: '2021-11-11T23:59:59.999999-08:00'
 }
 
-// template
-const CalendarButtonTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { CalendarButton },
-  template: `
-  <CalendarButton
-    :is-all-day="isAllDay"
-    :start-datetime="startDatetime"
-    :end-datetime="endDatetime"
-    :title="title"
-    :location="location"
-    />
-  `
-})
-
-export const BaseStory = CalendarButtonTemplate.bind({})
-BaseStory.args = {
-  ...CalendarButtonData
-}
+export const BaseStory = { name: 'CalendarButton', args: CalendarButtonData }

package/src/components/CalendarButton/CalendarButton.vue

@@ -1,12 +1,10 @@
 <template>
   <BaseButton
+    ref="CalendarButton"
     class="w-full"
     variant="secondary"
     compact
-    @click="
-      // @ts-ignore
-      icalendar.download()
-    "
+    @click="handleDownload"
   >
     Add to calendar
   </BaseButton>
@@ -15,6 +13,7 @@
 import { defineComponent } from 'vue'
 import { ICalendar } from 'datebook'
 import type { CalendarOptions } from 'datebook'
+import { kebabCase } from 'lodash'
 // @ts-ignore
 import dayjs from 'dayjs'
 import BaseButton from './../BaseButton/BaseButton.vue'
@@ -27,31 +26,50 @@ export default defineComponent({
   props: {
     isAllDay: {
       type: Boolean,
-      required: true
+      required: false,
+      default: false
     },
+
     startDatetime: {
       type: String,
       required: true
     },
     endDatetime: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     location: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     description: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
+    }
+  },
+  data(): {
+    icalendar: any
+    options: CalendarOptions | undefined
+  } {
+    return {
+      icalendar: undefined,
+      options: undefined
     }
   },
-  computed: {
-    icalendar(): ICalendar {
+
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
       let recurrence = {}
       if (this.endDatetime && this.isAllDay) {
         // Calculate how many full days
@@ -61,7 +79,7 @@ export default defineComponent({
         recurrence = { frequency: 'DAILY', interval: 1, count: difference }
       }
 
-      const options: CalendarOptions = {
+      this.options = {
         title: this.title ? this.title : undefined,
         location: this.location ? this.addSlashes(this.location) : undefined,
         description: this.description ? this.description : undefined,
@@ -69,17 +87,25 @@ export default defineComponent({
         end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
         recurrence
       }
-
-      return new ICalendar(options)
-    }
-  },
-  methods: {
+      this.icalendar = new ICalendar(this.options)
+    },
     addSlashes(string: string): string {
       // Escape special characters COMMA, SEMI-COLON and BACKSLASH
       // as temporary fix for this issue https://github.com/jshor/datebook/issues/179
       // regex based of https://stackoverflow.com/a/770533
       // eslint-disable-next-line
       return string.replace(/[,;\\]/g, '\\$&').replace(/\u0000/g, '\\0')
+    },
+    handleDownload() {
+      const ics = this.icalendar.render()
+      const blob = new Blob([ics], {
+        type: 'text/calendar'
+      })
+      const objectUrl = window.URL.createObjectURL(blob)
+      let fileLink = document.createElement('a')
+      fileLink.href = objectUrl
+      fileLink.download = kebabCase(this.title)
+      fileLink.click()
     }
   }
 })

package/src/components/EventDetailHero/EventDetailHero.vue

@@ -1,33 +1,29 @@
 <template>
   <div
     v-if="image"
-    class="HeroMedia mb-10 md:mb-10 lg:mb-14 -mx-4 lg:mx-0"
+    class="EventDetailHero mb-10 md:mb-10 lg:mb-14 -mx-4 lg:mx-0"
   >
-    <div class="bg-gray-light">
-      <div class="relative flex items-center mx-auto overflow-hidden vh-crop max-w-screen-3xl">
-        <div class="hero">
-          <BaseImage
-            v-if="image.src"
-            :src="image.src.url"
-            :srcset="getSrcSet"
-            :alt="image.alt"
-            :width="image.src.width"
-            :height="image.src.height"
-            image-class="object-center w-full h-full"
-            object-fit-class="cover"
-            loading="lazy"
-          />
-          <div
-            v-if="startDateSplit"
-            class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
-          >
-            <div class="font-extrabold text-6xl leading-tight tracking-wider">
-              {{ startDateSplit.day }}
-            </div>
-            <div class="text-subtitle">
-              {{ startDateSplit.monthAndYear }}
-            </div>
-          </div>
+    <div class="hero">
+      <BaseImage
+        v-if="image.src"
+        :src="image.src.url"
+        :srcset="getSrcSet"
+        :width="image.src.width"
+        :height="image.src.height"
+        :alt="image.alt"
+        image-class="w-full h-auto"
+        object-fit-class="cover"
+        loading="lazy"
+      />
+      <div
+        v-if="startDateSplit"
+        class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+      >
+        <div class="font-extrabold text-6xl leading-tight tracking-wider">
+          {{ startDateSplit.day }}
+        </div>
+        <div class="text-subtitle">
+          {{ startDateSplit.monthAndYear }}
         </div>
       </div>
     </div>
@@ -47,7 +43,8 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
     startDateSplit: {
       type: Object as PropType<EventDateObject | undefined>,
@@ -55,7 +52,8 @@ export default defineComponent({
     },
     image: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {
@@ -65,6 +63,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-@import '@explorer-1/common/src/scss/components/HeroMedia';
-</style>

package/src/components/LayoutHelper/LayoutHelper.vue

@@ -20,6 +20,10 @@ export default defineComponent({
       required: false,
       default: 'col-1',
       validator: (prop: string): boolean => Object.keys(indents).includes(prop)
+    },
+    fullBleed: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -31,7 +35,9 @@ export default defineComponent({
 </script>
 <template>
   <div class="LayoutHelper BaseGrid container mx-auto">
-    <div :class="theWidth + ' col-start-1 col-end-13 lg:px-0 px-4 relative'">
+    <div
+      :class="`${theWidth} col-start-1 col-end-13 lg:px-0 ${fullBleed ? 'px-0' : 'px-4'} relative`"
+    >
       <slot></slot>
     </div>
   </div>

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -17,7 +17,7 @@
         <div class="sm:flex flex-wrap items-center justify-between">
           <h2
             v-if="heading"
-            class="font-primary text-gray-dark lg:text-6xl text-3xl font-semibold leading-normal tracking-normal uppercase"
+            class="MixinCarousel__Heading text-h3 defaultTheme:uppercase"
           >
             {{ heading }}
           </h2>

package/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js

@@ -3,6 +3,7 @@ import ThumbnailCarousel from './ThumbnailCarousel.vue'
 export default {
   title: 'Components/Utilities/ThumbnailCarousel',
   component: ThumbnailCarousel,
+  tags: ['skip-test'],
   parameters: {
     docs: {
       description: {

package/src/docs/overviews/blocks.docs.mdx.disabled

@@ -2,8 +2,8 @@
 import { Meta } from '@storybook/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import _ as BlockAccordionStories from './../../components/BlockAccordion/BlockAccordion.stories'
-import _ as BlockCardGroupStories from './../../components/BlockCardGroup/BlockCardGroup.stories'
-import _ as BlockCardStories from './../../components/BlockCard/BlockCard.stories'
+import _ as BlockCardGridStories from './../../components/BlockCardGrid/BlockCardGrid.stories'
+import _ as BlockCardStories from './../../components/BlockCardGridItem/BlockCardGridItem.stories'
 import _ as BlockCircleImageCardStories from './../../components/BlockCircleImageCard/BlockCircleImageCard.stories'
 import _ as BlockIframeEmbedStories from './../../components/BlockIframeEmbed/BlockIframeEmbed.stories'
 import _ as BlockImageCarouselStories from './../../components/BlockImageCarousel/BlockImageCarousel.stories'
@@ -88,11 +88,11 @@ Reserved for the top of the page. Learn more about our heroes on the [heroes ove
       fullWidth: true
     },
     {
-      heading: 'BlockCardGroup',
+      heading: 'BlockCardGrid',
       customDescription:
         'A collection of smaller cards that support images, labels, headings, and descriptions, laid out in a grid on medium and larger screens, or in a carousel on small screens.',
-      meta: BlockCardGroupStories,
-      path: '/docs/components-blocks-blockcardgroup--docs',
+      meta: BlockCardGridStories,
+      path: '/docs/components-blocks-BlockCardGrid--docs',
       canvasClass: 'sbdocs-inline-height',
       fullWidth: true
     },
@@ -161,9 +161,9 @@ Reserved for the top of the page. Learn more about our heroes on the [heroes ove
 <ComponentList
   components={[
     {
-      heading: 'BlockCard',
+      heading: 'BlockCardGridItem',
       meta: BlockCardStories,
-      path: '/docs/components-blocks-blockcard--docs'
+      path: '/docs/components-blocks-BlockCardGridItem--docs'
     },
     {
       heading: 'BlockLinkCard',

package/src/docs/overviews/cards.docs.mdx

@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as BlockCardGridItemStories from './../../components/BlockCardGridItem/BlockCardGridItem.stories'
+import * as BlockCircleImageCardStories from './../../components/BlockCircleImageCard/BlockCircleImageCard.stories'
+import * as BlockLinkCardStories from './../../components/BlockLinkCard/BlockLinkCard.stories'
+import * as BlockLinkTileStories from './../../components/BlockLinkTile/BlockLinkTile.stories'
+
+<Meta title="Components/Cards/Overview" />
+
+# Card Components
+
+- [Carousel Cards](#carousel)
+- [Grid Cards](#grid)
+- [Reserved-use Cards](#reserved)
+
+  <br />
+
+  <br />
+
+<span id="carousel"></span>
+
+## Carousel Cards
+
+These cards are interchangeable within `MixinCarousel`.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockLinkCard',
+      meta: BlockLinkCardStories,
+      path: '/story/components-cards-blocklinkcard--base-story',
+      fullWidth: true
+    },
+    {
+      heading: 'BlockLinkTile',
+      meta: BlockLinkTileStories,
+      path: '/story/components-cards-blocklinktile--base-story',
+      fullWidth: true
+    }
+  ]}
+/>
+
+<span id="carousel"></span>
+
+## Grid Cards
+
+These cards can be used to create a grid of cards.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockCardGridItem',
+      meta: BlockCardGridItemStories,
+      customDescription: 'The link is optional',
+      path: '/story/components-cards-blockcardgriditem--base-story',
+      fullWidth: true
+    }
+  ]}
+/>
+
+## Reserved-use Cards
+
+These cards were built for specific use-cases, but that does not exclude them from being re-used for other purposes.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockCircleImageCard',
+      meta: BlockCircleImageCardStories,
+      path: '/story/components-cards-blockcircleimagecard--base-story',
+      fullWidth: true,
+      customDescription: 'Used in the Timeline'
+    }
+  ]}
+/>

package/src/interfaces.ts

@@ -6,6 +6,8 @@ export interface BreadcrumbPathObject {
 
 export interface BlockData {
   blockType: string
+  field?: string
+  items?: any[]
 }
 export interface ImageSrcObject {
   url: string
@@ -80,12 +82,15 @@ export interface Card {
   thumbnailImage?: Partial<ImageObject>
 }
 
-export interface RelatedLinkObject {
+export interface LinkObject {
   page: {
     url: string
   } | null
-  document: { url: string } | null
   externalLink: string | null
+}
+
+export interface RelatedLinkObject extends LinkObject {
+  document: { url: string } | null
   text: string | null
 }
 

package/src/templates/PageEventDetail/PageEventDetail.stories.js

@@ -6,6 +6,7 @@ import PageEventDetail from './PageEventDetail.vue'
 export default {
   title: 'Templates/PageEventDetail',
   component: PageEventDetail,
+  tags: ['!autodocs'],
   parameters: {
     html: {
       root: '#storyDecorator'
@@ -17,6 +18,7 @@ export default {
 
 // stories
 export const BaseStory = {
+  name: 'PageEventDetail',
   args: {
     data: {
       id: '285',
@@ -34,7 +36,7 @@ export const BaseStory = {
       label: 'Events',
       location: 'Webcast',
       registerLink: [],
-      heroImage: {
+      eventImage: {
         ...EventDetailHeroData.heroImage
       },
       thumbnailImage: {

package/src/templates/PageEventDetail/PageEventDetail.vue

@@ -32,7 +32,7 @@
     >
       <div
         v-if="data.label"
-        class="flex flex-wrap items-start mb-3"
+        class="flex flex-wrap items-start mb-4"
       >
         <nuxt-link
           class="py-3 cursor-pointer group nuxt-link-active text-subtitle text-primary can-hover:hover:text-primary-dark"
@@ -62,7 +62,7 @@
 
     <LayoutHelper indent="col-2">
       <EventDetailHero
-        :image="data.heroImage"
+        :image="data.eventImage"
         :start-date-split="formattedSplitEventDates"
       />
 
@@ -73,7 +73,7 @@
           :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
         >
           <div class="PageEventDetail__Metadata text-primary">
-            <IconCalendar class="relative mr-3" />
+            <IconCalendar class="relative mr-3 text-[1.2rem]" />
             <span>{{ formattedEventDates }}</span>
           </div>
           <div

package/src/templates/PageImageDetail/PageImageDetail.stories.js

@@ -6,7 +6,7 @@ export default {
   title: 'Templates/PageImageDetail',
   component: PageImageDetail,
   excludeStories: /.*Data$/,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'skip-test'],
   parameters: {
     layout: 'fullscreen'
   }

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

@@ -26,6 +26,7 @@ export default {
 
 // stories
 export const BaseStory = {
+  name: 'PageContent',
   args: {
     data: ContentPageData
   }

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

@@ -0,0 +1,130 @@
+import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { EventDetailHeroData } from './../../../components/EventDetailHero/EventDetailHero.stories'
+import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import PageEduEventDetail from './PageEduEventDetail.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduEventDetail',
+  component: PageEduEventDetail,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*Data$/
+}
+
+// stories
+export const BaseStory = {
+  name: 'PageEduEventDetail',
+  args: {
+    data: {
+      id: '285',
+      title: 'Becoming a NASA engineer',
+      slug: 'becoming-a-nasa-engineer',
+      url: '/events/becoming-a-nasa-engineer',
+      startDate: '2022-01-23',
+      startDatetime: '2022-01-23T17:00:00-08:00',
+      startTime: '17:00:00',
+      endDate: '2022-01-25',
+      endDatetime: '2022-01-25T23:00:00-08:00',
+      endTime: '23:00:00',
+      isAllDay: false,
+      timezone: 'PST',
+      eventType: 'Workshop',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et luctus nisi. Maecenas vel turpis sem. Nullam ultricies nulla quis nisi faucibus eleifend. In turpis ante, blandit nec dapibus tempor, posuere at erat. In justo quam, imperdiet at hendrerit eget, imperdiet ut orci. ',
+      locationName: 'Webcast',
+      registerLink: [
+        {
+          text: 'Registration Link',
+          document: '',
+          page: {
+            url: '/placeholder'
+          },
+          externalLink: ''
+        }
+      ],
+      eventImage: {
+        __typename: 'CustomImage',
+        srcSet:
+          'https://picsum.photos/720/420 320w, https://picsum.photos/720/420 640w, https://picsum.photos/720/420 720w',
+        original: 'https://picsum.photos/720/420',
+        src: {
+          __typename: 'CustomRendition',
+          url: 'https://picsum.photos/720/420',
+          width: '720',
+          height: '420'
+        },
+        title: 'Marine Picks First Public Mars Global Surveyor Image',
+        alt: '',
+        caption:
+          '<p data-block-key="y00sz">A close-up view of part of the area imaged by Mars Global Surveyor for its public request program.</p>',
+        credit: 'Credit',
+        detailUrl: null
+      },
+      thumbnailImage: {
+        alt: '',
+        original: 'https://picsum.photos/512/288'
+      },
+      targetAudience: 'All ages',
+      body: [
+        BlockKeyPointsData,
+        {
+          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'
+        }
+      ],
+      relatedEvents: [...EventsBlockLinkCarouselData],
+      speakers: [
+        {
+          host: 'host',
+          id: '1',
+          internalLink: null,
+          name: 'Varoujan Gorjian',
+          title: 'Splitzer Research Scientest, JPL'
+        },
+        {
+          host: 'co-host',
+          id: '2',
+          image: {
+            alt: '',
+            src: {
+              height: '450',
+              url: 'https://picsum.photos/560/560',
+              width: '450'
+            }
+          },
+          internalLink: null,
+          name: 'Robert Hurt',
+          title: 'Splitzer visualisation'
+        }
+      ],
+      relatedLinks: [
+        {
+          blockType: 'RelatedLinksBlock',
+          heading: 'Related Links',
+          links: [
+            {
+              document: null,
+              externalLink: 'http://www.google.com',
+              page: null,
+              text: 'Lorem ipsum dolor'
+            },
+            {
+              document: null,
+              externalLink: 'http://www.google.com',
+              page: null,
+              text: 'Sit amet consectatur'
+            }
+          ]
+        }
+      ],
+      relatedContent: BlockLinkCardCarouselData
+    }
+  }
+}