Skip to content

Commit

Permalink
feature: PageEduTeachableMoment template (#560)
Browse files Browse the repository at this point in the history
* adding teachable moment page template

* adding EDUTeachableMomentPage to eduMetadataDictionary

* removing unused imports

* adding last update date to lesson and teachable moment templates
  • Loading branch information
stephiescastle authored Aug 22, 2024
1 parent 19b4887 commit 41c7dc9
Show file tree
Hide file tree
Showing 8 changed files with 402 additions and 12 deletions.
17 changes: 17 additions & 0 deletions packages/common/src/scss/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -82,4 +82,21 @@
@apply -mt-29; // just a little more than -28 to get rid of the barely visible white line
}
}
.ThemeEdu {
// applied globally via /layouts/default.vue
.nav-offset {
@apply pt-18; // height of mobile header

@screen lg {
@apply pt-0;
}
}

// for use on pages with flush-top hero sections
.-nav-offset {
@screen lg {
@apply -mt-1; // get rid of the barely visible white line
}
}
}
}
8 changes: 7 additions & 1 deletion packages/vue/src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ export const eduMetadataDictionary: PillDictionaryInterface = {
variant: 'primary',
type: 'resource'
},
EDUTeachableMomentPage: {
label: 'Teachable Moment',
variant: 'primary',
type: 'resource'
},
EDUEventPage: {
variant: 'primary',
type: 'event'
Expand All @@ -24,5 +29,6 @@ export const searchContentTypeToPageType: DictionaryInterface = {
missions_mission: 'Mission',
eduevents_edueventpage: 'EDUEventPage',
eduresources_eduexplainerarticlepage: 'EDUExplainerArticlePage',
eduresources_edulessonpage: 'EDULessonPage'
eduresources_edulessonpage: 'EDULessonPage',
eduresources_eduteachablemomentpage: 'EDUTeachableMomentPage'
}
2 changes: 2 additions & 0 deletions packages/vue/src/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -214,11 +214,13 @@ export type MetaPanelTheme = 'primary' | 'secondary' | 'stars'
export interface PageObject {
__typename: string
contentType: string
lastPublishedAt?: string
breadcrumb?: string
slug: string
url: string
title: string
getTopicsForDisplay?: Topic[]
showJumpMenu?: boolean
label?: string
summary?: string
topper?: string
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export const BaseStory = {
seoTitle: 'Test Lesson',
slug: 'test-lesson',
publicationDate: '2024-08-16',
lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
thumbnailImage: {
__typename: 'CustomImage',
original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
Expand Down
26 changes: 15 additions & 11 deletions packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
Original file line number Diff line number Diff line change
Expand Up @@ -114,15 +114,6 @@ const heroInline = computed((): boolean => {
return false
})
const computedClass = computed((): string => {
if (heroInline.value || heroEmpty) {
return 'pt-5 lg:pt-12'
} else if (!heroInline.value) {
return '-nav-offset'
}
return ''
})
const sectionOrder = [
'top',
'overview',
Expand Down Expand Up @@ -262,8 +253,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
<template>
<div
v-if="data"
class="ThemeVariantLight"
:class="computedClass"
class="ThemeVariantLight pt-5 lg:pt-12"
>
<LayoutHelper
indent="col-2"
Expand Down Expand Up @@ -409,5 +399,19 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
:heading="data.relatedContentHeading"
:items="data.relatedContent"
/>
<LayoutHelper
v-if="data.lastPublishedAt"
indent="col-3"
class="lg:my-18 my-10"
>
<p class="border-t border-gray-light-mid pt-8">
<strong>Lesson Last Updated:</strong>
{{
// @ts-ignore
$filters.displayDate(data.lastPublishedAt)
}}
</p>
</LayoutHelper>
</div>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ defineExpose({
itemprop="articleBody"
:data="data.body"
/>
<div class="bg-stars bg-primary-darker">
<div class="py-10 text-center text-white">
<strong>Related News goes here</strong>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
import { BlockIframeEmbedData } from './../../../components/BlockIframeEmbed/BlockIframeEmbed.stories.js'
import { BlockImageCarouselData } from './../../../components/BlockImageCarousel/BlockImageCarousel.stories'
import { BlockImageData } from './../../../components/BlockImage/BlockImage.stories'
import { BlockHeadingData } from './../../../components/BlockHeading/BlockHeading.stories'
import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
import { BaseVideoData } from './../../../components/BaseVideo/BaseVideo.stories'
import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
import {
BlockStreamfieldTruncatedData,
BlockStreamfieldMinimalData
} from './../../../components/BlockStreamfield/BlockStreamfield.stories'
import PageEduTeachableMoment from './PageEduTeachableMoment.vue'

export default {
title: 'Templates/EDU/PageEduTeachableMoment',
component: PageEduTeachableMoment,
tags: ['!autodocs'],
decorators: [
() => ({
template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
})
],
parameters: {
layout: 'fullscreen',
html: {
root: '#storyDecorator'
}
},
excludeStories: /.*Data$/
}

export const BaseStory = {
args: {
data: {
__typename: 'EDUTeachableMomentPage',
title: 'A Teachable Moment',
lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
url: 'http://localhost:3000/edu/resources/teachable-moment',
pageType: 'EDUTeachableMomentPage',
contentType: 'edu_resources.EDUTeachableMomentPage',
showJumpMenu: true,
thumbnailImage: {
__typename: 'CustomImage',
original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
alt: ''
},
hero: [
{
...HeroMediaData,
blockType: 'HeroImageBlock'
}
],
heroConstrain: true,

body: BlockStreamfieldTruncatedData.body,

relatedLinks: BlockRelatedLinksData.data,
relatedContentHeading: 'Related Content',
relatedContent: BlockLinkCardCarouselData
}
}
}

export const HeroCarousel = {
args: {
data: {
...BaseStory.args.data,
hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
}
}
}

export const HeroImageComparison = {
args: {
data: {
...BaseStory.args.data,
hero: [
{
...BlockImageComparisonData
}
]
}
}
}

export const HeroVideo = {
args: {
data: {
...BaseStory.args.data,
hero: [
{
blockType: 'VideoBlock',
video: BaseVideoData,
caption: 'Lorem ipsum dolor sit amet',
credit: 'NASA/JPL'
}
]
}
}
}

export const HeroVideoEmbed = {
args: {
data: {
...BaseStory.args.data,
hero: [
{
...BlockVideoEmbedData.data,
embed: {
embed: `<iframe title="Meet NASA's Diana Trujillo - Embedded Hero" width="480" height="270" src="https://www.youtube.com/embed/vUuUyYqI83Q?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
},
blockType: 'VideoEmbedBlock'
}
]
}
}
}

export const HeroIframeEmbed = {
args: {
data: {
...BaseStory.args.data,
hero: [
{
...BlockIframeEmbedData
}
]
}
}
}

export const NoHero = {
args: {
data: {
...BaseStory.args.data,
hero: []
}
}
}
Loading

0 comments on commit 41c7dc9

Please sign in to comment.