@lumx/react 3.0.1 → 3.0.2

package/src/components/slideshow/SlideshowControls.tsx

@@ -8,9 +8,9 @@ import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
+import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';
 
 import { useSwipeNavigate } from './useSwipeNavigate';
-import { useKeyNavigate } from './useKeyNavigate';
 import { PAGINATION_ITEM_SIZE, PAGINATION_ITEMS_MAX } from './constants';
 import { usePaginationVisibleRange } from './usePaginationVisibleRange';
 
@@ -28,6 +28,8 @@ export interface SlideshowControlsProps extends GenericProps, HasTheme {
     /** Props to pass to the previous button (minus those already set by the SlideshowControls props). */
     previousButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
+    /** Props to pass to the pagination wrapper */
+    paginationProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'role'>;
     /** Number of slides. */
     slidesCount: number;
     /** On next button click callback. */
@@ -38,8 +40,15 @@ export interface SlideshowControlsProps extends GenericProps, HasTheme {
     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 */
+    /**
+     * function to be executed in order to retrieve the label for the pagination item
+     * @deprecated Use paginationItemProps instead.
+     * */
     paginationItemLabel?: (index: number) => string;
+    /**
+     * function to be executed in order to retrieve the props for a pagination item.
+     */
+    paginationItemProps?: (itemIndex: number) => React.HTMLAttributes<HTMLButtonElement> & { label?: 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'>;
@@ -80,11 +89,13 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         onPreviousClick,
         parentRef,
         previousButtonProps,
+        paginationProps,
         slidesCount,
         theme,
         isAutoPlaying = false,
         playButtonProps,
         paginationItemLabel,
+        paginationItemProps,
         ...forwardedProps
     } = props;
 
@@ -93,8 +104,7 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         // Checking window object to avoid errors in SSR.
         parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
     }
-    // Listen to keyboard navigate left & right.
-    useKeyNavigate(parent, onNextClick, onPreviousClick);
+    const paginationRef = React.useRef(null);
     // Listen to touch swipe navigate left & right.
     useSwipeNavigate(
         parent,
@@ -104,6 +114,18 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
         useCallback(() => onPreviousClick?.(false), [onPreviousClick]),
     );
 
+    /**
+     * Add roving tab index pattern to pagination items and activate slide on focus.
+     */
+    useRovingTabIndex({
+        parentRef: paginationRef,
+        elementSelector: 'button',
+        keepTabIndex: true,
+        onElementFocus: (element) => {
+            element.click();
+        },
+    });
+
     // Pagination "bullet" range.
     const visibleRange = usePaginationVisibleRange(activeIndex as number, slidesCount);
 
@@ -126,8 +148,13 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                 emphasis={Emphasis.low}
                 onClick={onPreviousClick}
             />
-            <div className={`${CLASSNAME}__pagination`}>
-                <div className={`${CLASSNAME}__pagination-items`} style={wrapperStyle}>
+            <div ref={paginationRef} className={`${CLASSNAME}__pagination`}>
+                <div
+                    className={`${CLASSNAME}__pagination-items`}
+                    style={wrapperStyle}
+                    role="tablist"
+                    {...paginationProps}
+                >
                     {useMemo(
                         () =>
                             range(slidesCount).map((index) => {
@@ -137,6 +164,15 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                                     (index === visibleRange.min || index === visibleRange.max);
                                 const isActive = activeIndex === index;
                                 const isOutRange = index < visibleRange.min || index > visibleRange.max;
+                                const {
+                                    className: itemClassName = undefined,
+                                    label = undefined,
+                                    ...itemProps
+                                } = paginationItemProps ? paginationItemProps(index) : {};
+
+                                const ariaLabel =
+                                    label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
+
                                 return (
                                     <button
                                         className={classNames(
@@ -146,15 +182,16 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                                                 isOnEdge,
                                                 isOutRange,
                                             }),
+                                            itemClassName,
                                         )}
                                         key={index}
                                         type="button"
+                                        tabIndex={isActive ? undefined : -1}
+                                        role="tab"
+                                        aria-selected={isActive}
                                         onClick={() => onPaginationClick?.(index)}
-                                        {...{
-                                            'aria-label': paginationItemLabel
-                                                ? paginationItemLabel(index)
-                                                : `${index + 1} / ${slidesCount}`,
-                                        }}
+                                        aria-label={ariaLabel}
+                                        {...itemProps}
                                     />
                                 );
                             }),
@@ -163,6 +200,7 @@ const InternalSlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> =
                             visibleRange.min,
                             visibleRange.max,
                             activeIndex,
+                            paginationItemProps,
                             paginationItemLabel,
                             onPaginationClick,
                         ],

