feat: APPS-2910 assemble event series page

assets/styles/global.scss

@@ -1,3 +1,11 @@
+// site-specific variables
+:root {
+    --max-width: 1160px;
+    // COLORS
+    --pale-blue: #E7EDF2;
+    --subtitle-grey: #676767;
+}
+
 html {
     box-sizing: border-box;
 }

cypress/e2e/eventSeriesDetailPage.cy.js

@@ -0,0 +1,7 @@
+describe('Event Series Detail page', () => {
+  it('Visit the Homepage', () => {
+    cy.visit('/series/step-up-series')
+
+    cy.percySnapshot('eventseriesdetailpage', { widths: [768, 992, 1200] })
+  })
+})

gql/queries/FTVAEventSeriesDetail.gql

@@ -47,29 +47,60 @@ query FTVAEventSeriesDetail ($slug: [String!]) {
     }
   }
   upcomingEvents: entries(section: "ftvaEvent", relatedToEntries: { section: "ftvaEventSeries", slug: $slug }, startDateWithTime: ">= now", orderBy: "startDateWithTime ASC") {
-      uri
+      to: uri
       sectionHandle
-      eventTitle
+      title: eventTitle
       startDateWithTime
-      ftvaImage {
+      startDate: startDateWithTime @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
+    	startTime: startDateWithTime @formatDateTime(format: "TH:i:s", timezone: "America/Los_Angeles")
+      image: ftvaImage {
         ...Image
       }
-      ftvaEventFilters {
+      tagLabels: ftvaEventFilters {
         title
       }
   }
-  pastEvents: entries(section: "ftvaEvent",  relatedToEntries: { section: "ftvaEventSeries", slug: $slug }, startDateWithTime: "< now", orderBy: "startDateWithTime ASC") {
-    uri
-    sectionHandle
-    eventTitle
-    startDateWithTime
-    ftvaImage {
+  pastEvents: entries(section: "ftvaEvent", relatedToEntries: { section: "ftvaEventSeries", slug: $slug }, startDateWithTime: "< now", orderBy: "startDateWithTime ASC") {
+    to: uri
+    title: eventTitle
+    startDateWithTime @formatDateTime(
+                    format: "Y-m-d\\TH:i"
+                    timezone: "America/Los_Angeles"
+                )
+    startDate: startDateWithTime @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
+    startTime: startDateWithTime @formatDateTime(format: "TH:i:s", timezone: "America/Los_Angeles")
+    image: ftvaImage {
       ...Image
     }
-    ftvaEventFilters {
+    tagLabels: ftvaEventFilters {
       title
     }
   }
+  # CAN BE REMOVED ONCE NEW ONES ARE WORKING
+  # upcomingEvents: entries(section: "ftvaEvent", relatedToEntries: { section: "ftvaEventSeries", slug: $slug }, startDateWithTime: ">= now", orderBy: "startDateWithTime ASC") {
+  #     uri
+  #     sectionHandle
+  #     eventTitle
+  #     startDateWithTime
+  #     ftvaImage {
+  #       ...Image
+  #     }
+  #     ftvaEventFilters {
+  #       title
+  #     }
+  # }
+  # pastEvents: entries(section: "ftvaEvent",  relatedToEntries: { section: "ftvaEventSeries", slug: $slug }, startDateWithTime: "< now", orderBy: "startDateWithTime ASC") {
+  #   uri
+  #   sectionHandle
+  #   eventTitle
+  #   startDateWithTime
+  #   ftvaImage {
+  #     ...Image
+  #   }
+  #   ftvaEventFilters {
+  #     title
+  #   }
+  # }
   otherSeriesOngoing: entries(section: "ftvaEventSeries", limit: 3, ongoing: true) {
     uri
     sectionHandle

package.json

@@ -39,6 +39,6 @@
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
 		"ucla-library-design-tokens": "^5.22.0",
-		"ucla-library-website-components": "3.12.0"
+		"ucla-library-website-components": "3.18.0"
 	}
 }

pages/events/[slug].vue

@@ -85,8 +85,9 @@ const parsedFtvaEventSeries = computed(() => {
   }
 
   // Destructure each series item object and its image object
-  const seriesEvents = firstSeries.ftvaEvent.map(({ image, ...rest }) => ({
+  const seriesEvents = firstSeries.ftvaEvent.map(({ image, to, ...rest }) => ({
     ...rest,
+    to: `/events/${to}`,
     image: image && image.length > 0 ? image[0] : null,
   }))
 
@@ -228,6 +229,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
       v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
       section-title="Upcoming events in this series"
       theme="paleblue"
+      class="series-section-wrapper"
     >
       <SectionTeaserCard
         v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
@@ -239,21 +241,14 @@ const parsedFTVAEventScreeningDetails = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-// VARS - TO DO move to global? reference tokens?
-// WIDTH, HEIGHT, SPACING
-$max-width: 1160px;
-$banner-height: 520px;
-// COLORS
-$pale-blue: #E7EDF2;
-
 // PAGE STYLES
 .page-event-detail {
   position: relative;
 
   &:before {
     content: '';
     position: absolute;
-    background-color: $pale-blue;
+    background-color: var(--pale-blue);
     aspect-ratio: 1440 / 520;
     max-height: 518px; //prevent overflow on large screens
     min-height: 225px; //prevent too much shrinking on small screens
@@ -263,19 +258,18 @@ $pale-blue: #E7EDF2;
 
   .one-column {
     width: 100%;
-    max-width: $max-width;
+    max-width: var(--max-width);
     margin: 0 auto;
 
     :deep(.nav-breadcrumb) {
       padding: 0px;
     }
   }
 
-  /* .page-event-detail .two-column .sidebar-column */
   .two-column {
     position: relative;
     width: 100%;
-    max-width: $max-width;
+    max-width: var(--max-width);
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -307,6 +301,8 @@ $pale-blue: #E7EDF2;
       display: none;
     }
 
+    // move these styles to a component so they can be reused & kept in sync
+    // with /series/[slug].vue
     .sidebar-column {
       min-width: 314px;
       width: 30%;
@@ -315,7 +311,7 @@ $pale-blue: #E7EDF2;
       top: 0;
       right: 0;
       padding-top: var(--space-2xl);
-      padding-bottom: 20px;
+      padding-bottom: 40px;
 
       .sidebar-content-wrapper {
         position: sticky;
@@ -376,4 +372,11 @@ $pale-blue: #E7EDF2;
     }
   }
 }
+
+// TEMPORARY STYLES THAT SHOULD BE PART OF SECTIONWRAPPER
+.series-section-wrapper {
+  :deep(.section-header) {
+    margin-bottom: 28px;
+  }
+}
 </style>