@lumx/react 3.1.4 → 3.2.0

package/src/components/mosaic/Mosaic.stories.tsx

@@ -1,85 +1,89 @@
-import React, { useCallback, useRef, useState } from 'react';
-
-import { Alignment, ImageBlock, Lightbox, Slideshow, SlideshowItem, Theme } from '@lumx/react';
-import { boolean, number } from '@storybook/addon-knobs';
-import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { IMAGES } from '@lumx/react/stories/controls/image';
 import { Mosaic } from './Mosaic';
 
-export default { title: 'LumX components/mosaic/Mosaic' };
+export default {
+    title: 'LumX components/mosaic/Mosaic',
+    component: Mosaic,
+    args: Mosaic.defaultProps,
+    argTypes: {},
+    decorators: [withWrapper({ style: { width: 250 } })],
+};
 
-export const OneThumbnail = ({ theme }: any) => (
-    <div style={{ width: 250 }}>
-        <Mosaic theme={theme} thumbnails={thumbnailsKnob(1)} />
-    </div>
-);
+export const OneThumbnail = {
+    args: {
+        thumbnails: [{ image: IMAGES.landscape1 }],
+    },
+};
 
-export const TwoThumbnails = ({ theme }: any) => (
-    <div style={{ width: 250 }}>
-        <Mosaic theme={theme} thumbnails={thumbnailsKnob(2)} />
-    </div>
-);
+export const OneThumbnailClickable = {
+    ...OneThumbnail,
+    argTypes: {
+        onImageClick: { action: true },
+    },
+};
 
-export const ThreeThumbnails = ({ theme }: any) => (
-    <div style={{ width: 250 }}>
-        <Mosaic theme={theme} thumbnails={thumbnailsKnob(3)} />
-    </div>
-);
+export const TwoThumbnail = {
+    args: {
+        thumbnails: [...OneThumbnail.args.thumbnails, { image: IMAGES.landscape2 }],
+    },
+};
 
-export const FourThumbnails = ({ theme }: any) => (
-    <div style={{ width: 250 }}>
-        <Mosaic theme={theme} thumbnails={thumbnailsKnob(4)} />
-    </div>
-);
+export const TwoThumbnailClickable = {
+    ...TwoThumbnail,
+    argTypes: {
+        onImageClick: { action: true },
+    },
+};
 
-export const FiveThumbnails = ({ theme }: any) => (
-    <div style={{ width: 250 }}>
-        <Mosaic theme={theme} thumbnails={thumbnailsKnob(5)} />
-    </div>
-);
+export const ThreeThumbnail = {
+    args: {
+        thumbnails: [...TwoThumbnail.args.thumbnails, { image: IMAGES.landscape3 }],
+    },
+};
 