package/src/components/slideshow/SlideshowItem.tsx

@@ -8,8 +8,6 @@ import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/
  * Defines the props of the component.
  */
 export interface SlideshowItemProps extends GenericProps {
-    /** whether the slideshow item is currently visible */
-    isCurrentlyVisible?: boolean;
     /** interval in which slides are automatically shown */
     interval?: number;
 }
@@ -33,7 +31,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRef((props, ref) => {
     const { className, children, ...forwardedProps } = props;
-
     return (
         <div
             ref={ref}
@@ -43,8 +40,6 @@ export const SlideshowItem: Comp<SlideshowItemProps, HTMLDivElement> = forwardRe
                     prefix: CLASSNAME,
                 }),
             )}
-            aria-roledescription="slide"
-            role="group"
             {...forwardedProps}
         >
             {children}

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+
+import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { useSlideFocusManagement } from './useSlideFocusManagement';
+
+/**
+ * Defines the props of the component.
+ */
+export interface SlideshowItemGroupProps extends GenericProps {
+    role?: 'tabpanel' | 'group';
+    label?: string;
+    isDisplayed?: boolean;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SlideshowItemGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export const buildSlideShowGroupId = (slidesId: string, index: number) => `${slidesId}-slide-${index}`;
+
+/**
+ * SlideshowItemGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const SlideshowItemGroup: Comp<SlideshowItemGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { className, children, role = 'group', label, isDisplayed, ...forwardedProps } = props;
+    const groupRef = React.useRef<HTMLDivElement>(null);
+
+    useSlideFocusManagement({ isSlideDisplayed: isDisplayed, slideRef: groupRef });
+
+    return (
+        <div
+            ref={mergeRefs(groupRef, ref)}
+            role={role}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                }),
+            )}
+            aria-roledescription="slide"
+            aria-label={label}
+            {...forwardedProps}
+        >
+            {children}
+        </div>
+    );
+});
+
+SlideshowItemGroup.displayName = COMPONENT_NAME;
+SlideshowItemGroup.className = CLASSNAME;

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

@@ -20,6 +20,7 @@ Array [
           onNextClick={[Function]}
           onPaginationClick={[Function]}
           onPreviousClick={[Function]}
+          paginationItemProps={[Function]}
           parentRef={null}
           previousButtonProps={
             Object {
@@ -32,11 +33,13 @@ Array [
         />
       </div>
     }
+    aria-label="Simple carousel example"
     autoPlay={false}
     groupBy={1}
+    hasControls={true}
     id="slideshow1"
-    interval={1000}
     isAutoPlaying={false}
+    slideGroupLabel={[Function]}
     slidesId="slideshow-slides2"
     style={
       Object {

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import { getFocusableElements } from '@lumx/react/utils/focus/getFocusableElements';
+
+export interface UseSlideFocusManagementProps {
+    isSlideDisplayed?: boolean;
+    slideRef: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * Classname set on elements whose focus was blocked.
+ * This is to easily find elements that have been tempered with,
+ * and not elements whose focus was already initially blocked.
+ * */
+const BLOCKED_FOCUS_CLASSNAME = `focus-blocked`;
+
+/**
+ * Manage how slides must behave when visible or not.
+ * When not visible, they should be hidden from screen readers and not focusable.
+ */
+export const useSlideFocusManagement = ({ isSlideDisplayed, slideRef }: UseSlideFocusManagementProps) => {
+    useEffect(() => {
+        const element = slideRef?.current;
+
+        if (!element) {
+            return undefined;
+        }
+
+        /**
+         * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
+         */
+        const enableSlide = () => {
+            // Hide from screen readers
+            element.setAttribute('aria-hidden', 'false');
+            // Find elements we have blocked focus on
+            element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach((focusableElement) => {
+                focusableElement.removeAttribute('tabindex');
+                focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
+            });
+        };
+
+        /**
+         * Hide given slide from screen readers and block focus on all focusable elements within.
+         */
+        const blockSlide = () => {
+            element.setAttribute('aria-hidden', 'true');
+            getFocusableElements(element).forEach((focusableElement) => {
+                focusableElement.setAttribute('tabindex', '-1');
+                focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
+            });
+        };
+
+        const handleDisplay = () => {
+            if (!element) {
+                return;
+            }
+            if (isSlideDisplayed) {
+                enableSlide();
+            } else {
+                blockSlide();
+            }
+        };
+
+        // Callback function to execute when mutations are observed
+        const callback: MutationCallback = (mutationsList) => {
+            if (element) {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'childList') {
+                        handleDisplay();
+                    }
+                }
+            }
+        };
+
+        // Create an observer instance linked to the callback function
+        const observer = new MutationObserver(callback);
+
+        if (element) {
+            handleDisplay();
+
+            /** If slide is hidden, start observing for elements to block focus  */
+            if (!isSlideDisplayed) {
+                observer.observe(element, { attributes: true, childList: true, subtree: true });
+            }
+        }
+
+        return () => {
+            if (!isSlideDisplayed) {
+                observer.disconnect();
+            }
+        };
+    }, [isSlideDisplayed, slideRef]);
+};

