From 9e302a9a8e829157b78d887dacff5c2f5675075f Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 14:45:57 -0700
Subject: [PATCH 01/24] adding edu event page template

---
 .../vue/src/components/BaseTag/BaseTag.vue    |   4 +-
 .../BlockLinkCarousel/BlockLinkCarousel.vue   |   1 -
 .../BlockRelatedLinks/BlockRelatedLinks.vue   |   7 +
 .../BlockStreamfield/BlockStreamfield.vue     |   3 +
 .../MixinCarousel/MixinCarousel.vue           |   2 +-
 .../PageEventDetail.stories.js                |   4 +-
 .../PageEventDetail/PageEventDetail.vue       |   6 +-
 .../templates/edu/PageContentEdu.stories.js   |   1 +
 .../PageEduEventDetail.stories.js             | 115 +++++
 .../PageEduEventDetail/PageEduEventDetail.vue | 415 ++++++++++++++++++
 10 files changed, 550 insertions(+), 8 deletions(-)
 create mode 100644 packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
 create mode 100644 packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

diff --git a/packages/vue/src/components/BaseTag/BaseTag.vue b/packages/vue/src/components/BaseTag/BaseTag.vue
index eeec4515..60314f50 100644
--- a/packages/vue/src/components/BaseTag/BaseTag.vue
+++ b/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 {
diff --git a/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue b/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
index 507069d4..cc7c8c55 100644
--- a/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
+++ b/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
@@ -1,4 +1,3 @@
-\
 <template>
   <MixinCarousel
     v-if="hasContent"
diff --git a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
index b3d16319..9019aac7 100644
--- a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
+++ b/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,6 +44,7 @@
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { BlockData, RelatedLinkObject } from './../../interfaces'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 
 import RelatedLink from './../BlockRelatedLinks/RelatedLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
@@ -63,6 +65,11 @@ export default defineComponent({
       type: Object as PropType<BlockRelatedLinksObject>,
       required: true,
       default: () => ({})
+    },
+    headingSize: {
+      type: String,
+      required: false,
+      default: undefined
     }
   },
   computed: {
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index f9b8fe10..f5df4823 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -316,6 +316,9 @@ export default defineComponent({
   &.-fluid {
     .LayoutHelper {
       @apply block;
+      &.container {
+        @apply px-0;
+      }
     }
 
     .BlockInlineImage {
diff --git a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue b/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
index 4fd3058e..0e748b3f 100644
--- a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
+++ b/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="font-primary text-gray-dark lg:text-6xl text-3xl font-semibold leading-normal tracking-normal uppercase"
+            class="text-h3 defaultTheme:uppercase"
           >
             {{ heading }}
           </h2>
diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js b/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js
index 8c29be70..9ec6bd15 100644
--- a/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js
+++ b/packages/vue/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: {
diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue b/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue
index e5f0316a..5bc6910c 100755
--- a/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue
+++ b/packages/vue/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
diff --git a/packages/vue/src/templates/edu/PageContentEdu.stories.js b/packages/vue/src/templates/edu/PageContentEdu.stories.js
index cee5babb..e86f4d7c 100644
--- a/packages/vue/src/templates/edu/PageContentEdu.stories.js
+++ b/packages/vue/src/templates/edu/PageContentEdu.stories.js
@@ -26,6 +26,7 @@ export default {
 
 // stories
 export const BaseStory = {
+  name: 'PageContent',
   args: {
     data: ContentPageData
   }
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
new file mode 100644
index 00000000..0047e01f
--- /dev/null
+++ b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
@@ -0,0 +1,115 @@
+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: {
+        ...EventDetailHeroData.heroImage
+      },
+      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
+    }
+  }
+}
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
new file mode 100644
index 00000000..3b2138d1
--- /dev/null
+++ b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
@@ -0,0 +1,415 @@
+<template>
+  <div
+    v-if="data"
+    class="PageEduEventDetail pt-5 ThemeVariantLight lg:pt-12"
+    itemscope
+    itemtype="http://schema.org/Event"
+  >
+    <!-- schema.org -->
+    <meta
+      v-if="data.thumbnailImage && data.thumbnailImage.original"
+      itemprop="thumbnailUrl"
+      :content="data.thumbnailImage.original"
+    />
+    <meta
+      itemprop="startDate"
+      :content="data.startDatetime"
+    />
+    <meta
+      v-if="data.endDatetime"
+      itemprop="endDate"
+      :content="data.endDatetime"
+    />
+    <meta
+      v-if="data.summary || data.body"
+      itemprop="description"
+      :content="data.summary || data.body"
+    />
+
+    <LayoutHelper
+      indent="col-2"
+      class="mb-6 lg:mb-12"
+    >
+      <div
+        v-if="data.eventType"
+        class="flex flex-wrap items-start mb-3"
+      >
+        <BaseTag
+          variant="primary"
+          size="md"
+        >
+          {{ data.eventType }}
+        </BaseTag>
+      </div>
+      <BaseHeading
+        level="h1"
+        itemprop="name"
+      >
+        {{ data.title }}
+      </BaseHeading>
+      <ShareButtonsEdu
+        class="mt-4"
+        :title="data.title"
+        :url="data.url"
+      />
+    </LayoutHelper>
+
+    <LayoutHelper indent="col-2">
+      <EventDetailHero
+        :image="data.eventImage"
+        :start-date-split="formattedSplitEventDates"
+      />
+
+      <!-- Event details -->
+      <div>
+        <div
+          class="py-1 mb-10 text-xl lg:mb-0 lg:flex"
+          :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
+        >
+          <div
+            v-if="formattedEventDates || data.customDate"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <IconCalendar class="relative mr-3 text-[1.2rem]" />
+            <span>{{ formattedEventDates || data.customDate }}</span>
+          </div>
+          <div
+            v-show="displayTime"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <IconTime class="relative mr-3" />
+            <span>{{ displayTime }}</span>
+          </div>
+          <!--Virtual location -->
+          <div
+            v-if="data.isVirtualEvent && data.locationLink"
+            itemprop="location"
+            itemscope
+            itemtype="https://schema.org/VirtualLocation"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <link
+              itemprop="url"
+              :href="data.locationLink"
+            />
+            <meta
+              itemprop="name"
+              :content="data.locationName"
+            />
+            <IconLocation class="relative mr-3" />
+            <BaseLink
+              variant="none"
+              :href="data.locationLink"
+              external-target-blank
+            >
+              {{ data.locationName }}
+            </BaseLink>
+          </div>
+          <!-- Normal location -->
+          <div
+            v-else-if="data.locationName"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <meta
+              itemprop="location"
+              :content="data.locationName"
+            />
+            <IconLocation class="relative mr-3" />
+            <BaseLink
+              v-if="data.locationLink"
+              variant="none"
+              :href="data.locationLink"
+              external-target-blank
+            >
+              {{ data.locationName }}
+            </BaseLink>
+            <span v-else>{{ data.locationName }}</span>
+          </div>
+          <div
+            v-if="data.targetAudience"
+            class="PageEduEventDetail__Metadata text-primary"
+          >
+            <IconUser class="relative mr-3 text-[.9rem]" />
+            <span>{{ data.targetAudience }}</span>
+          </div>
+
+          <div class="PageEduEventDetail__Buttons">
+            <BaseButton
+              v-if="
+                data.registerLink &&
+                data.registerLink.length > 0 &&
+                ((data.registerLink[0].page && data.registerLink[0].page.url) ||
+                  data.registerLink[0].externalLink)
+              "
+              class="w-full px-0 mb-5"
+              :href="data.registerLink[0].externalLink ? data.registerLink[0].externalLink : null"
+              :to="
+                data.registerLink[0].page && data.registerLink[0].page.url
+                  ? data.registerLink[0].page.url
+                  : null
+              "
+              :target="data.registerLink[0].externalLink ? '_blank' : '_self'"
+              compact
+              >Register for event
+            </BaseButton>
+            <!-- Todo IF VIRTUAL EVENT passes url as string to location prop -->
+            <!-- location= location name and link -->
+            <CalendarButton
+              :is-all-day="data.isAllDay"
+              :start-datetime="data.startDatetime"
+              :end-datetime="data.endDatetime ? data.endDatetime : null"
+              :title="data.title ? data.title : null"
+              :location="data.locationName ? data.locationName : null"
+              :description="data.summary ? data.summary : null"
+            />
+          </div>
+        </div>
+
+        <!-- Body -->
+        <div
+          v-if="data.body || data.summary"
+          class="grid-cols-10 lg:grid -mx-4 lg:mx-0"
+        >
+          <div class="col-span-7">
+            <p
+              v-if="data.summary"
+              class="BlockText text-body-lg mb-8 px-4 lg:px-0 font-semibold"
+            >
+              {{ data.summary }}
+            </p>
+            <BlockStreamfield
+              v-if="data.body"
+              variant="fluid"
+              :data="data.body"
+            />
+          </div>
+        </div>
+      </div>
+    </LayoutHelper>
+
+    <!-- Speakers -->
+    <LayoutHelper
+      v-if="data.speakers && data.speakers.length > 0"
+      indent="col-2"
+      class="mb-12 lg:mb-16"
+    >
+      <div class="grid-cols-10 lg:grid">
+        <div class="col-span-7">
+          <BaseHeading
+            level="h2"
+            size="h3"
+            class="mb-5 md:mb-8"
+            >Speakers</BaseHeading
+          >
+          <div class="flex flex-col flex-wrap justify-start md:flex-row md:-mx-4">
+            <div
+              v-for="(speaker, index) in data.speakers"
+              :key="index"
+              class="flex flex-1 mb-6 md:flex-none md:flex-wrap md:mx-4 md:w-56"
+            >
+              <div class="w-40 mr-6 md:mr-0 md:w-56">
+                <BaseImagePlaceholder
+                  aspect-ratio="1:1"
+                  class="relative overflow-hidden bg-gray-light-mid"
+                  transparent-mode
+                >
+                  <BaseImage
+                    v-if="speaker.image && speaker.image.src"
+                    :src="speaker.image.src.url"
+                    :width="speaker.image.src.width"
+                    :height="speaker.image.src.height"
+                    alt=""
+                    class="object-cover"
+                    loading="lazy"
+                  />
+                  <img
+                    v-else
+                    :src="PlaceholderPortrait"
+                    alt=""
+                  />
+                </BaseImagePlaceholder>
+              </div>
+              <div class="flex-1 h-full">
+                <h3
+                  v-if="speaker.name"
+                  class="my-3 text-lg !font-normal !tracking-normal leading-none"
+                >
+                  <BaseLink
+                    v-if="speaker.internalLink || speaker.externalLink"
+                    link-class="no-underline normal-case"
+                    :to="speaker.internalLink ? speaker.internalLink.url : null"
+                    :href="speaker.externalLink ? speaker.externalLink : null"
+                    external-target-blank
+                  >
+                    {{ speaker.name }}
+                  </BaseLink>
+                  <template v-else>
+                    {{ speaker.name }}
+                  </template>
+                </h3>
+                <p
+                  v-if="speaker.title"
+                  class="mb-3 text-gray-mid-dark"
+                >
+                  {{ speaker.title }}
+                </p>
+                <p class="text-action capitalize">
+                  {{ speaker.host }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </LayoutHelper>
+
+    <!-- Webcast -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length > 0"
+      indent="col-2"
+      class="my-12 lg:my-16"
+    >
+      <BlockRelatedLinks
+        :data="data.relatedLinks[0]"
+        size="h3"
+      />
+    </LayoutHelper>
+
+    <!-- Related Events -->
+    <LayoutHelper
+      v-if="data.relatedEvents?.length"
+      indent="col-1"
+      class="my-12 lg:my-16"
+    >
+      <BlockLinkCarousel
+        item-type="cards"
+        size="h3"
+        heading="Related Events"
+        :items="data.relatedEvents"
+      />
+    </LayoutHelper>
+    <!-- Related Content -->
+    <div
+      v-if="data.relatedContent?.length"
+      class="bg-stars bg-primary-dark lg:py-24 lg:mt-24 py-12 mt-12"
+    >
+      <BlockLinkCarousel
+        class="text-white"
+        item-type="tiles"
+        heading="Explore More"
+        :items="data.relatedContent"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import {
+  mixinFormatEventDates,
+  mixinFormatEventTimeInHoursAndMinutes,
+  mixinFormatSplitEventDates
+} from '../../../utils/mixins'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
+import BaseTag from './../../../components/BaseTag/BaseTag.vue'
+import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import EventDetailHero from './../../../components/EventDetailHero/EventDetailHero.vue'
+import IconCalendar from './../../../components/Icons/IconCalendar.vue'
+import IconLocation from './../../../components/Icons/IconLocation.vue'
+import IconTime from './../../../components/Icons/IconTime.vue'
+import IconUser from './../../../components/Icons/IconUser.vue'
+import BaseLink from './../../../components/BaseLink/BaseLink.vue'
+import BaseButton from './../../../components/BaseButton/BaseButton.vue'
+import CalendarButton from './../../../components/CalendarButton/CalendarButton.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../../../components/BaseImage/BaseImage.vue'
+import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+// @ts-ignore
+import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg'
+
+export default defineComponent({
+  name: 'PageEduEventDetail',
+  components: {
+    LayoutHelper,
+    BaseHeading,
+    BaseTag,
+    ShareButtonsEdu,
+    EventDetailHero,
+    IconCalendar,
+    IconLocation,
+    IconTime,
+    IconUser,
+    BaseLink,
+    BaseButton,
+    CalendarButton,
+    BlockStreamfield,
+    BaseImagePlaceholder,
+    BaseImage,
+    BlockRelatedLinks,
+    BlockLinkCarousel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      PlaceholderPortrait: PlaceholderPortrait
+    }
+  },
+  computed: {
+    displayTime(): string {
+      return this.data
+        ? mixinFormatEventTimeInHoursAndMinutes(
+            this.data.startDatetime,
+            this.data.endDatetime,
+            this.data.endTime
+          )
+        : ''
+    },
+    formattedEventDates(): string {
+      return this.data ? mixinFormatEventDates(this.data.startDatetime, this.data.endDatetime) : ''
+    },
+    formattedSplitEventDates() {
+      return this.data
+        ? mixinFormatSplitEventDates(this.data.startDatetime, this.data.endDatetime)
+        : undefined
+    }
+  }
+})
+</script>
+<style lang="scss">
+.PageEduEventDetail {
+  .PageEduEventDetail__Metadata {
+    @apply flex;
+    @apply items-baseline;
+    @apply mr-12 md:mr-8 lg:mr-12;
+    @apply mb-5 lg:mb-7;
+
+    span {
+      max-width: 230px;
+      min-width: 110px;
+      @apply text-gray-dark;
+    }
+
+    svg {
+      min-width: 1.25rem;
+      @apply top-0.5;
+    }
+  }
+
+  .PageEduEventDetail__Buttons {
+    @apply text-base;
+    @apply lg:ml-auto;
+    @apply mt-10;
+    @apply lg:mt-0;
+
+    max-width: 260px;
+  }
+}
+</style>

From e4db762adf2e4f30193ee13d2110d20caa6a191d Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 16:32:40 -0700
Subject: [PATCH 02/24] fixing calendar button and other tweaks to details

---
 .../src/components/BlockCard/BlockCard.vue    | 13 ++--
 .../BlockLinkCard/BlockLinkCard.vue           | 46 ++++++++++----
 .../CalendarButton/CalendarButton.stories.js  | 20 +-----
 .../CalendarButton/CalendarButton.vue         | 63 ++++++++++++++-----
 .../MixinCarousel/MixinCarousel.vue           |  2 +-
 .../PageEduEventDetail.stories.js             |  2 +-
 .../PageEduEventDetail/PageEduEventDetail.vue | 11 ++--
 7 files changed, 97 insertions(+), 60 deletions(-)

diff --git a/packages/vue/src/components/BlockCard/BlockCard.vue b/packages/vue/src/components/BlockCard/BlockCard.vue
index 9a747dac..d5f39384 100644
--- a/packages/vue/src/components/BlockCard/BlockCard.vue
+++ b/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: {
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
index 38309db4..f7d3a72d 100644
--- a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
+++ b/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>
diff --git a/packages/vue/src/components/CalendarButton/CalendarButton.stories.js b/packages/vue/src/components/CalendarButton/CalendarButton.stories.js
index a796571a..c27f6ba8 100644
--- a/packages/vue/src/components/CalendarButton/CalendarButton.stories.js
+++ b/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 }
diff --git a/packages/vue/src/components/CalendarButton/CalendarButton.vue b/packages/vue/src/components/CalendarButton/CalendarButton.vue
index d942c0c0..732644d2 100644
--- a/packages/vue/src/components/CalendarButton/CalendarButton.vue
+++ b/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,7 +80,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 +88,27 @@ 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()
+      // this.icalendar.render()
+      console.log(this.icalendar.render())
     }
   }
 })
diff --git a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue b/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
index 0e748b3f..140d40be 100644
--- a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
+++ b/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>
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
index 0047e01f..4e090142 100644
--- a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
+++ b/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',
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
index 3b2138d1..7c1aa136 100644
--- a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
+++ b/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>

From bd4d7488b2d2217a2b523b5a5fd9fc6b531e1809 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 16:37:26 -0700
Subject: [PATCH 03/24] fixing arrow color on ThemeVariantDark version of block
 link card

---
 packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
index f7d3a72d..27a3348d 100644
--- a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
+++ b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -71,7 +71,7 @@
       </p>
     </div>
     <div
-      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"
+      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>

From 11433fec01bea16efe77d8b99ee1175613b13631 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 16:39:23 -0700
Subject: [PATCH 04/24] removing commented out code

---
 packages/vue/src/components/CalendarButton/CalendarButton.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/vue/src/components/CalendarButton/CalendarButton.vue b/packages/vue/src/components/CalendarButton/CalendarButton.vue
index 732644d2..5e77d8c8 100644
--- a/packages/vue/src/components/CalendarButton/CalendarButton.vue
+++ b/packages/vue/src/components/CalendarButton/CalendarButton.vue
@@ -70,7 +70,6 @@ export default defineComponent({
   },
   methods: {
     init() {
-      // this.icalendar = new ICalendar(this.options)
       let recurrence = {}
       if (this.endDatetime && this.isAllDay) {
         // Calculate how many full days
@@ -107,8 +106,6 @@ export default defineComponent({
       fileLink.href = objectUrl
       fileLink.download = kebabCase(this.title)
       fileLink.click()
-      // this.icalendar.render()
-      console.log(this.icalendar.render())
     }
   }
 })

From a510e6f882b1d779b23da92854e7b861045b2103 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 16:43:59 -0700
Subject: [PATCH 05/24] minor cleanup

---
 .../vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
index 9019aac7..57e2c892 100644
--- a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
+++ b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
@@ -44,8 +44,6 @@
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { BlockData, RelatedLinkObject } from './../../interfaces'
-import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
-
 import RelatedLink from './../BlockRelatedLinks/RelatedLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 

From c7adf799bb1f2bd1ccf635afa36a3685056e9c04 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 17:08:52 -0700
Subject: [PATCH 06/24] simplifying EventDetailHero

---
 .../EventDetailHero/EventDetailHero.vue       | 48 +++++++++----------
 .../PageEduEventDetail.stories.js             | 17 ++++++-
 .../PageEduEventDetail/PageEduEventDetail.vue |  1 +
 3 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue b/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
index 3972a4f1..bef618e8 100644
--- a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
+++ b/packages/vue/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>
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
index 4e090142..be61d8fb 100644
--- a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
@@ -49,7 +49,22 @@ export const BaseStory = {
         }
       ],
       eventImage: {
-        ...EventDetailHeroData.heroImage
+        __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: '',
diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
index 7c1aa136..186a4f2e 100644
--- a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
@@ -99,6 +99,7 @@
             <IconLocation class="relative mr-3" />
             <BaseLink
               variant="none"
+              class="text-action"
               :href="data.locationLink"
               external-target-blank
             >

From de2f08157102dfb7824a671d96fcd749d6ec6b38 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 17:50:53 -0700
Subject: [PATCH 07/24] adjustments after visual tests

---
 apps/vue-storybook/.percy.yml                            | 1 +
 .../src/components/BlockInlineImage/BlockInlineImage.vue | 2 +-
 .../BlockStreamfield/BlockStreamfield.stories.js         | 1 +
 .../src/components/EventDetailHero/EventDetailHero.vue   | 9 ++++-----
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index bc1b122d..a2f7ad52 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -5,6 +5,7 @@ snapshot:
     - 1280
   minHeight: 1024
   percyCSS: ''
+  concurrency: 15
   disableShadowDOM: false
   enableJavascript: true
   enableLayout: true
diff --git a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
index 1842ec16..2224d19b 100644
--- a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
+++ b/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 -->
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
index bed9089e..d6ba1709 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
+++ b/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
   ]
 }
diff --git a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue b/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
index bef618e8..c93be4a3 100644
--- a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
+++ b/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
@@ -43,7 +43,8 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
     startDateSplit: {
       type: Object as PropType<EventDateObject | undefined>,
@@ -51,7 +52,8 @@ export default defineComponent({
     },
     image: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {
@@ -61,6 +63,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-@import '@explorer-1/common/src/scss/components/HeroMedia';
-</style>

From 376ef4296ed1bd9ff35e05c07f323ab5381d33eb Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 18:20:20 -0700
Subject: [PATCH 08/24] ignoring ThumbnailCarousel in test-runner

---
 .../vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue b/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue
index eca3797b..5ceed671 100644
--- a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue
+++ b/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue
@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 <template>
   <MixinCarousel
     v-if="slides"

From 7628fedf9d582a16978e4f86cd77681a0ee235be Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 18:46:17 -0700
Subject: [PATCH 09/24] skipping PageImageDetail test instead

---
 apps/vue-storybook/package.json                                 | 2 +-
 .../vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue  | 1 -
 .../src/templates/PageImageDetail/PageImageDetail.stories.js    | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 696950e6..70d1b881 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -27,7 +27,7 @@
     "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",
     "update:storybook": "npx storybook@latest upgrade --package-manager pnpm"
diff --git a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue b/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue
index 5ceed671..eca3797b 100644
--- a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue
+++ b/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.vue
@@ -1,4 +1,3 @@
-/* istanbul ignore file */
 <template>
   <MixinCarousel
     v-if="slides"
diff --git a/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js b/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js
index e870de4f..c3611983 100644
--- a/packages/vue/src/templates/PageImageDetail/PageImageDetail.stories.js
+++ b/packages/vue/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'
   }

From 05572af0a102931d5e86921e924693dd681a8add Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 30 Jul 2024 18:56:17 -0700
Subject: [PATCH 10/24] updating ci script

---
 apps/vue-storybook/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 70d1b881..49c1b765 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -29,7 +29,7 @@
     "start": "http-server storybook_compiled -p 6006 -c-1 -s",
     "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": {

From 082cc9f79c76ac16454ecce78f74fd17c09ea4cd Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 08:13:59 -0700
Subject: [PATCH 11/24] debugging percy unable to preload css error

---
 apps/vue-storybook/.percy.yml | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index a2f7ad52..57cb0dfd 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -17,15 +17,18 @@ storybook:
   # waitForSelector: ''
   # additionalSnapshots: []
   include: [
-      'Foundations/Typography: Text Styles',
-      'Foundations/Themes: Dynamic Tokens',
-      'Foundations/Logos/LogoTribrand: Logo Inline SVG',
-      'Foundations/Grid and Layout: Full Page Example',
-      # TODO: add a story that has all icons in it
-      'Navigation/*',
-      'Components/*',
-      'Mixins/*',
-      'Templates/*'
+      'Templates/PageNewsDetail: Hero Carousel',
+      'Templates/PageEventDetail: PageEventDetail',
+      'Templates/EDU/PageContent: PageContent'
+      # 'Foundations/Typography: Text Styles',
+      # 'Foundations/Themes: Dynamic Tokens',
+      # 'Foundations/Logos/LogoTribrand: Logo Inline SVG',
+      # 'Foundations/Grid and Layout: Full Page Example',
+      # # TODO: add a story that has all icons in it
+      # 'Navigation/*',
+      # 'Components/*',
+      # 'Mixins/*',
+      # 'Templates/*'
     ]
   exclude:
     [

From c5eb00a269173a3952f32c759cf50051756d0f1f Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 09:52:01 -0700
Subject: [PATCH 12/24] testing percy with subset of snapshots

---
 apps/vue-storybook/.percy.yml   | 6 ++++--
 apps/vue-storybook/package.json | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index 57cb0dfd..ee541304 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -1,14 +1,16 @@
 version: 2
 snapshot:
   widths:
-    - 375
     - 1280
   minHeight: 1024
   percyCSS: ''
-  concurrency: 15
   disableShadowDOM: false
   enableJavascript: true
   enableLayout: true
+discovery:
+  launch-options:
+    headless: false
+  concurrency: 15
 storybook:
   # args: {}
   # globals: {}
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 49c1b765..ac31dd88 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -19,7 +19,8 @@
     "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 --debug --verbose",
+    "percy:debug": "percy storybook ./storybook_compiled --debug",
     "percy:dry-run": "percy storybook ./storybook_compiled --dry-run",
     "lint:app": "eslint './.storybook/**/*.@(js|ts)'",
     "lint:app:fix": "eslint './.storybook/**/*.@(js|ts)' --fix",

From af7a8f776e55d81c0b5a62572a19fee815ea893c Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 10:01:35 -0700
Subject: [PATCH 13/24] modifying percy config

---
 apps/vue-storybook/.percy.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index ee541304..2c8c1a3c 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -8,8 +8,6 @@ snapshot:
   enableJavascript: true
   enableLayout: true
 discovery:
-  launch-options:
-    headless: false
   concurrency: 15
 storybook:
   # args: {}

From a6a4fd6b54732d0423b2197150a12203c80b92e9 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 10:15:10 -0700
Subject: [PATCH 14/24] skipping a11y tests for ThumbnailCarousel

---
 .../components/ThumbnailCarousel/ThumbnailCarousel.stories.js    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js b/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js
index 8c0195b8..83891759 100644
--- a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js
+++ b/packages/vue/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: {

From 32af0f52ed1970d0fcdae61d5ce7560d77ce7b7d Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 10:32:47 -0700
Subject: [PATCH 15/24] modifying percy script

---
 apps/vue-storybook/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index ac31dd88..5bf2668d 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -19,7 +19,7 @@
     "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 --debug --verbose",
+    "percy": "percy storybook ./storybook_compiled --verbose",
     "percy:debug": "percy storybook ./storybook_compiled --debug",
     "percy:dry-run": "percy storybook ./storybook_compiled --dry-run",
     "lint:app": "eslint './.storybook/**/*.@(js|ts)'",

From e0e2572d23ca93284e3d52b5d84c6f9f74d74145 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 13:05:10 -0700
Subject: [PATCH 16/24] trying again after adjusting shards

---
 apps/vue-storybook/.percy.yml   | 22 ++++++++++------------
 apps/vue-storybook/package.json |  4 ++--
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index 2c8c1a3c..8530870a 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -1,6 +1,7 @@
 version: 2
 snapshot:
   widths:
+    - 375
     - 1280
   minHeight: 1024
   percyCSS: ''
@@ -17,18 +18,15 @@ storybook:
   # waitForSelector: ''
   # additionalSnapshots: []
   include: [
-      'Templates/PageNewsDetail: Hero Carousel',
-      'Templates/PageEventDetail: PageEventDetail',
-      'Templates/EDU/PageContent: PageContent'
-      # 'Foundations/Typography: Text Styles',
-      # 'Foundations/Themes: Dynamic Tokens',
-      # 'Foundations/Logos/LogoTribrand: Logo Inline SVG',
-      # 'Foundations/Grid and Layout: Full Page Example',
-      # # TODO: add a story that has all icons in it
-      # 'Navigation/*',
-      # 'Components/*',
-      # 'Mixins/*',
-      # 'Templates/*'
+      'Foundations/Typography: Text Styles',
+      'Foundations/Themes: Dynamic Tokens'
+      'Foundations/Logos/LogoTribrand: Logo Inline SVG',
+      'Foundations/Grid and Layout: Full Page Example',
+      # TODO: add a story that has all icons in it
+      'Navigation/*',
+      'Components/*',
+      'Mixins/*',
+      'Templates/*'
     ]
   exclude:
     [
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 5bf2668d..569ec2da 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -19,8 +19,8 @@
     "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 --verbose",
-    "percy:debug": "percy storybook ./storybook_compiled --debug",
+    "percy": "percy storybook ./storybook_compiled --verbose --shard-count=100 --shard-index=10",
+    "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",

From 6009244660c02ebfeb5a6aeb9bf2b2f8cd933d0c Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 13:32:16 -0700
Subject: [PATCH 17/24] fixing markup in package.json

---
 apps/vue-storybook/.percy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index 8530870a..40356a0c 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -19,7 +19,7 @@ storybook:
   # additionalSnapshots: []
   include: [
       'Foundations/Typography: Text Styles',
-      'Foundations/Themes: Dynamic Tokens'
+      'Foundations/Themes: Dynamic Tokens',
       'Foundations/Logos/LogoTribrand: Logo Inline SVG',
       'Foundations/Grid and Layout: Full Page Example',
       # TODO: add a story that has all icons in it

From 0b15e80a7ead6938ac0dfc2b5a9bd6570ce1cf9b Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 13:35:00 -0700
Subject: [PATCH 18/24] reducing number of actions while debugging

---
 .github/workflows/storybook.yml | 146 ++++++++++++++++----------------
 1 file changed, 73 insertions(+), 73 deletions(-)

diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
index 54f4db74..cb0daba5 100644
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@@ -45,43 +45,43 @@ jobs:
           name: storybook
           path: apps/vue-storybook/storybook_compiled
 
-  a11y-tests:
-    needs: build
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v4
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Set up Node ⬢
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies 🧱
-        run: pnpm i
-
-      - name: Install Playwright
-        run: pnpm --filter @explorer-1/vue-storybook exec playwright install
-
-      - name: Download storybook build
-        uses: actions/download-artifact@v3
-        with:
-          name: storybook
-          path: apps/vue-storybook/storybook_compiled
-
-      - name: Serve Storybook & Run tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-             "pnpm --filter @explorer-1/vue-storybook start" \
-             "pnpm --filter @explorer-1/vue-storybook test:ci"
+  # a11y-tests:
+  #   needs: build
+  #   timeout-minutes: 60
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout 🛎️
+  #       uses: actions/checkout@v4
+
+  #     - name: Setup pnpm
+  #       uses: pnpm/action-setup@v4
+
+  #     - name: Set up Node ⬢
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version-file: '.nvmrc'
+  #         cache: 'pnpm'
+
+  #     - name: Install dependencies 🧱
+  #       run: pnpm i
+
+  #     - name: Install Playwright
+  #       run: pnpm --filter @explorer-1/vue-storybook exec playwright install
+
+  #     - name: Download storybook build
+  #       uses: actions/download-artifact@v3
+  #       with:
+  #         name: storybook
+  #         path: apps/vue-storybook/storybook_compiled
+
+  #     - name: Serve Storybook & Run tests
+  #       run: |
+  #         npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+  #            "pnpm --filter @explorer-1/vue-storybook start" \
+  #            "pnpm --filter @explorer-1/vue-storybook test:ci"
 
   visual-tests:
-    needs: [build, a11y-tests]
+    needs: [build]
     timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
@@ -112,41 +112,41 @@ jobs:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
         run: pnpm --filter @explorer-1/vue-storybook percy
 
-  publish:
-    needs: [build, a11y-tests]
-    timeout-minutes: 30
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Set up Node ⬢
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies 🧱
-        run: pnpm i
-
-      - name: Download storybook build
-        uses: actions/download-artifact@v3
-        with:
-          name: storybook
-          path: apps/vue-storybook/storybook_compiled
-
-      - uses: chromaui/action@latest
-        # Options required for Chromatic's GitHub Action
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-          storybookBaseDir: 'apps/vue-storybook'
-          storybookBuildDir: 'apps/vue-storybook/storybook_compiled'
-          autoAcceptChanges: 'main'
-          exitZeroOnChanges: true
-          exitOnceUploaded: true
+  # publish:
+  #   needs: [build, a11y-tests]
+  #   timeout-minutes: 30
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout 🛎️
+  #       uses: actions/checkout@v4
+  #       with:
+  #         fetch-depth: 0
+
+  #     - name: Setup pnpm
+  #       uses: pnpm/action-setup@v4
+
+  #     - name: Set up Node ⬢
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version-file: '.nvmrc'
+  #         cache: 'pnpm'
+
+  #     - name: Install dependencies 🧱
+  #       run: pnpm i
+
+  #     - name: Download storybook build
+  #       uses: actions/download-artifact@v3
+  #       with:
+  #         name: storybook
+  #         path: apps/vue-storybook/storybook_compiled
+
+  #     - uses: chromaui/action@latest
+  #       # Options required for Chromatic's GitHub Action
+  #       with:
+  #         projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+  #         token: ${{ secrets.GITHUB_TOKEN }}
+  #         storybookBaseDir: 'apps/vue-storybook'
+  #         storybookBuildDir: 'apps/vue-storybook/storybook_compiled'
+  #         autoAcceptChanges: 'main'
+  #         exitZeroOnChanges: true
+  #         exitOnceUploaded: true

From a2b82233a17d9eb59315dc9d3c55c55768ecf61d Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 13:39:59 -0700
Subject: [PATCH 19/24] removing shards

---
 apps/vue-storybook/.percy.yml   | 18 +++++++++---------
 apps/vue-storybook/package.json |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index 40356a0c..60d9a7f2 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -1,7 +1,7 @@
 version: 2
 snapshot:
   widths:
-    - 375
+    # - 375
     - 1280
   minHeight: 1024
   percyCSS: ''
@@ -18,14 +18,14 @@ storybook:
   # waitForSelector: ''
   # additionalSnapshots: []
   include: [
-      'Foundations/Typography: Text Styles',
-      'Foundations/Themes: Dynamic Tokens',
-      'Foundations/Logos/LogoTribrand: Logo Inline SVG',
-      'Foundations/Grid and Layout: Full Page Example',
-      # TODO: add a story that has all icons in it
-      'Navigation/*',
-      'Components/*',
-      'Mixins/*',
+      # 'Foundations/Typography: Text Styles',
+      # 'Foundations/Themes: Dynamic Tokens',
+      # 'Foundations/Logos/LogoTribrand: Logo Inline SVG',
+      # 'Foundations/Grid and Layout: Full Page Example',
+      # # TODO: add a story that has all icons in it
+      # 'Navigation/*',
+      # 'Components/*',
+      # 'Mixins/*',
       'Templates/*'
     ]
   exclude:
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 569ec2da..f9d50c31 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -19,7 +19,7 @@
     "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 --verbose --shard-count=100 --shard-index=10",
+    "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)'",

From b52371490091b63a170cc604734f0a503364cabf Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 13:51:46 -0700
Subject: [PATCH 20/24] trying just nav stories

---
 apps/vue-storybook/.percy.yml | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index 60d9a7f2..6b9ff21e 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -9,7 +9,10 @@ snapshot:
   enableJavascript: true
   enableLayout: true
 discovery:
+  launch-options:
+    headless: false
   concurrency: 15
+  retry: true
 storybook:
   # args: {}
   # globals: {}
@@ -23,10 +26,10 @@ storybook:
       # 'Foundations/Logos/LogoTribrand: Logo Inline SVG',
       # 'Foundations/Grid and Layout: Full Page Example',
       # # TODO: add a story that has all icons in it
-      # 'Navigation/*',
+      'Navigation/*'
       # 'Components/*',
       # 'Mixins/*',
-      'Templates/*'
+      # 'Templates/*'
     ]
   exclude:
     [

From af37d5efc595ac8eef83b9b25d2faa5ecac0384c Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 15:06:37 -0700
Subject: [PATCH 21/24] attempts

---
 apps/vue-storybook/.percy.yml     | 3 ++-
 apps/vue-storybook/package.json   | 2 +-
 apps/vue-storybook/vite.config.ts | 4 ++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index 6b9ff21e..cc06735b 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -21,12 +21,13 @@ storybook:
   # waitForSelector: ''
   # additionalSnapshots: []
   include: [
+      'Templates/WWW/PageTopicDetail: PageTopicDetail'
       # 'Foundations/Typography: Text Styles',
       # 'Foundations/Themes: Dynamic Tokens',
       # 'Foundations/Logos/LogoTribrand: Logo Inline SVG',
       # 'Foundations/Grid and Layout: Full Page Example',
       # # TODO: add a story that has all icons in it
-      'Navigation/*'
+      # 'Navigation/*'
       # 'Components/*',
       # 'Mixins/*',
       # 'Templates/*'
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index f9d50c31..4419150e 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -50,7 +50,7 @@
     "@explorer-1/html": "workspace:*",
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
-    "@percy/cli": "^1.28.6",
+    "@percy/cli": "^1.28.9",
     "@percy/storybook": "^6.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
     "@storybook/addon-a11y": "^8.2.6",
diff --git a/apps/vue-storybook/vite.config.ts b/apps/vue-storybook/vite.config.ts
index d040132f..05f8da8f 100644
--- a/apps/vue-storybook/vite.config.ts
+++ b/apps/vue-storybook/vite.config.ts
@@ -22,5 +22,9 @@ export default defineConfig({
     watch: {
       usePolling: true
     }
+  },
+  build: {
+    // storybook-only
+    modulePreload: false
   }
 })

From c228945fee50d8e8cb9886cf950b5c01f111011a Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 15:12:03 -0700
Subject: [PATCH 22/24] fixing lock file

---
 pnpm-lock.yaml | 228 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 226 insertions(+), 2 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cc03c9a..fc3903d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -182,8 +182,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/configs/tsconfig
       '@percy/cli':
-        specifier: ^1.28.6
-        version: 1.28.7(typescript@5.4.5)
+        specifier: ^1.28.9
+        version: 1.29.0(typescript@5.4.5)
       '@percy/storybook':
         specifier: ^6.0.0
         version: 6.0.0(typescript@5.4.5)
@@ -2243,63 +2243,124 @@ packages:
     resolution: {integrity: sha512-5Dgtx3m+eX2NPYrt11gOAhH0q4UYFORzOTkocELQZ6+9naKOi0PD9e9/T8A6yRQ5dbfMoNfi/xQ9tLoxCPcM5g==}
     engines: {node: '>=14'}
 
+  '@percy/cli-app@1.29.0':
+    resolution: {integrity: sha512-Frb4/OEKTjOvnVuC4YUnTeLWkX6bMD3/VXOA3yFOnLh+wDAnyAV9bwJ6XgbgsKiR9TPR3wEwebtUz1v0/rk2ZQ==}
+    engines: {node: '>=14'}
+
   '@percy/cli-build@1.28.7':
     resolution: {integrity: sha512-LXDXbE3G994K1Wovivukjbzj7wqENPa/A3WvveVdLqfTLepTcJZ3LvPV79BsgJgIMN2vksaeCxwIgjMn1vT8mQ==}
     engines: {node: '>=14'}
 
+  '@percy/cli-build@1.29.0':
+    resolution: {integrity: sha512-HB4qoF4Wtuf/C5kXfRBTvPo+DX/OkA2fxRzdMuMPO0Tw7gb6K0YCzjoe7VhmssFa4MgfV2z7UK284bQg8HobvQ==}
+    engines: {node: '>=14'}
+
   '@percy/cli-command@1.28.7':
     resolution: {integrity: sha512-Rs66JVZLdb4D/+hPXNdd9Qi9+FA9xCgrzpmdKak8HzstcfsRdJ999J5exQZc7dM1N3Th76wrA5d4woCgDskYDQ==}
     engines: {node: '>=14'}
     hasBin: true
 
+  '@percy/cli-command@1.29.0':
+    resolution: {integrity: sha512-x8XQvpCLQ2/rxKKOdK9jcvRY14t6UNC42Z4T7LmRPtYrk1v8AXq2HxbjdNzrjmCDRUjM5QrYrIrRbfcj7OYlDA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   '@percy/cli-config@1.28.7':
     resolution: {integrity: sha512-26Wo9EYQt2uDROSjNyYMX8XuJ30IPIwR4JsNKO0DbQUBqq071to5AiaROXs2QLH0m2KGFyYavLxHJ54ZCDbMQQ==}
     engines: {node: '>=14'}
 
+  '@percy/cli-config@1.29.0':
+    resolution: {integrity: sha512-+9cFL8A8Mnb3S2RkH1Yjr6Fozlhjka4LiE1mpAH7IUqK/AGjUDKVQsWPs+x7HsCbGXwbFos29SmfEWuf7d0Idw==}
+    engines: {node: '>=14'}
+
   '@percy/cli-exec@1.28.7':
     resolution: {integrity: sha512-0HEOmMNexRbn09Ju3Etd5agEhBtgqNrT3eiRMcX4ThbQgOFkAQIll6IFfVqafujJHNL1SF+HjcyZmyoEF9tJOw==}
     engines: {node: '>=14'}
 
+  '@percy/cli-exec@1.29.0':
+    resolution: {integrity: sha512-Kw94FS7KJScCjyIfjAIWUbjCVCi4S+PYuZ2RQVVJnG9elbo3c+LEaIACvIpHs+fBNRDJ+Xn7xkOfoHPzecpCVA==}
+    engines: {node: '>=14'}
+
   '@percy/cli-snapshot@1.28.7':
     resolution: {integrity: sha512-nWk2/sjIh8Vy6+T7BNwSVdtXUdR0cYpXJrbO1hfxRB56pUf8KFcG7GqUzOZ7QDHqlyQGH/posAjAoPmy8okyAQ==}
     engines: {node: '>=14'}
 
+  '@percy/cli-snapshot@1.29.0':
+    resolution: {integrity: sha512-+3vkgOROGk9K4zLECtP0Lu8cwZ/dDatcfYxXVHCopQX0uSdki9CS777vJyMFBsZLy5XHkv72YdGbrofyz+TfIw==}
+    engines: {node: '>=14'}
+
   '@percy/cli-upload@1.28.7':
     resolution: {integrity: sha512-hcIe9RGHDk+G+lanlLy1IrDRgODsTYzjmtPex9wEg4yo/JzubVwkF3r/0iQuT+srkELKUcTSJ1iX7/d0kK61uQ==}
     engines: {node: '>=14'}
 
+  '@percy/cli-upload@1.29.0':
+    resolution: {integrity: sha512-5vm88PiiBvFz2eexhRRjJHQz0BW76IoDCeai4JOFTjQoiTn6A5k/7AnVhCubzuL+Z3qYJEyY5rkx6Q0IBEwStg==}
+    engines: {node: '>=14'}
+
   '@percy/cli@1.28.7':
     resolution: {integrity: sha512-FvvyTFTGuIiBsSs8epENGq2U62oKnzfXW6F80JFShaZ5ZjMc2t6riVq4EPEsBANstql+j4Y853tYe2aGVX9pbw==}
     engines: {node: '>=14'}
     hasBin: true
 
+  '@percy/cli@1.29.0':
+    resolution: {integrity: sha512-VAIZTsNyBkdF7LCdPNgO9gKYW5APsVAwwAZNJq0t6aKSpWtjsGbcPRpvhPq2nyp9e8dHEjgXwvdkUFeUOYX2lQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   '@percy/client@1.28.7':
     resolution: {integrity: sha512-3ocKEej268Xj3q98seUi88mtFcTYNy3F/zMTwk+pdnoWc1QVOGsCQ3elIS2X35hhBFgYw2i1bbuzmt7UdOK79A==}
     engines: {node: '>=14'}
 
+  '@percy/client@1.29.0':
+    resolution: {integrity: sha512-PNgq1sfyFigXZhQ7vKR8cmqSYHihRT6Ef3noSksQylg7ZhPVhkF7uynXo9maeehhGLHgCJwsWvxaZlDXT9TVWg==}
+    engines: {node: '>=14'}
+
   '@percy/config@1.28.7':
     resolution: {integrity: sha512-N8fZAj8ejgddxz4lzNIK9cCQdoIuISK7a/JyGAD5vY+CuZutCBM0zuN9g/Higv/LI78Sct69Qpik/+rLIyBZxA==}
     engines: {node: '>=14'}
 
+  '@percy/config@1.29.0':
+    resolution: {integrity: sha512-iE46YewAM3W3ATQDGj1/+MBTLARZ4MenUi5MefrZflK4ImnG5eo3NkT4PH0SLYMpr7K6zINRcX3tsRIob+8I/g==}
+    engines: {node: '>=14'}
+
   '@percy/core@1.28.7':
     resolution: {integrity: sha512-OOTVMHU+0O7Qh3TIL21fxX9H5ctRWPIG03IJsFpIXIIh2Wni5nf8tSUWroFwSSneZihxaA8ETQxCtJXBVe+JUA==}
     engines: {node: '>=14'}
 
+  '@percy/core@1.29.0':
+    resolution: {integrity: sha512-/6yKVmzrBJnb3ZnAwYuC9bLPYXM22SpaifxkIGGN/gtphm3pRgo6B4lPc+3wPFsulJumMle5W1tDq7bfwcpZSA==}
+    engines: {node: '>=14'}
+
   '@percy/dom@1.28.7':
     resolution: {integrity: sha512-aYm/xTqNWaLodRdmWqiA0zekaUMkE8boJ1ApljO8KTKihv7eJWpgSDJT7m73xOd/JAplER5LSGjrUpnWLOTDYQ==}
 
+  '@percy/dom@1.29.0':
+    resolution: {integrity: sha512-3+ii3n/d3KjluYfc+wCLzmnOICWJBvh4Qmdpq5USUrLP9tuvIdlpWlT+ukMuRsgDMCYQlvjv/v3SAqmoMafDYw==}
+
   '@percy/env@1.28.7':
     resolution: {integrity: sha512-ExpCDSm2bMwTlF7LOuE6dDB0QFa2VzpuFF/t9O0TyUgBgaiDZzcdsMQrLxDlUbuqjA8vc+vo8931x0i2sN5LBQ==}
     engines: {node: '>=14'}
 
+  '@percy/env@1.29.0':
+    resolution: {integrity: sha512-/ETi/xybkXX3BqpbOn9jmV7cth5kATo3efZBZLrAClzIws3hr6AZOU/HQYEvX81R+0Dt+pR0U/Lujq7j6OcX5g==}
+    engines: {node: '>=14'}
+
   '@percy/logger@1.28.7':
     resolution: {integrity: sha512-OktqjykPT3FMUKkwyafjQdRWMQ8jnXOOcSkvyVIT9P7cbU1USeRUWw8Z6+W1cLk50RdsimChnab6F/GRWRdBew==}
     engines: {node: '>=14'}
 
+  '@percy/logger@1.29.0':
+    resolution: {integrity: sha512-BZZ8dsXDmEuGBuZ4hatMthHSvrNWzJWmgAO53rH4slPIWPUd1qtofEZd+0qtwhwgtLV6aKIES+4D2nBmbLxT8g==}
+    engines: {node: '>=14'}
+
   '@percy/sdk-utils@1.28.7':
     resolution: {integrity: sha512-LIhfHnkcS0fyIdo3gvKn7rwodZjbEtyLkgiDRSRulcBOatI2mhn2Bh269sXXiiFTyAW2BDQjyE3DWc4hkGbsbQ==}
     engines: {node: '>=14'}
 
+  '@percy/sdk-utils@1.29.0':
+    resolution: {integrity: sha512-1spFHrK8u4l5Z7RvUrsyCFtl5vvFcsSNANViTFxMemLUGfpf/xpZgqnZ6kggH0x5PuC6UxiPRmI30hA0COPZGw==}
+    engines: {node: '>=14'}
+
   '@percy/storybook@6.0.0':
     resolution: {integrity: sha512-7EAlaJT4B+naFLkF8YECOw1koZxUM59YSA90SS9KPxezEFQ1lZNBlbXN2zcK7xBF5tqdA05wHQECJkuA4V71kA==}
     hasBin: true
@@ -2308,6 +2369,10 @@ packages:
     resolution: {integrity: sha512-BviRMj/oHgdniHoz1nzInpIXl4JTk4vZ0+9azWntGCThITc/HhQE1sLDcHhZGYvviY+NQ4ofCcBSzZRu1z1GcQ==}
     engines: {node: '>=14'}
 
+  '@percy/webdriver-utils@1.29.0':
+    resolution: {integrity: sha512-QlALpphxES+IllmW9tDzExBInVuJZmdGkb3xbBHdsaTxXsNEm24CGCZHaR88gMdUAse06yyw+GW23pxs7/AaVQ==}
+    engines: {node: '>=14'}
+
   '@pinia/nuxt@0.5.1':
     resolution: {integrity: sha512-6wT6TqY81n+7/x3Yhf0yfaJVKkZU42AGqOR0T3+UvChcaOJhSma7OWPN64v+ptYlznat+fS1VTwNAcbi2lzHnw==}
 
@@ -9143,6 +9208,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
@@ -11270,6 +11347,16 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/cli-app@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/cli-command': 1.29.0(typescript@5.4.5)
+      '@percy/cli-exec': 1.29.0(typescript@5.4.5)
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/cli-build@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11279,6 +11366,15 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/cli-build@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/cli-command': 1.29.0(typescript@5.4.5)
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/cli-command@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/config': 1.28.7(typescript@5.4.5)
@@ -11290,6 +11386,17 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/cli-command@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/config': 1.29.0(typescript@5.4.5)
+      '@percy/core': 1.29.0(typescript@5.4.5)
+      '@percy/logger': 1.29.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/cli-config@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11299,6 +11406,15 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/cli-config@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/cli-command': 1.29.0(typescript@5.4.5)
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/cli-exec@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11310,6 +11426,18 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/cli-exec@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/cli-command': 1.29.0(typescript@5.4.5)
+      '@percy/logger': 1.29.0
+      cross-spawn: 7.0.3
+      which: 2.0.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/cli-snapshot@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11320,6 +11448,16 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/cli-snapshot@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/cli-command': 1.29.0(typescript@5.4.5)
+      yaml: 2.4.5
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/cli-upload@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11331,6 +11469,17 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/cli-upload@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/cli-command': 1.29.0(typescript@5.4.5)
+      fast-glob: 3.3.2
+      image-size: 1.1.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/cli@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-app': 1.28.7(typescript@5.4.5)
@@ -11348,12 +11497,35 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/cli@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/cli-app': 1.29.0(typescript@5.4.5)
+      '@percy/cli-build': 1.29.0(typescript@5.4.5)
+      '@percy/cli-command': 1.29.0(typescript@5.4.5)
+      '@percy/cli-config': 1.29.0(typescript@5.4.5)
+      '@percy/cli-exec': 1.29.0(typescript@5.4.5)
+      '@percy/cli-snapshot': 1.29.0(typescript@5.4.5)
+      '@percy/cli-upload': 1.29.0(typescript@5.4.5)
+      '@percy/client': 1.29.0
+      '@percy/logger': 1.29.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/client@1.28.7':
     dependencies:
       '@percy/env': 1.28.7
       '@percy/logger': 1.28.7
       pako: 2.1.0
 
+  '@percy/client@1.29.0':
+    dependencies:
+      '@percy/env': 1.29.0
+      '@percy/logger': 1.29.0
+      pako: 2.1.0
+
   '@percy/config@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/logger': 1.28.7
@@ -11363,6 +11535,15 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@percy/config@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/logger': 1.29.0
+      ajv: 8.16.0
+      cosmiconfig: 8.3.6(typescript@5.4.5)
+      yaml: 2.4.5
+    transitivePeerDependencies:
+      - typescript
+
   '@percy/core@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/client': 1.28.7
@@ -11387,16 +11568,50 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@percy/core@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/client': 1.29.0
+      '@percy/config': 1.29.0(typescript@5.4.5)
+      '@percy/dom': 1.29.0
+      '@percy/logger': 1.29.0
+      '@percy/webdriver-utils': 1.29.0(typescript@5.4.5)
+      content-disposition: 0.5.4
+      cross-spawn: 7.0.3
+      extract-zip: 2.0.1
+      fast-glob: 3.3.2
+      micromatch: 4.0.7
+      mime-types: 2.1.35
+      pako: 2.1.0
+      path-to-regexp: 6.2.2
+      rimraf: 3.0.2
+      ws: 8.18.0
+      yaml: 2.4.5
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   '@percy/dom@1.28.7': {}
 
+  '@percy/dom@1.29.0': {}
+
   '@percy/env@1.28.7':
     dependencies:
       '@percy/logger': 1.28.7
 
+  '@percy/env@1.29.0':
+    dependencies:
+      '@percy/logger': 1.29.0
+
   '@percy/logger@1.28.7': {}
 
+  '@percy/logger@1.29.0': {}
+
   '@percy/sdk-utils@1.28.7': {}
 
+  '@percy/sdk-utils@1.29.0': {}
+
   '@percy/storybook@6.0.0(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11415,6 +11630,13 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@percy/webdriver-utils@1.29.0(typescript@5.4.5)':
+    dependencies:
+      '@percy/config': 1.29.0(typescript@5.4.5)
+      '@percy/sdk-utils': 1.29.0
+    transitivePeerDependencies:
+      - typescript
+
   '@pinia/nuxt@0.5.1(rollup@4.18.0)(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@nuxt/kit': 3.11.2(rollup@4.18.0)
@@ -19936,6 +20158,8 @@ snapshots:
 
   ws@8.17.0: {}
 
+  ws@8.18.0: {}
+
   xml-name-validator@4.0.0: {}
 
   xml@1.0.1: {}

From 209e6118b88c2d3da9d940a47d9f31629032c274 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 15:38:29 -0700
Subject: [PATCH 23/24] cleaning up percy and storybook settings, upgrading to
 percy/storybook 6.0.0

---
 apps/vue-storybook/.percy.yml   |  25 ++--
 apps/vue-storybook/package.json |   4 +-
 pnpm-lock.yaml                  | 231 +++-----------------------------
 3 files changed, 31 insertions(+), 229 deletions(-)

diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml
index cc06735b..163a32fd 100644
--- a/apps/vue-storybook/.percy.yml
+++ b/apps/vue-storybook/.percy.yml
@@ -1,7 +1,7 @@
 version: 2
 snapshot:
   widths:
-    # - 375
+    - 375
     - 1280
   minHeight: 1024
   percyCSS: ''
@@ -9,8 +9,6 @@ snapshot:
   enableJavascript: true
   enableLayout: true
 discovery:
-  launch-options:
-    headless: false
   concurrency: 15
   retry: true
 storybook:
@@ -21,16 +19,15 @@ storybook:
   # waitForSelector: ''
   # additionalSnapshots: []
   include: [
-      'Templates/WWW/PageTopicDetail: PageTopicDetail'
-      # 'Foundations/Typography: Text Styles',
-      # 'Foundations/Themes: Dynamic Tokens',
-      # 'Foundations/Logos/LogoTribrand: Logo Inline SVG',
-      # 'Foundations/Grid and Layout: Full Page Example',
-      # # TODO: add a story that has all icons in it
-      # 'Navigation/*'
-      # 'Components/*',
-      # 'Mixins/*',
-      # 'Templates/*'
+      'Foundations/Typography: Text Styles',
+      'Foundations/Themes: Dynamic Tokens',
+      'Foundations/Logos/LogoTribrand: Logo Inline SVG',
+      'Foundations/Grid and Layout: Full Page Example',
+      # TODO: add a story that has all icons in it
+      'Navigation/*',
+      'Components/*',
+      'Mixins/*',
+      'Templates/*'
     ]
   exclude:
     [
@@ -58,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',
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 4419150e..9f6ae172 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -50,8 +50,8 @@
     "@explorer-1/html": "workspace:*",
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
-    "@percy/cli": "^1.28.9",
-    "@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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc3903d9..27e96634 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -182,11 +182,11 @@ importers:
         specifier: workspace:*
         version: link:../../packages/configs/tsconfig
       '@percy/cli':
-        specifier: ^1.28.9
-        version: 1.29.0(typescript@5.4.5)
+        specifier: ^1.28.7
+        version: 1.28.7(typescript@5.4.5)
       '@percy/storybook':
-        specifier: ^6.0.0
-        version: 6.0.0(typescript@5.4.5)
+        specifier: ^6.0.1
+        version: 6.0.1(typescript@5.4.5)
       '@rushstack/eslint-patch':
         specifier: ^1.2.0
         version: 1.10.3
@@ -2243,136 +2243,75 @@ packages:
     resolution: {integrity: sha512-5Dgtx3m+eX2NPYrt11gOAhH0q4UYFORzOTkocELQZ6+9naKOi0PD9e9/T8A6yRQ5dbfMoNfi/xQ9tLoxCPcM5g==}
     engines: {node: '>=14'}
 
-  '@percy/cli-app@1.29.0':
-    resolution: {integrity: sha512-Frb4/OEKTjOvnVuC4YUnTeLWkX6bMD3/VXOA3yFOnLh+wDAnyAV9bwJ6XgbgsKiR9TPR3wEwebtUz1v0/rk2ZQ==}
-    engines: {node: '>=14'}
-
   '@percy/cli-build@1.28.7':
     resolution: {integrity: sha512-LXDXbE3G994K1Wovivukjbzj7wqENPa/A3WvveVdLqfTLepTcJZ3LvPV79BsgJgIMN2vksaeCxwIgjMn1vT8mQ==}
     engines: {node: '>=14'}
 
-  '@percy/cli-build@1.29.0':
-    resolution: {integrity: sha512-HB4qoF4Wtuf/C5kXfRBTvPo+DX/OkA2fxRzdMuMPO0Tw7gb6K0YCzjoe7VhmssFa4MgfV2z7UK284bQg8HobvQ==}
-    engines: {node: '>=14'}
-
   '@percy/cli-command@1.28.7':
     resolution: {integrity: sha512-Rs66JVZLdb4D/+hPXNdd9Qi9+FA9xCgrzpmdKak8HzstcfsRdJ999J5exQZc7dM1N3Th76wrA5d4woCgDskYDQ==}
     engines: {node: '>=14'}
     hasBin: true
 
-  '@percy/cli-command@1.29.0':
-    resolution: {integrity: sha512-x8XQvpCLQ2/rxKKOdK9jcvRY14t6UNC42Z4T7LmRPtYrk1v8AXq2HxbjdNzrjmCDRUjM5QrYrIrRbfcj7OYlDA==}
-    engines: {node: '>=14'}
-    hasBin: true
-
   '@percy/cli-config@1.28.7':
     resolution: {integrity: sha512-26Wo9EYQt2uDROSjNyYMX8XuJ30IPIwR4JsNKO0DbQUBqq071to5AiaROXs2QLH0m2KGFyYavLxHJ54ZCDbMQQ==}
     engines: {node: '>=14'}
 
-  '@percy/cli-config@1.29.0':
-    resolution: {integrity: sha512-+9cFL8A8Mnb3S2RkH1Yjr6Fozlhjka4LiE1mpAH7IUqK/AGjUDKVQsWPs+x7HsCbGXwbFos29SmfEWuf7d0Idw==}
-    engines: {node: '>=14'}
-
   '@percy/cli-exec@1.28.7':
     resolution: {integrity: sha512-0HEOmMNexRbn09Ju3Etd5agEhBtgqNrT3eiRMcX4ThbQgOFkAQIll6IFfVqafujJHNL1SF+HjcyZmyoEF9tJOw==}
     engines: {node: '>=14'}
 
-  '@percy/cli-exec@1.29.0':
-    resolution: {integrity: sha512-Kw94FS7KJScCjyIfjAIWUbjCVCi4S+PYuZ2RQVVJnG9elbo3c+LEaIACvIpHs+fBNRDJ+Xn7xkOfoHPzecpCVA==}
-    engines: {node: '>=14'}
-
   '@percy/cli-snapshot@1.28.7':
     resolution: {integrity: sha512-nWk2/sjIh8Vy6+T7BNwSVdtXUdR0cYpXJrbO1hfxRB56pUf8KFcG7GqUzOZ7QDHqlyQGH/posAjAoPmy8okyAQ==}
     engines: {node: '>=14'}
 
-  '@percy/cli-snapshot@1.29.0':
-    resolution: {integrity: sha512-+3vkgOROGk9K4zLECtP0Lu8cwZ/dDatcfYxXVHCopQX0uSdki9CS777vJyMFBsZLy5XHkv72YdGbrofyz+TfIw==}
-    engines: {node: '>=14'}
-
   '@percy/cli-upload@1.28.7':
     resolution: {integrity: sha512-hcIe9RGHDk+G+lanlLy1IrDRgODsTYzjmtPex9wEg4yo/JzubVwkF3r/0iQuT+srkELKUcTSJ1iX7/d0kK61uQ==}
     engines: {node: '>=14'}
 
-  '@percy/cli-upload@1.29.0':
-    resolution: {integrity: sha512-5vm88PiiBvFz2eexhRRjJHQz0BW76IoDCeai4JOFTjQoiTn6A5k/7AnVhCubzuL+Z3qYJEyY5rkx6Q0IBEwStg==}
-    engines: {node: '>=14'}
-
   '@percy/cli@1.28.7':
     resolution: {integrity: sha512-FvvyTFTGuIiBsSs8epENGq2U62oKnzfXW6F80JFShaZ5ZjMc2t6riVq4EPEsBANstql+j4Y853tYe2aGVX9pbw==}
     engines: {node: '>=14'}
     hasBin: true
 
-  '@percy/cli@1.29.0':
-    resolution: {integrity: sha512-VAIZTsNyBkdF7LCdPNgO9gKYW5APsVAwwAZNJq0t6aKSpWtjsGbcPRpvhPq2nyp9e8dHEjgXwvdkUFeUOYX2lQ==}
-    engines: {node: '>=14'}
-    hasBin: true
-
   '@percy/client@1.28.7':
     resolution: {integrity: sha512-3ocKEej268Xj3q98seUi88mtFcTYNy3F/zMTwk+pdnoWc1QVOGsCQ3elIS2X35hhBFgYw2i1bbuzmt7UdOK79A==}
     engines: {node: '>=14'}
 
-  '@percy/client@1.29.0':
-    resolution: {integrity: sha512-PNgq1sfyFigXZhQ7vKR8cmqSYHihRT6Ef3noSksQylg7ZhPVhkF7uynXo9maeehhGLHgCJwsWvxaZlDXT9TVWg==}
-    engines: {node: '>=14'}
-
   '@percy/config@1.28.7':
     resolution: {integrity: sha512-N8fZAj8ejgddxz4lzNIK9cCQdoIuISK7a/JyGAD5vY+CuZutCBM0zuN9g/Higv/LI78Sct69Qpik/+rLIyBZxA==}
     engines: {node: '>=14'}
 
-  '@percy/config@1.29.0':
-    resolution: {integrity: sha512-iE46YewAM3W3ATQDGj1/+MBTLARZ4MenUi5MefrZflK4ImnG5eo3NkT4PH0SLYMpr7K6zINRcX3tsRIob+8I/g==}
-    engines: {node: '>=14'}
-
   '@percy/core@1.28.7':
     resolution: {integrity: sha512-OOTVMHU+0O7Qh3TIL21fxX9H5ctRWPIG03IJsFpIXIIh2Wni5nf8tSUWroFwSSneZihxaA8ETQxCtJXBVe+JUA==}
     engines: {node: '>=14'}
 
-  '@percy/core@1.29.0':
-    resolution: {integrity: sha512-/6yKVmzrBJnb3ZnAwYuC9bLPYXM22SpaifxkIGGN/gtphm3pRgo6B4lPc+3wPFsulJumMle5W1tDq7bfwcpZSA==}
-    engines: {node: '>=14'}
-
   '@percy/dom@1.28.7':
     resolution: {integrity: sha512-aYm/xTqNWaLodRdmWqiA0zekaUMkE8boJ1ApljO8KTKihv7eJWpgSDJT7m73xOd/JAplER5LSGjrUpnWLOTDYQ==}
 
-  '@percy/dom@1.29.0':
-    resolution: {integrity: sha512-3+ii3n/d3KjluYfc+wCLzmnOICWJBvh4Qmdpq5USUrLP9tuvIdlpWlT+ukMuRsgDMCYQlvjv/v3SAqmoMafDYw==}
-
   '@percy/env@1.28.7':
     resolution: {integrity: sha512-ExpCDSm2bMwTlF7LOuE6dDB0QFa2VzpuFF/t9O0TyUgBgaiDZzcdsMQrLxDlUbuqjA8vc+vo8931x0i2sN5LBQ==}
     engines: {node: '>=14'}
 
-  '@percy/env@1.29.0':
-    resolution: {integrity: sha512-/ETi/xybkXX3BqpbOn9jmV7cth5kATo3efZBZLrAClzIws3hr6AZOU/HQYEvX81R+0Dt+pR0U/Lujq7j6OcX5g==}
-    engines: {node: '>=14'}
-
   '@percy/logger@1.28.7':
     resolution: {integrity: sha512-OktqjykPT3FMUKkwyafjQdRWMQ8jnXOOcSkvyVIT9P7cbU1USeRUWw8Z6+W1cLk50RdsimChnab6F/GRWRdBew==}
     engines: {node: '>=14'}
 
-  '@percy/logger@1.29.0':
-    resolution: {integrity: sha512-BZZ8dsXDmEuGBuZ4hatMthHSvrNWzJWmgAO53rH4slPIWPUd1qtofEZd+0qtwhwgtLV6aKIES+4D2nBmbLxT8g==}
-    engines: {node: '>=14'}
-
   '@percy/sdk-utils@1.28.7':
     resolution: {integrity: sha512-LIhfHnkcS0fyIdo3gvKn7rwodZjbEtyLkgiDRSRulcBOatI2mhn2Bh269sXXiiFTyAW2BDQjyE3DWc4hkGbsbQ==}
     engines: {node: '>=14'}
 
-  '@percy/sdk-utils@1.29.0':
-    resolution: {integrity: sha512-1spFHrK8u4l5Z7RvUrsyCFtl5vvFcsSNANViTFxMemLUGfpf/xpZgqnZ6kggH0x5PuC6UxiPRmI30hA0COPZGw==}
-    engines: {node: '>=14'}
-
   '@percy/storybook@6.0.0':
     resolution: {integrity: sha512-7EAlaJT4B+naFLkF8YECOw1koZxUM59YSA90SS9KPxezEFQ1lZNBlbXN2zcK7xBF5tqdA05wHQECJkuA4V71kA==}
     hasBin: true
 
+  '@percy/storybook@6.0.1':
+    resolution: {integrity: sha512-A1EmBOY6dfv5RR4OiqkjOf0Ga5glASrgq6A/wHDBIpZTTUuBxHXUT3J7hKfGx5pr6P4TdZ1gy4fuVhtvOlTFgA==}
+    hasBin: true
+
   '@percy/webdriver-utils@1.28.7':
     resolution: {integrity: sha512-BviRMj/oHgdniHoz1nzInpIXl4JTk4vZ0+9azWntGCThITc/HhQE1sLDcHhZGYvviY+NQ4ofCcBSzZRu1z1GcQ==}
     engines: {node: '>=14'}
 
-  '@percy/webdriver-utils@1.29.0':
-    resolution: {integrity: sha512-QlALpphxES+IllmW9tDzExBInVuJZmdGkb3xbBHdsaTxXsNEm24CGCZHaR88gMdUAse06yyw+GW23pxs7/AaVQ==}
-    engines: {node: '>=14'}
-
   '@pinia/nuxt@0.5.1':
     resolution: {integrity: sha512-6wT6TqY81n+7/x3Yhf0yfaJVKkZU42AGqOR0T3+UvChcaOJhSma7OWPN64v+ptYlznat+fS1VTwNAcbi2lzHnw==}
 
@@ -11347,16 +11286,6 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-app@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/cli-command': 1.29.0(typescript@5.4.5)
-      '@percy/cli-exec': 1.29.0(typescript@5.4.5)
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - typescript
-      - utf-8-validate
-
   '@percy/cli-build@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11366,15 +11295,6 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-build@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/cli-command': 1.29.0(typescript@5.4.5)
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - typescript
-      - utf-8-validate
-
   '@percy/cli-command@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/config': 1.28.7(typescript@5.4.5)
@@ -11386,17 +11306,6 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-command@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/config': 1.29.0(typescript@5.4.5)
-      '@percy/core': 1.29.0(typescript@5.4.5)
-      '@percy/logger': 1.29.0
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - typescript
-      - utf-8-validate
-
   '@percy/cli-config@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11406,15 +11315,6 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-config@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/cli-command': 1.29.0(typescript@5.4.5)
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - typescript
-      - utf-8-validate
-
   '@percy/cli-exec@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11426,18 +11326,6 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-exec@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/cli-command': 1.29.0(typescript@5.4.5)
-      '@percy/logger': 1.29.0
-      cross-spawn: 7.0.3
-      which: 2.0.2
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - typescript
-      - utf-8-validate
-
   '@percy/cli-snapshot@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11448,16 +11336,6 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-snapshot@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/cli-command': 1.29.0(typescript@5.4.5)
-      yaml: 2.4.5
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - typescript
-      - utf-8-validate
-
   '@percy/cli-upload@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11469,17 +11347,6 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli-upload@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/cli-command': 1.29.0(typescript@5.4.5)
-      fast-glob: 3.3.2
-      image-size: 1.1.1
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - typescript
-      - utf-8-validate
-
   '@percy/cli@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/cli-app': 1.28.7(typescript@5.4.5)
@@ -11497,35 +11364,12 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/cli@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/cli-app': 1.29.0(typescript@5.4.5)
-      '@percy/cli-build': 1.29.0(typescript@5.4.5)
-      '@percy/cli-command': 1.29.0(typescript@5.4.5)
-      '@percy/cli-config': 1.29.0(typescript@5.4.5)
-      '@percy/cli-exec': 1.29.0(typescript@5.4.5)
-      '@percy/cli-snapshot': 1.29.0(typescript@5.4.5)
-      '@percy/cli-upload': 1.29.0(typescript@5.4.5)
-      '@percy/client': 1.29.0
-      '@percy/logger': 1.29.0
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - typescript
-      - utf-8-validate
-
   '@percy/client@1.28.7':
     dependencies:
       '@percy/env': 1.28.7
       '@percy/logger': 1.28.7
       pako: 2.1.0
 
-  '@percy/client@1.29.0':
-    dependencies:
-      '@percy/env': 1.29.0
-      '@percy/logger': 1.29.0
-      pako: 2.1.0
-
   '@percy/config@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/logger': 1.28.7
@@ -11535,15 +11379,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@percy/config@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/logger': 1.29.0
-      ajv: 8.16.0
-      cosmiconfig: 8.3.6(typescript@5.4.5)
-      yaml: 2.4.5
-    transitivePeerDependencies:
-      - typescript
-
   '@percy/core@1.28.7(typescript@5.4.5)':
     dependencies:
       '@percy/client': 1.28.7
@@ -11560,30 +11395,6 @@ snapshots:
       pako: 2.1.0
       path-to-regexp: 6.2.2
       rimraf: 3.0.2
-      ws: 8.17.0
-      yaml: 2.4.5
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - typescript
-      - utf-8-validate
-
-  '@percy/core@1.29.0(typescript@5.4.5)':
-    dependencies:
-      '@percy/client': 1.29.0
-      '@percy/config': 1.29.0(typescript@5.4.5)
-      '@percy/dom': 1.29.0
-      '@percy/logger': 1.29.0
-      '@percy/webdriver-utils': 1.29.0(typescript@5.4.5)
-      content-disposition: 0.5.4
-      cross-spawn: 7.0.3
-      extract-zip: 2.0.1
-      fast-glob: 3.3.2
-      micromatch: 4.0.7
-      mime-types: 2.1.35
-      pako: 2.1.0
-      path-to-regexp: 6.2.2
-      rimraf: 3.0.2
       ws: 8.18.0
       yaml: 2.4.5
     transitivePeerDependencies:
@@ -11594,24 +11405,14 @@ snapshots:
 
   '@percy/dom@1.28.7': {}
 
-  '@percy/dom@1.29.0': {}
-
   '@percy/env@1.28.7':
     dependencies:
       '@percy/logger': 1.28.7
 
-  '@percy/env@1.29.0':
-    dependencies:
-      '@percy/logger': 1.29.0
-
   '@percy/logger@1.28.7': {}
 
-  '@percy/logger@1.29.0': {}
-
   '@percy/sdk-utils@1.28.7': {}
 
-  '@percy/sdk-utils@1.29.0': {}
-
   '@percy/storybook@6.0.0(typescript@5.4.5)':
     dependencies:
       '@percy/cli-command': 1.28.7(typescript@5.4.5)
@@ -11623,17 +11424,21 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@percy/webdriver-utils@1.28.7(typescript@5.4.5)':
+  '@percy/storybook@6.0.1(typescript@5.4.5)':
     dependencies:
-      '@percy/config': 1.28.7(typescript@5.4.5)
-      '@percy/sdk-utils': 1.28.7
+      '@percy/cli-command': 1.28.7(typescript@5.4.5)
+      cross-spawn: 7.0.3
+      qs: 6.12.1
     transitivePeerDependencies:
+      - bufferutil
+      - supports-color
       - typescript
+      - utf-8-validate
 
-  '@percy/webdriver-utils@1.29.0(typescript@5.4.5)':
+  '@percy/webdriver-utils@1.28.7(typescript@5.4.5)':
     dependencies:
-      '@percy/config': 1.29.0(typescript@5.4.5)
-      '@percy/sdk-utils': 1.29.0
+      '@percy/config': 1.28.7(typescript@5.4.5)
+      '@percy/sdk-utils': 1.28.7
     transitivePeerDependencies:
       - typescript
 

From 20c3fd5fd545d33213ae95fc8edf426184051b90 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 31 Jul 2024 15:40:31 -0700
Subject: [PATCH 24/24] Adding back all actions

---
 .github/workflows/storybook.yml | 146 ++++++++++++++++----------------
 1 file changed, 73 insertions(+), 73 deletions(-)

diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
index cb0daba5..54f4db74 100644
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@@ -45,43 +45,43 @@ jobs:
           name: storybook
           path: apps/vue-storybook/storybook_compiled
 
-  # a11y-tests:
-  #   needs: build
-  #   timeout-minutes: 60
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - name: Checkout 🛎️
-  #       uses: actions/checkout@v4
-
-  #     - name: Setup pnpm
-  #       uses: pnpm/action-setup@v4
-
-  #     - name: Set up Node ⬢
-  #       uses: actions/setup-node@v4
-  #       with:
-  #         node-version-file: '.nvmrc'
-  #         cache: 'pnpm'
-
-  #     - name: Install dependencies 🧱
-  #       run: pnpm i
-
-  #     - name: Install Playwright
-  #       run: pnpm --filter @explorer-1/vue-storybook exec playwright install
-
-  #     - name: Download storybook build
-  #       uses: actions/download-artifact@v3
-  #       with:
-  #         name: storybook
-  #         path: apps/vue-storybook/storybook_compiled
-
-  #     - name: Serve Storybook & Run tests
-  #       run: |
-  #         npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-  #            "pnpm --filter @explorer-1/vue-storybook start" \
-  #            "pnpm --filter @explorer-1/vue-storybook test:ci"
+  a11y-tests:
+    needs: build
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node ⬢
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies 🧱
+        run: pnpm i
+
+      - name: Install Playwright
+        run: pnpm --filter @explorer-1/vue-storybook exec playwright install
+
+      - name: Download storybook build
+        uses: actions/download-artifact@v3
+        with:
+          name: storybook
+          path: apps/vue-storybook/storybook_compiled
+
+      - name: Serve Storybook & Run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+             "pnpm --filter @explorer-1/vue-storybook start" \
+             "pnpm --filter @explorer-1/vue-storybook test:ci"
 
   visual-tests:
-    needs: [build]
+    needs: [build, a11y-tests]
     timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
@@ -112,41 +112,41 @@ jobs:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
         run: pnpm --filter @explorer-1/vue-storybook percy
 
-  # publish:
-  #   needs: [build, a11y-tests]
-  #   timeout-minutes: 30
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - name: Checkout 🛎️
-  #       uses: actions/checkout@v4
-  #       with:
-  #         fetch-depth: 0
-
-  #     - name: Setup pnpm
-  #       uses: pnpm/action-setup@v4
-
-  #     - name: Set up Node ⬢
-  #       uses: actions/setup-node@v4
-  #       with:
-  #         node-version-file: '.nvmrc'
-  #         cache: 'pnpm'
-
-  #     - name: Install dependencies 🧱
-  #       run: pnpm i
-
-  #     - name: Download storybook build
-  #       uses: actions/download-artifact@v3
-  #       with:
-  #         name: storybook
-  #         path: apps/vue-storybook/storybook_compiled
-
-  #     - uses: chromaui/action@latest
-  #       # Options required for Chromatic's GitHub Action
-  #       with:
-  #         projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-  #         token: ${{ secrets.GITHUB_TOKEN }}
-  #         storybookBaseDir: 'apps/vue-storybook'
-  #         storybookBuildDir: 'apps/vue-storybook/storybook_compiled'
-  #         autoAcceptChanges: 'main'
-  #         exitZeroOnChanges: true
-  #         exitOnceUploaded: true
+  publish:
+    needs: [build, a11y-tests]
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node ⬢
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies 🧱
+        run: pnpm i
+
+      - name: Download storybook build
+        uses: actions/download-artifact@v3
+        with:
+          name: storybook
+          path: apps/vue-storybook/storybook_compiled
+
+      - uses: chromaui/action@latest
+        # Options required for Chromatic's GitHub Action
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          storybookBaseDir: 'apps/vue-storybook'
+          storybookBuildDir: 'apps/vue-storybook/storybook_compiled'
+          autoAcceptChanges: 'main'
+          exitZeroOnChanges: true
+          exitOnceUploaded: true