-export const SixThumbnails = ({ theme }: any) => {
-    const enableSlideShow = boolean('Enable slideshow', true);
-    const thumbnails = thumbnailsKnob(number('Number of thumbnails', 6, { min: 1, max: 6 }));
-    const [activeIndex, setActiveIndex] = useState<number>();
-    const lightBoxParent = useRef(null);
-    const closeLightBox = useCallback(() => {
-        setActiveIndex(undefined);
-    }, [setActiveIndex]);
+export const ThreeThumbnailClickable = {
+    ...ThreeThumbnail,
+    argTypes: {
+        onImageClick: { action: true },
+    },
+};
 
-    return (
-        <div ref={lightBoxParent} style={{ width: 250 }}>
-            <Mosaic theme={theme} onImageClick={enableSlideShow ? setActiveIndex : undefined} thumbnails={thumbnails} />
+export const FourThumbnail = {
+    args: {
+        thumbnails: [...ThreeThumbnail.args.thumbnails, { image: IMAGES.portrait1 }],
+    },
+};
+
+export const FourThumbnailClickable = {
+    ...FourThumbnail,
+    argTypes: {
+        onImageClick: { action: true },
+    },
+};
+
+export const FiveThumbnail = {
+    args: {
+        thumbnails: [...FourThumbnail.args.thumbnails, { image: IMAGES.portrait2 }],
+    },
+};
+
+export const FiveThumbnailClickable = {
+    ...FiveThumbnail,
+    argTypes: {
+        onImageClick: { action: true },
+    },
+};
+
+export const SixThumbnail = {
+    args: {
+        thumbnails: [...FiveThumbnail.args.thumbnails, { image: IMAGES.portrait3 }],
+    },
+};
 
-            {enableSlideShow && (
-                <Lightbox
-                    isOpen={activeIndex !== undefined}
-                    parentElement={lightBoxParent}
-                    onClose={closeLightBox}
-                    closeButtonProps={{ label: 'Close' }}
-                >
-                    <Slideshow
-                        activeIndex={activeIndex}
-                        slideshowControlsProps={{
-                            nextButtonProps: { label: 'Next' },
-                            previousButtonProps: { label: 'Previous' },
-                        }}
-                        fillHeight
-                        theme={Theme.dark}
-                    >
-                        {thumbnails.map((thumbnail, index) => (
-                            <SlideshowItem key={`${thumbnail.alt}-${thumbnail.image}-${index}`}>
-                                <ImageBlock
-                                    alt={thumbnail.alt}
-                                    image={thumbnail.image}
-                                    theme={Theme.dark}
-                                    align={Alignment.center}
-                                    fillHeight
-                                />
-                            </SlideshowItem>
-                        ))}
-                    </Slideshow>
-                </Lightbox>
-            )}
-        </div>
-    );
+export const SixThumbnailClickable = {
+    ...SixThumbnail,
+    argTypes: {
+        onImageClick: { action: true },
+    },
 };

package/src/components/mosaic/Mosaic.test.tsx

@@ -6,7 +6,6 @@ import 'jest-enzyme';
 
 import React, { ReactElement } from 'react';
 import { Theme } from '..';
-import * as stories from './Mosaic.stories';
 
 const CLASSNAME = Mosaic.className as string;
 
@@ -17,9 +16,6 @@ jest.mock('@lumx/react/hooks/useIntersectionObserver', () => ({
 
 type SetupProps = Partial<MosaicProps>;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
 const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
     const props: any = { ...propsOverride };
     const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
@@ -33,22 +29,6 @@ const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
 };
 
 describe(`<${Mosaic.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        // Do snapshot render test on every stories.
-        for (const [storyName, Story] of Object.entries(stories)) {
-            if (typeof Story !== 'function') {
-                continue;
-            }
-
-            it(`should render story ${storyName}`, () => {
-                const wrapper = shallow(<Story />);
-                expect(wrapper.find('Mosaic').dive()).toMatchSnapshot();
-            });
-        }
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
         it('should pass theme prop to Thumbnails', () => {
             const expectedTheme = Theme.dark;
@@ -67,7 +47,6 @@ describe(`<${Mosaic.displayName}>`, () => {
         });
     });
 
-    // 3. Test events.
     describe('Events', () => {
         it('should keep Thumbnail onClick', () => {
             const onClick = jest.fn();
@@ -105,16 +84,6 @@ describe(`<${Mosaic.displayName}>`, () => {
         });
     });
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Nothing to do here.
-    });
-
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
-    });
-
     // Common tests suite.
     commonTestsSuite(setup, { className: 'wrapper' }, { className: CLASSNAME });
 });

package/src/components/navigation/Navigation.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import {
+    mdiHome,
+    mdiMessageTextOutline,
+    mdiFolderGoogleDrive,
+    mdiTextBox,
+    mdiLink,
+    mdiGoogleCirclesExtended,
+    mdiFolder,
+} from '@lumx/icons';
+import { Navigation, Orientation } from '@lumx/react';
+import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
+
+export default { title: 'LumX components/navigation/Navigation' };
+
+export const Default = ({ theme, onClick, orientation }: any) => {
+    return (
+        <Navigation theme={theme} aria-label="navigation" orientation={orientation}>
+            <Navigation.Item isCurrentPage label="Homepage" icon={mdiHome} href="#" />
+            <Navigation.Item
+                label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
+                href="#"
+            />
+            <Navigation.Item
+                label="Custom link element"
+                icon={mdiMessageTextOutline}
+                as={CustomLink}
+                // `to` prop is required in CustomLink
+                to="#"
+            />
+            <Navigation.Item as="button" label="Button element" icon={mdiFolderGoogleDrive} onClick={onClick} />
+            <Navigation.Section label="Section 1" icon={mdiFolder}>
+                <Navigation.Item label="A content" href="#content" />
+                <Navigation.Item label="A button" icon={mdiLink} href="https://www.google.com" />
+                <Navigation.Item
+                    label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
+                    icon={mdiTextBox}
+                    href="#content"
+                />
+                <Navigation.Item label="A community" icon={mdiGoogleCirclesExtended} href="#community" />
+                <Navigation.Section label="Section 1.1" icon={mdiFolder}>
+                    <Navigation.Item label="A content" icon={mdiTextBox} href="#content" />
+                    <Navigation.Item
+                        label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
+                        icon={mdiTextBox}
+                        href="#content"
+                    />
+                    <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" />
+                    <Navigation.Item label="A community" icon={mdiGoogleCirclesExtended} href="#community" />
+                </Navigation.Section>
+            </Navigation.Section>
+            <Navigation.Section label="Section 2" icon={mdiFolder}>
+                <Navigation.Item label="A content" icon={mdiTextBox} href="#content" />
+                <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" />
+                <Navigation.Item label="A community" icon={mdiGoogleCirclesExtended} href="#community" />
+            </Navigation.Section>
+        </Navigation>
+    );
+};
+Default.argTypes = { onClick: { action: true } };
+
+export const VerticalWithSection: any = Default.bind({});
+VerticalWithSection.args = { orientation: Orientation.vertical };
+
+export const HorizontalWithSection: any = Default.bind({});
+HorizontalWithSection.args = { orientation: Orientation.horizontal };

package/src/components/navigation/Navigation.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { Navigation, NavigationProps } from '.';
+import { Orientation } from '..';
+
+const CLASSNAME = Navigation.className as string;
+
+type SetupProps = Partial<NavigationProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+
+const setup = (propsOverride: SetupProps = {}) => {
+    const props = { 'aria-label': 'navigation', ...propsOverride } as any;
+    const { container } = render(
+        <Navigation {...props}>
+            <Navigation.Item label="A link" href="" />
+            <Navigation.Item label="A link" as="button" />
+            <Navigation.Item label="A link" href="" />
+        </Navigation>,
+    );
+
+    return {
+        container,
+        element: getByClassName(container, CLASSNAME),
+        props,
+    };
+};
+
+describe(`<${Navigation.displayName}>`, () => {
+    it('should render default', () => {
+        const { element } = setup();
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+    });
+
+    it('should render vertically by default', () => {
+        const { element } = setup();
+        expect(element).toHaveClass(`${CLASSNAME}--orientation-vertical`);
+    });
+
+    it('should render vertically when orientation is set to vertical', () => {
+        const { element } = setup({ orientation: Orientation.vertical });
+        expect(element).toHaveClass(`${CLASSNAME}--orientation-vertical`);
+    });
+
+    it('should render horizontally when orientation is set to horizontal', () => {
+        const { element } = setup({ orientation: Orientation.horizontal });
+        expect(element).toHaveClass(`${CLASSNAME}--orientation-horizontal`);
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
+});

package/src/components/navigation/Navigation.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef, ReactNode } from 'react';
+import classNames from 'classnames';
+import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { Orientation, Theme } from '@lumx/react';
+import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { NavigationSection } from './NavigationSection';
+import { NavigationItem } from './NavigationItem';
+import { NavigationContext } from './context';
+
+export type NavigationProps = React.ComponentProps<'nav'> &
+    HasClassName &
+    HasTheme & {
+        /** Content of the navigation. These components should be of type NavigationItem to be rendered */
+        children?: ReactNode;
+        orientation?: Orientation;
+    } & HasAriaLabelOrLabelledBy;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Navigation';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export const Navigation = Object.assign(
+    // eslint-disable-next-line react/display-name
+    forwardRef<HTMLElement, NavigationProps>((props, ref) => {
+        const { children, className, theme, orientation, ...forwardedProps } = props;
+        return (
+            <ThemeContext.Provider value={theme}>
+                <nav
+                    className={classNames(
+                        className,
+                        handleBasicClasses({
+                            prefix: CLASSNAME,
+                            theme,
+                            orientation,
+                        }),
+                    )}
+                    ref={ref}
+                    {...forwardedProps}
+                >
+                    <NavigationContext.Provider value={{ orientation }}>
+                        <ul className={`${CLASSNAME}__list`}>{children}</ul>
+                    </NavigationContext.Provider>
+                </nav>
+            </ThemeContext.Provider>
+        );
+    }),
+    {
+        displayName: COMPONENT_NAME,
+        className: CLASSNAME,
+        defaultProps: { theme: Theme.light, orientation: Orientation.vertical },
+        // Sub components
+        Section: NavigationSection,
+        Item: NavigationItem,
+    },
+);

package/src/components/navigation/NavigationItem.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { NavigationItem, NavigationItemProps } from './NavigationItem';
+
+const CLASSNAME = NavigationItem.className as string;
+
+type SetupProps = Partial<NavigationItemProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+
+const setup = (propsOverride: SetupProps = {}) => {
+    const props = { ...propsOverride };
+    const { container } = render(<NavigationItem label="A link" href="" {...props} />);
+
+    return {
+        container,
+        element: getByClassName(container, CLASSNAME),
+        link: getByClassName(container, `${CLASSNAME}__link`),
+        props,
+    };
+};
+
+describe(`<${NavigationItem.displayName}>`, () => {
+    it('should render default', () => {
+        const { element } = setup();
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'link' });
+});

package/src/components/navigation/NavigationItem.tsx

@@ -0,0 +1,89 @@
+import React, { ElementType, ReactNode, useState, useContext } from 'react';
+import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
+import classNames from 'classnames';
+import { forwardRefPolymorphic } from '@lumx/react/utils/forwardRefPolymorphic';
+import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+
+type BaseNavigationItemProps = {
+    /* Icon (SVG path). */
+    icon?: string;
+    /** Label content. */
+    label: ReactNode;
+    /** Mark as the current page link */
+    isCurrentPage?: boolean;
+};
+
+/** Make `href` required when `as` is `a` */
+type RequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;
+
+/**
+ * Navigation item props
+ */
+export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<E> &
+    HasTheme &
+    HasClassName &
+    BaseNavigationItemProps &
+    RequiredLinkHref<E>;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'NavigationItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export const NavigationItem = Object.assign(
+    forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {
+        const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;
+        const theme = useContext(ThemeContext);
+        const [labelElement, setLabelElement] = useState<HTMLSpanElement | null>(null);
+        const tooltipLabel =
+            typeof label === 'string' && labelElement && labelElement.offsetWidth < labelElement.scrollWidth
+                ? label
+                : null;
+
+        const buttonProps = Element === 'button' ? { type: 'button' } : {};
+
+        return (
+            <li
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        prefix: CLASSNAME,
+                        theme,
+                    }),
+                )}
+            >
+                <Tooltip label={tooltipLabel} placement={Placement.TOP}>
+                    <Element
+                        className={handleBasicClasses({
+                            prefix: `${CLASSNAME}__link`,
+                            isSelected: isCurrentPage,
+                        })}
+                        ref={ref}
+                        aria-current={isCurrentPage ? 'page' : undefined}
+                        {...buttonProps}
+                        {...forwardedProps}
+                    >
+                        {icon ? (
+                            <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} theme={theme} />
+                        ) : null}
+
+                        <Text as="span" truncate className={`${CLASSNAME}__label`} ref={setLabelElement}>
+                            {label}
+                        </Text>
+                    </Element>
+                </Tooltip>
+            </li>
+        );
+    }),
+    {
+        displayName: COMPONENT_NAME,
+        className: CLASSNAME,
+    },
+);

package/src/components/navigation/NavigationSection.test.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render, screen } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import userEvent from '@testing-library/user-event';
+import { NavigationItem } from './NavigationItem';
+import { NavigationSection, NavigationSectionProps } from './NavigationSection';
+import { NavigationContext } from './context';
+import { Orientation } from '..';
+
+const CLASSNAME = NavigationSection.className as string;
+
+type SetupProps = Partial<NavigationSectionProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+
+const setup = (propsOverride: SetupProps = {}, orientation: Orientation = Orientation.vertical) => {
+    const props = { ...propsOverride };
+    const { container } = render(
+        <NavigationContext.Provider value={{ orientation }}>
+            <NavigationSection label="Section 1" {...props}>
+                <NavigationItem label="A content" href="" />
+                <NavigationItem label="A link" href="" />
+                <NavigationItem label="A community" href="" />
+            </NavigationSection>
+        </NavigationContext.Provider>,
+    );
+
+    return {
+        container,
+        element: getByClassName(container, CLASSNAME),
+        query: {
+            button: () =>
+                screen.getByRole('button', {
+                    name: /section 1/i,
+                }),
+            content: () => queryByClassName(container, `${CLASSNAME}__drawer`),
+            popover: () => queryByClassName(container, `${CLASSNAME}__drawer--popover`),
+        },
+        props,
+    };
+};
+
+describe(`<${NavigationSection.displayName}>`, () => {
+    it('should render default', () => {
+        const { element } = setup();
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+    });
+
+    it('should be closed by default in vertical mode', () => {
+        const { element, query } = setup();
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+        // Section is visible
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
+        // Content is not visible
+        expect(query.content()).not.toBeInTheDocument();
+    });
+
+    it('should be closed by default in horizontal mode', () => {
+        const { element, query } = setup({}, Orientation.horizontal);
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+        // Section is visible
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
+        // Content is not visible
+        expect(query.popover()).not.toBeInTheDocument();
+    });
+
+    it('should toggle on click in vertical mode', async () => {
+        const { query } = setup();
+        // Content is not visible
+        expect(query.content()).not.toBeInTheDocument();
+        // click to open
+        await userEvent.click(query.button() as any);
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'true');
+        expect(query.button()).toHaveAttribute('aria-controls');
+        expect(query.content()).toBeInTheDocument();
+        expect(query.button().getAttribute('aria-controls')).toBe(query.content()?.getAttribute('id'));
+        // click to close
+        await userEvent.click(query.button() as any);
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
+        expect(query.content()).not.toBeInTheDocument();
+    });
+
+    it('should be in a popover and toggle on click in horizontal mode', async () => {
+        const { query } = setup({}, Orientation.horizontal);
+        // Content is not visible
+        expect(query.popover()).not.toBeInTheDocument();
+        // click to open
+        await userEvent.click(query.button() as any);
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'true');
+        expect(query.button()).toHaveAttribute('aria-controls');
+        expect(query.popover()).toBeInTheDocument();
+        expect(query.button().getAttribute('aria-controls')).toBe(query.popover()?.getAttribute('id'));
+        // click to close
+        await userEvent.click(query.button() as any);
+        expect(query.button()).toBeInTheDocument();
+        expect(query.button()).toHaveAttribute('aria-expanded', 'false');
+        expect(query.popover()).not.toBeInTheDocument();
+    });
+
+    it('should also toggle on click away in horizontal mode', async () => {
+        const { query } = setup({}, Orientation.horizontal);
+        // Content is not visible
+        expect(query.popover()).not.toBeInTheDocument();
+        // click to open
+        await userEvent.click(query.button() as any);
+        expect(query.popover()).toBeInTheDocument();
+        // click away to close
+        await userEvent.click(document.body);
+        expect(query.popover()).not.toBeInTheDocument();
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
+});