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

package/src/components/message/Message.tsx

@@ -0,0 +1,100 @@
+import { 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

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

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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,98 @@
+import { 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

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

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

@@ -0,0 +1,234 @@
+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

@@ -0,0 +1,65 @@
+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',
+        },
+    });
+});