feat: APPS-3058 Create FTVA variation of SectionStaffArticleList

src/lib-components/BlockStaffArticleList.vue

@@ -16,6 +16,10 @@ import type { ArticleStaffItemType, MediaItemType } from '@/types/types'
 
 // UTILITY FUNCTIONS
 import removeHtmlTruncate from '@/utils/removeHtmlTruncate'
+import formatSeriesDates from '@/utils/formatEventSeriesDates'
+
+// THEME
+import { useTheme } from '@/composables/useTheme'
 
 // COMPONENTS
 import ResponsiveImage from '@/lib-components/ResponsiveImage.vue'
@@ -55,6 +59,22 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  startDate: {
+    type: String,
+  },
+  endDate: {
+    type: String,
+  },
+  ongoing: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const theme = useTheme()
+
+const classes = computed(() => {
+  return ['block-staff-article-item', theme?.value || '']
 })
 
 const parsedDate = computed(() => {
@@ -76,18 +96,33 @@ const parsedTextAll = computed(() => {
     ? removeHtmlTruncate(props.description, 250)
     : ''
 })
+
+// If the component is in the FTVA site the field ongoing with exist
+// Ongoing will only be true if the event is Ongoing
+// If the event is not Ongoing
+// it will be displayed as a date range: Nov 1, 2024 - Nov 17, 2024
+// or and individual date (Nov 1, 2024)if all events in the series are on the same date
+const parsedDateDisplay = computed(() => {
+  if (theme?.value !== 'ftva')
+    return null
+  if (props.ongoing)
+    return 'Ongoing'
+  else if (props.startDate && props.endDate)
+    return formatSeriesDates(props.startDate, props.endDate, 'shortWithYear')
+  else
+    return null
+})
 </script>
 
 <template>
-  <li class="block-staff-article-item">
+  <li :class="classes">
     <ResponsiveImage
       v-if="imageExists"
       :media="props.image"
       :aspect-ratio="props.imageAspectRatio"
       object-fit="cover"
       class="image"
     />
-
     <div
       v-else
       class="molecule-no-image"
@@ -120,6 +155,13 @@ const parsedTextAll = computed(() => {
         >
           {{ parsedTextAll }}
         </div>
+
+        <div
+          v-if="parsedDateDisplay"
+          class="date"
+        >
+          {{ parsedDateDisplay }}
+        </div>
       </div>
 
       <!-- AUTHOR(S) - DATE - SUMMARY -->
@@ -156,132 +198,6 @@ const parsedTextAll = computed(() => {
   lang="scss"
   scoped
 >
-.block-staff-article-item {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-content: center;
-  align-items: center;
-  width: 100%;
-  position: relative;
-
-  margin-bottom: var(--space-xl);
-  padding-bottom: var(--space-xl);
-
-  .image {
-    width: 50%;
-    margin-right: var(--space-xl);
-  }
-
-  .molecule-no-image {
-    width: 50%;
-    height: 272px;
-    margin-right: var(--space-xl);
-    background: var(--gradient-01);
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    .molecule {
-      flex-shrink: 0;
-      position: absolute;
-      opacity: 0.7;
-    }
-  }
-
-  .meta {
-    width: calc(50% - var(--space-xl));
-    height: 272px;
-  }
-
-  .category {
-    @include overline;
-    color: var(--color-primary-blue-05);
-    margin-bottom: var(--space-s);
-  }
-
-  .title {
-    @include step-1;
-    color: var(--color-primary-blue-03);
-    margin-bottom: var(--space-s);
-    @include truncate(3);
-    @include card-clickable-area;
-  }
-
-  .byline {
-    @include step-0;
-    margin: var(--space-s) 0;
-    color: var(--color-secondary-grey-04);
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-  }
-
-  // .author {
-  //     &:after {
-  //         content: ",";
-  //         padding-right: 5px;
-  //     }
-  //     &:nth-last-child(2):after {
-  //         content: "";
-  //     }
-  // }
-  // .date:not(:only-child) {
-  //     padding-left: 20px;
-  // }
-
-  .description {
-    @include step-0;
-    color: var(--color-black);
-    @include truncate(4);
-  }
-
-  .description-summary-only {
-    @include step-0;
-    color: var(--color-black);
-    @include truncate(5);
-  }
-
-  :deep(.image) {
-    height: 272px;
-
-    .media {
-      object-fit: cover;
-    }
-  }
-
-  // Hovers
-  @media #{$has-hover} {
-    .title:hover {
-      @include link-hover;
-    }
-  }
-}
-
-// Breakpoints
-@media #{$small} {
-  .block-staff-article-item {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-
-    .image,
-    .molecule-no-image {
-      width: 100%;
-      margin-right: 0;
-      margin-bottom: var(--space-l);
-    }
-
-    .meta {
-      width: 100%;
-      height: 100%;
-
-      >*:last-child {
-        padding-bottom: 0;
-      }
-    }
-  }
-}
+@import "@/styles/default/_block-staff-article-item.scss";
+@import "@/styles/ftva/_block-staff-article-item.scss";
 </style>

src/lib-components/SectionStaffArticleList.vue

@@ -2,11 +2,16 @@
   setup
   lang="ts"
 >
+import { computed } from 'vue'
 import type { PropType } from 'vue'
 
 // TYPESCRIPT
 import type { BlockStaffArticleListItemType } from '@/types/types'
 
+// THEME
+import { useTheme } from '@/composables/useTheme'
+
+// CHILD COMPONENTS
 import BlockStaffArticleList from '@/lib-components/BlockStaffArticleList.vue'
 
 const { items, sectionTitle } = defineProps({
@@ -20,10 +25,16 @@ const { items, sectionTitle } = defineProps({
   },
 })
 // TODO? we could parse the heroImage here instead of on the page similar to flexible/highlight
+
+const theme = useTheme()
+
+const classes = computed(() => {
+  return ['section-staff-article-list', theme?.value || '']
+})
 </script>
 
 <template>
-  <section class="section-staff-article-list">
+  <section :class="classes">
     <div class="container">
       <div
         v-if="sectionTitle"
@@ -42,6 +53,9 @@ const { items, sectionTitle } = defineProps({
           :authors="item.authors"
           :description="item.description"
           :external-resource-url="item.externalResourceUrl"
+          :start-date="item.startDate"
+          :end-date="item.endDate"
+          :ongoing="item.ongoing"
         />
       </ul>
     </div>
@@ -52,56 +66,6 @@ const { items, sectionTitle } = defineProps({
   lang="scss"
   scoped
 >
-.section-staff-article-list {
-  --divider-color: var(--color-secondary-grey-02);
-  max-width: 100%;
-  margin: auto;
-
-  .container {
-    max-width: $container-l-main + px;
-    margin: auto;
-  }
-
-  .section-title {
-    @include step-3;
-    line-height: $line-height--1;
-    text-transform: capitalize;
-    color: var(--color-primary-blue-03);
-    margin-bottom: var(--space-xl);
-  }
-
-  .block-staff-article-list {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-
-    .block-staff-article-item {
-      border-bottom: 2px dotted var(--divider-color);
-
-      &:last-child {
-        border-bottom: 0;
-        padding: 0;
-        margin: 0;
-      }
-    }
-
-    @for $i from 1 through 30 {
-      :deep(.block-staff-article-item:nth-child(#{$i}) .molecule) {
-        left: calc(random(500) * -1) + px;
-      }
-    }
-  }
-
-  @media (min-width: 1025px) and (max-width: 1300px) {
-    padding: 0 var(--unit-gutter);
-  }
-
-  @media #{$medium} {
-    margin-left: var(--unit-gutter);
-    margin-right: var(--unit-gutter);
-  }
-}
+@import "@/styles/default/_section-staff-article-list.scss";
+@import "@/styles/ftva/_section-staff-article-list.scss";
 </style>