@explorer-1/vue 0.1.4 → 0.1.5

package/src/components/MissionDetailHighlights/MissionDetailHighlights.stories.js

@@ -1,9 +1,9 @@
-import imagePlanetJupiter from '@explorer-1/common-storybook/src/images/mission-highlights-800h-at-jupiter.png'
-import imagePlanetEarth from '@explorer-1/common-storybook/src/images/mission-highlights-800h-earth-orbiting-on-earth.png'
-import imageMoon from '@explorer-1/common-storybook/src/images/mission-highlights-800h-earths-moon.png'
-import imageInterstellar from '@explorer-1/common-storybook/src/images/mission-highlights-800h-interstellar.jpg'
-import imagePlanetMarsA from '@explorer-1/common-storybook/src/images/mission-highlights-800h-mars-orbiting.png'
-import imagePlanetMarsB from '@explorer-1/common-storybook/src/images/mission-highlights-800h-on-mars.png'
+import imagePlanetJupiter from '@explorer-1/common-storybook/src/public/images/mission-highlights-800h-at-jupiter.png'
+import imagePlanetEarth from '@explorer-1/common-storybook/src/public/images/mission-highlights-800h-earth-orbiting-on-earth.png'
+import imageMoon from '@explorer-1/common-storybook/src/public/images/mission-highlights-800h-earths-moon.png'
+import imageInterstellar from '@explorer-1/common-storybook/src/public/images/mission-highlights-800h-interstellar.jpg'
+import imagePlanetMarsA from '@explorer-1/common-storybook/src/public/images/mission-highlights-800h-mars-orbiting.png'
+import imagePlanetMarsB from '@explorer-1/common-storybook/src/public/images/mission-highlights-800h-on-mars.png'
 
 import MissionDetailHighlights from './MissionDetailHighlights.vue'
 export default {

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

@@ -7,7 +7,7 @@ import * as Stories from './MixinCarousel.stories'
 
 This is a `swiper.js` wrapper for the carousels that consist of multiple cards in view that also bleed to full width.
 
-<Canvas of={Stories.Default} />
+<Canvas of={Stories.BaseStory} />
 
 ### Variants
 

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

@@ -9,10 +9,7 @@ import NavDesktopDropdownMore from './NavDesktopDropdownMore.vue'
 export default {
   title: 'Navigation/Headers/WWW/NavDesktop',
   component: NavDesktop,
-  excludeStories: /.*Data$/,
-  parameters: {
-    viewMode: 'canvas'
-  }
+  excludeStories: /.*Data$/
 }
 
 export const NavDesktopTopHatData = {

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

@@ -9,9 +9,10 @@ import NavDesktopDropdownMore from './../NavDesktop/NavDesktopDropdownMore.vue'
 export default {
   title: 'Navigation/Headers/EDU/NavDesktopEdu',
   component: NavDesktop,
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   parameters: {
-    viewMode: 'canvas'
+    layout: 'fullscreen'
   }
 }
 

package/src/components/NavMobile/NavMobileEdu.stories.js

@@ -4,9 +4,10 @@ import NavMobile from './NavMobile.vue'
 export default {
   title: 'Navigation/Headers/EDU/NavMobile',
   component: NavMobile,
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   parameters: {
-    viewMode: 'canvas',
+    layout: 'fullscreen',
     viewport: {
       defaultViewport: 'mobile2'
     },

package/src/components/RoboticsDetailStats/RoboticsDetailStats.stories.js

@@ -31,7 +31,7 @@ export const RoboticsDetailStatsData = {
   animalAnalogName: 'Lemur',
   animalAnalogIcon: {
     webp: {
-      url: 'https://images.unsplash.com/photo-1535468899888-92047ec84051?fm=webp&crop=entropy&w=320&h=320&fit=crop'
+      url: 'https://picsum.photos/320/320'
     },
     src: {
       url: 'https://picsum.photos/320/320'

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

package/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).

package/src/components/TimelineDialog/TimelineDialog.vue

@@ -0,0 +1,145 @@
+<template>
+  <BlockDialog
+    v-if="data"
+    :dialog-id="data.id"
+    :heading-id="`${data.id}-heading`"
+    :dialog-box-class="dialogBoxClass"
+    @hide="() => $emit('hide')"
+  >
+    <div class="p-3 sm:p-10">
+      <p class="font-primary text-xl sm:text-4xl font-bold leading-relaxed">
+        <template v-if="data.displayDate">
+          {{ data.displayDate }}
+        </template>
+        <template v-else>
+          {{ theDate }}
+        </template>
+      </p>
+      <hr
+        aria-hidden="true"
+        class="bg-gray-light-mid w-full h-2px border-0 my-3"
+      />
+      <div
+        tabindex="0"
+        class="dialog-main py-3 overflow-auto relative"
+      >
+        <h2
+          :id="`${data.id}-heading`"
+          class="mt-4 mb-2 font-primary text-xl sm:text-2xl font-bold sm:leading-normal"
+        >
+          {{ data.heading }}
+        </h2>
+        <p
+          v-if="data.milestoneLabel"
+          class="font-primary text-gray-mid-dark text-lg sm:text-2xl font-normal leading-relaxed uppercase my-3"
+        >
+          {{ data.milestoneLabel }}
+        </p>
+        <BaseImagePlaceholder
+          v-if="data.image"
+          aspect-ratio="16:9"
+          transparent-mode
+          class="sm:mx-20 mb-5 sm:mb-8"
+        >
+          <BaseImage
+            :src="data.image.src.url"
+            :width="data.image.src.width"
+            :height="data.image.src.height"
+            :alt="data.image.alt"
+            object-fit-class="contain"
+            image-class="swiper-lazy"
+            loading="lazy"
+          />
+        </BaseImagePlaceholder>
+        <!-- @ts-ignore -->
+        <BlockVideoEmbed :data="data" />
+        <BlockText
+          variant="medium"
+          :text="data.description"
+        />
+      </div>
+      <div class="my-3">
+        <BaseLink
+          v-if="data.milestoneLink"
+          variant="default"
+          :to="data.milestoneLink.page ? data.milestoneLink.page.url : undefined"
+          :href="data.milestoneLink.externalLink"
+          link-class="block mt-3 text-center sm:text-left text-2xl"
+        >
+          {{ getLinkLabel() }}
+        </BaseLink>
+      </div>
+    </div>
+  </BlockDialog>
+</template>
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import BlockDialog from './../BlockDialog/BlockDialog.vue'
+import { Milestone } from './../../templates/www/PageTimeline/BlockMilestone.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BlockText from './../BlockText/BlockText.vue'
+import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+
+export default defineComponent({
+  name: 'TimelineDialog',
+  components: {
+    BlockDialog,
+    BaseImage,
+    BaseImagePlaceholder,
+    BaseLink,
+    BlockText,
+    BlockVideoEmbed
+  },
+  props: {
+    data: {
+      type: Object as PropType<Milestone>,
+      required: false,
+      default: undefined
+    },
+    dialogBoxClass: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  emits: ['hide'],
+  computed: {
+    theDate(): string {
+      // @ts-ignore
+      return this.$filters.displayDate(this.data.date)
+    }
+  },
+  methods: {
+    getLinkLabel() {
+      if (this.data?.milestoneLink?.page) {
+        return this.data.milestoneLinkLabel || 'Visit page'
+      }
+      return this.data?.milestoneLinkLabel || 'Visit website'
+    }
+  }
+})
+</script>
+<style lang="scss">
+.Dialog {
+  .dialog-main {
+    max-height: 55vh;
+
+    /* Fade effect */
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 1rem,
+      black calc(100% - 1rem),
+      transparent 100%
+    );
+  }
+
+  @media (forced-colors: active) {
+    hr {
+      border: 1px solid;
+    }
+  }
+}
+</style>

package/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.stories.js

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

package/src/components/TopicDetailStreamfield/TopicDetailStreamfield.stories.js

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

package/src/docs/utils/ComponentItem.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 /* Custom react component for rendering TOC of components
  * docs: https://storybook.js.org/docs/react/writing-docs/docs-page#custom-inline-rendering
  */

package/src/store/curatedGallery.ts

@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+/** Stores the state of user preferences on curated gallery detail pages
+ */
+
+export interface State {
+  showGridView?: boolean
+}
+
+// @ts-expect-error
+export const useCuratedGalleryStore = defineStore('curatedGallery', {
+  state: (): State => {
+    return {
+      showGridView: undefined
+    }
+  },
+  actions: {
+    updateView(value: boolean) {
+      this.showGridView = value
+    }
+  },
+  // @pinia-plugin-persistedstate/nuxt
+  persist: true
+})

package/src/store/search.ts

@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia'
+/** Stores the state of various user preferences on listing and search pages
+ */
+
+export interface State {
+  showSidebar: boolean | undefined
+  showGridView: boolean | undefined
+  showSidebarForGalleries: boolean | undefined
+  showGridViewForGalleries: boolean | undefined
+  showGridViewForPodcasts: boolean | undefined
+}
+
+// @ts-expect-error
+export const useSearchStore = defineStore('search', {
+  state: (): State => {
+    return {
+      showSidebar: undefined,
+      showGridView: undefined,
+      showSidebarForGalleries: undefined,
+      showGridViewForGalleries: undefined,
+      showGridViewForPodcasts: undefined
+    }
+  },
+  actions: {
+    updateSidebar(value: boolean) {
+      this.showSidebar = value
+    },
+    updateGridView(value: boolean) {
+      this.showGridView = value
+    },
+    updateSidebarForGalleries(value: boolean) {
+      this.showSidebarForGalleries = value
+    },
+    updateGridViewForGalleries(value: boolean) {
+      this.showGridViewForGalleries = value
+    },
+    updateGridViewForPodcasts(value: boolean) {
+      this.showGridViewForPodcasts = value
+    }
+  },
+  // @pinia-plugin-persistedstate/nuxt
+  persist: true
+})

package/src/templates/PageAudioDetail/PageAudioDetail.stories.js

@@ -0,0 +1,106 @@
+import { BlockRelatedLinksData } from './../../components/BlockRelatedLinks/BlockRelatedLinks.stories'
+import { BlockLinkTileCarouselData } from './../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import PageAudioDetail from './PageAudioDetail.vue'
+
+export default {
+  title: 'Templates/PageAudioDetail',
+  component: PageAudioDetail,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
+}
+
+export const PageAudioDetailData = {
+  data: {
+    contentType: 'audio_detail.AudioDetailPage',
+    label: 'Audio',
+    publicationDate: '2020-12-09',
+    relatedPages: BlockLinkTileCarouselData,
+    seoTitle: 'Testing Audio',
+    series: null,
+    subscribeLinks: [],
+    slug: 'testing-audio',
+    summary: 'some summary of the audio file',
+    thumbnailImage: {
+      alt: '',
+      id: '341',
+      url: '/public/images/bg-earth-1440x810.jpg'
+    },
+    title: 'Testing Audio',
+    topicLabel: 'JPL Life',
+    transcript: `<p>Preparing to Land Perseverance</p>
+    <p>The following tests, conducted from 2017-2020, helped prepare NASA's Perseverance rover for its landing on Mars.</p>
+    <p>[music]</p>
+    <p>Centrifuge Spin Test</p>
+    <p>Santa Clarita, CA June 2019</p>
+    <p>[music]</p>
+    <p>Parachute Firing Test</p>
+    <p>Moses Lake, WA May 2019</p>
+    <p>[music]</p>
+    <p>[mortar firing]</p>
+    <p>[mortar firing]</p>
+    <p>[clapping]</p>
+    <p>Parachute Wind Tunnel Test</p>
+    <p>NASA's Ames Research Center </p>
+    <p>Moffett Field, CA June 2017</p>
+    <p>[music]</p>
+    <p>[mortar firing]</p>
+    <p>[wind]</p>
+    <p>[clapping]</p>
+    <p>Lander Vision System Test</p>
+    <p>For Avoiding Landing Hazards</p>
+    <p>Death Valley, CA May 2019</p>
+    <p>[helicopter taking off]</p>
+    <p>[music]</p>
+    <p>Rover Wheel Drop Test</p>
+    <p>NASA's Jet Propulsion Laboratory</p>
+    <p>Southern CA August 2019</p>
+    <p>[wheel dropping]</p>
+    <p>[hitting rock]</p>`,
+    uploadedMedia: {
+      collection: {
+        id: '1',
+        name: 'Root',
+        path: '0001'
+      },
+      createdAt: '2020-12-10T07:38:30.951546+00:00',
+      duration: '11',
+      file: '/audio/file_example_MP3_700KB.mp3',
+      fileExtension: 'mp3',
+      fileOgg: '',
+      id: '1',
+      sources: "[{'src': '/audio/file_example_MP3_700KB.mp3', 'type': 'audio/mpeg'}]",
+      thumbnail: '',
+      title: 'audio file',
+      type: 'audio'
+    },
+    relatedLinks: [BlockRelatedLinksData.data]
+  }
+}
+
+// stories
+export const AudioDetail = { args: { ...PageAudioDetailData } }
+
+export const PodcastEpisode = {
+  args: {
+    data: {
+      ...PageAudioDetailData.data,
+      series: {
+        title: 'On a mission',
+        url: '/podcasts/on-a-mission'
+      },
+      subscribeLinks: [
+        {
+          heading: 'Subscribe',
+          description:
+            'Lorem ipsum dolor sit amet consectatur adipscing. Vivamus vel rhoncus ipsum, at ultrices urna.',
+          links: [
+            {
+              externalLink: 'http://google.com',
+              text: 'Google'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}