@explorer-1/vue 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BaseTag/BaseTag.vue

@@ -10,8 +10,8 @@ const variantMap: Attributes = {
 
 const sizeMap: Attributes = {
   sm: 'text-xs uppercase border-t-2 py-1 px-2.5',
-  md: 'text-base capitalize border-t py-2 px-3',
-  lg: 'text-lg capitalize border-t py-2 px-3'
+  md: 'text-base capitalize border-t py-1 px-3',
+  lg: 'text-lg capitalize border-t py-1 px-3'
 }
 
 interface BaseTagProps {

package/src/components/BlockCard/BlockCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="shadow-jpl relative h-full"
+    class="shadow-jpl relative h-full bg-white"
     :class="{ 'flex items-center min-h-32': !image }"
   >
     <div
@@ -23,7 +23,7 @@
         />
       </BaseImagePlaceholder>
     </div>
-    <div class="px-6 py-6">
+    <div class="px-6 py-6 ThemeVariantLight">
       <div class="text-primary text-subtitle">
         {{ type }}
       </div>
@@ -64,15 +64,18 @@ export default defineComponent({
     },
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     text: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     image: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {

package/src/components/BlockInlineImage/BlockInlineImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="BlockInlineImage container mx-auto"
+    class="BlockInlineImage LayoutHelper container mx-auto"
   >
     <div class="lg:BaseGrid lg:px-0 px-4">
       <!-- the image -->

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -5,7 +5,7 @@
     :to="theItem.url ? theItem.url : undefined"
     :href="theItem.externalLink ? theItem.externalLink : undefined"
     class="BlockLinkCard group"
-    link-class="block pb-5"
+    :link-class="`block ${compact ? 'pb-3' : 'pb-5'}`"
     external-target-blank
   >
     <BaseImagePlaceholder
@@ -29,7 +29,7 @@
     </BaseImagePlaceholder>
 
     <div
-      class="transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform"
+      class="BlockLinkCard__CardContent transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform"
       :class="
         compact ? 'can-hover:group-hover:-translate-y-2' : 'can-hover:group-hover:-translate-y-3'
       "
@@ -71,7 +71,7 @@
       </p>
     </div>
     <div
-      class="can-hover:block text-action 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="BlockLinkCard__CardArrow ThemeVariantLight can-hover:block text-action 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"
     >
       <IconArrow />
     </div>
@@ -100,41 +100,50 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<Card>,
-      required: false
+      required: false,
+      default: undefined
     },
     // override props as needed
     // so we can use this component in search results
     url: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     externalLink: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     thumbnailImage: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
     label: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     date: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     startDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     endDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     // if styling should be compact
     compact: {
@@ -144,7 +153,8 @@ export default defineComponent({
     // if a heading should be used and at what level
     headingLevel: {
       type: (String as PropType<HeadingLevel>) || null,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {
@@ -193,5 +203,15 @@ export default defineComponent({
   .text-subtitle.divide-x {
     @apply leading-none #{!important};
   }
+  .ThemeVariantDark & {
+    @apply bg-white;
+    .BlockLinkCard__CardContent,
+    .BlockLinkCard__CardArrow {
+      @apply px-6;
+    }
+    .BaseImagePlaceholder {
+      @apply bg-gray-mid-dark;
+    }
+  }
 }
 </style>

package/src/components/BlockLinkCarousel/BlockLinkCarousel.vue

@@ -1,4 +1,3 @@
-\
 <template>
   <MixinCarousel
     v-if="hasContent"

package/src/components/BlockRelatedLinks/BlockRelatedLinks.vue

@@ -3,6 +3,7 @@
     <BaseHeading
       v-if="data.heading"
       level="h2"
+      v-bind="$attrs"
       class="md:mb-8 mb-5"
     >
       {{ data.heading }}
@@ -43,7 +44,6 @@
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { BlockData, RelatedLinkObject } from './../../interfaces'
-
 import RelatedLink from './../BlockRelatedLinks/RelatedLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
@@ -63,6 +63,11 @@ export default defineComponent({
       type: Object as PropType<BlockRelatedLinksObject>,
       required: true,
       default: () => ({})
+    },
+    headingSize: {
+      type: String,
+      required: false,
+      default: undefined
     }
   },
   computed: {

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

@@ -47,6 +47,7 @@ export const BlockStreamfieldTruncatedData = {
       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
   ]
 }

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -316,6 +316,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/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/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
   }