Component Request - ModalLightbox [formerly 'Carousel']

[jendiamond]

Component Description

This component is used Exhibit Details to display a carousel of images to the User.The hover states are the Prev < and Next > and X closing links. It is called Lightbox in the Figma design.

[Updated 6/25, @andrewbenedictwallace] This component should be fairly dumb, knowing only the current image / media and whether to show/enable "previous" and "next" buttons. Clicking those or the close button will emit events to the parent component (SectionGallery), which will have access to the whole list of gallery items and respond to events by updating this component with new props.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=937%3A911
• Mobile: Wait for UX. At a certain breakpoint we probably want to zoom the image to fit, and overlay the buttons?

Slots

None

Props

props: {
-    items: {
-        // Mock: api.pages
-        type: Array,
-        default: () => []
-    },
+  item: {
+    // Media item to show (e.g. Image, Video)
+    type: Object,
+    required: true
+  },
+  enablePrevious: {
+    type: Boolean,
+    default: true
+  },
+  enableNext: {
+    type: Boolean,
+    default: true
+  }
}

Developer Tips

https://youtu.be/qgcdup22VRU

1. The parent component (SectionGallery) keeps track of the full array of items and handles navigating between them. This one just displays a single item in a modal and emits events when the buttons are pressed.
2. This is a modal
3. We might want a child component that inspects the prop item and decides how to display it - a simple <img ...> tag for images but loading a player for AV?.
4. Icon SVGs: Arrows and X
5. Image

height: 883px;
width: 1441px;
left: 0px;
top: 0px;
border-radius: 0px;

Modal

width: 1441px;
height: 883px;
background: #032D5B;

Events

lightbox-select-previous
lightbox-select-next
lightbox-close

Child components

Image / Media component?

Icon SVGs

Screenshots

[aprigge]

Done with #162