@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+
+import { mdiMagnifyMinusOutline, mdiMagnifyPlusOutline } from '@lumx/icons';
+import { FlexBox, IconButton, Slides, SlideshowControls } from '@lumx/react';
+import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
+
+import memoize from 'lodash/memoize';
+import { ImageCaption } from '../../image-block/ImageCaption';
+import { CLASSNAME } from '../constants';
+import type { ImagesProps, InheritedSlideShowProps, ZoomButtonProps } from '../types';
+import { ImageSlide } from './ImageSlide';
+
+export interface ImageSlideshowProps extends InheritedSlideShowProps, ZoomButtonProps, ImagesProps {
+    currentPaginationItemRef?: React.Ref<HTMLButtonElement>;
+    footerRef?: React.Ref<HTMLDivElement>;
+}
+
+/** Internal image slideshow component for ImageLightbox */
+export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
+    activeImageIndex,
+    images,
+    slideGroupLabel,
+    zoomInButtonProps,
+    zoomOutButtonProps,
+    slideshowControlsProps,
+    currentPaginationItemRef,
+    footerRef,
+    activeImageRef,
+}) => {
+    const {
+        activeIndex,
+        slideshowId,
+        setSlideshow,
+        slideshowSlidesId,
+        slidesCount,
+        onNextClick,
+        onPaginationClick,
+        onPreviousClick,
+        toggleAutoPlay,
+    } = SlideshowControls.useSlideshowControls({
+        itemsCount: images.length,
+        activeIndex: activeImageIndex,
+    });
+
+    // Image metadata (caption)
+    const title = images[activeIndex]?.title;
+    const description = images[activeIndex]?.description;
+    const tags = images[activeIndex]?.tags;
+    const metadata =
+        title || description || tags ? (
+            <ImageCaption as="div" title={title} description={description} tags={tags} align="center" />
+        ) : null;
+
+    // Slideshow controls
+    const slideShowControls =
+        slidesCount > 1 && slideshowControlsProps ? (
+            <SlideshowControls
+                activeIndex={activeIndex}
+                slidesCount={slidesCount}
+                onNextClick={onNextClick}
+                onPreviousClick={onPreviousClick}
+                onPaginationClick={onPaginationClick}
+                {...slideshowControlsProps}
+                paginationItemProps={(index: number) => {
+                    const props = slideshowControlsProps?.paginationItemProps?.(index) || {};
+                    return {
+                        ...props,
+                        ref: mergeRefs(
+                            (props as any)?.ref,
+                            // Focus the active pagination item once on mount
+                            activeIndex === index ? currentPaginationItemRef : undefined,
+                        ),
+                    };
+                }}
+            />
+        ) : null;
+
+    // Zoom controls
+    const [scale, setScale] = React.useState<number | undefined>(undefined);
+    const zoomEnabled = zoomInButtonProps && zoomOutButtonProps;
+    const onScaleChange = React.useMemo(() => {
+        if (!zoomEnabled) return undefined;
+        return (newScale: number) => {
+            setScale((prevScale = 1) => Math.max(1, newScale * prevScale));
+        };
+    }, [zoomEnabled]);
+    const zoomIn = React.useCallback(() => onScaleChange?.(1.5), [onScaleChange]);
+    const zoomOut = React.useCallback(() => onScaleChange?.(0.5), [onScaleChange]);
+    React.useEffect(() => {
+        // Reset scale on slide change
+        if (typeof activeIndex === 'number') setScale(undefined);
+    }, [activeIndex]);
+    const zoomControls = zoomEnabled && (
+        <>
+            <IconButton {...zoomInButtonProps} emphasis="low" icon={mdiMagnifyPlusOutline} onClick={zoomIn} />
+            <IconButton
+                {...zoomOutButtonProps}
+                emphasis="low"
+                isDisabled={!scale || scale <= 1}
+                icon={mdiMagnifyMinusOutline}
+                onClick={zoomOut}
+            />
+        </>
+    );
+
+    const getImgRef = React.useMemo(
+        () =>
+            memoize(
+                (index: number, isActive: boolean) => {
+                    return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
+                },
+                // memoize based on both arguments
+                (...args) => args.join(),
+            ),
+        [images, activeImageRef],
+    );
+
+    return (
+        <>
+            <Slides
+                activeIndex={activeIndex}
+                slideGroupLabel={slideGroupLabel}
+                fillHeight
+                id={slideshowId}
+                ref={setSlideshow}
+                slidesId={slideshowSlidesId}
+                toggleAutoPlay={toggleAutoPlay}
+            >
+                {images.map(({ image, imgRef, ...imageProps }, index) => {
+                    const isActive = index === activeIndex;
+                    return (
+                        <ImageSlide
+                            isActive={isActive}
+                            key={image}
+                            image={{
+                                ...imageProps,
+                                image,
+                                imgRef: getImgRef(index, isActive),
+                            }}
+                            scale={isActive ? scale : undefined}
+                            onScaleChange={onScaleChange}
+                        />
+                    );
+                })}
+            </Slides>
+            {(metadata || slideShowControls || zoomControls) && (
+                <FlexBox
+                    ref={footerRef}
+                    className={`${CLASSNAME}__footer`}
+                    orientation="vertical"
+                    vAlign="center"
+                    gap="big"
+                >
+                    {metadata}
+
+                    <FlexBox className={`${CLASSNAME}__footer-actions`} orientation="horizontal" gap="regular">
+                        {slideShowControls}
+                        {zoomControls}
+                    </FlexBox>
+                </FlexBox>
+            )}
+        </>
+    );
+};