package/src/components/text/Text.stories.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { ColorPalette, ColorVariant, TypographyCustom, TypographyInterface } from '@lumx/react';
+import { Text } from './Text';
+
+export default { title: 'LumX components/text/Text' };
+
+export const Default = () => <Text as="p">Some text</Text>;
+
+const withResizableBox = (Story: any) => (
+    <div
+        style={{
+            width: 150,
+            height: 60,
+            border: '1px solid red',
+            resize: 'both',
+            overflow: 'hidden',
+        }}
+    >
+        <Story />
+    </div>
+);
+
+export const Truncate = () => (
+    <Text as="p" truncate>
+        Some very very very long text
+    </Text>
+);
+Truncate.decorators = [withResizableBox];
+
+export const TruncateMultiline = () => (
+    <Text as="p" truncate={{ lines: 2 }}>
+        Some very very very very very very very very very long text
+    </Text>
+);
+TruncateMultiline.decorators = [withResizableBox];
+
+export const AllTypography = () => {
+    const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
+    return (
+        <table>
+            {typographies.map((typography) => (
+                <tr key={typography}>
+                    <td>{typography}</td>
+                    <td>
+                        <Text as="p" typography={typography}>
+                            Some text
+                        </Text>
+                    </td>
+                </tr>
+            ))}
+        </table>
+    );
+};
+
+export const AllColor = () => {
+    const colorVariants = [undefined, ...Object.values(ColorVariant)];
+    const colors = [undefined, ...Object.values(ColorPalette)];
+    return (
+        <table style={{ borderCollapse: 'separate', borderSpacing: 5 }}>
+            <tr>
+                <td />
+                {colorVariants.map((colorVariant) => (
+                    <td key={colorVariant}>{colorVariant}</td>
+                ))}
+            </tr>
+            {colors.map((color) => (
+                <tr key={color}>
+                    <td>{color}</td>
+                    {colorVariants.map((colorVariant) => (
+                        <td key={colorVariant}>
+                            <Text as="p" color={color} colorVariant={colorVariant}>
+                                Some text
+                            </Text>
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </table>
+    );
+};

package/src/components/text/Text.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite } from '@lumx/react/testing/utils';
+import { Text, TextProps } from './Text';
+
+const setup = (props: Partial<TextProps> = {}) => {
+    const wrapper = shallow(<Text as="span" {...props} />);
+    return { props, wrapper };
+};
+
+describe(`<${Text.displayName}>`, () => {
+    describe('Snapshots and structure', () => {
+        it('should render default', () => {
+            const { wrapper } = setup({ children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper.prop('className')).toBe(Text.className);
+        });
+
+        it('should render with as', () => {
+            const { wrapper } = setup({ children: 'Some text', as: 'p' });
+            expect(wrapper).toHaveDisplayName('p');
+            expect(wrapper.prop('className')).toBe(Text.className);
+        });
+
+        it('should render with typography', () => {
+            const { wrapper } = setup({ typography: 'body2', children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-typography-body2');
+        });
+
+        it('should render with color', () => {
+            const { wrapper } = setup({ color: 'blue', children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-color-font-blue-N');
+        });
+
+        it('should render with color and variant', () => {
+            const { wrapper } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-color-font-blue-D2');
+        });
+
+        it('should render truncated', () => {
+            const { wrapper } = setup({ truncate: true });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-text--is-truncated');
+        });
+
+        it('should render truncated multiline', () => {
+            const { wrapper } = setup({ truncate: { lines: 2 } });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-text--is-truncated-multiline');
+            expect(wrapper).toHaveStyle({ '--lumx-text-truncate-lines': 2 });
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: Text.className });
+});

package/src/components/text/Text.tsx

@@ -0,0 +1,94 @@
+import React, { forwardRef } from 'react';
+
+import { Color, ColorVariant, Typography } from '@lumx/react';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement } from '@lumx/react/utils';
+import classNames from 'classnames';
+
+type TextComponents = 'span' | 'p' | HeadingElement;
+
+/**
+ * Defines the props of the component.
+ */
+export interface TextProps extends GenericProps {
+    /**
+     * Color variant.
+     */
+    color?: Color;
+    /**
+     * Lightened or darkened variant of the selected color.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * Typography variant.
+     */
+    typography?: Typography;
+    /**
+     * Custom component to render the text.
+     */
+    as: TextComponents;
+    /**
+     * Control whether the text should truncate or not.
+     * Setting as `true` will make the text truncate on a single line.
+     * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
+     */
+    truncate?: boolean | { lines: number };
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Text';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {} as const;
+
+/**
+ * Text component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Text: Comp<TextProps> = forwardRef((props, ref) => {
+    const { as, children, className, color, colorVariant, typography, truncate, style, ...forwardedProps } = props;
+
+    const Component = as as TextComponents;
+    const colorClass = color && `lumx-color-font-${color}-${colorVariant || ColorVariant.N}`;
+    const typographyClass = typography && `lumx-typography-${typography}`;
+
+    // Truncate mode
+    const truncateLinesStyle = typeof truncate === 'object' &&
+        truncate.lines > 1 && { '--lumx-text-truncate-lines': truncate.lines };
+    const isTruncatedMultiline = !!truncateLinesStyle;
+    const isTruncated = !!truncate;
+
+    return (
+        <Component
+            ref={ref as React.Ref<any>}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                    isTruncated: isTruncated && !isTruncatedMultiline,
+                    isTruncatedMultiline,
+                }),
+                typographyClass,
+                colorClass,
+            )}
+            style={{ ...truncateLinesStyle, ...style }}
+            {...forwardedProps}
+        >
+            {children}
+        </Component>
+    );
+});
+Text.displayName = COMPONENT_NAME;
+Text.className = CLASSNAME;
+Text.defaultProps = DEFAULT_PROPS;

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './Text';

package/src/hooks/useRovingTabIndex.tsx

@@ -4,6 +4,8 @@ interface UseRovingTabIndexOptions {
     parentRef: RefObject<HTMLElement>;
     elementSelector: string;
     keepTabIndex?: boolean;
+    /** Action to trigger when an element is focused using roving tab index */
+    onElementFocus?: (element: HTMLElement) => void;
     /** List of values to be used as extra dependencies of the useEffect */
     extraDependencies?: any[];
 }
@@ -12,6 +14,7 @@ export const useRovingTabIndex = ({
     parentRef,
     elementSelector,
     keepTabIndex,
+    onElementFocus,
     extraDependencies = [],
 }: UseRovingTabIndexOptions): void => {
     useEffect(
@@ -47,6 +50,12 @@ export const useRovingTabIndex = ({
                 }
                 const newElement = elements[newTabFocus];
                 newElement?.focus();
+
+                // When an element is focused using roving tab index, trigger the onElementFocus callback
+                if (newElement && onElementFocus) {
+                    onElementFocus(newElement);
+                }
+
                 if (keepTabIndex) {
                     (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');
                     newElement?.setAttribute('tabindex', '0');

package/src/index.ts

@@ -16,6 +16,7 @@ export * from './components/expansion-panel';
 export * from './components/flag';
 export * from './components/flex-box';
 export * from './components/generic-block';
+export * from './components/heading';
 export * from './components/grid';
 export * from './components/icon';
 export * from './components/image-block';
@@ -41,6 +42,7 @@ export * from './components/slideshow';
 export * from './components/switch';
 export * from './components/table';
 export * from './components/tabs';
+export * from './components/text';
 export * from './components/text-field';
 export * from './components/thumbnail';
 export * from './components/toolbar';

package/src/utils/focus/constants.ts

@@ -0,0 +1,5 @@
+/** CSS selector listing all tabbable elements. */
+export const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]`;
+
+/** CSS selector matching element that are disabled (should not receive focus). */
+export const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;

package/src/utils/focus/getFirstAndLastFocusable.ts

@@ -1,10 +1,4 @@
-/** CSS selector listing all tabbable elements. */
-const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]`;
-
-/** CSS selector matching element that are disabled (should not receive focus). */
-const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;
-
-const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
+import { getFocusableElements } from './getFocusableElements';
 
 /**
  * Get first and last elements focusable in an element.
@@ -13,12 +7,12 @@ const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECT
  * @return first and last focusable elements
  */
 export function getFirstAndLastFocusable(parentElement: HTMLElement) {
-    const focusableElements = Array.from(parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR));
+    const focusableElements = getFocusableElements(parentElement);
 
     // First non disabled element.
-    const first = focusableElements.find(isNotDisabled);
+    const first = focusableElements[0];
     // Last non disabled element.
-    const last = focusableElements.reverse().find(isNotDisabled);
+    const last = focusableElements[focusableElements.length - 1];
 
     if (last && first) {
         return { first, last };