feature: EDU Multimedia and Gallery templates (#583)

* adding PageEduMultimediaDetail template * adjusting alighment of step number on edu lesson page * adding PageEduGalleryDetail and tweaking PageEduMultimediaDetail * tweaking jump menu on PageEduGalleryDetail * updating constants to reflect all edu resource types * fixing vue build error
nasa-jpl · Aug 29, 2024 · 9b39776 · 9b39776
1 parent 5a44cef
commit 9b39776
Show file tree

Hide file tree

Showing 10 changed files with 1,021 additions and 10 deletions.
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -361,6 +361,9 @@ export default defineComponent({
       &.container {
         @apply px-0;
       }
+      > div.lg\:px-0.px-4 {
+        @apply px-0;
+      }
     }
 
     .BlockInlineImage {

diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
@@ -121,12 +121,12 @@ export default defineComponent({
       return this.invert
         ? {
             'mr-auto text-white font-bold secondary-root': index === 0,
-            'text-white font-semibold !pt-[.6rem]': index !== 0,
+            'text-white font-semibold mt-[.2rem]': index !== 0,
             '-open': this.dropdownVisible
           }
         : {
             'mr-auto text-primary font-semibold secondary-root': index === 0,
-            'text-gray-dark font-medium !pt-[.6rem]': index !== 0,
+            'text-gray-dark font-medium mt-[.2rem]': index !== 0,
             '-open': this.dropdownVisible
           }
     },

diff --git a/packages/vue/src/constants.ts b/packages/vue/src/constants.ts
@@ -1,6 +1,11 @@
 import type { DictionaryInterface, PillDictionaryInterface } from './interfaces'
 
 export const eduMetadataDictionary: PillDictionaryInterface = {
+  EDUEventPage: {
+    variant: 'primary',
+    icons: 'primary',
+    type: 'event'
+  },
   EDUCollectionsDetailPage: {
     label: 'Collection',
     variant: 'primary-inverted',
@@ -25,10 +30,41 @@ export const eduMetadataDictionary: PillDictionaryInterface = {
     icons: 'primary',
     type: 'resource'
   },
-  EDUEventPage: {
+  EDUStudentProjectPage: {
+    label: 'Student Project',
+    variant: 'secondary',
+    icons: 'secondary',
+    type: 'resource'
+  },
+  EDUImageDetailPage: {
+    label: 'Image',
     variant: 'primary',
     icons: 'primary',
-    type: 'event'
+    type: 'resource'
+  },
+  EDUInfographicDetailPage: {
+    label: 'Infographic',
+    variant: 'primary',
+    icons: 'primary',
+    type: 'resource'
+  },
+  EDUDocumentDetailPage: {
+    label: 'Document',
+    variant: 'primary',
+    icons: 'primary',
+    type: 'resource'
+  },
+  EDUVideoDetailPage: {
+    label: 'Video',
+    variant: 'primary',
+    icons: 'primary',
+    type: 'resource'
+  },
+  EDUGalleryDetailPage: {
+    label: 'Gallery',
+    variant: 'secondary',
+    icons: 'secondary',
+    type: 'resource'
   }
 }
 

diff --git a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js
@@ -0,0 +1,106 @@
+import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
+import { BlockImageData } from './../../../components/BlockImage/BlockImage.stories'
+import { BlockVideoData } from './../../../components/BlockVideo/BlockVideo.stories'
+import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
+import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
+import PageEduGalleryDetail from './PageEduGalleryDetail.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduGalleryDetail',
+  component: PageEduGalleryDetail,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*Data$/
+}
+
+const PageEduGalleryDetailData = {
+  title: 'Gallery Detail',
+  slug: 'gallery-item',
+  url: '/resources/gallery/gallery-item',
+  lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
+  thumbnailImage: {
+    alt: '',
+    original: 'https://picsum.photos/512/288'
+  },
+  authors: AboutTheAuthorData,
+
+  body: [
+    {
+      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'
+    }
+  ],
+  relatedLinks: [
+    {
+      blockType: 'RelatedLinksBlock',
+      heading: 'Related Links',
+      links: [
+        {
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Lorem ipsum dolor'
+        },
+        {
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Sit amet consectatur'
+        }
+      ]
+    }
+  ],
+  relatedContent: EventsBlockLinkCarouselData,
+  exploreMore: [...BlockLinkCardCarouselData, ...EventsBlockLinkCarouselData]
+}
+// stories
+export const BaseStory = {
+  name: 'PageEduGalleryDetail',
+  args: {
+    data: {
+      __typename: 'EDUGalleryDetailPage',
+      ...PageEduGalleryDetailData,
+      showJumpMenu: true,
+      overviewString: '<p data-block-key="f2dwn">Overview about the gallery.</p>',
+      galleryItems: [
+        {
+          blockId: `${Math.random().toString(36).slice(2)}`,
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [{ ...BlockImageData, blockType: 'ImageBlock' }]
+        },
+        {
+          blockId: `${Math.random().toString(36).slice(2)}`,
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockImageComparisonData]
+        },
+        {
+          blockId: `${Math.random().toString(36).slice(2)}`,
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockVideoData.block]
+        },
+        {
+          blockId: `${Math.random().toString(36).slice(2)}`,
+          heading: 'Gallery Item Heading',
+          description:
+            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+          media: [BlockVideoEmbedData.data]
+        }
+      ]
+    }
+  }
+}