package/src/components/image-lightbox/internal/useAnimateScroll.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { Point, RectSize } from '@lumx/react/utils/type';
+
+/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */
+export function useAnimateScroll(scrollAreaRef: React.RefObject<HTMLDivElement>) {
+    return React.useMemo(() => {
+        let animationFrame: number | null = null;
+
+        return function animate(centerPoint?: Point, initialScrollAreaSize?: RectSize) {
+            const scrollArea = scrollAreaRef.current as HTMLDivElement;
+            if (!scrollArea) {
+                return;
+            }
+
+            // Cancel previously running animation
+            if (animationFrame) cancelAnimationFrame(animationFrame);
+
+            // Center on the given point or else on the scroll area visual center
+            const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : 0.5;
+            const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : 0.5;
+
+            const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;
+            const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;
+
+            const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;
+            const heightRatio = heightCenter / initialScrollHeight;
+
+            const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;
+            const widthRatio = widthCenter / initialScrollWidth;
+
+            let prevScrollHeight = 0;
+            let prevScrollWidth = 0;
+
+            function nextFrame() {
+                const { scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollArea;
+
+                // Scroll area stopped expanding => stop animation
+                if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {
+                    animationFrame = null;
+                    return;
+                }
+
+                // Compute next scroll position
+                const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;
+                const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;
+
+                scrollArea.scrollTo({ top, left });
+                prevScrollHeight = scrollHeight;
+                prevScrollWidth = scrollWidth;
+                animationFrame = requestAnimationFrame(nextFrame);
+            }
+            animationFrame = requestAnimationFrame(nextFrame);
+        };
+    }, [scrollAreaRef]);
+}

package/src/components/image-lightbox/internal/usePointerZoom.ts

@@ -0,0 +1,148 @@
+import React from 'react';
+import type { Point } from '@lumx/react/utils/type';
+import type { useAnimateScroll } from './useAnimateScroll';
+
+/**
+ * Listen to mouse wheel + ctrl and multi-pointer pinch to zoom
+ */
+export function usePointerZoom(
+    scrollAreaRef: React.RefObject<HTMLDivElement>,
+    onScaleChange: ((value: number) => void) | undefined,
+    animateScroll: ReturnType<typeof useAnimateScroll>,
+) {
+    const [isPointerZooming, setPointerZooming] = React.useState(false);
+    React.useEffect(() => {
+        const scrollArea = scrollAreaRef.current as HTMLDivElement;
+        if (!scrollArea || !onScaleChange) {
+            return undefined;
+        }
+
+        let animationFrame: number | null;
+        let zoomStateTimeoutId: ReturnType<typeof setTimeout> | null;
+
+        function updateScaleOnNextFrame(newScale: number, mousePosition: Point): void {
+            // Cancel previously scheduled frame
+            if (animationFrame) cancelAnimationFrame(animationFrame);
+
+            // Cancel previously scheduled zoom state change
+            if (zoomStateTimeoutId) clearTimeout(zoomStateTimeoutId);
+
+            function nextFrame() {
+                setPointerZooming(true);
+                onScaleChange?.(newScale);
+
+                animationFrame = null;
+                // Wait a bit before indicating the pointer zooming is finished
+                zoomStateTimeoutId = setTimeout(() => setPointerZooming(false), 100);
+            }
+            animationFrame = requestAnimationFrame(nextFrame);
+
+            // Animate scroll in parallel (centering on the current mouse position)
+            animateScroll(mousePosition, {
+                width: scrollArea.scrollWidth,
+                height: scrollArea.scrollHeight,
+            });
+        }
+
+        function onWheel(event: WheelEvent) {
+            if (!event.ctrlKey) {
+                return;
+            }
+            event.preventDefault();
+            const newScale = Math.exp(-event.deltaY / 50);
+
+            // Update scale on next frame (focused on the mouse position)
+            updateScaleOnNextFrame(newScale, {
+                x: event.clientX,
+                y: event.clientY,
+            });
+        }
+
+        const activePointers: Record<PointerEvent['pointerId'], PointerEvent> = {};
+        let prevDistance: number | null = null;
+        let previousCenterPoint: Point | null = null;
+
+        function onPointerDown(event: PointerEvent) {
+            activePointers[event.pointerId] = event;
+        }
+        function onPointerMove(event: PointerEvent) {
+            // Update pointer in cache
+            if (activePointers[event.pointerId]) {
+                activePointers[event.pointerId] = event;
+            }
+
+            const pointers = Object.values(activePointers);
+
+            // Make sure we run computation on one of the pointer in the group
+            if (pointers[0]?.pointerId !== event.pointerId) {
+                return;
+            }
+
+            // Centered point between all pointers
+            const centerPoint: Point = {
+                x: pointers.reduce((x, { clientX }) => x + clientX, 0) / pointers.length,
+                y: pointers.reduce((y, { clientY }) => y + clientY, 0) / pointers.length,
+            };
+
+            // Movement of the center point
+            const deltaCenterPoint = previousCenterPoint && {
+                left: previousCenterPoint.x - centerPoint.x,
+                top: previousCenterPoint.y - centerPoint.y,
+            };
+
+            // Pan X & Y
+            if (deltaCenterPoint) {
+                // Apply movement of the center point to the scroll
+                scrollArea.scrollBy({
+                    top: deltaCenterPoint.top / 2,
+                    left: deltaCenterPoint.left / 2,
+                });
+            }
+
+            // Pinch to zoom
+            if (pointers.length === 2) {
+                const [pointer1, pointer2] = pointers;
+                const distance = Math.hypot(pointer2.clientX - pointer1.clientX, pointer2.clientY - pointer1.clientY);
+
+                if (prevDistance && deltaCenterPoint) {
+                    const delta = prevDistance - distance;
+                    const absDelta = Math.abs(delta);
+
+                    // Zoom only if we are "pinching" more than we are moving the pointers
+                    if (absDelta > Math.abs(deltaCenterPoint.left) && absDelta > Math.abs(deltaCenterPoint.top)) {
+                        // Update scale on next frame (focused on the center point between the two pointers)
+                        const newScale = Math.exp(-delta / 100);
+                        updateScaleOnNextFrame(newScale, centerPoint);
+                    }
+                }
+
+                prevDistance = distance;
+            }
+
+            previousCenterPoint = centerPoint;
+        }
+        function onPointerUp(event: PointerEvent) {
+            prevDistance = null;
+            previousCenterPoint = null;
+            delete activePointers[event.pointerId];
+        }
+
+        scrollArea.addEventListener('wheel', onWheel, { passive: false });
+        const isMultiTouch = navigator.maxTouchPoints >= 2;
+        if (isMultiTouch) {
+            scrollArea.addEventListener('pointerdown', onPointerDown);
+            scrollArea.addEventListener('pointermove', onPointerMove);
+            scrollArea.addEventListener('pointerup', onPointerUp);
+        }
+        return () => {
+            scrollArea.removeEventListener('wheel', onWheel);
+            if (isMultiTouch) {
+                scrollArea.removeEventListener('pointerdown', onPointerDown);
+                scrollArea.removeEventListener('pointermove', onPointerMove);
+                scrollArea.removeEventListener('pointerup', onPointerUp);
+            }
+        };
+    }, [animateScroll, onScaleChange, scrollAreaRef]);
+
+    return isPointerZooming;
+}

package/src/components/image-lightbox/types.ts

@@ -0,0 +1,48 @@
+import type { IconButtonProps, LightboxProps, SlideshowProps, ThumbnailProps } from '@lumx/react';
+import type { HasClassName } from '@lumx/react/utils/type';
+import type { ImageCaptionMetadata } from '@lumx/react/components/image-block/ImageCaption';
+
+export type InheritedSlideShowProps = Pick<SlideshowProps, 'slideshowControlsProps' | 'slideGroupLabel'>;
+
+export interface ZoomButtonProps {
+    /** Zoom in button props */
+    zoomInButtonProps?: IconButtonProps;
+    /** Zoom out button props */
+    zoomOutButtonProps?: IconButtonProps;
+}
+
+export type InheritedThumbnailProps = Pick<
+    ThumbnailProps,
+    'image' | 'alt' | 'imgProps' | 'imgRef' | 'loadingPlaceholderImageRef'
+>;
+
+export type InheritedImageMetadata = Pick<ImageCaptionMetadata, 'title' | 'description' | 'tags'>;
+
+export type ImageProps = InheritedThumbnailProps & InheritedImageMetadata;
+
+export interface ImagesProps {
+    /** Index of the active image to show on open */
+    activeImageIndex?: number;
+    /** List of images to display */
+    images: Array<ImageProps>;
+    /** Ref of the active image when the lightbox is open */
+    activeImageRef?: React.Ref<HTMLImageElement>;
+}
+
+export type InheritedLightboxProps = Pick<
+    LightboxProps,
+    'isOpen' | 'parentElement' | 'onClose' | 'closeButtonProps' | 'aria-label' | 'aria-labelledby'
+>;
+
+export type ForwardedProps = React.ComponentPropsWithoutRef<'div'>;
+
+/**
+ * ImageLightbox component props
+ */
+export interface ImageLightboxProps
+    extends HasClassName,
+        ZoomButtonProps,
+        ImagesProps,
+        InheritedSlideShowProps,
+        InheritedLightboxProps,
+        ForwardedProps {}

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+
+import memoize from 'lodash/memoize';
+
+import { startViewTransition } from '@lumx/react/utils/browser/DOM/startViewTransition';
+import { findImage } from '@lumx/react/utils/browser/DOM/findImage';
+
+import type { ImageLightboxProps } from './types';
+import { CLASSNAME } from './constants';
+
+/** Subset of the ImageLightboxProps managed by the useImageLightbox hook */
+type ManagedProps = Pick<
+    ImageLightboxProps,
+    'isOpen' | 'images' | 'parentElement' | 'activeImageRef' | 'onClose' | 'activeImageIndex'
+>;
+
+const EMPTY_PROPS: ManagedProps = { isOpen: false, images: [], parentElement: React.createRef() };
+
+type TriggerOptions = Pick<ImageLightboxProps, 'activeImageIndex'>;
+
+/**
+ * Set up an ImageLightbox with images and triggers.
+ *
+ * - Associate a trigger with the lightbox to properly focus the trigger on close
+ * - Associate a trigger with an image to display on open
+ * - Automatically provide a view transition between an image trigger and the displayed image on open & close
+ *
+ * @param props Images to display in the image lightbox
+ */
+export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
+    props: P,
+): {
+    /**
+     * Generates trigger props
+     * @param index Provide an index to choose which image to display when the image lightbox opens.
+     * */
+    getTriggerProps: (options?: TriggerOptions) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
+    /** Props to forward to the ImageLightbox */
+    imageLightboxProps: ManagedProps & P;
+} {
+    const propsRef = React.useRef(props);
+
+    React.useEffect(() => {
+        propsRef.current = props;
+    }, [props]);
+
+    // Keep reference for each image elements
+    const imageRefsRef = React.useRef<Array<React.RefObject<HTMLImageElement>>>([]);
+
+    const currentImageRef = React.useRef<HTMLImageElement>(null);
+    const [imageLightboxProps, setImageLightboxProps] = React.useState(
+        () => ({ ...EMPTY_PROPS, ...props }) as ManagedProps & P,
+    );
+
+    const getTriggerProps = React.useMemo(() => {
+        const triggerImageRefs: Record<number, React.RefObject<HTMLImageElement>> = {};
+
+        async function close() {
+            const currentImage = currentImageRef.current;
+            if (!currentImage) {
+                return;
+            }
+            const currentIndex = imageRefsRef.current.findIndex(
+                (imageRef) => imageRef.current === currentImage,
+            ) as number;
+
+            await startViewTransition({
+                changes() {
+                    // Close lightbox
+                    setImageLightboxProps((prevProps) => ({ ...prevProps, isOpen: false }));
+                },
+                // Morph from the image in lightbox to the image in trigger
+                viewTransitionName: {
+                    source: currentImageRef,
+                    target: triggerImageRefs[currentIndex],
+                    name: CLASSNAME,
+                },
+            });
+        }
+
+        async function open(triggerElement: HTMLElement, { activeImageIndex }: TriggerOptions = {}) {
+            // If we find an image inside the trigger, animate it in transition with the opening image
+            const triggerImage = triggerImageRefs[activeImageIndex as any]?.current || findImage(triggerElement);
+
+            // Inject refs to improve transition and loading style
+            const images = propsRef.current?.images?.map((image, idx) => {
+                // Get or create image reference
+                let imgRef = imageRefsRef.current[idx];
+                if (!imgRef) {
+                    imgRef = React.createRef();
+                    imageRefsRef.current[idx] = imgRef;
+                }
+
+                // Try to use the trigger image as the loading placeholder
+                const loadingPlaceholderImageRef =
+                    triggerImage && idx === activeImageIndex ? { current: triggerImage } : undefined;
+
+                return { loadingPlaceholderImageRef, ...image, imgRef };
+            });
+
+            await startViewTransition({
+                changes: () => {
+                    // Open lightbox with setup props
+                    setImageLightboxProps((prevProps) => ({
+                        ...prevProps,
+                        ...propsRef.current,
+                        activeImageRef: currentImageRef,
+                        parentElement: { current: triggerElement },
+                        isOpen: true,
+                        onClose: () => {
+                            close();
+                            propsRef.current?.onClose?.();
+                        },
+                        images,
+                        activeImageIndex: activeImageIndex || 0,
+                    }));
+                },
+                // Morph from the image in trigger to the image in lightbox
+                viewTransitionName: {
+                    source: triggerImage,
+                    target: currentImageRef,
+                    name: CLASSNAME,
+                },
+            });
+        }
+
+        return memoize((options?: TriggerOptions) => ({
+            ref(element: HTMLElement | null) {
+                // Track trigger image ref if any
+                if (options?.activeImageIndex !== undefined && element) {
+                    triggerImageRefs[options.activeImageIndex] = { current: findImage(element) };
+                }
+            },
+            onClick(e: React.MouseEvent) {
+                open(e.target as HTMLElement, options);
+            },
+        }));
+    }, []);
+
+    return { getTriggerProps, imageLightboxProps };
+}

