adding and fixing timeline-related components

apps/vue-storybook/package.json

@@ -62,6 +62,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@whitespace/storybook-addon-html": "^6.1.1",
+    "a11y-dialog": "^8.0.4",
     "autoprefixer": "^10.4.19",
     "axe-playwright": "^2.0.1",
     "chromatic": "^11.5.5",

packages/vue/package.json

@@ -43,6 +43,7 @@
   "devDependencies": {
     "@explorer-1/prettier-config": "workspace:*",
     "@vitejs/plugin-vue": "^5.0.4",
+    "a11y-dialog": "^8.0.4",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",

packages/vue/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>`
+  })
+}

packages/vue/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).

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

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

packages/vue/src/components/TimelineDialog/TimelineDialog.stories.js

@@ -0,0 +1,47 @@
+import TimelineDialog from './TimelineDialog.vue'
+
+export default {
+  title: 'Components/WWW/TimelineDialog',
+  component: TimelineDialog
+}
+
+export const BaseStory = {
+  name: 'TimelineDialog',
+  args: {
+    data: {
+      id: '7535b4d1-e803-49dd-ad06-8925912464af',
+      heading: 'First Rocket Tests by Founders of What Would Become the Jet Propulsion Laboratory',
+      date: '1936-10-31',
+      displayDate: 'October 31, 1936',
+      milestoneLabel: 'CATEGORY LABEL',
+      description:
+        'Theodore von Kármán, the head of the Guggenheim Aeronautical Laboratory at Caltech, is overseeing pioneering work on rocket propulsion when a pair of young rocket enthusiasts, John W. Parsons and Edward S. Forman, come to him looking for help. Von Kármán connects them to some grad students, and on Halloween, a group goes out to the Arroyo Seco, a dry canyon wash at the foot of the San Gabriel Mountains on the northwest edge of Pasadena. The seven men -- Frank Malina, A.O. Smith, William Bollay, Carlos Wood, William Rockefeller, Parsons and Forman -- try four times to ignite a small rocket motor to gather thrust data, with only the last attempt succeeding (and setting fire to the outside of the motor, too).    ',
+      milestoneLinkLabel: 'Optional CTA Link',
+      embed: null,
+      milestoneLink: {
+        externalLink: 'https://mars.nasa.gov/insight/',
+        page: null
+      },
+      image: {
+        alt: 'Fourth image',
+        src: {
+          height: 400,
+          url: 'https://picsum.photos/800/400',
+          width: 800
+        },
+        srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+      }
+    },
+    dialogBoxClass: 'max-w-xl'
+  },
+  render: (args) => ({
+    components: { TimelineDialog },
+    setup() {
+      return { args }
+    },
+    template: `<div>
+    <button type="button" :data-a11y-dialog-show="args.data.id">Open the dialog</button>
+    <TimelineDialog :data="args.data" :dialog-box-class="args.dialogBoxClass"></TimelineDialog>
+  </div>`
+  })
+}

packages/vue/src/components/TimelineDialog/TimelineDialog.stories.mdx

@@ -0,0 +1,26 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import * as Stories from './TimelineDialog.stories'
+
+<Meta of={Stories} />
+
+# TimelineDialog
+
+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.
+
+<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).