Dynamic Slideshow

[mohsin-r]

Closes #318.

You can now add a slideshow that supports all panel types (text, image, chart, map).

⚠️ Caution: This PR makes breaking changes to the current schema, so people should be comfortable with the design before this is merged. The details are in the files, but here are the changes that would be needed to migrate current products:

• For all the current slideshow panels, just change the type to image.
• For all the current image panels, add an images array and drop your single image config inside that array.

Essentially, the current image panels now support multiple images (similar to chart panels) and the slideshow panels support all panel types instead of just images.

Feel free to play around with creating, editing, viewing etc. slideshows and suggest changes to design, implementation, etc.

---

This change is 

[github-actions[bot]]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/story-ramp/318/#/en/00000000-0000-0000-0000-000000000000

[AleksueiR]

The overall idea is to make things easier (and consistent since being consistent makes it easier) for the user.

1. More consistent map navigation:
   • I think we should treat a map inside a slideshow similarly to a regular embedded map elsewhere in the Storylines app
   • Use the ScrollGuard feature from RAMP4 to only let pan/zoom an embedded Storylines map while holding "Ctrl" on desktop or with two fingers when on mobile. The page shouldn't be scrolled when the map is panned or zoomed.
   • Make sure this behaviour is consistent with a map inside a slideshow and a standalone map component.
2. Better slideshow:
   • Right now, when you scroll over a map in the slideshow, it moves to the next slide. We want it to work like other things you scroll through, so scrolling over the map makes the slideshow move forward.
   • If that's too tricky, we can make it so scrolling over the map (or any other slideshow element) doesn't affect the slideshow at all. Whichever solution is picked, be consistent.
3. Slideshow buttons:
   • Right now, the buttons that let you go back and forth in the slideshow jump up and down when the slides are different sizes, and that's confusing. The button height should match the height of the slideshow component with the icon vertically centered, so even though the icon will move up or down when switching between slides of different height, you can still click the next/previous button without moving the cursor.
   • Add a hover effect on the back/forward buttons so the users knows they can still click them even though the button label had moved.
   • It would be cool if the slideshow animated changes in its height as you go through it. This could make the changes between slides look smoother and remove the annoying jump of the next/previous button icons.

[dan-bowerman]

Recommend we take Aleksuei's UX suggestions and spawn off new issues for those, in the interest of getting this PR pushed through.

Perhaps maps in a dynamic slideshow (a use case we haven't run into yet) can have scrollguard enabled by default?

[dan-bowerman]

It may be easier to start from scratch on this one, given the work involved in rebasing this to Vue3.