feat: APPS-2528 FlexibleGridGalleryCards component (#431)

* feat: refactor, add ResponsiveVideo to Banner components

* fix: video autoplay and sizing

* fix: typescript errors in banner and item components

* fix: update logic to show icons in ButtonLink

* fix: apply :deep selector to change BlockDate icon color

* fix: correct colors for slots, hatches in Banner components

* fix: correct index used in NewLightbox MediaItem key attr

* fix: update ResponsiveImage prop in DualMasonry component

* fix: broken tag in MastheadSec story

* fix: buttonlink component logic

* feat: add ImpactNumberCard components

* feat: add GridGallery component

* fix: buttonlink component logic

* fix: buttonlink component logic

* feat: add flexible-grid-gallery-cards comp, story, spec, types

* task: remove console messages

* refactor: remove obsolete css selector

* fix: remove unneeded prop, computed prop

* task: rebase gridGallery component

* refactor: remove redundant properties

---------

Co-authored-by: tinuola <[email protected]>

src/lib-components/BannerHeader.vue

@@ -128,9 +128,6 @@ const sectionName = computed(() => {
   return getSectionName(props.to)
 })
 
-// eslint-disable-next-line no-console
-console.log(sectionName.value)
-
 const classes = computed(() => {
   return [
     'banner-header',

src/lib-components/Flexible/GridGalleryCards.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { PropType } from 'vue'
+import type { GridGalleryItemType } from '@/types/types'
+import type { FlexibleGridGalleryItem } from '@/types/flexible_gridgallery'
+
+import GridGallery from '@/lib-components/GridGallery.vue'
+import stripMeapFromURI from '@/utils/stripMeapFromURI'
+
+const { block } = defineProps ({
+  block: {
+    type: Object as PropType<FlexibleGridGalleryItem>,
+    default: () => {},
+  },
+})
+
+function flattenTimeLineStructure(galleryData: FlexibleGridGalleryItem) {
+  const flattenedValues = []
+  for (const subitem of galleryData.gridGalleryCards) {
+    const obj: GridGalleryItemType = {}
+    obj.headlineText
+                  = subitem.contentLink && subitem.contentLink[0]
+        ? subitem.contentLink[0].headlineText
+        : subitem.headlineText
+    obj.snippet
+                  = subitem.contentLink && subitem.contentLink[0]
+        ? subitem.contentLink[0].snippet
+        : subitem.snippet
+    obj.featured = subitem.featured === 'true'
+    obj.to = stripMeapFromURI(
+      subitem.contentLink && subitem.contentLink[0]
+        ? subitem.contentLink[0].to
+        : subitem.to
+    )
+    obj.image
+                  = subitem.contentLink
+                  && subitem.contentLink[0]
+                  && subitem.contentLink[0].heroImage
+        ? subitem.contentLink[0].heroImage[0].image[0]
+        : subitem.image
+          ? subitem.image[0]
+          : {}
+    flattenedValues.push(obj)
+  }
+
+  return flattenedValues
+}
+
+const parseGalleryCards = computed(() => {
+  const timelineData = flattenTimeLineStructure(block)
+  return timelineData
+})
+</script>
+
+<template>
+  <div class="grid-gallery-cards">
+    <div
+      v-if="
+        (block.gridGalleryCards && block.gridGalleryCards.length > 0)
+          || block.sectionTitle
+      "
+      class="section-header"
+    >
+      <h2
+        v-if="block.sectionTitle"
+        class="section-title"
+        v-html="block.sectionTitle"
+      />
+      <div
+        v-if="block.sectionSummary"
+        class="section-summary"
+        v-html="block.sectionSummary"
+      />
+    </div>
+
+    <GridGallery
+      v-if="block.gridGalleryCards && block.gridGalleryCards.length > 0"
+      class="section-summary"
+      :items="parseGalleryCards"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.grid-gallery-cards {
+  margin: 12px auto;
+  position: relative;
+
+  .section-header {
+      margin-bottom: var(--space-xl);
+  }
+
+  .section-title {
+      @include step-3;
+      color: var(--color-primary-blue-03);
+      margin-bottom: var(--space-m);
+  }
+  .section-summary {
+      @include step-0;
+      color: var(--color-black);
+
+      :deep(p) {
+          margin: 0;
+      }
+  }
+}
+</style>

src/lib-components/index.js

@@ -31,6 +31,7 @@ export { default as CardMeta } from './CardMeta.vue'
 export { default as DividerGeneral } from './DividerGeneral.vue'
 export { default as DividerWayFinder } from './DividerWayFinder.vue'
 export { default as FlexibleMediaGalleryNewLightbox } from './Flexible/MediaGallery/NewLightbox.vue'
+export { default as FlexibleGridGalleryCards } from './Flexible/GridGalleryCards.vue'
 export { default as FooterMain } from './FooterMain.vue'
 export { default as FooterPrimary } from './FooterPrimary.vue'
 export { default as FooterSock } from './FooterSock.vue'

src/stories/Flexible_GridGalleryCards.spec.js

@@ -0,0 +1,10 @@
+describe('FLEXIBLE / Grid Gallery Cards', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=flexible-grid-gallery-cards--default&args=&viewMode=story'
+    )
+    cy.get('.grid-gallery-cards').should('exist')
+
+    cy.percySnapshot('FLEXIBLE / Grid Gallery Cards: Default')
+  })
+})

