adding edu event page template

nasa-jpl · Jul 30, 2024 · 9e302a9 · 9e302a9
1 parent 43fe85f
commit 9e302a9
Show file tree

Hide file tree

Showing 10 changed files with 550 additions and 8 deletions.
diff --git a/packages/vue/src/components/BaseTag/BaseTag.vue b/packages/vue/src/components/BaseTag/BaseTag.vue
@@ -10,8 +10,8 @@ const variantMap: Attributes = {
 
 const sizeMap: Attributes = {
   sm: 'text-xs uppercase border-t-2 py-1 px-2.5',
-  md: 'text-base capitalize border-t py-2 px-3',
-  lg: 'text-lg capitalize border-t py-2 px-3'
+  md: 'text-base capitalize border-t py-1 px-3',
+  lg: 'text-lg capitalize border-t py-1 px-3'
 }
 
 interface BaseTagProps {

diff --git a/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue b/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
@@ -1,4 +1,3 @@
-\
 <template>
   <MixinCarousel
     v-if="hasContent"

diff --git a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
@@ -3,6 +3,7 @@
     <BaseHeading
       v-if="data.heading"
       level="h2"
+      v-bind="$attrs"
       class="md:mb-8 mb-5"
     >
       {{ data.heading }}
@@ -43,6 +44,7 @@
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { BlockData, RelatedLinkObject } from './../../interfaces'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 
 import RelatedLink from './../BlockRelatedLinks/RelatedLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
@@ -63,6 +65,11 @@ export default defineComponent({
       type: Object as PropType<BlockRelatedLinksObject>,
       required: true,
       default: () => ({})
+    },
+    headingSize: {
+      type: String,
+      required: false,
+      default: undefined
     }
   },
   computed: {

diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -316,6 +316,9 @@ export default defineComponent({
   &.-fluid {
     .LayoutHelper {
       @apply block;
+      &.container {
+        @apply px-0;
+      }
     }
 
     .BlockInlineImage {

diff --git a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue b/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
@@ -17,7 +17,7 @@
         <div class="sm:flex flex-wrap items-center justify-between">
           <h2
             v-if="heading"
-            class="font-primary text-gray-dark lg:text-6xl text-3xl font-semibold leading-normal tracking-normal uppercase"
+            class="text-h3 defaultTheme:uppercase"
           >
             {{ heading }}
           </h2>

diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js b/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js
@@ -6,6 +6,7 @@ import PageEventDetail from './PageEventDetail.vue'
 export default {
   title: 'Templates/PageEventDetail',
   component: PageEventDetail,
+  tags: ['!autodocs'],
   parameters: {
     html: {
       root: '#storyDecorator'
@@ -17,6 +18,7 @@ export default {
 
 // stories
 export const BaseStory = {
+  name: 'PageEventDetail',
   args: {
     data: {
       id: '285',
@@ -34,7 +36,7 @@ export const BaseStory = {
       label: 'Events',
       location: 'Webcast',
       registerLink: [],
-      heroImage: {
+      eventImage: {
         ...EventDetailHeroData.heroImage
       },
       thumbnailImage: {

diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue b/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue
@@ -32,7 +32,7 @@
     >
       <div
         v-if="data.label"
-        class="flex flex-wrap items-start mb-3"
+        class="flex flex-wrap items-start mb-4"
       >
         <nuxt-link
           class="py-3 cursor-pointer group nuxt-link-active text-subtitle text-primary can-hover:hover:text-primary-dark"
@@ -62,7 +62,7 @@
 
     <LayoutHelper indent="col-2">
       <EventDetailHero
-        :image="data.heroImage"
+        :image="data.eventImage"
         :start-date-split="formattedSplitEventDates"
       />
 
@@ -73,7 +73,7 @@
           :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
         >
           <div class="PageEventDetail__Metadata text-primary">
-            <IconCalendar class="relative mr-3" />
+            <IconCalendar class="relative mr-3 text-[1.2rem]" />
             <span>{{ formattedEventDates }}</span>
           </div>
           <div

diff --git a/packages/vue/src/templates/edu/PageContentEdu.stories.js b/packages/vue/src/templates/edu/PageContentEdu.stories.js
@@ -26,6 +26,7 @@ export default {
 
 // stories
 export const BaseStory = {
+  name: 'PageContent',
   args: {
     data: ContentPageData
   }

diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
@@ -0,0 +1,115 @@
+import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { EventDetailHeroData } from './../../../components/EventDetailHero/EventDetailHero.stories'
+import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import PageEduEventDetail from './PageEduEventDetail.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduEventDetail',
+  component: PageEduEventDetail,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*Data$/
+}
+
+// stories
+export const BaseStory = {
+  name: 'PageEduEventDetail',
+  args: {
+    data: {
+      id: '285',
+      title: 'Becoming a nasa engineer',
+      slug: 'becoming-a-nasa-engineer',
+      url: '/events/becoming-a-nasa-engineer',
+      startDate: '2022-01-23',
+      startDatetime: '2022-01-23T17:00:00-08:00',
+      startTime: '17:00:00',
+      endDate: '2022-01-25',
+      endDatetime: '2022-01-25T23:00:00-08:00',
+      endTime: '23:00:00',
+      isAllDay: false,
+      timezone: 'PST',
+      eventType: 'Workshop',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et luctus nisi. Maecenas vel turpis sem. Nullam ultricies nulla quis nisi faucibus eleifend. In turpis ante, blandit nec dapibus tempor, posuere at erat. In justo quam, imperdiet at hendrerit eget, imperdiet ut orci. ',
+      locationName: 'Webcast',
+      registerLink: [
+        {
+          text: 'Registration Link',
+          document: '',
+          page: {
+            url: '/placeholder'
+          },
+          externalLink: ''
+        }
+      ],
+      eventImage: {
+        ...EventDetailHeroData.heroImage
+      },
+      thumbnailImage: {
+        alt: '',
+        original: 'https://picsum.photos/512/288'
+      },
+      targetAudience: 'All ages',
+      body: [
+        BlockKeyPointsData,
+        {
+          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'
+        }
+      ],
+      relatedEvents: [...EventsBlockLinkCarouselData],
+      speakers: [
+        {
+          host: 'host',
+          id: '1',
+          internalLink: null,
+          name: 'Varoujan Gorjian',
+          title: 'Splitzer Research Scientest, JPL'
+        },
+        {
+          host: 'co-host',
+          id: '2',
+          image: {
+            alt: '',
+            src: {
+              height: '450',
+              url: 'https://picsum.photos/560/560',
+              width: '450'
+            }
+          },
+          internalLink: null,
+          name: 'Robert Hurt',
+          title: 'Splitzer visualisation'
+        }
+      ],
+      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: BlockLinkCardCarouselData
+    }
+  }
+}