Component Request - SectionGallery

[pghorpade]

Component Description

This component is used on Exhibits Detail page to display gallery. It has open and closed state when clicked on +/- icons if multiple items exists. There is a hover state on the featured image.

Design

Please also see attached screenshots for quick reference.

• Design System: https://www.figma.com/file/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=677%3A12831

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-(Client-Facing)-Final?node-id=937%3A418

• Mobile: https://www.figma.com/file/BLO5HP8AphPr0KEacFPjs8/COPY-of-UI-Pattern-Library-Client-Facing-Final?node-id=3258%3A20140

• Tablet: https://www.figma.com/file/BLO5HP8AphPr0KEacFPjs8/COPY-of-UI-Pattern-Library-Client-Facing-Final?node-id=3249%3A20188

Slots

None

Props

props: {
   // Do we need 'featureditem' or do we just pick the first element of 'items'?
    featuredItem: {
        // It is an object contains image or video url.
        type: Object,
        default: () => {}
    },
    items: {
        // array of objects [url, objectType[audio,video,image], meta: { to, category, title, dates, times, text, location }]
        type: Array,
        default: () => []
    },
    galleryTitle: {
        type: String,
        default: ""
    }
}

Developer Tips

Hover state on Featured Image:

background: radial-gradient(50% 50% at 50% 50%, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.555208) 85.42%, rgba(15, 15, 15, 0.65) 100%), url(Screen Shot 2021-02-16 at 7.18.45 PM.png);

1. The carousel ModalLightbox component opens as a modal
2. Keep track of the index of the item to display from the items prop, maybe as component-level state or in vuex but I think putting it in the URL as a ? parameter or # anchor would be best. If this stored value is either absent or invalid (e.g. `-1) the modal does not display.
3. Listen for events lightbox-select-previous, lightbox-select-next, and lightbox-close from ModalLightbox and lightbox-select-item from SectionTeaserVertical, all of which update the item selected for the lightbox.
4. component opens in a Modal by clicking on solid molecule image icon.
5. A grid of SectionTeaserVertical opens/closes by clicking on +/- icons if multiple items exists, else if its just one video there will be play icon to play the video.
6. When the user clicks the + icon, the solid-molecule is not visible. When the user clicks the - icon to close the SectionTeaserVertical grid, the solid-molecule will reappear.
7. Use following icons (+/-, play icon for video, solid-molecule-image, solid-molecule-video)
8. which audio and video player to use? Maybe jwplayer, or videojs.
9. See SearchGeneric for event propagation.

Child components

1. divider-general is used at the bottom.
2. block-gallery-vertical is used in the section below the FeaturedImage when clicked on + icon to display the gallery view of all the items.
3. ModalLightbox is shown when the user clicks the molecule button in the center of the featured image.
4. icon Svgs

Screenshots

Hover state

Open state:

[aprigge]

Will be done in #162