# Gallery

The Gallery will layout a set of thumbnails as a group and allows the user to
tap/click to see them larger.

## Design & usage guidelines

The Gallery can display as many images as the designs call for, but if the
amount of images becomes too great, the `max` prop can be used to constrain the
number of images shown.

The Gallery will set the `size` of the thumbnails it displays to `base` by
default, otherwise the `size` prop can be changed to `large`.

## Responsiveness

Responsiveness of thumbnails are controlled by the Gallery wrapper, thumbnails
do not get resized. In other words, if the device rendering the Gallery is 500px
wide, then taking into account padding it will display roughly three thumbnails
beside each other before wrapping subsequent thumbnails to a new line.

## Accessibility

Each of the thumbnails the Gallery displays are tab navigatable. A hover state
will also slightly dim a particular thumbnail when the cursor hovers over it.

## Download formats

For previewable images, provide `downloadOptions` on a `GalleryFile` to show a
Download as action in the LightBox toolbar. Each option has a `label` and `url`;
an optional `detail` is shown alongside the label. The URL is activated only
when the user selects that option, allowing applications to create transformed
formats on demand.

## Mockup


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `files` | `GalleryFile[]` | Yes | — | The files for the Gallery to display |
| `max` | `number` | No | — | The max number of thumbnails before no more thumbnails are displayed unless the user clicks an action to display the ... |
| `onDelete` | `(file: GalleryFile) => void` | No | — | onDelete callback - this function will be called when the delete action is triggered on a Gallery image |
| `size` | `"base" | "large"` | No | `base` | The size of the files and their spacing in the gallery |