Update BrandMomentCaptureIntro animation toggle

[mcwinter07]

Why

In the current implementation of BrandMomentCaptureIntro the toggle to stop the loop animation is hidden behind a hover or focus event.

This presents an issue for individuals that have motion sensitivity as they may not know they can pause the animation. This was flagged as a medium severity issue in the recent Intopia Audit of the Capture Survey experience.

While this is technically the case with all of our animate-able Scene components, this PR only addresses the BrandMomentCaptureIntro component to limit the scope of impact. This is to allow for a potential design solution or rethink of the animation toggle styles and position that has design curators approval, before it is rolled out across the product.

What

• Add optional hasVisibleAnimationToggle prop to VideoPlayer
  • This enable BrandMomentCaptureIntro multiple animated videos to render with the toggle visible
  • This also provides an escape hatch if users want to reveal the toggle on hover like previous behaviours
• Update VideoPlayer to next Button component
  • Updates style to secondary to ensure contrast ratio
• Add i18n strings for play/pause labels and update hook to fix animation end
• Add documentation to provide clarity on animate-able Scene illustrations
  • We didn't really have a good way to showcase the specific animated Scene illustrations and warn about potential usage
• Add story to document BrandMomentCaptureIntro in a similar scenario to how it is used in prod

Before

Toggle animation button only shows when hovering on image or on focus.

Hovering the button has a unique hover state not aligned to our buttons.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5190a7c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@kaizen/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

✨ Here is your branch preview! ✨

• Storybook

Last updated for commit 5190a7c: re-add specifier

[mcwinter07]

I've create a branch we're I've partially implemented the idea Lua had made a here since its less aggressive than what we had before - Branch here.

The Button is using the secondary variant and I've also added an onClick to the VideoPlayer to toggle the animation.

Example - no hover

Example - hover

^ These screenshots are no longer relevant

[ryanseddon]

I think we can safely use this without a fallback as it's a baseline widely avaiable feature and it landed 4+ years ago in most browsers

[mcwinter07]

Going to put this back into draft until the design direction has been decided