From ecbf3edf1a704a72e979a087a4bdd17e15767eda Mon Sep 17 00:00:00 2001
From: Jess <jessica.divers@gmail.com>
Date: Tue, 10 Sep 2024 14:21:47 -0700
Subject: [PATCH] feat: APPS-2917 FTVA series date variation (#602)

* feat: start stories for cardmeta

* fix: run linter

* chore: add story, setup

* chore: lint

* feat: short date ranges on ftvaEventSeries

* chore: update story for sectionwrapper

* fix: dont show date range if ftvaEvent

* chore: lint

* fix: apply blue background to element w border radius

* chore: remove console log lint

---------

Co-authored-by: Jess Divers <jessica.divers@library.ucla.edu>
---
 src/lib-components/CardMeta.vue             | 22 +++--
 src/stories/CardMeta.stories.js             | 20 +++++
 src/stories/SectionTeaserCard.stories.js    | 95 ++++++++++++++++++++-
 src/stories/SectionWrapper.stories.js       |  5 +-
 src/styles/ftva/_block-card-with-image.scss |  9 +-
 src/styles/ftva/_section-wrapper.scss       |  4 +-
 src/utils/formatEventDates.js               |  6 ++
 7 files changed, 147 insertions(+), 14 deletions(-)

diff --git a/src/lib-components/CardMeta.vue b/src/lib-components/CardMeta.vue
index 6ae56d0ac..c506b8a56 100644
--- a/src/lib-components/CardMeta.vue
+++ b/src/lib-components/CardMeta.vue
@@ -48,7 +48,8 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  // long = 'Febuary 1, 2022', short = 'Feb 1, 2022
+  // long single date = 'Febuary 1, 2022', short = 'Feb 1, 2022
+  // long date range =  'Febuary 1, 2022 - Febuary 2, 2022', short = 'Feb 1 - Feb 2'
   dateFormat: {
     type: String,
     default: 'long',
@@ -107,8 +108,13 @@ const parsedTarget = computed(() => {
 })
 
 const parsedDate = computed(() => {
-  if (props.startDate)
-    return props.endDate ? formatDates(props.startDate, props.endDate, props.dateFormat) : formatDates(props.startDate, props.startDate, props.dateFormat)
+  if (props.startDate) {
+    if (props.sectionHandle === 'ftvaEvent')
+      return formatDates(props.startDate, props.startDate, props.dateFormat)
+
+    else
+      return props.endDate ? formatDates(props.startDate, props.endDate, props.dateFormat) : formatDates(props.startDate, props.startDate, props.dateFormat)
+  }
   return ''
 })
 
@@ -117,10 +123,10 @@ const parsedTime = computed(() => {
   if (props.startDate && props.sectionHandle === 'event')
     return formatTimes(props.startDate, props.endDate)
   // legacy behavior returns nothing when sectionHandle is not 'event',
-  // so check theme is set to avoid returning nothing
-  else if (props.startDate && theme?.value !== undefined)
+  // so check theme is set AND we are not showing ftvaEventSeries data to avoid returning nothing
+  else if (props.startDate && (props.sectionHandle !== 'ftvaEventSeries' && theme?.value !== undefined))
     return props.endDate ? formatTimes(props.startDate, props.endDate) : formatTimes(props.startDate, props.startDate)
-
+  // in all other cases incl. if it is ftvaEventSeries, return nothing
   return ''
 })
 
@@ -196,7 +202,7 @@ const classes = computed(() => {
       v-if="startDate || ongoing"
       class="date-time"
     >
-      <div v-if="ongoing">
+      <div v-if="ongoing" class="ongoing-item">
         Ongoing
       </div>
       <time
@@ -205,7 +211,7 @@ const classes = computed(() => {
         v-html="parsedDate"
       />
       <time
-        v-if="startDate"
+        v-if="startDate && sectionHandle !== 'ftvaEventSeries'"
         class="schedule-item"
         v-html="parsedTime"
       />
diff --git a/src/stories/CardMeta.stories.js b/src/stories/CardMeta.stories.js
index 9eaa06751..1999ee134 100644
--- a/src/stories/CardMeta.stories.js
+++ b/src/stories/CardMeta.stories.js
@@ -136,3 +136,23 @@ export function FtvaOnlyCategoryAndTitle() {
   `,
   }
 }
+// used on FTVA Event Series Page
+export function FTVAOngoing() {
+  return {
+    data() {
+      return { ...mockDefault }
+    },
+    components: { CardMeta },
+    template: `
+      <card-meta
+          :to="to"
+          :category="category"
+          :title="title"
+          :ongoing=true
+          :text="text"
+          :locations="locations"
+          :language="language"
+      />
+  `,
+  }
+}
diff --git a/src/stories/SectionTeaserCard.stories.js b/src/stories/SectionTeaserCard.stories.js
index 38af9f2e7..201b11fb0 100644
--- a/src/stories/SectionTeaserCard.stories.js
+++ b/src/stories/SectionTeaserCard.stories.js
@@ -96,6 +96,7 @@ const mockFtva = [
     title: 'TEST - La Région Centrale Screening',
     startDate: '2027-03-31T07:00:00+00:00',
     endDate: null,
+    sectionHandle: 'ftvaEvent',
     image: {
       id: '3131261',
       src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/pinkcloud-crop.png',
@@ -114,6 +115,7 @@ const mockFtva = [
     to: 'events/step-up-3-07-19-25',
     title: 'TEST - Step Up 3D (2010) Sequel to 2008\'s Step Up 2: The Streets and the third installment in the Step Up film series',
     startDate: '2028-03-31T07:00:00+00:00',
+    sectionHandle: 'ftvaEvent',
     image: null
   },
   {
@@ -121,6 +123,7 @@ const mockFtva = [
     to: 'events/step-up-2-07-07-25',
     title: 'TEST - Step Up 2: The Streets (2008)',
     startDate: '2026-03-31T07:00:00+00:00',
+    sectionHandle: 'ftvaEvent',
     image: {
       id: '3157357',
       src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/step2.jpg',
@@ -135,6 +138,77 @@ const mockFtva = [
     }
   },
 ]
+
+const mockFtvaSeries = [
+  {
+    uri: 'series/todd-solondz-series',
+    title: 'TEST - Todd Solondz Series',
+    startDate: '2025-11-06T08:00:00+00:00',
+    endDate: '2025-12-13T08:00:00+00:00',
+    ongoing: true,
+    sectionHandle: 'ftvaEventSeries',
+    ftvaImage: [
+      {
+        id: '3157237',
+        src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/Todd-Solondz_2024-07-04-073854_jbqd.jpg',
+        height: 1734,
+        width: 2560,
+        srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/Todd-Solondz_2024-07-04-073854_jbqd.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/Todd-Solondz_2024-07-04-073854_jbqd.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/Todd-Solondz_2024-07-04-073854_jbqd.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/Todd-Solondz_2024-07-04-073854_jbqd.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/Todd-Solondz_2024-07-04-073854_jbqd.jpg 2560w',
+        alt: null,
+        focalPoint: [
+          0.5,
+          0.5
+        ]
+      }
+    ]
+  },
+  {
+    uri: 'series/step-up-series',
+    title: 'TEST Series: The Step Up Movie Series',
+    startDate: '2025-11-07T08:00:00+00:00',
+    endDate: '2025-12-20T08:00:00+00:00',
+    ongoing: false,
+    sectionHandle: 'ftvaEventSeries',
+    ftvaImage: [
+      {
+        id: '3203293',
+        src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/step-up-7_2024-08-29-024747_kgpd.jpg',
+        height: 1438,
+        width: 2560,
+        srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/step-up-7_2024-08-29-024747_kgpd.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/step-up-7_2024-08-29-024747_kgpd.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/step-up-7_2024-08-29-024747_kgpd.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/step-up-7_2024-08-29-024747_kgpd.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/step-up-7_2024-08-29-024747_kgpd.jpg 2560w',
+        alt: null,
+        focalPoint: [
+          0.5,
+          0.5
+        ]
+      }
+    ]
+  },
+  {
+    uri: 'series/series-with-3-upcoming-events',
+    title: 'Series with 3 upcoming events',
+    startDate: '2025-11-07T08:00:00+00:00',
+    endDate: '2025-12-20T08:00:00+00:00',
+    sectionHandle: 'ftvaEventSeries',
+    ongoing: false,
+    ftvaImage: []
+  }
+]
+// Sample data from Craft CMS for FTVA Event Series uses:
+// 'uri' instead of 'to',
+// 'ftvaImage' ARRAY instead of 'image' OBJECT,
+// these fields will need to be parsed to match the component props if final data is structured this way
+const parsedFTVAEventSeries = mockFtvaSeries.map((item) => {
+  return {
+    to: item.uri,
+    title: item.title,
+    startDate: item.startDate ? item.startDate : null,
+    endDate: item.endDate ? item.endDate : null,
+    ongoing: item.ongoing,
+    sectionHandle: item.sectionHandle,
+    image: item.ftvaImage[0],
+  }
+})
 // Variations of stories below
 export function Default() {
   return {
@@ -150,7 +224,7 @@ export function Default() {
   }
 }
 
-export function FTVAWithSectionTitle() {
+export function FTVAEventDetail() {
   return {
     data() {
       return { items: mockFtva }
@@ -169,3 +243,22 @@ export function FTVAWithSectionTitle() {
   `,
   }
 }
+
+export function ftvaEventSeries() {
+  return {
+    data() {
+      return { items: parsedFTVAEventSeries }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { SectionTeaserCard },
+    template: `
+      <section-teaser-card
+        :items="items"
+      />
+  `,
+  }
+}
diff --git a/src/stories/SectionWrapper.stories.js b/src/stories/SectionWrapper.stories.js
index 6fd71be6a..4d0b8926b 100644
--- a/src/stories/SectionWrapper.stories.js
+++ b/src/stories/SectionWrapper.stories.js
@@ -204,7 +204,8 @@ const mockFtvaSeries = [
     title: 'TEST - Todd Solondz Series',
     startDate: '2025-11-06T08:00:00+00:00',
     endDate: '2025-12-13T08:00:00+00:00',
-    ongoing: false,
+    ongoing: true,
+    sectionHandle: 'ftvaEventSeries',
     image:
       {
         id: '3157237',
@@ -225,6 +226,7 @@ const mockFtvaSeries = [
     startDate: '2025-11-07T08:00:00+00:00',
     endDate: '2025-12-20T08:00:00+00:00',
     ongoing: false,
+    sectionHandle: 'ftvaEventSeries',
     image:
       {
         id: '3203293',
@@ -246,6 +248,7 @@ const mockFtvaSeries = [
     endDate: '2026-03-31T07:00:00+00:00',
     ongoing: false,
     image: null,
+    sectionHandle: 'ftvaEventSeries'
   },
 ]
 
diff --git a/src/styles/ftva/_block-card-with-image.scss b/src/styles/ftva/_block-card-with-image.scss
index aea9e25b8..aa8ff4559 100644
--- a/src/styles/ftva/_block-card-with-image.scss
+++ b/src/styles/ftva/_block-card-with-image.scss
@@ -54,11 +54,16 @@
         height: 34px;
         overflow: hidden;
 
+        .ongoing-item + .schedule-item  {
+            // hide the date range if the ongoing label is display
+            display: none;
+        }
+
         .schedule-item:nth-of-type(1) {
             position: relative;
             margin-right: 28px;
-
-            &::after {
+            // show the diamond icon after, but only if it's not the last child
+            &:not(:last-child)::after {
                 content: url('ucla-library-design-tokens/assets/svgs/icon-ftva-diamond.svg');
                 position: absolute;
                 right: -30px;
diff --git a/src/styles/ftva/_section-wrapper.scss b/src/styles/ftva/_section-wrapper.scss
index aebaf6a24..33abdaceb 100644
--- a/src/styles/ftva/_section-wrapper.scss
+++ b/src/styles/ftva/_section-wrapper.scss
@@ -31,7 +31,7 @@
             :deep(.section-teaser-card) {
                 --color-children-theme: #{$page-blue};
 
-                .card-meta {
+                .block-highlight.card {
                     background-color: var(--color-children-theme);
                 }
             }
@@ -47,7 +47,7 @@
 
 
             :deep(*) {
-                .card-meta {
+                .block-highlight.card {
                     background-color: var(--color-children-theme);
                 }
             }
diff --git a/src/utils/formatEventDates.js b/src/utils/formatEventDates.js
index 2ab5d7b0e..5d8701bd5 100644
--- a/src/utils/formatEventDates.js
+++ b/src/utils/formatEventDates.js
@@ -30,6 +30,12 @@ function formatDates(startDate = '', endDate = '', dateFormat = 'long') {
     // "Feb 11 2020"
     const day = output.slice(0, 3)
     const dateYear = output.split(' ').slice(1).join(' ')
+    if (endDate && endDate !== startDate) {
+      // Feb 11 – May 31
+      const shortFormatEndDate = format(new Date(endDate), 'MMM d')
+      const shortFormatStartDate = format(new Date(startDate), 'MMM d')
+      return `${shortFormatStartDate} - ${shortFormatEndDate}`
+    }
     return `${day} ${dateYear}`
   }