diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue index a26cc6cc..74da17e7 100644 --- 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 index 38eb7236..72734221 100644 --- 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 index 37a637f6..c8dc3905 100644 --- 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 new file mode 100644 index 00000000..db1a764a --- /dev/null +++ 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: + '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.
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.
\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: 'Overview about the gallery.
', + galleryItems: [ + { + blockId: `${Math.random().toString(36).slice(2)}`, + heading: 'Gallery Item Heading', + description: + 'Description that is rich text.
', + media: [{ ...BlockImageData, blockType: 'ImageBlock' }] + }, + { + blockId: `${Math.random().toString(36).slice(2)}`, + heading: 'Gallery Item Heading', + description: + 'Description that is rich text.
', + media: [BlockImageComparisonData] + }, + { + blockId: `${Math.random().toString(36).slice(2)}`, + heading: 'Gallery Item Heading', + description: + 'Description that is rich text.
', + media: [BlockVideoData.block] + }, + { + blockId: `${Math.random().toString(36).slice(2)}`, + heading: 'Gallery Item Heading', + description: + 'Description that is rich text.
', + media: [BlockVideoEmbedData.data] + } + ] + } + } +} diff --git a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue new file mode 100644 index 00000000..d07ddf32 --- /dev/null +++ b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue @@ -0,0 +1,238 @@ + + ++ Gallery Last Updated: + {{ + // @ts-ignore + $filters.displayDate(data.lastPublishedAt) + }} +
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.
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.
\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: 'Image', + args: { + data: { + __typename: 'EDUImageDetailPage', + ...PageEduMultimediaDetailData, + imageAsHero: BlockImageData.image, + heroImageCaption: 'This is the hero image caption' + } + } +} + +export const Infographic = { + args: { + data: { + __typename: 'EDUInfographicDetailPage', + ...PageEduMultimediaDetailData, + imageAsHero: BlockImageData.image, + heroImageCaption: 'This is the hero image caption for the infographic' + } + } +} + +export const Video = { + args: { + data: { + __typename: 'EDUVideoDetailPage', + ...PageEduMultimediaDetailData, + video: [BlockVideoData.block], + transcript: `Preparing to Land Perseverance
+The following tests, conducted from 2017-2020, helped prepare NASA's Perseverance rover for its landing on Mars.
+[music]
+Centrifuge Spin Test
` + } + } +} + +export const VideoEmbed = { + args: { + data: { + __typename: 'EDUVideoDetailPage', + ...PageEduMultimediaDetailData, + video: [BlockVideoEmbedData.data], + transcript: `Preparing to Land Perseverance
+The following tests, conducted from 2017-2020, helped prepare NASA's Perseverance rover for its landing on Mars.
+[music]
+Centrifuge Spin Test
+Santa Clarita, CA June 2019
+[music]
+Parachute Firing Test
+Moses Lake, WA May 2019
+[music]
+[mortar firing]
+[mortar firing]
+[clapping]
` + } + } +} + +export const Document = { + args: { + data: { + __typename: 'EDUDocumentDetailPage', + ...PageEduMultimediaDetailData, + heroImage: { + ...BlockImageData.image + }, + heroImageCaption: 'This is the hero image caption for the document', + document: { + url: 'https://jpl.nasa.gov' + }, + credit: 'Document credit attribution
' + } + } +} + +export const Gallery = { + args: { + data: { + __typename: 'EDUGalleryDetailPage', + ...PageEduMultimediaDetailData, + galleryItems: [ + { + heading: 'Gallery Item Heading', + description: + 'Description that is rich text.
', + media: [BlockImageData.image] + }, + { + heading: 'Gallery Item Heading', + description: + 'Description that is rich text.
', + media: [BlockImageComparisonData] + }, + { + heading: 'Gallery Item Heading', + description: + 'Description that is rich text.
', + media: [BlockVideoData.block] + }, + { + heading: 'Gallery Item Heading', + description: + 'Description that is rich text.
', + media: [BlockVideoEmbedData.data] + } + ], + showJumpMenu: true + } + } +} diff --git a/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue b/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue new file mode 100644 index 00000000..c793586c --- /dev/null +++ b/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue @@ -0,0 +1,434 @@ + + ++ {{ mediaLabel }} Last Updated: + {{ + // @ts-ignore + $filters.displayDate(data.lastPublishedAt) + }} +
+