src/stories/Flexible_GridGalleryCards.stories.js

@@ -0,0 +1,77 @@
+import FlexibleGridGalleryCards from '@/lib-components/Flexible/GridGalleryCards'
+
+export default {
+  title: 'FLEXIBLE / Grid Gallery Cards',
+  component: FlexibleGridGalleryCards,
+}
+
+const mock = {
+  id: '40361',
+  sectionTitle: 'Section Title: Grid Gallery Cards',
+  sectionSummary: '<p>Section Summary: Grid Gallery Cards</p>',
+  gridGalleryCards: [
+    {
+      id: '40362',
+      contentLink: [
+        {
+          contentType: 'article',
+          title: 'La Niña',
+          snippet:
+                        '<p>La Niña is an oceanic and atmospheric phenomenon that is the colder counterpart of El Niño, as part of the broader El Niño–Southern Oscillation climate pattern.</p>',
+          to: 'about/news/la-niña',
+          heroImage: [
+            {
+              image: [
+                {
+                  id: '20637',
+                  src: 'https://static.library.ucla.edu/craftassetstest/LaNina-Jet-Wintertime-Pattern.jpg',
+                  height: 1997,
+                  width: 2560,
+                  srcset: 'https://static.library.ucla.edu/craftassetstest/_375xAUTO_crop_center-center_none/LaNina-Jet-Wintertime-Pattern.jpg 375w, https://static.library.ucla.edu/craftassetstest/_960xAUTO_crop_center-center_none/LaNina-Jet-Wintertime-Pattern.jpg 960w, https://static.library.ucla.edu/craftassetstest/_1280xAUTO_crop_center-center_none/LaNina-Jet-Wintertime-Pattern.jpg 1280w, https://static.library.ucla.edu/craftassetstest/_1920xAUTO_crop_center-center_none/LaNina-Jet-Wintertime-Pattern.jpg 1920w, https://static.library.ucla.edu/craftassetstest/_2560xAUTO_crop_center-center_none/LaNina-Jet-Wintertime-Pattern.jpg 2560w',
+                  alt: 'La Nina Jet Wintertime Pattern',
+                  focalPoint: [0.5, 0.5],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      featured: 'false',
+    },
+    {
+      id: '40363',
+      featured: 'true',
+      titleGeneral: 'This is a featured content',
+      snippet: '<p>Virtual library demo</p>',
+      image: [
+        {
+          id: '40342',
+          src: 'https://static.library.ucla.edu/craftassetstest/images/virtual-screening-room-toll-sea_2022-09-21-214436_bnja.jpeg',
+          height: 1870,
+          width: 2560,
+          srcset: 'https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/virtual-screening-room-toll-sea_2022-09-21-214436_bnja.jpeg 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/virtual-screening-room-toll-sea_2022-09-21-214436_bnja.jpeg 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/virtual-screening-room-toll-sea_2022-09-21-214436_bnja.jpeg 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/virtual-screening-room-toll-sea_2022-09-21-214436_bnja.jpeg 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/virtual-screening-room-toll-sea_2022-09-21-214436_bnja.jpeg 2560w',
+          alt: 'Virtual screening room toll sea',
+          focalPoint: [0.5, 0.5],
+        },
+      ],
+      externalLink: 'http://www.google.com',
+    },
+  ],
+  typeHandle: 'gridGalleryCards',
+}
+
+export function Default() {
+  return {
+    data() {
+      return {
+        block: mock,
+      }
+    },
+    components: { FlexibleGridGalleryCards },
+    template: `
+        <flexible-grid-gallery-cards
+            :block="block"
+        />
+    `,
+  }
+}

src/types/flexible_gridgallery.ts

@@ -0,0 +1,28 @@
+import type { MediaItemType } from '@/types/types'
+
+export interface FlexibleGridGalleryItem {
+  id: string
+  sectionSummary: string
+  sectionTitle: string
+  gridGalleryCards: FlexibleGridGalleryCard[]
+  typeHandle: string
+}
+
+export interface FlexibleGridGalleryCard {
+  id: string
+  featured: string | boolean
+  contentLink?: FlexibleGridGalleryContentLink[]
+  titleGeneral: string
+  snippet: string
+  image: MediaItemType[]
+  headlineText: string
+  to: string
+}
+
+export interface FlexibleGridGalleryContentLink {
+  contentType: string
+  headlineText: string
+  snippet: string
+  to: string
+  heroImage: { image: MediaItemType[] }[]
+}

src/types/types.ts

@@ -46,11 +46,11 @@ export interface EventItemType {
 }
 
 export interface GridGalleryItemType {
-  image: MediaItemType
-  monthYear: string
-  to: string
-  headlineText: string
-  snippet: string
+  image?: MediaItemType
+  monthYear?: string
+  to?: string
+  headlineText?: string
+  snippet?: string
   featured?: boolean
 }
 

src/utils/stripMeapFromURI.js

@@ -0,0 +1,6 @@
+export default function stripMeapFromURI(uri = '') {
+  if (uri === null)
+    return uri // don't try string method .replace
+
+  return uri.replace('meap/', '')
+}