feat(storefront): BCTHEME-78 Add Play/Pause button to carousel

CHANGELOG.md

@@ -1,4 +1,5 @@
 # Changelog
+- Add Play/Pause button to carousel. [#1944](https://github.com/bigcommerce/cornerstone/pull/1944)
 
 ## Draft
 - Carousel buttons do not receive focus. [#1937](https://github.com/bigcommerce/cornerstone/pull/1937)

assets/js/theme/common/carousel/utils/heroCarouselSetup.js

@@ -1,3 +1,5 @@
+import playPause from './playPause';
+
 const showCarouselIfSlidesAnalyzedSetup = ($carousel) => {
     const analyzedSlides = [];
     return ($slides) => ($slide) => {
@@ -11,6 +13,8 @@ const showCarouselIfSlidesAnalyzedSetup = ($carousel) => {
 export default ($heroCarousel) => {
     if ($heroCarousel.length === 0) return;
 
+    playPause($heroCarousel);
+
     const $slidesNodes = $heroCarousel.find('.heroCarousel-slide');
     const showCarouselIfSlidesAnalyzed = showCarouselIfSlidesAnalyzedSetup($heroCarousel)($slidesNodes);
 

assets/js/theme/common/carousel/utils/playPause.js

@@ -0,0 +1,35 @@
+import { throttle } from 'lodash';
+
+const playAction = 'slickPlay';
+const pauseAction = 'slickPause';
+
+export default ($heroCarousel) => {
+    const $playPauseButton = $('.js-hero-play-pause-button');
+
+    if ($playPauseButton.length === 0) return;
+
+    const { slideCount } = $heroCarousel[0].slick;
+    if (slideCount < 2) {
+        $playPauseButton.css('display', 'none');
+        return;
+    }
+
+    const onPlayPauseClick = () => {
+        const isPlay = $playPauseButton.data('play');
+        const action = isPlay ? pauseAction : playAction;
+        const {
+            play,
+            ariaPlay,
+            pause,
+            ariaPause,
+        } = $playPauseButton.data('labels');
+
+        $heroCarousel.slick(action);
+        $playPauseButton
+            .data('play', !isPlay)
+            .text(action === playAction ? pause : play)
+            .attr('aria-label', action === playAction ? ariaPause : ariaPlay);
+    };
+
+    $playPauseButton.on('click', throttle(onPlayPauseClick, 1000, { trailing: false }));
+};

assets/scss/components/stencil/heroCarousel/_heroCarousel.scss

@@ -68,7 +68,6 @@
             left: 25px;
         }
     }
-
     .slick-dots {
         bottom: spacing("third");
 
@@ -224,3 +223,22 @@
         margin-top: spacing("single");
     }
 }
+
+.heroCarousel-play-pause-button {
+    position: absolute;
+    left: 15px;
+    bottom: spacing("third");
+    height: 32px;
+    font-size: 18px;
+    line-height: 1.25;
+    color: stencilColor("navPages-color");
+    font-weight: 400;
+    min-width: 80px;
+    z-index: zIndex("lowest");
+    @include carouselOpaqueBackgrounds($slick-dot-bgColor);
+
+    @include breakpoint("medium") {
+        left: 25px;
+        bottom: spacing("single");
+    }
+}

lang/en.json

@@ -898,7 +898,13 @@
     "carousel": {
         "arrowAriaLabel": "Go to slide [NUMBER] of",
         "dotAriaLabel": "Slide number",
-        "activeDotAriaLabel": "active"
+        "activeDotAriaLabel": "active",
+        "playPauseButton": {
+            "play": "Play",
+            "pause": "Pause",
+            "ariaPlay": "Play carousel",
+            "ariaPause": "Pause carousel"
+        }        
     },
     "validation_messages": {
         "valid_email": "You must enter a valid email.",

templates/components/carousel.html

@@ -63,4 +63,18 @@
     {{#and arrows (if carousel.slides.length '>' 1)}}
     <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-next-arrow slick-next slick-arrow"></button>
     {{/and}}
+    <button
+        type="button"
+        class="heroCarousel-play-pause-button js-hero-play-pause-button"
+        aria-label="{{lang 'carousel.playPauseButton.ariaPause'}}"
+        data-play=true
+        data-labels='{
+            "play": "{{lang 'carousel.playPauseButton.play'}}",
+            "pause": "{{lang 'carousel.playPauseButton.pause'}}",
+            "ariaPlay": "{{lang 'carousel.playPauseButton.ariaPlay'}}",
+            "ariaPause": "{{lang 'carousel.playPauseButton.ariaPause'}}"
+
+        }'>
+        {{lang 'carousel.playPauseButton.pause'}}
+    </button>
 </section>