@lumx/react 3.21.1-alpha.0 → 3.21.2-alpha.0

package/src/components/message/Message.tsx

@@ -1,100 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';
-import { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface MessageProps extends GenericProps {
-    /** Content. */
-    children?: ReactNode;
-    /** Whether the message has a background or not. */
-    hasBackground?: boolean;
-    /** Message variant. */
-    kind?: Kind;
-    /** Message custom icon SVG path. */
-    icon?: string;
-    /**
-     * Displays a close button.
-     *
-     * NB: only available if `kind === 'info' && hasBackground === true`
-     */
-    closeButtonProps?: {
-        /** The callback called when the button is clicked */
-        onClick: () => void;
-        /** The label of the close button. */
-        label: string;
-    };
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Message';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Associative map from message kind to color and icon.
- */
-const CONFIG = {
-    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },
-    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },
-    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },
-    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },
-};
-
-/**
- * Message component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Message = forwardRef<MessageProps, HTMLDivElement>((props, ref) => {
-    const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;
-    const { color, icon } = CONFIG[kind as Kind] || {};
-    const { onClick, label: closeButtonLabel } = closeButtonProps || {};
-    const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
-
-    return (
-        <div
-            ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    color,
-                    hasBackground,
-                    prefix: CLASSNAME,
-                }),
-            )}
-            {...forwardedProps}
-        >
-            {(customIcon || icon) && (
-                <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />
-            )}
-            <div className={`${CLASSNAME}__text`}>{children}</div>
-            {isCloseButtonDisplayed && (
-                <IconButton
-                    className={`${CLASSNAME}__close-button`}
-                    icon={mdiClose}
-                    onClick={onClick}
-                    label={closeButtonLabel}
-                    emphasis={Emphasis.low}
-                />
-            )}
-        </div>
-    );
-});
-
-Message.displayName = COMPONENT_NAME;
-Message.className = CLASSNAME;

package/src/components/message/index.ts

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

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

@@ -1,89 +0,0 @@
-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',
-    component: Mosaic,
-    args: Mosaic.defaultProps,
-    argTypes: {},
-    decorators: [withWrapper({ style: { width: 250 } })],
-};
-
-export const OneThumbnail = {
-    args: {
-        thumbnails: [{ image: IMAGES.landscape1 }],
-    },
-};
-
-export const OneThumbnailClickable = {
-    ...OneThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};
-
-export const TwoThumbnail = {
-    args: {
-        thumbnails: [...OneThumbnail.args.thumbnails, { image: IMAGES.landscape2 }],
-    },
-};
-
-export const TwoThumbnailClickable = {
-    ...TwoThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};
-
-export const ThreeThumbnail = {
-    args: {
-        thumbnails: [...TwoThumbnail.args.thumbnails, { image: IMAGES.landscape3 }],
-    },
-};
-
-export const ThreeThumbnailClickable = {
-    ...ThreeThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};
-
-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 }],
-    },
-};
-
-export const SixThumbnailClickable = {
-    ...SixThumbnail,
-    argTypes: {
-        onImageClick: { action: true },
-    },
-};

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

@@ -1,79 +0,0 @@
-import React from 'react';
-
-import { Mosaic, MosaicProps } from '@lumx/react/components/mosaic/Mosaic';
-import { render, screen, within } from '@testing-library/react';
-import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { Thumbnail } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import range from 'lodash/range';
-import userEvent from '@testing-library/user-event';
-
-const CLASSNAME = Mosaic.className as string;
-
-const setup = (props: Partial<MosaicProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<Mosaic thumbnails={[]} {...props} />, { wrapper });
-    const mosaic = getByClassName(document.body, CLASSNAME);
-    const thumbnails = queryAllByClassName(mosaic, Thumbnail.className as string);
-    const overlay = queryByClassName(mosaic, `${CLASSNAME}__overlay`);
-    return { props, mosaic, thumbnails, overlay };
-};
-
-const generateThumbnails = (count: number) =>
-    range(1, count + 1).map((i) => ({
-        image: `https://example.com/image${i}.png`,
-        alt: '',
-    }));
-
-describe(`<${Mosaic.displayName}>`, () => {
-    it.each([1, 2, 3, 4])('should render %s thumbnail', async (count) => {
-        const { mosaic, thumbnails } = setup({
-            thumbnails: generateThumbnails(count),
-        });
-        expect(mosaic).toHaveClass(`${CLASSNAME}--has-${count}-thumbnail${count > 1 ? 's' : ''}`);
-        expect(thumbnails.length).toBe(count);
-        for (const thumbnail of thumbnails) {
-            expect(within(thumbnail).queryByAltText('')).toBeInTheDocument();
-        }
-    });
-
-    it('should render more than 4 thumbnails', () => {
-        const { mosaic, thumbnails, overlay } = setup({
-            thumbnails: generateThumbnails(6),
-        });
-        expect(mosaic).toHaveClass(`${CLASSNAME}--has-4-thumbnails`);
-        expect(thumbnails.length).toBe(4);
-        expect(overlay).toBeInTheDocument();
-        expect(overlay).toHaveTextContent('+2');
-    });
-
-    it('should render clickable', async () => {
-        const onClick = vi.fn();
-        const onImageClick = vi.fn();
-        const { thumbnails } = setup({
-            thumbnails: generateThumbnails(6),
-            onImageClick,
-            onClick,
-        });
-
-        expect(screen.queryAllByRole('button').length).toBe(thumbnails.length);
-
-        // Click the third image
-        await userEvent.click(thumbnails[2]);
-        expect(onImageClick).toHaveBeenCalledWith(2);
-        expect(onClick).toHaveBeenCalled();
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'mosaic',
-        forwardAttributes: 'mosaic',
-        forwardRef: 'mosaic',
-        applyTheme: {
-            affects: [{ element: 'mosaic' }, { element: 'thumbnails' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/mosaic/Mosaic.tsx

@@ -1,98 +0,0 @@
-import React, { MouseEventHandler, useMemo } from 'react';
-
-import classNames from 'classnames';
-import take from 'lodash/take';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-
-import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface MosaicProps extends GenericProps, HasTheme {
-    /** Thumbnails. */
-    thumbnails: ThumbnailProps[];
-    /** On image click callback. */
-    onImageClick?(index: number): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Mosaic';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<MosaicProps> = {};
-
-/**
- * Mosaic component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Mosaic = forwardRef<MosaicProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { className, theme = defaultTheme, thumbnails, onImageClick, ...forwardedProps } = props;
-    const handleImageClick = useMemo(() => {
-        if (!onImageClick) return undefined;
-
-        return (index: number, onClick?: MouseEventHandler): MouseEventHandler =>
-            (event) => {
-                onClick?.(event);
-                onImageClick?.(index);
-            };
-    }, [onImageClick]);
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
-                [`${CLASSNAME}--has-1-thumbnail`]: thumbnails?.length === 1,
-                [`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,
-                [`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,
-                [`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4,
-            })}
-        >
-            <div className={`${CLASSNAME}__wrapper`}>
-                {take(thumbnails, 4).map((thumbnail: any, index: number) => {
-                    const { image, onClick, align, ...thumbnailProps } = thumbnail;
-
-                    return (
-                        <div key={index} className={`${CLASSNAME}__thumbnail`}>
-                            <Thumbnail
-                                {...thumbnailProps}
-                                align={align || Alignment.left}
-                                image={image}
-                                theme={theme}
-                                aspectRatio={AspectRatio.free}
-                                fillHeight
-                                onClick={handleImageClick?.(index, onClick) || onClick}
-                            />
-
-                            {thumbnails.length > 4 && index === 3 && (
-                                <div className={`${CLASSNAME}__overlay`}>
-                                    <span>+{thumbnails.length - 4}</span>
-                                </div>
-                            )}
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
-});
-Mosaic.displayName = COMPONENT_NAME;
-Mosaic.className = CLASSNAME;
-Mosaic.defaultProps = DEFAULT_PROPS;

package/src/components/mosaic/index.ts

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

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

@@ -1,236 +0,0 @@
-import React from 'react';
-
-import {
-    mdiHome,
-    mdiMessageTextOutline,
-    mdiFolderGoogleDrive,
-    mdiTextBox,
-    mdiLink,
-    mdiGoogleCirclesExtended,
-    mdiFolder,
-} from '@lumx/icons';
-import { Navigation, Orientation, Theme } from '@lumx/react';
-import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
-import { withTheming } from '@lumx/react/stories/utils/theming';
-import pick from 'lodash/pick';
-import { DESIGN_TOKENS } from '@lumx/core/js/constants/design-tokens';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-
-export default {
-    title: 'LumX components/navigation/Navigation',
-    component: Navigation,
-    argTypes: {
-        'itemProps.onClick': { action: true, table: { disable: true } },
-    },
-};
-
-/**
- * Demonstrate a full-featured navigation
- */
-export const FullFeatured = {
-    render({ itemProps, orientation }: any) {
-        return (
-            <Navigation aria-label="navigation" orientation={orientation}>
-                <Navigation.Item isCurrentPage label="Homepage" icon={mdiHome} href="#" {...itemProps} />
-                <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="#"
-                    {...itemProps}
-                />
-                <Navigation.Item
-                    label="Custom link element"
-                    icon={mdiMessageTextOutline}
-                    as={CustomLink}
-                    // `to` prop is required in CustomLink
-                    to="#"
-                    {...itemProps}
-                />
-                <Navigation.Item as="button" label="Button element" icon={mdiFolderGoogleDrive} {...itemProps} />
-                <Navigation.Section label="Section 1" icon={mdiFolder} {...itemProps}>
-                    <Navigation.Item label="A content" href="#content" {...itemProps} />
-                    <Navigation.Item label="A button" icon={mdiLink} href="https://www.google.com" {...itemProps} />
-                    <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"
-                        {...itemProps}
-                    />
-                    <Navigation.Item
-                        label="A community"
-                        icon={mdiGoogleCirclesExtended}
-                        href="#community"
-                        {...itemProps}
-                    />
-                    <Navigation.Section label="Section 1.1" icon={mdiFolder} {...itemProps}>
-                        <Navigation.Item label="A content" icon={mdiTextBox} href="#content" {...itemProps} />
-                        <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"
-                            {...itemProps}
-                        />
-                        <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" {...itemProps} />
-                        <Navigation.Item
-                            label="A community"
-                            icon={mdiGoogleCirclesExtended}
-                            href="#community"
-                            {...itemProps}
-                        />
-                    </Navigation.Section>
-                </Navigation.Section>
-                <Navigation.Section label="Section 2" icon={mdiFolder} {...itemProps}>
-                    <Navigation.Item label="A content" icon={mdiTextBox} href="#content" {...itemProps} />
-                    <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" {...itemProps} />
-                    <Navigation.Item
-                        label="A community"
-                        icon={mdiGoogleCirclesExtended}
-                        href="#community"
-                        {...itemProps}
-                    />
-                </Navigation.Section>
-            </Navigation>
-        );
-    },
-    decorators: [withNestedProps()],
-};
-
-/**
- * Horizontal navigation
- */
-export const FullFeaturedHorizontal = { ...FullFeatured, args: { orientation: Orientation.horizontal } };
-
-/**
- * Demonstrate all item variants
- */
-export const ItemVariants = {
-    args: {
-        'itemProps.icon': mdiHome,
-        'itemProps.as': 'button',
-    },
-    argTypes: {
-        'itemProps.icon': iconArgType,
-        'itemProps.as': getSelectArgType(['button', 'a']),
-        'itemProps.href': { control: 'text', if: { arg: 'itemProps.as', eq: 'a' } },
-    },
-    render: ({ itemProps, ...args }: any) => (
-        <Navigation aria-label="navigation" {...args}>
-            {Object.entries({
-                '': {},
-                Current: { isCurrentPage: true },
-            }).map(([key1, currentProps]) =>
-                Object.entries({
-                    Item: {},
-                    'Item (hover)': { 'data-lumx-hover': true },
-                    'Item (active)': { 'data-lumx-active': true },
-                }).map(([key2, stateProps]) => (
-                    <Navigation.Item
-                        key={key1 + key2}
-                        label={`${key1} ${key2}`}
-                        {...currentProps}
-                        {...stateProps}
-                        {...itemProps}
-                    />
-                )),
-            )}
-
-            {Object.entries({
-                Section: {},
-                'Section (hover)': { 'data-lumx-hover': true },
-                'Section (active)': { 'data-lumx-active': true },
-            }).map(([key2, stateProps]) => (
-                <Navigation.Section key={key2} label={key2} {...stateProps} {...itemProps}>
-                    <Navigation.Item as="button" label="SubItem 1" />
-                    <Navigation.Item as="button" label="SubItem 2" />
-                </Navigation.Section>
-            ))}
-        </Navigation>
-    ),
-    decorators: [
-        withNestedProps(),
-        withThemedBackground(),
-        withCombinations({
-            sectionStyle: { display: 'inline-block' },
-            combinations: {
-                cols: { '': {}, Focused: { 'itemProps.data-focus-visible-added': true } },
-                sections: {
-                    'Theme light': { theme: undefined },
-                    'Theme dark': { theme: Theme.dark },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * Test CSS variable theming
- */
-export const Theming = {
-    ...ItemVariants,
-    decorators: [
-        ...ItemVariants.decorators,
-        withTheming({
-            properties: pick(DESIGN_TOKENS, ['navigation']),
-            values: `
-            --lumx-navigation-item-emphasis-low-state-default-border-top-width: 5px;
-            --lumx-navigation-item-emphasis-low-state-default-border-right-width: 2px;
-            --lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 3px;
-            --lumx-navigation-item-emphasis-low-state-default-border-left-width: 4px;
-            --lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: lightcoral;
-            --lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: lightsalmon;
-            --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: lightsalmon;
-            --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: lightcoral;
-
-            --lumx-navigation-item-emphasis-low-state-hover-border-top-width: 4px;
-            --lumx-navigation-item-emphasis-low-state-hover-border-right-width: 5px;
-            --lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 2px;
-            --lumx-navigation-item-emphasis-low-state-hover-border-left-width: 3px;
-            --lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: lightgreen;
-            --lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: lightpink;
-            --lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: lightpink;
-            --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: lightgreen;
-
-            --lumx-navigation-item-emphasis-low-state-active-border-top-width: 3px;
-            --lumx-navigation-item-emphasis-low-state-active-border-right-width: 4px;
-            --lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 5px;
-            --lumx-navigation-item-emphasis-low-state-active-border-left-width: 2px;
-            --lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: lemonchiffon;
-            --lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: lavenderblush;
-            --lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: lavenderblush;
-            --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: lemonchiffon;
-
-            ////
-
-            --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 2px;
-            --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 3px;
-            --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 4px;
-            --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 5px;
-            --lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: red;
-            --lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: orange;
-            --lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: blue;
-            --lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: violet;
-
-            --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 3px;
-            --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 4px;
-            --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 5px;
-            --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 2px;
-            --lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: green;
-            --lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: violet;
-            --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: violet;
-            --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: green;
-
-            --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 4px;
-            --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 5px;
-            --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 2px;
-            --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 3px;
-            --lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: orange;
-            --lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: pink;
-            --lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: pink;
-            --lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: orange;
-            `,
-        }),
-    ],
-};

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

@@ -1,67 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { getAllByClassName, getByClassName } from '@lumx/react/testing/utils/queries';
-import { Orientation } from '@lumx/core/js/constants';
-import { Navigation, NavigationProps } 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 = {}, { wrapper }: SetupRenderOptions = {}) => {
-    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>,
-        { wrapper },
-    );
-
-    const element = getByClassName(container, CLASSNAME);
-    const items = getAllByClassName(element, Navigation.Item.className as string);
-    return { container, element, items, 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',
-        applyTheme: {
-            affects: [{ element: 'element' }, { element: 'items' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});