@lumx/react 2.2.8 → 2.2.9

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import { AspectRatio, ImageBlock, Slideshow, SlideshowControls, SlideshowItem } from '@lumx/react';
+import { AspectRatio, ImageBlock, Slides, SlideshowControls, SlideshowItem } from '@lumx/react';
 import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 
 export default { title: 'LumX components/slideshow/Slideshow controls' };
 
@@ -30,53 +31,88 @@ export const Simple = () => {
 };
 
 export const ControllingSlideshow = ({ theme }: any) => {
-    const items = thumbnailsKnob(6);
-    const slideshowStyle = {
-        width: '50%',
-    };
+    const images = thumbnailsKnob(6);
 
     const {
-        activeIndex,
-        setActiveIndex,
+        activeIndex: currentIndex,
+        slideshowId,
+        setSlideshow,
+        isAutoPlaying,
+        slideshowSlidesId,
+        setIsAutoPlaying,
+        startIndexVisible,
+        endIndexVisible,
+        slidesCount,
         onNextClick,
-        onPreviousClick,
         onPaginationClick,
+        onPreviousClick,
+        slideshow,
+        isForcePaused,
+        setIsForcePaused,
+        stopAutoPlay,
+        startAutoPlay,
     } = SlideshowControls.useSlideshowControls({
+        activeIndex: 0,
+        defaultActiveIndex: 0,
+        autoPlay: true,
         itemsCount: 6,
+        groupBy: 1,
+    });
+
+    useFocusWithin({
+        element: slideshow,
+        onFocusIn: stopAutoPlay,
+        onFocusOut: startAutoPlay,
     });
 
+    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
     return (
-        <div style={{ height: 400, width: 500, position: 'relative' }}>
-            <Slideshow
-                activeIndex={activeIndex}
-                theme={theme}
-                autoPlay
-                groupBy={1}
-                style={slideshowStyle}
-                onChange={setActiveIndex}
-            >
-                {items.map(({ image, alt }) => (
-                    <SlideshowItem key={image}>
-                        <ImageBlock
-                            image={image}
-                            alt={alt}
-                            thumbnailProps={{ aspectRatio: AspectRatio.vertical }}
-                            theme={theme}
-                        />
-                    </SlideshowItem>
-                ))}
-            </Slideshow>
-            <div style={{ position: 'absolute', bottom: 0, right: -24 }}>
-                <SlideshowControls
-                    activeIndex={activeIndex}
-                    slidesCount={items.length}
-                    onNextClick={onNextClick}
-                    onPreviousClick={onPreviousClick}
-                    onPaginationClick={onPaginationClick}
-                    nextButtonProps={{ label: 'Next' }}
-                    previousButtonProps={{ label: 'Previous' }}
-                />
-            </div>
-        </div>
+        <Slides
+            activeIndex={currentIndex}
+            id={slideshowId}
+            ref={setSlideshow}
+            theme={theme}
+            isAutoPlaying={isAutoPlaying}
+            autoPlay
+            slidesId={slideshowSlidesId}
+            setIsAutoPlaying={setIsAutoPlaying}
+            startIndexVisible={startIndexVisible}
+            endIndexVisible={endIndexVisible}
+            groupBy={1}
+            style={{ width: '50%' }}
+            afterSlides={
+                <div className={`${Slides.className}__controls`}>
+                    <SlideshowControls
+                        activeIndex={currentIndex}
+                        onPaginationClick={onPaginationClick}
+                        onNextClick={onNextClick}
+                        onPreviousClick={onPreviousClick}
+                        slidesCount={slidesCount}
+                        parentRef={slideshow}
+                        theme={theme}
+                        isAutoPlaying={isAutoPlaying}
+                        nextButtonProps={{ label: 'Next', 'aria-controls': slideshowSlidesId }}
+                        previousButtonProps={{ label: 'Previous', 'aria-controls': slideshowSlidesId }}
+                        playButtonProps={{
+                            label: 'Play/Pause',
+                            'aria-controls': slideshowSlidesId,
+                            onClick: () => setIsForcePaused(!isForcePaused),
+                        }}
+                        paginationItemLabel={(index) => `Slide ${index}`}
+                    />
+                </div>
+            }
+        >
+            {images.map(({ image, alt }, index) => (
+                <SlideshowItem key={`${image}-${index}`}>
+                    <ImageBlock
+                        thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
+                        image={image}
+                        alt={alt}
+                        theme={theme}
+                    />
+                </SlideshowItem>
+            ))}
+        </Slides>
     );
 };