package/src/components/inline-list/InlineList.stories.tsx

@@ -0,0 +1,77 @@
+import { mdiEarth } from '@lumx/icons';
+import { Icon, Text } from '@lumx/react';
+import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
+import { allTypographyArgType } from '@lumx/react/stories/controls/typography';
+import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
+import { InlineList } from '.';
+
+export default {
+    title: 'LumX components/inline-list/InlineList',
+    component: InlineList,
+    argTypes: {
+        typography: allTypographyArgType,
+        color: colorArgType,
+        colorVariant: colorVariantArgType,
+        children: { control: false },
+    },
+};
+
+/**
+ * Inline list with three simple text elements
+ */
+export const WithElements = {
+    args: {
+        children: [
+            <span key="1">Some text</span>,
+            <span key="2">Some other text</span>,
+            <span key="3">Some other other text</span>,
+        ],
+    },
+};
+
+/**
+ * Using color, typography and more complex elements
+ */
+export const MixedNoWrapAndTruncate = {
+    args: {
+        typography: 'body1',
+        color: 'dark',
+        colorVariant: 'L2',
+        style: { width: '100%' },
+        children: [
+            <Text key="1" as="span" truncate>
+                Very very very very very long text
+            </Text>,
+            <Text key="2" as="span" noWrap>
+                <Icon icon={mdiEarth} />
+                Some text
+            </Text>,
+            <Text key="3" as="span" truncate>
+                Very very very very very long text
+            </Text>,
+        ],
+    },
+    decorators: [withResizableBox({ width: 400 })],
+};
+
+/**
+ * Line wrap on overflow
+ */
+export const Wrap = {
+    args: {
+        wrap: true,
+        children: [
+            <Text key="1" as="span">
+                Very very very very very long text
+            </Text>,
+            <Text key="2" as="span">
+                <Icon icon={mdiEarth} />
+                Some text
+            </Text>,
+            <Text key="3" as="span">
+                Very very very very very long text
+            </Text>,
+        ],
+    },
+    decorators: [withResizableBox({ width: 400 })],
+};

