@explorer-1/vue 0.1.4 → 0.1.6

package/lib/main.ts

@@ -4,8 +4,10 @@ import filters from './../src/utils/filters'
 import type { Explorer1Theme } from '../src/interfaces'
 
 // stores
+import { useCuratedGalleryStore } from './../src/store/curatedGallery'
 import { useHeaderStore } from './../src/store/header'
 import { useThemeStore } from './../src/store/theme'
+import { useSearchStore } from './../src/store/search'
 // mixins
 import {
   mixinTransparentHeader,
@@ -211,7 +213,9 @@ export {
   type Explorer1Theme,
   dayjs,
   filters,
+  useCuratedGalleryStore,
   useHeaderStore,
+  useSearchStore,
   useThemeStore,
   mixinTransparentHeader,
   mixinGetLinkText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "a11y-dialog": "^8.0.4",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",

package/src/components/BaseAudio/BaseAudio.vue

@@ -332,7 +332,6 @@ export default defineComponent({
       // this.$root?.$on('play', this.pauseOthers)
     },
     getAudio() {
-      console.log(this.$el.querySelectorAll('audio')[0])
       return this.$el.querySelectorAll('audio')[0]
     }
   }

package/src/components/BaseHeading/BaseHeading.stories.js

@@ -25,7 +25,6 @@ export default {
     slots: {
       default: 'BaseStory slot content'
     },
-    viewMode: 'docs',
     docs: {
       description: {
         component:

package/src/components/BaseHeading/BaseHeading.vue

@@ -18,16 +18,14 @@ export default defineComponent({
   name: 'BaseHeading',
   props: {
     level: {
-      type: (String as PropType<HeadingLevel>) || null,
+      type: String as PropType<HeadingLevel | undefined>,
       required: false,
-      default: 'h2',
-      validator: (prop: string): boolean => Object.keys(headings).includes(prop)
+      default: 'h2'
     },
     size: {
-      type: String as PropType<HeadingLevel>,
+      type: String as PropType<HeadingLevel | '' | undefined>,
       required: false,
-      default: '',
-      validator: (prop: string): boolean => Object.keys(headings).includes(prop)
+      default: ''
     }
   },
   computed: {
@@ -35,7 +33,7 @@ export default defineComponent({
       if (this.level) {
         return this.level
       } else {
-        return this.size
+        return this.size || 'h2'
       }
     },
     computedClass(): string {

package/src/components/BasePlaceholder/BasePlaceholder.stories.js

@@ -5,7 +5,6 @@ export default {
   component: BasePlaceholder,
   excludeStories: /.*Data$/,
   parameters: {
-    viewMode: 'docs',
     docs: {
       description: {
         component: `An animated loading component frequently used as a placeholder for <a href="/story/components-search-searchresultcard--standard-result" target="_blank">SearchResultCard</a>`

package/src/components/BlockAudio/BlockAudio.stories.js

@@ -15,12 +15,11 @@ export const BlockAudioData = {
       path: '0001'
     },
     createdAt: '2020-12-10T07:38:30.951546+00:00',
-    file: 'http://127.0.0.1:9000/media/media/05_Da_Funk_Call_Out_Research_Hook.mp3',
+    file: '/audio/file_example_MP3_700KB.mp3',
     fileExtension: 'mp3',
     fileOgg: '',
     id: '1',
-    sources:
-      "[{'src': 'http://127.0.0.1:9000/media/media/05_Da_Funk_Call_Out_Research_Hook.mp3', 'type': 'audio/mpeg'}]",
+    sources: "[{'src': '/audio/file_example_MP3_700KB.mp3', 'type': 'audio/mpeg'}]",
     thumbnail: '',
     title: 'audio file',
     type: 'audio'

package/src/components/BlockDialog/BlockDialog.stories.js

@@ -0,0 +1,56 @@
+import BlockDialog from './BlockDialog.vue'
+
+export default {
+  title: 'Components/Blocks/BlockDialog',
+  component: BlockDialog,
+  argTypes: {
+    overlayClose: { control: { type: 'boolean' } }
+  }
+}
+
+export const BaseStory = {
+  name: 'BlockDialog',
+  args: {
+    dialogId: 'dialog-id',
+    headingId: 'heading-id'
+  },
+  render: (args) => ({
+    components: { BlockDialog },
+    setup() {
+      return { args }
+    },
+    template: `<div>
+    <button type="button" data-a11y-dialog-show="dialog-id">Open the dialog</button>
+    <BlockDialog v-bind="args" dialog-box-class="max-w-2xl">
+      <div class="p-3 sm:p-5">
+        <h2 id="heading-id">Dialog title</h2>
+        <hr
+          aria-hidden="true"
+          class="bg-gray-light-mid w-full h-2px border-0 my-3"
+        />
+        <div class="dialog-main py-3 max-h-64 overflow-auto relative">
+          <p class="py-2">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+            enim ad minim veniam, quis nostrud exercitation ullamco laboris
+            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+            in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+            sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
+        <div class="my-3">
+          <a
+            href="#"
+            target=""
+            rel=""
+            class="group cursor-pointer -default underline text-theme-color can-hover:hover:text-theme-color-hover"
+          >
+            <span class="break-words">Explore</span>
+          </a>
+        </div>
+      </div>
+    </BlockDialog>
+  </div>`
+  })
+}

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

@@ -0,0 +1,28 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import * as Stories from './BlockDialog.stories'
+
+<Meta of={Stories} />
+
+# BlockDialog
+
+This component is an accessible dialog window that utilizes the efficient and lightweight `a11y-dialog` package.
+It adheres to the [Dialog (Modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) outlined in the Accessible Rich Internet Applications (ARIA) Authoring Practices Guide.
+
+Additionally, it is unopinionated with styling.
+
+<Canvas
+  of={Stories.BaseStory}
+  className="sbdocs-preview-full-width"
+/>
+
+### Basic Usage
+
+To trigger dialog opening, use the `data-a11y-dialog-show` attribute with the value set to the `id` of the dialog element you want to open.
+
+```
+<button type="button" data-a11y-dialog-show="your-dialog-id">
+  Open the dialog
+</button>
+```
+
+See [all documentation in the repository](https://github.com/KittyGiraudel/a11y-dialog).

package/src/components/BlockDialog/BlockDialog.vue

@@ -0,0 +1,132 @@
+<template>
+  <div
+    v-if="dialogId"
+    :id="dialogId"
+    ref="DialogRef"
+    :aria-labelledby="headingId"
+    aria-hidden="true"
+    class="BlockDialog fixed top-0 left-0 z-60 flex w-full h-full overflow-auto"
+  >
+    <div
+      class="dialog-overlay bg-gray-dark bg-opacity-90 fixed top-0 left-0 w-full h-full"
+      :data-a11y-dialog-hide="overlayClose ? '' : undefined"
+    ></div>
+    <div class="container px-4 m-auto">
+      <div
+        role="document"
+        class="dialog-box relative m-auto bg-white"
+        :class="dialogBoxClass"
+      >
+        <button
+          type="button"
+          data-a11y-dialog-hide
+          aria-label="Close dialog"
+          class="button-close absolute right-0 flex-shrink-0 text-white focus:outline-none focus:ring-2"
+        >
+          <IconClose />
+        </button>
+        <slot>Content</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import A11yDialog from 'a11y-dialog'
+import IconClose from './../Icons/IconClose.vue'
+
+export default defineComponent({
+  name: 'BlockDialog',
+  components: {
+    IconClose
+  },
+  props: {
+    dialogId: {
+      type: String,
+      required: true
+    },
+    headingId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    overlayClose: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    dialogBoxClass: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['show', 'hide'],
+  data(): {
+    dialog: A11yDialog | null
+    content: HTMLElement | null
+  } {
+    return {
+      dialog: null,
+      content: null
+    }
+  },
+  mounted() {
+    this.init()
+    ;(this.dialog as A11yDialog).show()
+  },
+  beforeUnmount() {
+    if (this.dialog) {
+      this.dialog.destroy()
+    }
+  },
+  methods: {
+    init() {
+      this.dialog = this.$refs.DialogRef
+        ? new A11yDialog(this.$refs.DialogRef as HTMLElement)
+        : null
+      console.log(this.dialog)
+      if (this.dialog) {
+        this.dialog
+          .on('show', () => {
+            document.body.classList.add('overflow-hidden')
+            this.$emit('show')
+          })
+          .on('hide', () => {
+            document.body.classList.remove('overflow-hidden')
+            this.$emit('hide')
+          })
+      }
+    }
+  }
+})
+</script>
+<style lang="scss">
+.BlockDialog {
+  // Make sure the dialog container and all its descendants are not visible and not focusable when it is hidden.
+  &[aria-hidden='true'] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .dialog-box {
+      border: 1px solid;
+    }
+  }
+
+  .dialog-overlay,
+  .dialog-box {
+    @apply animate-fadeIn;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  // Offset by the size of the icon.
+  .button-close {
+    top: -2rem;
+  }
+}
+</style>

package/src/components/BlockHeading/BlockHeading.stories.js

@@ -9,8 +9,8 @@ export default {
 export const BlockHeadingData = {
   blockType: 'HeadingBlock',
   heading: 'Heading Text',
-  level: 'h3',
-  size: 'h3'
+  level: 'h2',
+  size: 'h2'
 }
 
 // stories

package/src/components/BlockImage/BlockImage.stories.js

@@ -10,7 +10,6 @@ export default {
   },
   excludeStories: /.*Data$/,
   parameters: {
-    viewMode: 'docs',
     docs: {
       description: {
         component:

package/src/components/BlockImageCarouselItem/BlockImageCarouselItem.vue

@@ -22,7 +22,6 @@
           :height="theImageData.src.height"
           :alt="theImageData.alt"
           object-fit-class="contain"
-          image-class="swiper-lazy"
           loading="lazy"
         />
       </BaseImagePlaceholder>

package/src/components/BlockImageGallery/BlockImageGallery.vue

@@ -57,7 +57,6 @@
               :height="cover.src.height"
               alt=""
               object-fit-class="cover"
-              image-class="swiper-lazy"
               loading="lazy"
             />
           </BaseImagePlaceholder>

package/src/components/BlockLinkCarousel/BlockLinkCarousel.vue

@@ -46,11 +46,13 @@ export default defineComponent({
     },
     items: {
       type: Array,
-      required: false
+      required: false,
+      default: undefined
     },
     heading: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {

package/src/components/BlockQuote/BlockQuote.stories.js

@@ -5,7 +5,6 @@ export default {
   component: BlockQuote,
   excludeStories: /.*Data$/,
   parameters: {
-    viewMode: 'docs',
     docs: {
       description: {
         component:

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

@@ -25,20 +25,31 @@ export default {
       options: Object.keys(variants)
     }
   },
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
-    })
-  ],
   parameters: {
-    html: {
-      root: '#storyDecorator'
-    },
-    viewMode: 'canvas'
+    layout: 'fullscreen'
   },
   excludeStories: /.*(Data)$/
 }
 
+export const BlockStreamfieldTruncatedData = {
+  body: [
+    BlockKeyPointsData,
+    BlockHeadingData,
+    {
+      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'
+    },
+    BlockImageComparisonData,
+    BlockHeadingData,
+    {
+      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'
+    },
+    BlockIframeEmbedData
+  ]
+}
 export const BlockStreamfieldData = {
   body: [
     BlockKeyPointsData,

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -42,8 +42,9 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object as PropType<BlockData>,
-      required: false
+      type: Object as PropType<Partial<BlockData>>,
+      required: false,
+      default: undefined
     }
   },
   mounted() {

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -12,7 +12,7 @@
           variant="secondary"
           :to="topics[0].url"
           class="py-3"
-          use-primary-color
+          :use-primary-color="themeStore.theme === 'ThemeEdu'"
         >
           <span :itemprop="schema ? 'articleSection' : undefined">
             {{ topics[0].title }}
@@ -21,7 +21,7 @@
       </div>
       <span
         v-else-if="label"
-        class="text-subtitle py-3"
+        class="text-subtitle py-3 edu:text-primary"
       >
         <template v-if="!labelLink">
           {{ label }}
@@ -31,6 +31,7 @@
             variant="secondary"
             :to="labelLink"
             class="py-3"
+            :use-primary-color="themeStore.theme === 'ThemeEdu'"
           >
             {{ label }}
           </BaseLink>

package/src/components/DsnWidget/DsnWidget.vue

@@ -12,7 +12,7 @@
       >
         <p
           v-if="data.heading"
-          class="text-subtitle text-jpl-red mb-4"
+          class="text-subtitle text-primary mb-4"
         >
           {{ data.heading }}
         </p>
@@ -21,7 +21,7 @@
     <template v-else>
       <p
         v-if="data.heading"
-        class="text-subtitle text-jpl-red mb-4"
+        class="text-subtitle text-primary mb-4"
       >
         {{ data.heading }}
       </p>

package/src/components/HomepageEmbedBlock/HomepageEmbedBlock.stories.js

@@ -4,15 +4,8 @@ import HomepageEmbedBlock from './HomepageEmbedBlock.vue'
 export default {
   title: 'Components/WWW/Homepage/HomepageEmbedBlock',
   component: HomepageEmbedBlock,
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
-    })
-  ],
   parameters: {
-    html: {
-      root: '#storyDecorator'
-    },
+    layout: 'fullscreen',
     viewMode: 'canvas'
   },
   excludeStories: /.*(Data)$/