package/src/components/slideshow/SlideshowControls.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, RefObject, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import range from 'lodash/range';
 
-import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
+import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { WINDOW } from '@lumx/react/constants';
@@ -38,6 +38,13 @@ export interface SlideshowControlsProps extends GenericProps {
     onPaginationClick?(index: number): void;
     /** On previous button click callback. */
     onPreviousClick?(loopback?: boolean): void;
+    /** whether the slideshow is currently playing */
+    isAutoPlaying?: boolean;
+    /** function to be executed in order to retrieve the label for the pagination item */
+    paginationItemLabel?: (index: number) => string;
+    /** Props to pass to the lay button (minus those already set by the SlideshowControls props). */
+    playButtonProps?: Pick<IconButtonProps, 'label'> &
+        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
 }
 
 /**
@@ -77,6 +84,9 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         previousButtonProps,
         slidesCount,
         theme,
+        isAutoPlaying = false,
+        playButtonProps,
+        paginationItemLabel,
         ...forwardedProps
     } = props;
 
@@ -130,7 +140,6 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                                 const isActive = activeIndex === index;
                                 const isOutRange = index < visibleRange.min || index > visibleRange.max;
                                 return (
-                                    // eslint-disable-next-line jsx-a11y/control-has-associated-label
                                     <button
                                         className={classNames(
                                             handleBasicClasses({
@@ -143,13 +152,36 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                                         key={index}
                                         type="button"
                                         onClick={() => onPaginationClick?.(index)}
+                                        {...{
+                                            'aria-label': paginationItemLabel
+                                                ? paginationItemLabel(index)
+                                                : `${index + 1} / ${slidesCount}`,
+                                        }}
                                     />
                                 );
                             }),
-                        [slidesCount, visibleRange.min, visibleRange.max, activeIndex, onPaginationClick],
+                        [
+                            slidesCount,
+                            visibleRange.min,
+                            visibleRange.max,
+                            activeIndex,
+                            paginationItemLabel,
+                            onPaginationClick,
+                        ],
                     )}
                 </div>
             </div>
+
+            {playButtonProps ? (
+                <IconButton
+                    {...playButtonProps}
+                    icon={isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline}
+                    className={`${CLASSNAME}__play`}
+                    color={theme === Theme.dark ? 'light' : 'dark'}
+                    emphasis={Emphasis.low}
+                />
+            ) : null}
+
             <IconButton
                 {...nextButtonProps}
                 icon={mdiChevronRight}

package/src/components/slideshow/SlideshowItem.tsx

@@ -1,13 +1,22 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import classNames from 'classnames';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
+import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
+
+import { SLIDESHOW_TRANSITION_DURATION } from '@lumx/core/js/constants';
+
 /**
  * Defines the props of the component.
  */