package/src/components/inline-list/InlineList.test.tsx

@@ -0,0 +1,52 @@
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render, screen, within } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { InlineList, InlineListProps } from '.';
+
+const CLASSNAME = InlineList.className as string;
+
+const setup = (props: Partial<InlineListProps> = {}) => {
+    render(<InlineList {...props} />);
+    const inlineList = queryByClassName(document.body, CLASSNAME);
+    return { props, inlineList };
+};
+
+describe(`<${InlineList.displayName}>`, () => {
+    describe('Snapshots and structure', () => {
+        it('should render default', () => {
+            const { inlineList } = setup({ children: ['Some text', 'Some other text'] });
+
+            expect(inlineList).toBeInTheDocument();
+
+            const list = screen.getByRole('list');
+            expect(list).toBeInTheDocument();
+
+            const listItems = within(list).queryAllByRole('listitem');
+            expect(listItems.length).toBe(2);
+            expect(listItems[0]).toHaveTextContent('Some text');
+            expect(listItems[1]).toHaveTextContent('Some other text');
+        });
+
+        it('should render with typography', () => {
+            const { inlineList } = setup({ typography: 'body2', children: 'Some text' });
+            expect(inlineList).toHaveClass('lumx-typography-body2');
+        });
+
+        it('should render with color', () => {
+            const { inlineList } = setup({ color: 'blue', children: 'Some text' });
+            expect(inlineList).toHaveClass('lumx-color-font-blue-N');
+        });
+
+        it('should render with color and variant', () => {
+            const { inlineList } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
+            expect(inlineList).toHaveClass('lumx-color-font-blue-D2');
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'inlineList',
+        forwardAttributes: 'inlineList',
+    });
+});