feature: EDU Event Detail Page

apps/vue-storybook/.percy.yml

@@ -8,6 +8,9 @@ snapshot:
   disableShadowDOM: false
   enableJavascript: true
   enableLayout: true
+discovery:
+  concurrency: 15
+  retry: true
 storybook:
   # args: {}
   # globals: {}
@@ -52,7 +55,7 @@ storybook:
       'Components/Blocks/BlockLinkCarousel: Two Items',
       'Components/Blocks/BlockLinkCarousel: Multiple Carousels',
       'Components/Heroes/Small: Video',
-      'Snapshot found: Components/Heroes/Small: HeroMedium (compact)',
+      'Components/Heroes/Small: HeroMedium (compact)',
       'Components/WWW/Homepage/HomepageCarousel: Carousel with shuffled items',
       'Components/WWW/Homepage/HomepageCarousel: Carousel with few slides',
       'Components/WWW/Homepage/HomepageCarousel/HomepageCarouselItem: Single Item',

apps/vue-storybook/package.json

@@ -19,17 +19,18 @@
     "prepare:fontcss": "cp ./node_modules/@explorer-1/common/src/scss/_fonts.scss ./public/css/font-face.css",
     "storybook": "storybook dev -c .storybook -p 6006 --ci",
     "build": "storybook build -c .storybook -o storybook_compiled NODE_ENV='production'",
-    "percy": "percy storybook ./storybook_compiled",
+    "percy": "percy storybook ./storybook_compiled --verbose",
+    "percy:debug": "percy storybook ./storybook_compiled --debug --shard-count=2 --shard-index=1",
     "percy:dry-run": "percy storybook ./storybook_compiled --dry-run",
     "lint:app": "eslint './.storybook/**/*.@(js|ts)'",
     "lint:app:fix": "eslint './.storybook/**/*.@(js|ts)' --fix",
     "lint": "eslint './../../packages/vue/src/**/*.stories.@(js|ts|mdx)' && pnpm lint:app",
     "lint:fix": "eslint './../../packages/vue/src/**/*.stories.@(js|ts|mdx)' --fix && pnpm lint:app:fix",
     "init-msw": "msw init public/",
     "start": "http-server storybook_compiled -p 6006 -c-1 -s",
-    "test": "test-storybook --stories-json --maxWorkers=4",
+    "test": "test-storybook --stories-json --maxWorkers=4 --skipTags=\"skip-test\"",
     "test:cross-browser": "test-storybook --stories-json --verbose --maxWorkers=4 --browsers chromium webkit firefox",
-    "test:ci": "test-storybook --stories-json --maxWorkers=4",
+    "test:ci": "test-storybook --stories-json --maxWorkers=4 --skipTags=\"skip-test\"",
     "update:storybook": "npx storybook@latest upgrade --package-manager pnpm"
   },
   "dependencies": {
@@ -49,8 +50,8 @@
     "@explorer-1/html": "workspace:*",
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
-    "@percy/cli": "^1.28.6",
-    "@percy/storybook": "^6.0.0",
+    "@percy/cli": "^1.28.7",
+    "@percy/storybook": "^6.0.1",
     "@rushstack/eslint-patch": "^1.2.0",
     "@storybook/addon-a11y": "^8.2.6",
     "@storybook/addon-essentials": "^8.2.6",

apps/vue-storybook/vite.config.ts

@@ -22,5 +22,9 @@ export default defineConfig({
     watch: {
       usePolling: true
     }
+  },
+  build: {
+    // storybook-only
+    modulePreload: false
   }
 })

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

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

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 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>

packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue

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

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

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

packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -316,6 +316,9 @@ export default defineComponent({
   &.-fluid {
     .LayoutHelper {
       @apply block;
+      &.container {
+        @apply px-0;
+      }
     }
 
     .BlockInlineImage {

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 }