search

UCLALibrary / ucla-library-website-components

This is a library of Vue components that will be used in UCLA Library Nuxt websites.
Other
4 stars 1 forks source link

Component Request - FTVA Banner Image Carousel #532

Open tinuola opened 1 week ago

tinuola commented 1 week ago

Component Description

This component is used on the Homepage and on the Event Detail page to display a collection of banner/headline images.

Homepage banner-carousel

banner-carousel-mobile

Event event-detail-carousel

Design

Slots

No slots needed.

Props

Additional details pending for homepage data

props: {
 imageCarousel: {
        type: Array,
        default: () => []
    },

  ...

    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    example: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Child components

  1. BlockTag
  2. ResponsiveImage
  3. NewLightBox FTVA variant
  4. SVGS 
    import SvgArrowRight from 'ucla-library-design-tokens/assets/svgs/icon-arrow-right.svg'
import SvgArrowLeft from 'ucla-library-design-tokens/assets/svgs/icon-arrow-left.svg'
import SvgIconMoleculeBullet from 'ucla-library-design-tokens/assets/svgs/icon-molecule-bullet-filled.svg'

Developer Tips

  1. If only single image, use the ResponsiveImage component; if multiple images, use the Carousel

  2. Carousel loop behavior:

    • If on the last image and the right control is clicked, loop back to the first image;
    • If on the first image and the left control is clicked, loop to the last image

  3. See animation spec for suggested easing values/slide transitions: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=12752-63489&t=lrIKKRuKb4T16IE8-4

  4. Data display:

    • For the Event Detail page, the carousel should display the image with credit text;
    • for the Homepage, the carousel displays the image with event tag, image title, date(s), and description
    • On mobile, carousel data moves below the image

  5. Query and Data

Axa is working on setting up data for the Homepage variation/testing

Event Detail Craft Query:

query ftvaEventDetail {
  entry(section: "ftvaEvent", slug: "la-région-centrale-03-08-24") {
    imageCarousel {
      ...on imageCarousel_imageCarousel_BlockType {
        image {
          ...Image
        }
        creditText
      }
    }
}
}
fragment Image on AssetInterface {
    id
    src: url(transform: "fullscreen")
    height(transform: "fullscreen")
    width(transform: "fullscreen")
    srcset(sizes: ["375", "960", "1280", "1920", "2560"])
    alt: altText
    focalPoint
}

Event Detail Craft Data:

"imageCarousel": [
        {
          "image": [
            {
              "id": "3108955",
              "src": "[https://static.library.ucla.edu/craftassetstest/_fullscreen/RégionCentrale2_2024-06-12-211354_egxg.jpeg](https://static.library.ucla.edu/craftassetstest/_fullscreen/R%C3%A9gionCentrale2_2024-06-12-211354_egxg.jpeg)",

              "height": 1915,
              "width": 2560,
              "srcset": "[https://static.library.ucla.edu/craftassetstest/_375xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-211354_egxg.jpeg](https://static.library.ucla.edu/craftassetstest/_375xAUTO_crop_center-center_none/R%C3%A9gionCentrale2_2024-06-12-211354_egxg.jpeg) 375w, [https://static.library.ucla.edu/craftassetstest/_960xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-211354_egxg.jpeg](https://static.library.ucla.edu/craftassetstest/_960xAUTO_crop_center-center_none/R%C3%A9gionCentrale2_2024-06-12-211354_egxg.jpeg) 960w, [https://static.library.ucla.edu/craftassetstest/_1280xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-211354_egxg.jpeg](https://static.library.ucla.edu/craftassetstest/_1280xAUTO_crop_center-center_none/R%C3%A9gionCentrale2_2024-06-12-211354_egxg.jpeg) 1280w, [https://static.library.ucla.edu/craftassetstest/_1920xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-211354_egxg.jpeg](https://static.library.ucla.edu/craftassetstest/_1920xAUTO_crop_center-center_none/R%C3%A9gionCentrale2_2024-06-12-211354_egxg.jpeg) 1920w, [https://static.library.ucla.edu/craftassetstest/_2560xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-211354_egxg.jpeg](https://static.library.ucla.edu/craftassetstest/_2560xAUTO_crop_center-center_none/R%C3%A9gionCentrale2_2024-06-12-211354_egxg.jpeg) 2560w",
              "alt": "Région Centrale2",
              "focalPoint": [
                0.5,
                0.5
              ]

            }
          ],
          "creditText": "Tinu Awopetu"
        },
        {
          "image": [
            {
              "id": "3131255",
              "src": "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/laregioncentrale-crop_0.jpeg",
              "height": 1920,
              "width": 2560,
              "srcset": "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/laregioncentrale-crop_0.jpeg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/laregioncentrale-crop_0.jpeg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/laregioncentrale-crop_0.jpeg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/laregioncentrale-crop_0.jpeg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/laregioncentrale-crop_0.jpeg 2560w",
              "alt": "Upside down of a rocky landscape.",
              "focalPoint": [
                0.5,
                0.5
              ]
            }
          ],
          "creditText": "Axa Liauw"
        },
        {
          "image": [
            {
              "id": "3108979",
              "src": "https://static.library.ucla.edu/craftassetstest/_fullscreen/PXL_20240601_184856299.jpg",
              "height": 1920,
              "width": 2560,
              "srcset": "https://static.library.ucla.edu/craftassetstest/_375xAUTO_crop_center-center_none/PXL_20240601_184856299.jpg 375w, https://static.library.ucla.edu/craftassetstest/_960xAUTO_crop_center-center_none/PXL_20240601_184856299.jpg 960w, https://static.library.ucla.edu/craftassetstest/_1280xAUTO_crop_center-center_none/PXL_20240601_184856299.jpg 1280w, https://static.library.ucla.edu/craftassetstest/_1920xAUTO_crop_center-center_none/PXL_20240601_184856299.jpg 1920w, https://static.library.ucla.edu/craftassetstest/_2560xAUTO_crop_center-center_none/PXL_20240601_184856299.jpg 2560w",
              "alt": null,
              "focalPoint": [
                0.5,
                0.5
              ]
            }
          ],
          "creditText": null
        },
        {
          "image": [
            {
              "id": "3140552",
              "src": "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/wardondon.jpg",
              "height": 1811,
              "width": 2560,
              "srcset": "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/wardondon.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/wardondon.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/wardondon.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/wardondon.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/wardondon.jpg 2560w",
              "alt": "War Don Don (2010)",
              "focalPoint": [
                0.5,
                0.5
              ]
            }
          ],
          "creditText": null
        }
      ],