@explorer-1/vue 0.0.4 → 0.1.1

package/src/components/MixinFancybox/MixinFancybox.vue

@@ -283,6 +283,7 @@ export default defineComponent({
 <template>
   <a
     class="MixinFancybox group cursor-pointer block"
+    role="link"
     aria-label="Open in Lightbox"
     :href="src"
     :data-fancybox="galleryName || ''"

package/src/components/NavDesktop/NavDesktop.stories.js

@@ -199,7 +199,7 @@ export const NavInverted = {
       return { args }
     },
     template: `<div class="absolute inset-0">
-  <div style="height:2500px" class="nav-offset bg-dark-blue">
+  <div style="height:2500px" class="nav-offset bg-jpl-blue-darker">
     <NavDesktop v-bind="args" />
     <div v-if="invertOverride" class="-nav-offset max-w-screen-3xl mx-auto">
       <img class="w-full h-auto block" src="https://picsum.photos/1600/900" alt="Example Hero" />

package/src/components/NavDesktop/NavDesktopDropdownContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="NavDesktopDropdownContent bg-dark-blue bg-opacity-98 3xl:px-0 px-4 py-10 text-white"
+    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 3xl:px-0 px-4 py-10 text-white"
   >
     <div
       v-if="data.menuColumns"
@@ -54,8 +54,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import _map from 'lodash/map'
-import _without from 'lodash/without'
+import _map from 'lodash/map.js'
+import _without from 'lodash/without.js'
 import NavLinkList from './../NavLinkList/NavLinkList.vue'
 import NavHighlight from './../NavHighlight/NavHighlight.vue'
 

package/src/components/NavDesktop/NavDesktopDropdownMore.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="NavDesktopDropdownMore bg-dark-blue bg-opacity-98 3xl:px-0 w-full px-4 py-10 text-white"
+    class="NavDesktopDropdownMore bg-jpl-blue-darker bg-opacity-98 3xl:px-0 w-full px-4 py-10 text-white"
   >
     <div class="BaseGrid container mx-auto">
       <div
@@ -64,8 +64,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import _map from 'lodash/map'
-import _without from 'lodash/without'
+import _map from 'lodash/map.js'
+import _without from 'lodash/without.js'
 
 import NavLinkList from './../NavLinkList/NavLinkList.vue'
 import NavSocial from './../NavSocial/NavSocial.vue'

package/src/components/NavHeading/NavHeading.stories.js

@@ -6,7 +6,7 @@ export default {
   component: NavHeading,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="p-8 bg-dark-blue"><story/></div>`
+      template: `<div id="storyDecorator" class="p-8 bg-jpl-blue-darker"><story/></div>`
     })
   ],
   parameters: {

package/src/components/NavHeading/NavHeading.vue

@@ -6,7 +6,7 @@
     <template v-if="data.headingPage && data.heading">
       <BaseLink
         variant="none"
-        class="text-subtitle text-blue inline-block mb-4"
+        class="text-subtitle text-jpl-blue-lighter inline-block mb-4"
         link-class="p-2"
         :to="data.headingPage.url"
       >
@@ -14,7 +14,7 @@
       </BaseLink>
     </template>
     <template v-else-if="data.heading">
-      <div class="text-subtitle text-blue inline-block mb-4">
+      <div class="text-subtitle text-jpl-blue-lighter inline-block mb-4">
         <span class="p-2">{{ data.heading }}</span>
       </div>
     </template>

package/src/components/NavLinkList/NavLinkList.stories.js

@@ -5,7 +5,7 @@ export default {
   component: NavLinkList,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="bg-dark-blue p-8"><story/></div>`
+      template: `<div id="storyDecorator" class="bg-jpl-blue-darker p-8"><story/></div>`
     })
   ],
   parameters: {

package/src/components/NavSocial/NavSocial.stories.js

@@ -15,6 +15,6 @@ export const SocialDark = {
     setup() {
       return { args }
     },
-    template: `<div class="p-8" class="bg-dark-blue"><NavSocial v-bind="args" /></div>`
+    template: `<div class="bg-jpl-blue-darker p-8"><NavSocial v-bind="args" /></div>`
   })
 }

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -37,7 +37,7 @@
           class="form-check-label pl-2 tracking-normal align-middle"
         >
           {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
-          <span class="text-gray-mid"> ({{ bucket.doc_count.toLocaleString() }}) </span>
+          <span class="text-gray-mid-dark"> ({{ bucket.doc_count.toLocaleString() }}) </span>
         </label>
       </div>
     </div>
@@ -62,7 +62,7 @@
 </template>
 <script lang="ts">
 // @ts-nocheck
-import isEqual from 'lodash/isEqual'
+import isEqual from 'lodash/isEqual.js'
 export default {
   name: 'SearchFilterGroup',
   props: {

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -122,7 +122,7 @@
       </div>
       <div
         v-else
-        class="bg-dark-blue edu:bg-stars edu:bg-primary xl:grid-cols-9 relative grid grid-cols-5 mb-10 text-white"
+        class="bg-jpl-blue-darker edu:bg-stars edu:bg-primary xl:grid-cols-9 relative grid grid-cols-5 mb-10 text-white"
       >
         <div class="xl:col-span-7 flex items-center col-span-3 p-10">
           <div class="">
@@ -173,6 +173,7 @@
             :alt="image.alt"
             class="object-cover w-full h-full"
             loading="lazy"
+            data-chromatic="ignore"
           />
         </div>
       </div>

package/src/components/TheFooter/TheFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="TheFooter bg-dark-blue edu:bg-stars edu:bg-primary text-white relative z-20">
+  <footer class="TheFooter bg-jpl-blue-darker edu:bg-stars edu:bg-primary text-white relative z-20">
     <div class="footer-main lg:BaseGrid 3xl:px-0 lg:pt-20 container px-4 pt-10 mx-auto">
       <div class="footer-navigation lg:block lg:col-span-9 hidden col-span-12">
         <!-- footerNavigation -->

package/src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.vue

@@ -11,7 +11,7 @@
         <MixinCarousel
           heading="Missions"
           variant="tiles"
-          class="pb-5"
+          class="pb-5 ThemeVariantGray"
           :center="false"
           :slides-per-view="3"
           :link="relatedMissionsLinkUrl ? relatedMissionsLinkUrl : undefined"

package/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.vue

@@ -2,7 +2,7 @@
   <nuxt-link
     v-if="data"
     :to="data.url"
-    class="TopicDetailMissionCarouselItem group block cursor-pointer"
+    class="TopicDetailMissionCarouselItem ThemeVariantLight group block cursor-pointer"
   >
     <div
       class="can-hover:group-hover:scale-105 relative transition-transform duration-200 ease-in transform scale-100"
@@ -38,7 +38,7 @@
           </p>
           <p
             v-if="data.status || data.showClock"
-            class="text-subtitle text-jpl-aqua"
+            class="text-subtitle text-jpl-blue-light"
           >
             <span class="sr-only">.</span>
             <template v-if="data.showClock">

package/src/docs/foundation/DynamicTokens.vue

@@ -41,28 +41,28 @@
           <div class="bg-secondary-light p-4"></div>
         </td>
         <td>Secondary light</td>
-        <td><code class="text-sm">primary-light</code></td>
+        <td><code class="text-sm">secondary-light</code></td>
       </tr>
       <tr>
         <td>
           <div class="bg-secondary p-4"></div>
         </td>
         <td>Secondary</td>
-        <td><code class="text-sm">primary</code></td>
+        <td><code class="text-sm">secondary</code></td>
       </tr>
       <tr>
         <td>
           <div class="bg-secondary-dark p-4"></div>
         </td>
         <td>Secondary dark</td>
-        <td><code class="text-sm">primary-dark</code></td>
+        <td><code class="text-sm">secondary-dark</code></td>
       </tr>
       <tr>
         <td>
           <div class="bg-secondary-darker p-4"></div>
         </td>
         <td>Secondary darker</td>
-        <td><code class="text-sm">primary-darker</code></td>
+        <td><code class="text-sm">secondary-darker</code></td>
       </tr>
       <tr>
         <td>

package/src/docs/foundation/color.docs.mdx

@@ -15,42 +15,43 @@ import { Meta, Story, Canvas } from '@storybook/blocks'
 
 Each of these foundation colors has specific usage scenarios.
 
-| Color                                         | Name           | Token            |
-| :-------------------------------------------- | :------------- | :--------------- |
-| <div className="bg-jpl-red-light p-4"></div>  | JPL Red Light  | `jpl-red-light`  |
-| <div className="bg-jpl-red p-4"></div>        | JPL Red        | `jpl-red`        |
-| <div className="bg-jpl-red-dark p-4"></div>   | JPL Red Dark   | `jpl-red-dark`   |
-| <div className="bg-jpl-red-darker p-4"></div> | JPL Red Darker | `jpl-red-darker` |
-| <div className="bg-jpl-aqua p-4"></div>       | JPL Aqua       | `aqua`           |
-| <div className="bg-blue p-4"></div>           | Blue           | `blue`           |
-| <div className="bg-dark-blue p-4"></div>      | Dark Blue      | `dark-blue`      |
-| <div className="bg-green p-4"></div>          | Green          | `green`          |
-
-### Reserved for Internal Use
-
-These colors should not be used on public-facing JPL websites.
-
 | Color                                              | Name                | Token                 |
 | :------------------------------------------------- | :------------------ | :-------------------- |
-| <div className="bg-jpl-sky-blue-light p-4"></div>  | JPL Sky Blue Light  | `jpl-sky-blue-light`  |
-| <div className="bg-jpl-sky-blue p-4"></div>        | JPL Sky Blue        | `jpl-sky-blue`        |
-| <div className="bg-jpl-sky-blue-dark p-4"></div>   | JPL Sky Blue Dark   | `jpl-sky-blue-dark`   |
-| <div className="bg-jpl-sky-blue-darker p-4"></div> | JPL Sky Blue Darker | `jpl-sky-blue-darker` |
-
-### Reserved for EDU Use
-
-These colors should not be used on public-facing JPL websites.
-
-| Color                                            | Name              | Token               |
-| :----------------------------------------------- | :---------------- | :------------------ |
-| <div className="bg-jpl-purple-light p-4"></div>  | JPL Purple Light  | `jpl-purple-light`  |
-| <div className="bg-jpl-purple p-4"></div>        | JPL Purple        | `jpl-purple`        |
-| <div className="bg-jpl-purple-dark p-4"></div>   | JPL Purple Dark   | `jpl-purple-dark`   |
-| <div className="bg-jpl-purple-darker p-4"></div> | JPL Purple Darker | `jpl-purple-darker` |
-| <div className="bg-jpl-teal-light p-4"></div>    | JPL Teal Light    | `jpl-teal-light`    |
-| <div className="bg-jpl-teal p-4"></div>          | JPL Teal          | `jpl-teal`          |
-| <div className="bg-jpl-teal-dark p-4"></div>     | JPL Teal Dark     | `jpl-teal-dark`     |
-| <div className="bg-jpl-teal-darker p-4"></div>   | JPL Teal Darker   | `jpl-teal-darker`   |
+| <div className="bg-jpl-red-lighter p-4"></div>     | JPL Red Lighter     | `jpl-red-lighter`     |
+| <div className="bg-jpl-red-light p-4"></div>       | JPL Red Light       | `jpl-red-light`       |
+| <div className="bg-jpl-red p-4"></div>             | JPL Red             | `jpl-red`             |
+| <div className="bg-jpl-red-dark p-4"></div>        | JPL Red Dark        | `jpl-red-dark`        |
+| <div className="bg-jpl-red-darker p-4"></div>      | JPL Red Darker      | `jpl-red-darker`      |
+| <div className="bg-jpl-orange-lighter p-4"></div>  | JPL Orange Lighter  | `jpl-orange-lighter`  |
+| <div className="bg-jpl-orange-light p-4"></div>    | JPL Orange Light    | `jpl-orange-light`    |
+| <div className="bg-jpl-orange p-4"></div>          | JPL Orange          | `jpl-orange`          |
+| <div className="bg-jpl-orange-dark p-4"></div>     | JPL Orange Dark     | `jpl-orange-dark`     |
+| <div className="bg-jpl-orange-darker p-4"></div>   | JPL Orange Darker   | `jpl-orange-darker`   |
+| <div className="bg-jpl-yellow-lighter p-4"></div>  | JPL Yellow Lighter  | `jpl-yellow-lighter`  |
+| <div className="bg-jpl-yellow-light p-4"></div>    | JPL Yellow Light    | `jpl-yellow-light`    |
+| <div className="bg-jpl-yellow p-4"></div>          | JPL Yellow          | `jpl-yellow`          |
+| <div className="bg-jpl-yellow-dark p-4"></div>     | JPL Yellow Dark     | `jpl-yellow-dark`     |
+| <div className="bg-jpl-yellow-darker p-4"></div>   | JPL Yellow Darker   | `jpl-yellow-darker`   |
+| <div className="bg-jpl-teal-lighter p-4"></div>    | JPL Teal Lighter    | `jpl-teal-lighter`    |
+| <div className="bg-jpl-teal-light p-4"></div>      | JPL Teal Light      | `jpl-teal-light`      |
+| <div className="bg-jpl-teal p-4"></div>            | JPL Teal            | `jpl-teal`            |
+| <div className="bg-jpl-teal-dark p-4"></div>       | JPL Teal Dark       | `jpl-teal-dark`       |
+| <div className="bg-jpl-teal-darker p-4"></div>     | JPL Teal Darker     | `jpl-teal-darker`     |
+| <div className="bg-jpl-blue-lighter p-4"></div>    | JPL Blue Lighter    | `jpl-blue-lighter`    |
+| <div className="bg-jpl-blue-light p-4"></div>      | JPL Blue Light      | `jpl-blue-light`      |
+| <div className="bg-jpl-blue p-4"></div>            | JPL Blue            | `jpl-blue`            |
+| <div className="bg-jpl-blue-dark p-4"></div>       | JPL Blue Dark       | `jpl-blue-dark`       |
+| <div className="bg-jpl-blue-darker p-4"></div>     | JPL Blue Darker     | `jpl-blue-darker`     |
+| <div className="bg-jpl-violet-lighter p-4"></div>  | JPL Violet Lighter  | `jpl-violet-lighter`  |
+| <div className="bg-jpl-violet-light p-4"></div>    | JPL Violet Light    | `jpl-violet-light`    |
+| <div className="bg-jpl-violet p-4"></div>          | JPL Violet          | `jpl-violet`          |
+| <div className="bg-jpl-violet-dark p-4"></div>     | JPL Violet Dark     | `jpl-violet-dark`     |
+| <div className="bg-jpl-violet-darker p-4"></div>   | JPL Violet Darker   | `jpl-violet-darker`   |
+| <div className="bg-jpl-magenta-lighter p-4"></div> | JPL Magenta Lighter | `jpl-magenta-lighter` |
+| <div className="bg-jpl-magenta-light p-4"></div>   | JPL Magenta Light   | `jpl-magenta-light`   |
+| <div className="bg-jpl-magenta p-4"></div>         | JPL Magenta         | `jpl-magenta`         |
+| <div className="bg-jpl-magenta-dark p-4"></div>    | JPL Magenta Dark    | `jpl-magenta-dark`    |
+| <div className="bg-jpl-magenta-darker p-4"></div>  | JPL Magenta Darker  | `jpl-magenta-darker`  |
 
 <span id="functional-gray-tones"></span>
 
@@ -87,17 +88,21 @@ Recommended for use in forms, alerts, or any element meant to communicate a stat
 **Note:** Color should never be the _only_ means used to convey state information;
 it must always be accompanied by text or iconography that makes it clear for colorblind users.
 
-| Color                                              | Name                | Token                 | Value     |
-| :------------------------------------------------- | :------------------ | :-------------------- | :-------- |
-| <div className="bg-alert-gold p-4"></div>          | Alert Gold          | `alert-gold`          | `#FFBA32` |
-| <div className="bg-alert-gold-light p-4"></div>    | Alert Gold Light    | `alert-gold-light`    | `#FFF9EB` |
-| <div className="bg-disabled-gray p-4"></div>       | Disabled Gray       | `disabled-gray`       | `#D8D8D8` |
-| <div className="bg-error-red p-4"></div>           | Error Red           | `error-red`           | `#C1152E` |
-| <div className="bg-error-red-light p-4"></div>     | Error Red Light     | `error-red-light`     | `#FFE8EB` |
-| <div className="bg-focus-blue p-4"></div>          | Focus Blue          | `focus-blue`          | `#1871C9` |
-| <div className="bg-focus-blue-light p-4"></div>    | Focus Blue Light    | `focus-blue-light`    | `#E8F1FA` |
-| <div className="bg-success-green p-4"></div>       | Success Green       | `success-green`       | `#33A17B` |
-| <div className="bg-success-green-light p-4"></div> | Success Green Light | `success-green-light` | `#E1F5EE` |
+| Color                                        | Name          | Token           |
+| :------------------------------------------- | :------------ | :-------------- |
+| <div className="bg-warning-light p-4"></div> | Alert Light   | `alert-light`   |
+| <div className="bg-warning p-4"></div>       | Alert         | `alert`         |
+| <div className="bg-warning-dark p-4"></div>  | Alert Dark    | `alert-dark`    |
+| <div className="bg-error-light p-4"></div>   | Error Light   | `error-light`   |
+| <div className="bg-error p-4"></div>         | Error         | `error`         |
+| <div className="bg-error-dark p-4"></div>    | Error Dark    | `error-dark`    |
+| <div className="bg-success-light p-4"></div> | Success Light | `success-light` |
+| <div className="bg-success p-4"></div>       | Success       | `success`       |
+| <div className="bg-success-dark p-4"></div>  | Success Dark  | `success-dark`  |
+| <div className="bg-focus-light p-4"></div>   | Focus Light   | `focus-light`   |
+| <div className="bg-focus p-4"></div>         | Focus         | `focus`         |
+| <div className="bg-focus-dark p-4"></div>    | Focus Dark    | `focus-dark`    |
+| <div className="bg-disabled p-4"></div>      | Disabled      | `disabled`      |
 
 <span id="tokens"></span>
 

package/src/docs/foundation/themes.docs.mdx

@@ -17,9 +17,15 @@ Changing the Theme and Variant to see how the dynamic tokens change.
 
 <Canvas of={Stories.DynamicTokenStory} />
 
-## Light & Dark Variants
+## Light, Dark, and Gray Variants
 
-`.ThemeVariantLight` and `.ThemeVariantDark` in Explorer 1 are theme variants. Note that not all components support these variants.
+`.ThemeVariantLight`, `.ThemeVariantDark`, and `.ThemeVariantGray` in Explorer 1 are theme variants. Note that not all components support these variants.
+
+| Variant             | Purpose                                                                                      |
+| ------------------- | -------------------------------------------------------------------------------------------- |
+| `ThemeVariantLight` | When the component or element is used over a light or white background. Usually the default. |
+| `ThemeVariantDark`  | When the component or element is used over a dark or black background                        |
+| `ThemeVariantGray`  | When the component or element is used over a gray background                                 |
 
 ### Key Points
 

package/src/docs/foundation/themes.stories.js

@@ -11,41 +11,6 @@ export const DynamicTokenStory = {
   args: {}
 }
 
-const InternalTemplate = `<div>
-  <div class="ThemeInternal">
-    <!-- BaseLink -->
-    <div>
-      <a
-        class="group cursor-pointer -default underline text-action can-hover:hover:text-action-hover"
-      >
-        Internal Theme: BaseLink 
-      </a>
-    </div>
-    <!-- /BaseLink -->
-  </div>
-  <div>
-  <!-- BaseLink -->
-    <div>
-      <a
-        class="group cursor-pointer -default underline text-action can-hover:hover:text-action-hover"
-      >
-        Default Theme: BaseLink
-      </a>
-    </div>
-    <!-- /BaseLink -->
-  </div>
-</div>`
-
-export const Internal = {
-  args: {},
-  render: (args) => ({
-    setup() {
-      return { args }
-    },
-    template: InternalTemplate
-  })
-}
-
 const AdaptiveTextTemplate = `<p class="p-4">
   <a class="cursor-pointer font-bold text-action can-hover:hover:text-action-hover">
     Lorem ipsum dolor sit amet

package/src/templates/PageContent/PageContent.stories.js

@@ -12,11 +12,6 @@ import PageContent from './PageContent.vue'
 export default {
   title: 'Templates/PageContent',
   component: PageContent,
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="absolute inset-0 disable-nav-offset"><story/></div>`
-    })
-  ],
   parameters: {
     html: {
       root: '#storyDecorator'

package/src/templates/PageContent/PageContent.vue

@@ -1,3 +1,65 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRoute } from 'vue-router'
+import HeroMedia from '@explorer-1/vue/src/components/HeroMedia/HeroMedia.vue'
+import NavSecondary from '@explorer-1/vue/src/components/NavSecondary/NavSecondary.vue'
+import LayoutHelper from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from '@explorer-1/vue/src/components/DetailHeadline/DetailHeadline.vue'
+import BlockImageStandard from '@explorer-1/vue/src/components/BlockImage/BlockImageStandard.vue'
+import ShareButtons from '@explorer-1/vue/src/components/ShareButtons/ShareButtons.vue'
+import BlockStreamfield from '@explorer-1/vue/src/components/BlockStreamfield/BlockStreamfield.vue'
+import BlockRelatedLinks from '@explorer-1/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import FormContact from '@explorer-1/vue/src/components/FormContact/FormContact.vue'
+import FormNewsletterSignup from '@explorer-1/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.vue'
+import BlockLinkCarousel from '@explorer-1/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue'
+
+const route = useRoute()
+
+export default defineComponent({
+  name: 'PageContent',
+  components: {
+    HeroMedia,
+    NavSecondary,
+    LayoutHelper,
+    DetailHeadline,
+    BlockImageStandard,
+    ShareButtons,
+    BlockStreamfield,
+    BlockRelatedLinks,
+    FormContact,
+    FormNewsletterSignup,
+    BlockLinkCarousel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  computed: {
+    heroInline() {
+      if (this.data?.heroPosition === 'inline') {
+        return true
+      }
+      return false
+    },
+    hideH1() {
+      if (route?.path === '/a-plan-for-jpl') {
+        return true
+      }
+      return false
+    },
+    h1LayoutHelperClasses() {
+      if (this.hideH1) {
+        // We're hiding the H1 from regular browsers, so reduce the standard margin.
+        return 'lg:mt-12 mt-5'
+      }
+      return 'lg:mt-12 lg:mb-18 mt-5 mb-10'
+    }
+  }
+})
+</script>
 <template>
   <div
     v-if="data"
@@ -101,40 +163,3 @@
     />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useRoute } from 'vue-router'
-const route = useRoute()
-
-export default defineComponent({
-  name: 'PageContent',
-  props: {
-    data: {
-      type: Object,
-      required: false,
-      default: undefined
-    }
-  },
-  computed: {
-    heroInline() {
-      if (this.data?.heroPosition === 'inline') {
-        return true
-      }
-      return false
-    },
-    hideH1() {
-      if (route?.path === '/a-plan-for-jpl') {
-        return true
-      }
-      return false
-    },
-    h1LayoutHelperClasses() {
-      if (this.hideH1) {
-        // We're hiding the H1 from regular browsers, so reduce the standard margin.
-        return 'lg:mt-12 mt-5'
-      }
-      return 'lg:mt-12 lg:mb-18 mt-5 mb-10'
-    }
-  }
-})
-</script>

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

@@ -6,11 +6,6 @@ import PageEventDetail from './PageEventDetail.vue'
 export default {
   title: 'Templates/PageEventDetail',
   component: PageEventDetail,
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="absolute inset-0 disable-nav-offset"><story/></div>`
-    })
-  ],
   parameters: {
     html: {
       root: '#storyDecorator'

package/src/templates/PageEventDetail/PageEventDetail.vue

@@ -287,11 +287,43 @@ import {
   mixinFormatEventTimeInHoursAndMinutes,
   mixinFormatSplitEventDates
 } from '../../utils/mixins'
+import LayoutHelper from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
+import BaseHeading from '@explorer-1/vue/src/components/BaseHeading/BaseHeading.vue'
+import ShareButtons from '@explorer-1/vue/src/components/ShareButtons/ShareButtons.vue'
+import EventDetailHero from '@explorer-1/vue/src/components/EventDetailHero/EventDetailHero.vue'
+import IconCalendar from '@explorer-1/vue/src/components/Icons/IconCalendar.vue'
+import IconLocation from '@explorer-1/vue/src/components/Icons/IconLocation.vue'
+import IconTime from '@explorer-1/vue/src/components/Icons/IconTime.vue'
+import BaseLink from '@explorer-1/vue/src/components/BaseLink/BaseLink.vue'
+import BaseButton from '@explorer-1/vue/src/components/BaseButton/BaseButton.vue'
+import CalendarButton from '@explorer-1/vue/src/components/CalendarButton/CalendarButton.vue'
+import BlockStreamfield from '@explorer-1/vue/src/components/BlockStreamfield/BlockStreamfield.vue'
+import BaseImagePlaceholder from '@explorer-1/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from '@explorer-1/vue/src/components/BaseImage/BaseImage.vue'
+import BlockRelatedLinks from '@explorer-1/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockLinkCarousel from '@explorer-1/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue'
 // @ts-ignore
 import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg'
 
 export default defineComponent({
   name: 'PageEventDetail',
+  components: {
+    LayoutHelper,
+    BaseHeading,
+    ShareButtons,
+    EventDetailHero,
+    IconCalendar,
+    IconLocation,
+    IconTime,
+    BaseLink,
+    BaseButton,
+    CalendarButton,
+    BlockStreamfield,
+    BaseImagePlaceholder,
+    BaseImage,
+    BlockRelatedLinks,
+    BlockLinkCarousel
+  },
   props: {
     data: {
       type: Object,

package/src/templates/edu/PageEduNewsDetail.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import isEmpty from 'lodash/isEmpty.js'
 import type { StreamfieldBlockData } from '../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
   ImageObject,
@@ -8,7 +9,13 @@ import type {
   Topic,
   ThumbnailObject
 } from './../../interfaces'
-import isEmpty from 'lodash/isEmpty'
+import HeroMedia from '@explorer-1/vue/src/components/HeroMedia/HeroMedia.vue'
+import LayoutHelper from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from '@explorer-1/vue/src/components/DetailHeadline/DetailHeadline.vue'
+import ShareButtonsEdu from '@explorer-1/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import BlockImageStandard from '@explorer-1/vue/src/components/BlockImage/BlockImageStandard.vue'
+import BlockText from '@explorer-1/vue/src/components/BlockText/BlockText.vue'
+import BlockStreamfield from '@explorer-1/vue/src/components/BlockStreamfield/BlockStreamfield.vue'
 
 interface PageEduNewsDetailObject extends PageResponseObject {
   heroImage: ImageObject
@@ -95,6 +102,7 @@ const dateTimeArray = computed(() => {
         schema
       />
       <share-buttons-edu
+        v-if="data?.url"
         class="mt-4"
         :url="data.url"
         :title="data.title"