-export type SlideshowItemProps = GenericProps;
+export interface SlideshowItemProps extends GenericProps {
+    /** whether the slideshow item is currently visible */
+    isCurrentlyVisible?: boolean;
+    /** interval in which slides are automatically shown */
+    interval?: number;
+}
 
 /**
  * Component display name.
@@ -27,7 +36,12 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, children, ...forwardedProps } = props;
+    const { className, children, isCurrentlyVisible = false, ...forwardedProps } = props;
+    const [isVisible, setIsVisible] = useState<boolean>(isCurrentlyVisible);
+
+    useDelayedVisibility(isCurrentlyVisible, SLIDESHOW_TRANSITION_DURATION, (isNowVisible) => {
+        setIsVisible(isNowVisible);
+    });
 
     return (
         <div
@@ -41,6 +55,8 @@ export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRe
             aria-roledescription="slide"
             role="group"
             {...forwardedProps}
+            style={!isVisible ? { visibility: 'hidden', ...(forwardedProps.style || {}) } : forwardedProps.style || {}}
+            aria-hidden={!isVisible}
         >
             {children}
         </div>

package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap

@@ -2,262 +2,154 @@
 
 exports[`<Slideshow> Snapshots and structure should render story 'Simple' 1`] = `
 Array [
-  <section
-    aria-live="polite"
-    aria-roledescription="carousel"
-    className="lumx-slideshow lumx-slideshow--theme-light lumx-slideshow--group-by-1"
+  <Slideshow
+    activeIndex={0}
+    afterSlides={
+      <div
+        className="lumx-slideshow__controls"
+      >
+        <SlideshowControls
+          activeIndex={0}
+          isAutoPlaying={false}
+          nextButtonProps={
+            Object {
+              "aria-controls": "slideshow-slides2",
+              "label": "Next",
+            }
+          }
+          onNextClick={[Function]}
+          onPaginationClick={[Function]}
+          onPreviousClick={[Function]}
+          previousButtonProps={
+            Object {
+              "aria-controls": "slideshow-slides2",
+              "label": "Previous",
+            }
+          }
+          slidesCount={6}
+          theme="light"
+        />
+      </div>
+    }
+    autoPlay={false}
+    endIndexVisible={1}
+    groupBy={1}
     id="slideshow1"
+    interval={1000}
+    isAutoPlaying={false}
+    setIsAutoPlaying={[Function]}
+    slidesId="slideshow-slides2"
+    startIndexVisible={0}
     style={
       Object {
         "width": "50%",
       }
     }
+    theme="light"
   >
-    <div
-      className="lumx-slideshow__slides"
-      id="slideshow-slides2"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
+    <SlideshowItem
+      key="/demo-assets/landscape1.jpg-0"
     >
-      <div
-        className="lumx-slideshow__wrapper"
-        style={
+      <ImageBlock
+        align="left"
+        alt="Image 1"
+        captionPosition="below"
+        image="/demo-assets/landscape1.jpg"
+        theme="light"
+        thumbnailProps={
           Object {
-            "transform": "translateX(-0%)",
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
         }
-      >
-        <SlideshowItem
-          aria-hidden={false}
-          key=".$/demo-assets/landscape1.jpg-0"
-          style={Object {}}
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 1"
-            captionPosition="below"
-            image="/demo-assets/landscape1.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={false}
-          key=".$/demo-assets/landscape1-s200.jpg-1"
-          style={Object {}}
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 2"
-            captionPosition="below"
-            image="/demo-assets/landscape1-s200.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={true}
-          key=".$/demo-assets/landscape2.jpg-2"
-          style={
-            Object {
-              "visibility": "hidden",
-            }
-          }
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 3"
-            captionPosition="below"
-            image="/demo-assets/landscape2.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={true}
-          key=".$/demo-assets/landscape3.jpg-3"
-          style={
-            Object {
-              "visibility": "hidden",
-            }
-          }
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 4"
-            captionPosition="below"
-            image="/demo-assets/landscape3.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={true}
-          key=".$/demo-assets/portrait1.jpg-4"
-          style={
-            Object {
-              "visibility": "hidden",
-            }
-          }
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 5"
-            captionPosition="below"
-            image="/demo-assets/portrait1.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-        <SlideshowItem
-          aria-hidden={true}
-          key=".$/demo-assets/portrait1-s200.jpg-5"
-          style={
-            Object {
-              "visibility": "hidden",
-            }
+      />
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/landscape1-s200.jpg-1"
+    >
+      <ImageBlock
+        align="left"
+        alt="Image 2"
+        captionPosition="below"
+        image="/demo-assets/landscape1-s200.jpg"
+        theme="light"
+        thumbnailProps={
+          Object {
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
-        >
-          <ImageBlock
-            align="left"
-            alt="Image 6"
-            captionPosition="below"
-            image="/demo-assets/portrait1-s200.jpg"
-            theme="light"
-            thumbnailProps={
-              Object {
-                "aspectRatio": "horizontal",
-                "loading": "eager",
-              }
-            }
-          />
-        </SlideshowItem>
-      </div>
-    </div>
-    <div
-      className="lumx-slideshow__controls"
+        }
+      />
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/landscape2.jpg-2"
     >
-      <SlideshowControls
-        activeIndex={0}
-        nextButtonProps={
+      <ImageBlock
+        align="left"
+        alt="Image 3"
+        captionPosition="below"
+        image="/demo-assets/landscape2.jpg"
+        theme="light"
+        thumbnailProps={
           Object {
-            "aria-controls": "slideshow-slides2",
-            "label": "Next",
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
         }
-        onNextClick={[Function]}
-        onPaginationClick={[Function]}
-        onPreviousClick={[Function]}
-        previousButtonProps={
+      />
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/landscape3.jpg-3"
+    >
+      <ImageBlock
+        align="left"
+        alt="Image 4"
+        captionPosition="below"
+        image="/demo-assets/landscape3.jpg"
+        theme="light"
+        thumbnailProps={
           Object {
-            "aria-controls": "slideshow-slides2",
-            "label": "Previous",
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
         }
-        slidesCount={6}
+      />
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/portrait1.jpg-4"
+    >
+      <ImageBlock
+        align="left"
+        alt="Image 5"
+        captionPosition="below"
+        image="/demo-assets/portrait1.jpg"
         theme="light"
+        thumbnailProps={
+          Object {
+            "aspectRatio": "horizontal",
+            "loading": "eager",
+          }
+        }
       />
-    </div>
-  </section>,
-  <div
-    className="lumx-slideshow-controls lumx-slideshow-controls--theme-light lumx-slideshow-controls--has-infinite-pagination"
-  >
-    <IconButton
-      aria-controls="slideshow-slides4"
-      className="lumx-slideshow-controls__navigation"
-      color="dark"
-      emphasis="low"
-      icon="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-      label="Previous"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
-    <div
-      className="lumx-slideshow-controls__pagination"
+    </SlideshowItem>
+    <SlideshowItem
+      key="/demo-assets/portrait1-s200.jpg-5"
     >
-      <div
-        className="lumx-slideshow-controls__pagination-items"
-        style={
+      <ImageBlock
+        align="left"
+        alt="Image 6"
+        captionPosition="below"
+        image="/demo-assets/portrait1-s200.jpg"
+        theme="light"
+        thumbnailProps={
           Object {
-            "transform": "translateX(-0px)",
+            "aspectRatio": "horizontal",
+            "loading": "eager",
           }
         }
-      >
-        <button
-          className="lumx-slideshow-controls__pagination-item lumx-slideshow-controls__pagination-item--is-active"
-          key="0"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item"
-          key="1"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item"
-          key="2"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item"
-          key="3"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item lumx-slideshow-controls__pagination-item--is-on-edge"
-          key="4"
-          onClick={[Function]}
-          type="button"
-        />
-        <button
-          className="lumx-slideshow-controls__pagination-item lumx-slideshow-controls__pagination-item--is-out-range"
-          key="5"
-          onClick={[Function]}
-          type="button"
-        />
-      </div>
-    </div>
-    <IconButton
-      aria-controls="slideshow-slides4"
-      className="lumx-slideshow-controls__navigation"
-      color="dark"
-      emphasis="low"
-      icon="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-      label="Next"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
-  </div>,
+      />
+    </SlideshowItem>
+  </Slideshow>,
+  null,
 ]
 `;

package/src/components/slideshow/index.ts

@@ -1,3 +1,4 @@
 export * from './Slideshow';
 export * from './SlideshowItem';
 export * from './SlideshowControls';
+export * from './Slides';

package/src/hooks/useFocusWithin.ts

@@ -26,7 +26,7 @@ export const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithi
             if (element) {
                 element.removeEventListener('focusin', onFocusIn);
 
-                element.addEventListener('focusout', onFocusOut);
+                element.removeEventListener('focusout', onFocusOut);
             }
         };
     }, [onFocusIn, element, onFocusOut]);