@explorer-1/vue 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @explorer-1/vue
 
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies [165092c]
+  - @explorer-1/common@1.3.0
+
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [230858f]
+  - @explorer-1/common@1.2.1
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -1,9 +1,59 @@
-# Vue 3 + TypeScript + Vite
+# @explorer-1/vue
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+[![npm](https://img.shields.io/npm/v/@explorer-1/vue)](https://npmjs.com/package/@explorer-1/vue)
 
-## Recommended Setup
+- [Prerequisites](#prerequisites)
+- [Getting Started](#getting-started)
+  - [Configuration (Vite)](#configuration-vite)
+  - [Preloading Fonts](#preloading-fonts)
+- [Using Components](#using-components)
 
-- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+## Prerequisites
 
-- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
+- Recommended build tool: [Vite](https://vite.dev/)
+
+## Getting Started
+
+Install `@explorer-1/vue` and `@explorer-1/common` with [npm](https://www.npmjs.com/) or similar:
+
+```bash
+npm install --save @explorer-1/vue @explorer-1/common
+```
+
+Install secondary dependencies:
+
+- @tailwindcss/forms
+- click-outside-vue3
+- dayjs
+- mitt
+- swiper
+- vue
+- vue-bind-once
+- vue3-compare-image
+- vue3-observe-visibility
+
+```bash
+npm install --save @tailwindcss/forms click-outside-vue3 dayjs mitt swiper vue vue-bind-once vue3-compare-image vue3-observe-visibility
+```
+
+### Configuration (Vite)
+
+View files in the `@explorer-1/vue` package for examples on how to configure your Vue app with Vite.
+
+- [vite.config.ts](./vite.config.ts)
+- [postcss.config.js](./postcss.config.js)
+- [tailwind.config.js](./tailwind.config.js)
+- [index.html](./index.html) -- Vite entrypoint
+- [main.ts](./src/main.ts) -- Vue app entrypoint
+- [App.vue](./src/App.vue)
+
+### Preloading Fonts
+
+In the example `App.vue`, `@explorer-1/vue/src/assets/scss/styles-with-fonts.scss` is the main SCSS include. However, if you need to preload your fonts separately, you can do so by including `./assets/scss/styles.scss` instead (excludes font declarations). You can then preload fonts using a dedicated stylesheet:
+
+1. Replace `@explorer-1/vue/src/assets/scss/styles-with-fonts.scss` with `@explorer-1/vue/src/assets/scss/styles.scss`
+2. Preload fonts with this dedicated stylesheet:`@explorer-1/common/dist/assets/css/font-face.css`
+
+## Using Components
+
+Available components and usage guidance is documented in our [Storybook](https://nasa-jpl.github.io/explorer-1/).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,7 @@
   "author": "DesignLab",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nasa-jpl/explorer-1"
+    "url": "https://github.com/nasa-jpl/explorer-1/tree/main/packages/vue"
   },
   "type": "module",
   "prettier": "@explorer-1/prettier-config",
@@ -31,7 +31,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.2.0"
+    "@explorer-1/common": "1.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
@@ -46,6 +46,9 @@
     "vue-tsc": "^2.0.6",
     "@explorer-1/prettier-config": "1.0.0"
   },
+  "storybook": {
+    "url": "https://main--668c47cbeb95392cd79c3c0d.chromatic.com"
+  },
   "scripts": {
     "dev": "pnpm prepare && vite",
     "build": "pnpm prepare && vue-tsc && vite build",

package/src/components/BaseCarousel/BaseCarousel.vue

@@ -35,7 +35,7 @@ import { defineComponent } from 'vue'
 import Swiper from 'swiper'
 import { A11y, Navigation } from 'swiper/modules'
 import type { SwiperOptions } from 'swiper/types'
-import swiperOptions from '@explorer-1/common/src/js/_swiperOptions'
+import swiperOptions from '@explorer-1/common/src/js/vendors/_swiperOptions'
 import IconPrev from './../Icons/IconPrev.vue'
 import IconNext from './../Icons/IconNext.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'

package/src/components/BasePill/BasePill.stories.js

@@ -1,4 +1,5 @@
 import BasePill from './BasePill.vue'
+import { eduMetadataDictionary } from './../../constants'
 
 export default {
   title: 'Components/Base/BasePill',
@@ -15,20 +16,28 @@ export default {
       description: 'The size of the tag',
       control: { type: 'select' },
       options: ['sm', 'md', 'lg']
-    }
-  },
-  parameters: {
-    slots: {
-      default: 'BaseStory slot'
+    },
+    contentType: {
+      control: { type: 'select' },
+      options: Object.keys(eduMetadataDictionary)
     }
   }
 }
 
 // stories
 export const PrimaryMedium = {
-  args: { size: 'md', variant: 'primary', default: 'Psyche Asteroid' }
+  args: {
+    size: 'md',
+    variant: 'primary',
+    text: 'Psyche Asteroid',
+    contentType: 'EDULessonPage'
+  }
 }
 
 export const SecondarySmall = {
-  args: { size: 'sm', variant: 'secondary', default: 'Do it yourself' }
+  args: { size: 'sm', variant: 'secondary', text: 'Do it yourself' }
+}
+
+export const WithType = {
+  args: { size: 'sm', variant: 'secondary', text: 'Do it yourself' }
 }

package/src/components/BaseTimer/BaseTimer.stories.js

@@ -2,7 +2,12 @@ import BaseTimer from './BaseTimer.vue'
 
 export default {
   title: 'Components/Base/BaseTimer',
-  component: BaseTimer
+  component: BaseTimer,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="w-full"><story/></div>`
+    })
+  ]
 }
 
 export const BaseStory = {

package/src/components/BaseTimer/BaseTimer.vue

@@ -1,9 +1,10 @@
 <template>
   <component
     :is="diff ? 'time' : 'div'"
-    class="BaseTimer whitespace-nowrap"
+    class="BaseTimer whitespace-nowrap block"
     :datetime="diff ? diff.toISOString() : null"
     :class="{ '-inline': inline }"
+    data-chromatic="ignore"
   >
     <span :hidden="!!diff">Loading…</span>
     <span
@@ -40,7 +41,10 @@
             <template v-else>{{ unitValue(unit) }}</template>
           </span>
           <br v-if="!inline" />
-          <span class="unit text-body-xs uppercase">
+          <span
+            class="unit text-body-xs uppercase"
+            data-chromatic="ignore"
+          >
             {{ shortLabel(unit) }}
           </span>
         </span>

package/src/components/BaseVideo/BaseVideo.vue

@@ -14,6 +14,7 @@
         :muted="autoplay"
         :playsinline="autoplay"
         :autoplay="autoplay"
+        data-chromatic="ignore"
         controls
       >
         <template v-if="data.fileWebm">

package/src/components/BlockDialog/BlockDialog.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './BlockDialog.stories'
 
 <Meta of={Stories} />

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -12,6 +12,7 @@
         :height="data.height"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen
+        data-chromatic="ignore"
       ></iframe>
     </template>
     <template v-else>
@@ -29,10 +30,10 @@
             class="w-full border-none"
             :title="data.title"
             :src="data.url"
-            data-chromatic="ignore"
             width="90%"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen
+            data-chromatic="ignore"
           ></iframe>
         </div>
       </BaseImagePlaceholder>

package/src/components/BlockImageCarousel/BlockImageCarousel.vue

@@ -60,7 +60,7 @@
   </div>
 </template>
 <script lang="ts">
-import swiperOptions from '@explorer-1/common/src/js/_swiperOptions'
+import swiperOptions from '@explorer-1/common/src/js/vendors/_swiperOptions'
 import Swiper from 'swiper'
 import { A11y, Navigation } from 'swiper/modules'
 import type { SwiperOptions } from 'swiper/types'

package/src/components/BlockLinkCard/BlockLinkCard.stories.js

@@ -181,6 +181,7 @@ export const EduLesson = {
       template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...BlockLinkCardData,
     size: 'sm',
@@ -210,6 +211,7 @@ export const EduExplainerArticle = {
       template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...BlockLinkCardData,
     data: {
@@ -234,6 +236,7 @@ export const EduExplainerArticle = {
   }
 }
 export const LargeEduExplainerArticle = {
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...BlockLinkCardData,
     size: 'lg',
@@ -260,6 +263,7 @@ export const LargeEduExplainerArticle = {
 }
 
 export const EduCollection = {
+  globals: { theme: 'ThemeEdu' },
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
@@ -296,6 +300,7 @@ export const EduCollection = {
   }
 }
 export const EduCollectionLarge = {
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...BlockLinkCardData,
     size: 'lg',
@@ -328,6 +333,7 @@ export const EduCollectionLarge = {
 }
 
 export const EduNewsItem = {
+  globals: { theme: 'ThemeEdu' },
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`

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

@@ -46,12 +46,7 @@ export const BlockStreamfieldMinimalData = {
     {
       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><h2 data-block-key="cba9u">A heading in BlockText</h2><p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit.</p><h3 data-block-key="ujfka8">A heading in BlockText</h3><p>Quisque vitae justo quis justo malesuada molestie.</p><h2 data-block-key="ujfka8">A heading in BlockText</h2><p>Cras sed tincidunt dui.</p>\n'
-    },
-    {
-      blockType: 'RichTextBlock',
-      value:
-        '<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'
+        '<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.</p>\n'
     }
   ]
 }
@@ -61,7 +56,7 @@ export const BlockStreamfieldTruncatedData = {
     {
       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><h2 data-block-key="cba9u">A heading in BlockText</h2><p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit.</p><h3 data-block-key="ujfka8">A heading in BlockText</h3><p>Quisque vitae justo quis justo malesuada molestie.</p><h2 data-block-key="ujfka8">A heading in BlockText</h2><p>Cras sed tincidunt dui.</p>\n'
+        '<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>\n'
     },
     { ...BlockHeadingData, blockId: Math.random().toString(36).slice(2) },
     {

package/src/components/HeroLarge/HeroLarge.vue

@@ -17,6 +17,7 @@
           :width="image.src.width"
           :height="image.src.height"
           :alt="image.alt"
+          data-chromatic="ignore"
         />
       </picture>
     </div>

package/src/components/HeroMedium/HeroMedium.vue

@@ -27,6 +27,7 @@
           :width="theImage.src.width"
           :height="theImage.src.height"
           alt=""
+          data-chromatic="ignore"
         />
       </picture>
     </div>

package/src/components/MetadataEduResource/MetadataEduResource.stories.js

@@ -11,6 +11,7 @@ export default {
       options: ['primary', 'secondary']
     }
   },
+  globals: { theme: 'ThemeEdu' },
   excludeStories: /.*Data$/
 }
 

package/src/components/MixinCarousel/MixinCarousel.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './MixinCarousel.stories'
 
 <Meta of={Stories} />
@@ -30,4 +30,4 @@ And with a link using the `link` and `linkTitle` props:
 
 ## Used in the following components
 
-See [all usage in the repository](https://github.com/nasa-jpl/www-frontend/search?q=MixinCarousel&type=code).
+See [all usage in the repository](https://github.com/nasa-jpl/explorer-1/search?q=MixinCarousel&type=code).

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -101,7 +101,7 @@ import { defineComponent } from 'vue'
 import Swiper from 'swiper'
 import { A11y, Navigation } from 'swiper/modules'
 import type { SwiperOptions } from 'swiper/types'
-import swiperOptions from '@explorer-1/common/src/js/_swiperOptions'
+import swiperOptions from '@explorer-1/common/src/js/vendors/_swiperOptions'
 
 import IconPrev from './../Icons/IconPrev.vue'
 import IconNext from './../Icons/IconNext.vue'
@@ -196,11 +196,27 @@ export default defineComponent({
       sliderOptions: {
         ...MixinCarouselOptions,
         initialSlide: this.initialSlide,
+        watchSlidesProgress: true,
         a11y: {
           prevSlideMessage: this.heading ? this.heading + ' - Previous slide' : 'Previous slide',
           nextSlideMessage: this.heading ? this.heading + ' - Next slide' : 'Next slide',
           slideRole: 'link'
         },
+        on: {
+          ...MixinCarouselOptions.on,
+          progress(swiper) {
+            const classList = swiper.el.classList
+            classList.replace('opacity-0', 'opacity-100')
+            swiper.slides.forEach((slide) => {
+              if (slide.classList.contains('swiper-slide-fully-visible')) {
+                slide.setAttribute('aria-hidden', 'false')
+                slide.setAttribute('role', 'link')
+              } else {
+                slide.setAttribute('role', 'presentation')
+              }
+            })
+          }
+        },
         breakpoints: {
           ...MixinCarouselOptions.breakpoints,
           1024: {

package/src/components/MixinVideoBg/MixinVideoBg.vue

@@ -8,6 +8,7 @@
     controls
     preload="auto"
     class="object-cover w-full h-full"
+    data-chromatic="ignore"
   >
     <source
       v-if="video.fileWebm"

package/src/components/NavDesktopEdu/NavDesktopEdu.stories.js

@@ -161,6 +161,7 @@ export const NavDesktopData = {
 
 export const BaseStory = {
   name: 'NavDesktop',
+  globals: { theme: 'ThemeEdu' },
   args: {
     data: NavDesktopData,
     headerVisible: true,

package/src/components/RoboticsDetailStats/RoboticsDetailStats.vue

@@ -55,6 +55,7 @@
             :src="animalAnalogIcon.src.url"
             width="160"
             height="160"
+            data-chromatic="ignore"
             alt=""
           />
         </picture>

package/src/components/SearchResultCard/SearchResultCard.stories.js

@@ -66,6 +66,7 @@ export const PodcastEpisodeCard = {
 }
 
 export const EduEventCard = {
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...SearchResultCardData,
     __typename: 'EDUEventPage',

package/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js

@@ -7,6 +7,7 @@ export default {
 
 export const BaseStory = {
   name: 'ShareButtonsEdu',
+  globals: { theme: 'ThemeEdu' },
   args: {
     url: 'https://jpl.nasa.gov/edu/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
     title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight"

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -13,6 +13,7 @@
         v-bind-once="{ style: 'background-image: url(' + randomizeImage + ');' }"
         role="presentation"
         :class="'SwimlaneCTA lg:block hidden' + computedClass"
+        data-chromatic="ignore"
       >
         <div class="absolute inset-0 z-10 bg-black bg-opacity-25"></div>
         <div

package/src/components/TimelineDialog/TimelineDialog.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './TimelineDialog.stories'
 
 <Meta of={Stories} />

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

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 
 <Meta title="Foundations/Colors" />
 

package/src/docs/foundation/grid.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './grid.stories'
 
 <Meta of={Stories} />

package/src/docs/foundation/grid_layouthelpers.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './grid_layouthelpers.stories'
 
 <Meta of={Stories} />

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

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './themes.stories'
 
 <Meta of={Stories} />

package/src/docs/foundation/typography.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './typography.stories'
 
 <Meta of={Stories} />

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

@@ -109,7 +109,7 @@ export const HeadingIcons = {
 export const TextContrast = {
   args: {},
   render: () => ({
-    template: `<div style="background-image: url('https://picsum.photos/1000/400');" class="bg-cover bg-no-repeat bg-center">
+    template: `<div style="background-image: url('https://fastly.picsum.photos/id/1015/1000/40.jpg?hmac=fpUcZPtNEqNVb9cio8CwkUIBZKywJSfhaxdieF0Uxgk');" class="bg-cover bg-no-repeat bg-center">
   <div class="p-10 bg-black/30">
     <span class="text-h3 text-white text-contrast">
       This text uses a text shadow that increases readability when used with a semi-transparent overlay.

package/src/docs/getting-started/designer.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Description } from '@storybook/blocks'
+import { Meta, Description } from '@storybook/addon-docs/blocks'
 
 <Meta title="Getting Started/Designer" />
 

package/src/docs/getting-started/developer.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Getting Started/Developer" />
 
@@ -39,29 +39,7 @@ Explorer 1 comprises components that range from very simple, single-purpose elem
 
 ### HTML templates
 
-HTML templates are provided by this Storybook in both Docs view and Canvas view. You can also modify the component "controls" to customize the component.
-
-#### How to copy HTML snippets from Docs view
-
-1. Find the story block you want to copy.
-2. In the bottom right corner of the block, click on "Show code".
-3. In the bottom right corner of the now-visible code block, click on "Copy".
-
-<details className="pl-4 -mt-3 text-sm">
-  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to copy snippets from Docs view</span></summary>
-
-![how to copy snippets from Docs view](./gif/html-storybook-simple.gif)
-
-</details>
-
-4. You can customize the component by modifying the controls. The code will update to match.
-
-<details className="pl-4 -mt-3 text-sm">
-  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to customize a component</span></summary>
-
-![how to customize a component](./gif/html-storybook-customized.gif)
-
-</details>
+HTML templates are provided by this Storybook in Canvas view only. To customize component options, modify the component "controls."
 
 #### How to copy HTML snippets from Canvas view
 
@@ -71,7 +49,7 @@ Canvas view is useful to isolate your view to a single rendition of the componen
 2. Make sure addons (the tabbed pane under the rendered component) are enabled by clicking on the three dots to the right of the JPL logo and checking "Show addons", or by typing `A`. If you still don't see the addons pane, you may need to toggle "Change addons orientation" in the menu (or type `D`) a couple times.
 3. Click on the "HTML" tab within the addons pane.
 4. Click on "Copy" in the bottom right of the screen or manually copy and paste the code block.
-5. You can also customize the component by modifying the controls in the "Controls" tab within the Add-ons viewer. The code will update to match.
+5. You can customize the component by modifying the controls in the "Controls" tab within the Add-ons viewer. The code will update to match.
 
 <details className="pl-4 text-sm">
   <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to copy snippets from Canvas view</span></summary>

package/src/docs/guides/accessibility.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta
   title="Guides/Accessibility"

package/src/docs/guides/responsive.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './responsive.stories'
 
 <Meta of={Stories} />

package/src/docs/introduction.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Description } from '@storybook/blocks'
+import { Meta, Description } from '@storybook/addon-docs/blocks'
 
 <Meta title="Introduction" />
 
@@ -40,3 +40,31 @@ This website uses [Storybook](https://storybook.js.org/) to display our document
 ---
 
 Maintained by [DesignLab](https://www.behance.net/JPL-DesignLab)
+
+<div>
+  <table
+    class="w-auto text-left"
+    style={{ width: 'unset' }}
+  >
+    <thead>
+      <tr class="text-left">
+        <th>Package</th>
+        <th>Version</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>[@explorer-1/common](https://www.npmjs.com/package/@explorer-1/common)</td>
+        <td>
+          <code>{packageVersions.__VERSION__EXPLORER_1_COMMON__}</code>
+        </td>
+      </tr>
+      <tr>
+        <td>[@explorer-1/vue](https://www.npmjs.com/package/@explorer-1/vue)</td>
+        <td>
+          <code>{packageVersions.__VERSION__EXPLORER_1_VUE__}</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/src/docs/overviews/base.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as BaseButtonStories from './../../components/BaseButton/BaseButton.stories'
 import * as BaseHeadingStories from './../../components/BaseHeading/BaseHeading.stories'

package/src/docs/overviews/blocks.docs.mdx.disabled

@@ -1,5 +1,5 @@
 {/* TODO: refactor to include all blocks in the vue storybook */}
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import _ as BlockAccordionStories from './../../components/BlockAccordion/BlockAccordion.stories'
 import _ as BlockCardGridStories from './../../components/BlockCardGrid/BlockCardGrid.stories'