chore: integrating all page templates from www-frontend (#510)

* integrating all page templates from www-frontend * fixing stories for various homepage components * fixing old placeholder images * adding and fixing timeline-related components
nasa-jpl · Jul 22, 2024 · 58ae058 · 58ae058
1 parent cf8f068
commit 58ae058
Show file tree

Hide file tree

Showing 118 changed files with 6,013 additions and 583 deletions.
diff --git a/.gitignore b/.gitignore
@@ -62,6 +62,9 @@ storybook_compiled
 .build-*
 .netlify
 
+# Typescript
+*.d.ts
+
 # Tailwind
 .www-frontend_temp/
 

diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
@@ -158,10 +158,12 @@ const preview: Preview = {
             ['Overview', 'MixinAnimationCaret', 'MixinVideoBg', 'MixinCarousel'],
             'Utilities',
             ['Overview', '*'],
-            'EDU'
+            'WWW'
           ],
           'Mixins',
-          ['Overview']
+          ['Overview'],
+          'Templates',
+          ['WWW', 'EDU', 'PageContent']
         ]
       }
     }

diff --git a/apps/vue-storybook/package.json b/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",

diff --git a/package.json b/package.json
@@ -23,13 +23,13 @@
   },
   "scripts": {
     "clean": "pnpm clean:nodemodules && pnpm clean:dist && pnpm clean:nuxt",
-    "clean:rimraf": "rimraf \"**/node_modules\"",
-    "clean:cache": "find . -name '.cache' -type d -prune -exec rm -rf '{}' +",
-    "clean:dist": "find . -name 'dist' -type d -prune -exec rm -rf '{}' +",
-    "clean:nodemodules": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
-    "clean:nuxt": "find . -name '.nuxt' -type d -prune -exec rm -rf '{}' +",
+    "clean:nodemodules": "rimraf \"**/node_modules\"",
+    "clean:cache": "rimraf \"**/.cache\"",
+    "clean:dist": "rimraf \"**/dist\"",
+    "clean:nuxt": "rimraf \"**/.nuxt\"",
     "refresh": "pnpm clean && pnpm i",
-    "nuke": "rimraf pnpm-lock.yaml && pnpm refresh",
+    "nuke-frontend": "rimraf pnpm-lock.yaml && pnpm run refresh",
+    "nuke": "pnpm run clean:nodemodules && pnpm run nuke-frontend",
     "preinstall": "npx --yes only-allow pnpm",
     "preupdate": "npx --yes only-allow pnpm",
     "lint": "pnpm run -r --if-present lint",

diff --git a/...torybook/src/images/bg-earth-1440x810.jpg → ...k/src/public/images/bg-earth-1440x810.jpg b/...torybook/src/images/bg-earth-1440x810.jpg → ...k/src/public/images/bg-earth-1440x810.jpg
diff --git a/...orybook/src/images/bg-planet-1440x810.jpg → .../src/public/images/bg-planet-1440x810.jpg b/...orybook/src/images/bg-planet-1440x810.jpg → .../src/public/images/bg-planet-1440x810.jpg
diff --git a/...torybook/src/images/bg-stars-1440x810.jpg → ...k/src/public/images/bg-stars-1440x810.jpg b/...torybook/src/images/bg-stars-1440x810.jpg → ...k/src/public/images/bg-stars-1440x810.jpg
diff --git a/...-storybook/src/images/mission-cuberrt.png → ...ook/src/public/images/mission-cuberrt.png b/...-storybook/src/images/mission-cuberrt.png → ...ook/src/public/images/mission-cuberrt.png
diff --git a/...storybook/src/images/mission-cuberrt.webp → ...ok/src/public/images/mission-cuberrt.webp b/...storybook/src/images/mission-cuberrt.webp → ...ok/src/public/images/mission-cuberrt.webp
diff --git a/...torybook/src/images/mission-ecostress.png → ...k/src/public/images/mission-ecostress.png b/...torybook/src/images/mission-ecostress.png → ...k/src/public/images/mission-ecostress.png
diff --git a/...orybook/src/images/mission-ecostress.webp → .../src/public/images/mission-ecostress.webp b/...orybook/src/images/mission-ecostress.webp → .../src/public/images/mission-ecostress.webp
diff --git a/...ybook/src/images/mission-grace-fo-75.webp → ...rc/public/images/mission-grace-fo-75.webp b/...ybook/src/images/mission-grace-fo-75.webp → ...rc/public/images/mission-grace-fo-75.webp
diff --git a/...storybook/src/images/mission-grace-fo.png → ...ok/src/public/images/mission-grace-fo.png b/...storybook/src/images/mission-grace-fo.png → ...ok/src/public/images/mission-grace-fo.png
diff --git a/...es/mission-highlights-800h-at-jupiter.png → ...es/mission-highlights-800h-at-jupiter.png b/...es/mission-highlights-800h-at-jupiter.png → ...es/mission-highlights-800h-at-jupiter.png
diff --git a/...ghlights-800h-earth-orbiting-on-earth.png → ...ghlights-800h-earth-orbiting-on-earth.png b/...ghlights-800h-earth-orbiting-on-earth.png → ...ghlights-800h-earth-orbiting-on-earth.png
diff --git a/...s/mission-highlights-800h-earths-moon.png → ...s/mission-highlights-800h-earths-moon.png b/...s/mission-highlights-800h-earths-moon.png → ...s/mission-highlights-800h-earths-moon.png
diff --git a/.../mission-highlights-800h-interstellar.jpg → .../mission-highlights-800h-interstellar.jpg b/.../mission-highlights-800h-interstellar.jpg → .../mission-highlights-800h-interstellar.jpg
diff --git a/...mission-highlights-800h-mars-orbiting.png → ...mission-highlights-800h-mars-orbiting.png b/...mission-highlights-800h-mars-orbiting.png → ...mission-highlights-800h-mars-orbiting.png
diff --git a/...mages/mission-highlights-800h-on-mars.png → ...mages/mission-highlights-800h-on-mars.png b/...mages/mission-highlights-800h-on-mars.png → ...mages/mission-highlights-800h-on-mars.png
diff --git a/...n-storybook/src/images/mission-jason3.png → ...book/src/public/images/mission-jason3.png b/...n-storybook/src/images/mission-jason3.png → ...book/src/public/images/mission-jason3.png
diff --git a/...-storybook/src/images/mission-jason3.webp → ...ook/src/public/images/mission-jason3.webp b/...-storybook/src/images/mission-jason3.webp → ...ook/src/public/images/mission-jason3.webp
diff --git a/...mon-storybook/src/images/mission-oco2.png → ...rybook/src/public/images/mission-oco2.png b/...mon-storybook/src/images/mission-oco2.png → ...rybook/src/public/images/mission-oco2.png
diff --git a/...on-storybook/src/images/mission-oco2.webp → ...ybook/src/public/images/mission-oco2.webp b/...on-storybook/src/images/mission-oco2.webp → ...ybook/src/public/images/mission-oco2.webp
diff --git a/packages/html/dist/assets/css/explorer-1.min.css b/packages/html/dist/assets/css/explorer-1.min.css
diff --git a/packages/html/dist/index.html b/packages/html/dist/index.html
@@ -18,7 +18,7 @@
         <title>JPL Design System Assets</title>
       </head>
       <body>
-        <div class="bg-dark-blue py-5 px-4 3xl:px-0 mb-10">
+        <div class="bg-jpl-blue-darker py-5 px-4 3xl:px-0 mb-10">
           <div class="flex items-center justify-between max-w-screen-3xl mx-auto">
             <h1 class="text-subtitle text-white">JPL Design System Assets</h1>
             <a
@@ -790,7 +790,7 @@ <h2 class="text-h3">Heading</h2>
             </div>
           </nav>
         </div>
-        <div class="bg-dark-blue py-8 mt-10 px-4 3xl:px-0">
+        <div class="bg-jpl-blue-darker py-8 mt-10 px-4 3xl:px-0">
           <p class="max-w-screen-3xl text-right text-opacity-50 mx-auto text-subtitle text-white">
             Maintained by DesignLab
           </p>

diff --git a/packages/html/src/components/HeroMedia/HeroMedia.stories.js b/packages/html/src/components/HeroMedia/HeroMedia.stories.js
@@ -4,7 +4,6 @@ import { HeroMediaTemplate } from './HeroMedia'
 export default {
   title: 'Components/Blocks/Heroes/Media Only',
   excludeStories: /.*Data$/,
-  decorators: [(Story) => `<div id="storyRoot" class="absolute inset-0">${Story()}</div>`],
   argTypes: {
     image: {
       type: { name: 'array', required: false },
@@ -24,9 +23,7 @@ export default {
     }
   },
   parameters: {
-    html: {
-      root: '#storyRoot'
-    },
+    layout: 'fullscreen',
     viewMode: 'docs',
     docs: {
       inlineStories: false,

diff --git a/packages/vue/components.d.ts b/packages/vue/components.d.ts
diff --git a/packages/vue/lib/main.ts b/packages/vue/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,

diff --git a/packages/vue/package.json b/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",

diff --git a/packages/vue/src/components/BaseAudio/BaseAudio.vue b/packages/vue/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]
     }
   }

diff --git a/packages/vue/src/components/BaseHeading/BaseHeading.stories.js b/packages/vue/src/components/BaseHeading/BaseHeading.stories.js
@@ -25,7 +25,6 @@ export default {
     slots: {
       default: 'BaseStory slot content'
     },
-    viewMode: 'docs',
     docs: {
       description: {
         component:

diff --git a/packages/vue/src/components/BaseHeading/BaseHeading.vue b/packages/vue/src/components/BaseHeading/BaseHeading.vue
@@ -18,24 +18,22 @@ 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: {
     computedTag(): string {
       if (this.level) {
         return this.level
       } else {
-        return this.size
+        return this.size || 'h2'
       }
     },
     computedClass(): string {

diff --git a/packages/vue/src/components/BasePlaceholder/BasePlaceholder.stories.js b/packages/vue/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>`

diff --git a/packages/vue/src/components/BlockAudio/BlockAudio.stories.js b/packages/vue/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'

diff --git a/packages/vue/src/components/BlockDialog/BlockDialog.stories.js b/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>`
+  })
+}
diff --git a/packages/vue/src/components/BlockDialog/BlockDialog.stories.mdx b/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).