<ImageWithZoom>: Add new prop to zoom only on click

[rosesyrett]

Add a prop to <ImageWithZoom> component which allows images to only be zoomed in if they are clicked.

What:

I have started trying to use this library for my website, however have found it annoying that I cannot toggle the zoom behaviour on hover.

Specifically, I would like to enable zooming in the ImageWithZoom component only when the mouse has clicked the image, not necessarily on hover. Initially I tried to do this using the carouselContext as described in the docs however found that the props needed for this behaviour are exposed only internally within the react class.

Why:

This will allow the company I'm working with to use this library and customise exactly when we see the 'inner' image; that is, on click instead of on hover on desktop.

How:

I added a clicked state attribute to determine if the image is clicked, and a onlyZoomOnClick prop to the ImageWithZoom component, which (when true):

1. conditionally renders the second 'overlay' Image (that is, if false, only the first Image is rendered),
2. sets the cursor style to show a 'zoom-out' symbol if the image has been clicked (otherwise, zoom-in cursor is shown)

Todos

There are a couple of things I'm still working out:

1. How to make the transition 'smooth' between being zoomed in and zoomed out. If you spin up a local server you can see when the mouse moves outside of the image boundary the transition between images is abrupt, unlike what currently exists if this new prop is not passed in.
2. How this will affect mobile users or interplay with the other props, i.e. for pinch to zoom.

Checklist:

• Documentation added/updated
• Typescript definitions updated
• Tests added and passing
• Ready to be merged