fixing calendar button and other tweaks to details

packages/vue/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: {

packages/vue/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 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>

packages/vue/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 }

packages/vue/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,51 @@ 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() {
+      // this.icalendar = new ICalendar(this.options)
       let recurrence = {}
       if (this.endDatetime && this.isAllDay) {
         // Calculate how many full days
@@ -61,25 +80,35 @@ 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,
         start: new Date(this.startDatetime),
         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()
+      // this.icalendar.render()
+      console.log(this.icalendar.render())
     }
   }
 })

packages/vue/src/components/MixinCarousel/MixinCarousel.vue

@@ -17,7 +17,7 @@
         <div class="sm:flex flex-wrap items-center justify-between">
           <h2
             v-if="heading"
-            class="text-h3 defaultTheme:uppercase"
+            class="MixinCarousel__Heading text-h3 defaultTheme:uppercase"
           >
             {{ heading }}
           </h2>

packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js

@@ -23,7 +23,7 @@ export const BaseStory = {
   args: {
     data: {
       id: '285',
-      title: 'Becoming a nasa engineer',
+      title: 'Becoming a NASA engineer',
       slug: 'becoming-a-nasa-engineer',
       url: '/events/becoming-a-nasa-engineer',
       startDate: '2022-01-23',

packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -155,7 +155,7 @@
             <!-- Todo IF VIRTUAL EVENT passes url as string to location prop -->
             <!-- location= location name and link -->
             <CalendarButton
-              :is-all-day="data.isAllDay"
+              v-if="data.startDatetime"
               :start-datetime="data.startDatetime"
               :end-datetime="data.endDatetime ? data.endDatetime : null"
               :title="data.title ? data.title : null"
@@ -291,11 +291,11 @@
     <!-- Related Content -->
     <div
       v-if="data.relatedContent?.length"
-      class="bg-stars bg-primary-dark lg:py-24 lg:mt-24 py-12 mt-12"
+      class="bg-stars bg-[#15003B] lg:py-24 lg:mt-24 py-12 mt-12"
     >
       <BlockLinkCarousel
-        class="text-white"
-        item-type="tiles"
+        class="ThemeVariantDark"
+        item-type="cards"
         heading="Explore More"
         :items="data.relatedContent"
       />
@@ -411,5 +411,8 @@ export default defineComponent({
 
     max-width: 260px;
   }
+  .bg-stars .MixinCarousel__Heading {
+    @apply text-white;
+  }
 }
 </style>