@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.12

package/src/components/side-navigation/SideNavigationItem.stories.tsx

@@ -1,133 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks,import/no-extraneous-dependencies */
-import React from 'react';
-import pick from 'lodash/pick';
-
-import { Emphasis, GridColumn, SideNavigation, SideNavigationItem } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withTheming } from '@lumx/react/stories/utils/theming';
-import { DESIGN_TOKENS } from '@lumx/core/js/constants/design-tokens';
-import { disableArgTypes } from '@lumx/react/stories/utils/disableArgTypes';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { action } from 'storybook/actions';
-
-const EMPHASIS = [Emphasis.high, Emphasis.medium, Emphasis.low];
-
-export default {
-    title: 'LumX components/side-navigation/Side Navigation Item',
-    component: SideNavigationItem,
-    args: {
-        label: 'Item',
-        'toggleButtonProps.label': 'Toggle',
-    },
-    argTypes: {
-        emphasis: getSelectArgType(EMPHASIS),
-        icon: iconArgType,
-        closeMode: { control: { type: 'inline-radio' }, if: { arg: 'children', exists: true } },
-        isOpen: { if: { arg: 'children', exists: true } },
-        onClick: { action: true, table: { disable: true } },
-        ...disableArgTypes(['ref', 'children', 'linkAs', 'linkProps', 'toggleButtonProps', 'onActionClick']),
-    },
-    render: (args: any) => {
-        const [isOpen, setIsOpen] = React.useState<boolean | undefined>(undefined);
-
-        const toggleCallback = args.onActionClick ? 'onActionClick' : 'onClick';
-        const toggle: React.MouseEventHandler = (event) => {
-            args?.[toggleCallback]?.(event);
-            setIsOpen((wasOpen) => !wasOpen);
-        };
-        return (
-            <SideNavigation>
-                <SideNavigationItem {...args} {...{ [toggleCallback]: toggle }} isOpen={isOpen} />
-            </SideNavigation>
-        );
-    },
-};
-
-const STATE_COMBINATIONS = withCombinations({
-    combinations: {
-        cols: {
-            Default: {},
-            Hover: { 'linkProps.data-lumx-hover': true },
-            Active: { 'linkProps.data-lumx-active': true },
-        },
-        rows: {
-            Default: {},
-            Focused: { 'linkProps.data-focus-visible-added': true },
-            Selected: { isSelected: true },
-            'Selected & Focused': { isSelected: true, 'linkProps.data-focus-visible-added': true },
-        },
-    },
-});
-
-/**
- * Demonstrate item & section variants
- */
-export const ItemsAndSections = {
-    argTypes: { ...disableArgTypes(['isSelected']) },
-    decorators: [
-        withNestedProps(),
-        STATE_COMBINATIONS,
-        withCombinations({
-            combinations: {
-                rows: {
-                    '': {},
-                    'With children': {
-                        children: <SideNavigationItem label="Item 1" toggleButtonProps={{ label: 'Open' }} />,
-                    },
-                },
-                cols: {
-                    '': {},
-                    'With action click': {
-                        onActionClick: action('onActionClick'),
-                    },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * Demonstrate emphasis variants
- */
-export const EmphasisVariants = {
-    argTypes: { ...disableArgTypes(['emphasis', 'isSelected']) },
-    decorators: [
-        withNestedProps(),
-        STATE_COMBINATIONS,
-        withCombinations({
-            combinations: {
-                sections: { key: 'emphasis', options: EMPHASIS },
-            },
-        }),
-        withWrapper({ itemMinWidth: 300, maxColumns: 3 }, GridColumn),
-    ],
-};
-
-/**
- * Test CSS variable theming
- */
-export const Theming = {
-    ...ItemsAndSections,
-    decorators: [
-        ...ItemsAndSections.decorators,
-        withTheming({
-            properties: pick(DESIGN_TOKENS, ['side-navigation']),
-            values: `
-            --lumx-side-navigation-item-emphasis-selected-state-default-border-width: 2px;
-            --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: red;
-            --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: orange;
-
-            --lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 3px;
-            --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: green;
-            --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: red;
-
-            --lumx-side-navigation-item-emphasis-selected-state-active-border-width: 4px;
-            --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: orange;
-            --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: violet;
-            `,
-        }),
-    ],
-};

package/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -1,136 +0,0 @@
-import { getAllByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
-import { render, screen } from '@testing-library/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
-import { SideNavigationItem, SideNavigationItemProps } from './SideNavigationItem';
-
-const CLASSNAME = SideNavigationItem.className as string;
-
-const toggleButtonProps = { label: 'Toggle' };
-
-vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: Partial<SideNavigationItemProps> = {}) => {
-    const props = { label: 'Label', toggleButtonProps, ...propsOverride };
-    render(<SideNavigationItem {...props} />);
-    const sideNavigation = getAllByClassName(document.body, CLASSNAME)[0];
-    return {
-        chevron: queryAllByClassName(sideNavigation, `${CLASSNAME}__chevron`)[0] || null,
-        toggle: queryAllByClassName(sideNavigation, `${CLASSNAME}__toggle`)[0] || null,
-        children: queryAllByClassName(sideNavigation, `${CLASSNAME}__children`)[0] || null,
-        icon: queryAllByClassName(sideNavigation, `${CLASSNAME}__icon`)[0],
-        label: queryAllByClassName(sideNavigation, `${CLASSNAME}__link span`)[0],
-        link: queryAllByClassName(sideNavigation, `${CLASSNAME}__link`)[0],
-        props,
-        sideNavigation,
-    };
-};
-
-describe(`<${SideNavigationItem.displayName}>`, () => {
-    it('should render default', () => {
-        const label = 'Side navigation item';
-        const { sideNavigation, link } = setup({ label });
-        expect(sideNavigation).toBeInTheDocument();
-        expect(sideNavigation).toBe(screen.queryByRole('listitem'));
-
-        expect(link).toBeInTheDocument();
-        expect(link).toBe(screen.queryByRole('button', { name: label }));
-        expect(link).not.toHaveAttribute('aria-expanded');
-    });
-
-    it('should render a link', () => {
-        const label = 'Side navigation item';
-        const { props, link } = setup({ linkProps: { href: 'https://example.com' }, label });
-        expect(link).toBe(screen.queryByRole('link', { name: label }));
-        expect(link).toHaveAttribute('href', props.linkProps?.href);
-        expect(link).not.toHaveAttribute('aria-expanded');
-    });
-
-    describe('children', () => {
-        it('should render with children closed unmount', () => {
-            const label = 'Side navigation item';
-            const { chevron, link, children } = setup({
-                label,
-                children: [
-                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
-                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
-                ],
-            });
-            expect(link).toHaveTextContent(label);
-            expect(link).toHaveAttribute('aria-expanded', 'false');
-            expect(link).not.toHaveAttribute('aria-controls');
-            expect(chevron).toBeInTheDocument();
-            expect(children).not.toBeInTheDocument();
-        });
-
-        it('should render with children closed hidden', () => {
-            const label = 'Side navigation item';
-            const { chevron, link, children } = setup({
-                label,
-                closeMode: 'hide',
-                children: [
-                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
-                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
-                ],
-            });
-            expect(link).toHaveTextContent(label);
-            expect(link).toHaveAttribute('aria-expanded', 'false');
-            expect(link).toHaveAttribute('aria-controls', children?.id);
-            expect(chevron).toBeInTheDocument();
-            // Children are in DOM but hidden in CSS (can't test that here)
-            expect(children).toBeInTheDocument();
-        });
-
-        it('should render with children opened', () => {
-            const label = 'Side navigation item';
-            const { chevron, link, children } = setup({
-                label,
-                isOpen: true,
-                children: [
-                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
-                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
-                ],
-            });
-            expect(link).toHaveTextContent(label);
-            expect(link).toHaveAttribute('aria-expanded', 'true');
-            expect(link).toHaveAttribute('aria-controls', children?.id);
-            expect(chevron).toBeInTheDocument();
-            expect(children).toBeInTheDocument();
-        });
-    });
-
-    describe('children and link', () => {
-        it('should render with children and link', () => {
-            const onActionClick = vi.fn();
-            const label = 'Side navigation item';
-            const { props, toggle, link } = setup({
-                label,
-                linkProps: { href: 'https://example.com' },
-                onActionClick,
-                children: [
-                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
-                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
-                ],
-            });
-            // Link
-            expect(link).toBe(screen.queryByRole('link', { name: label }));
-            expect(link).toHaveAttribute('href', props.linkProps?.href);
-
-            // Toggle button
-            expect(toggle).toBe(screen.queryByRole('button', { name: toggleButtonProps.label }));
-            expect(toggle).toHaveAttribute('aria-expanded', 'false');
-            expect(toggle).not.toHaveAttribute('aria-controls');
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'sideNavigation',
-        forwardAttributes: 'sideNavigation',
-        forwardRef: 'sideNavigation',
-    });
-});

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -1,165 +0,0 @@
-import { Children, ReactNode } from 'react';
-
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-
-import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
-import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
-import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from '@lumx/react/hooks/useId';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
-
-/**
- * Defines the props of the component.
- */
-export interface SideNavigationItemProps extends GenericProps, HasCloseMode {
-    /** SideNavigationItem elements. */
-    children?: ReactNode;
-    /** Emphasis variant. */
-    emphasis?: Emphasis;
-    /** Label content. */
-    label: string | ReactNode;
-    /** Icon (SVG path). */
-    icon?: string;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-    /** Whether the component is selected or not. */
-    isSelected?: boolean;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    /** Props to pass to the link (minus those already set by the SideNavigationItem props). */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
-    toggleButtonProps: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;
-    /** On action button click callback. */
-    onActionClick?(evt: React.MouseEvent): void;
-    /** On click callback. */
-    onClick?(evt: React.MouseEvent): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SideNavigationItem';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<SideNavigationItemProps> = {
-    emphasis: Emphasis.high,
-    closeMode: 'unmount',
-};
-
-/**
- * SideNavigationItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElement>((props, ref) => {
-    const {
-        children,
-        className,
-        emphasis = DEFAULT_PROPS.emphasis,
-        icon,
-        isOpen,
-        isSelected,
-        label,
-        linkAs,
-        linkProps,
-        onActionClick,
-        onClick,
-        toggleButtonProps,
-        closeMode = DEFAULT_PROPS.closeMode,
-        ...forwardedProps
-    } = props;
-
-    const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
-    const hasContent = !isEmpty(content);
-    const shouldSplitActions = Boolean(onActionClick);
-    const showChildren = hasContent && isOpen;
-
-    const contentId = useId();
-    const ariaProps: any = {};
-    if (hasContent) {
-        ariaProps['aria-expanded'] = !!showChildren;
-        // Associate with content ID only if in DOM (shown or hidden and not unmounted)
-        ariaProps['aria-controls'] = showChildren || closeMode === 'hide' ? contentId : undefined;
-    }
-
-    return (
-        <li
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    emphasis,
-                    isOpen: showChildren,
-                    isSelected,
-                    prefix: CLASSNAME,
-                }),
-            )}
-        >
-            {shouldSplitActions ? (
-                <div className={`${CLASSNAME}__wrapper`}>
-                    <RawClickable
-                        as={linkAs || (linkProps?.href ? 'a' : 'button')}
-                        {...(linkProps as any)}
-                        className={`${CLASSNAME}__link`}
-                        onClick={onClick}
-                    >
-                        {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
-                        <span>{label}</span>
-                    </RawClickable>
-
-                    <IconButton
-                        {...toggleButtonProps}
-                        className={`${CLASSNAME}__toggle`}
-                        icon={isOpen ? mdiChevronUp : mdiChevronDown}
-                        size={Size.m}
-                        emphasis={Emphasis.low}
-                        onClick={onActionClick}
-                        {...ariaProps}
-                    />
-                </div>
-            ) : (
-                <RawClickable
-                    as={linkAs || (linkProps?.href ? 'a' : 'button')}
-                    {...linkProps}
-                    className={`${CLASSNAME}__link`}
-                    onClick={onClick}
-                    {...ariaProps}
-                >
-                    {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
-                    <span>{label}</span>
-                    {hasContent && (
-                        <Icon
-                            className={`${CLASSNAME}__chevron`}
-                            icon={isOpen ? mdiChevronUp : mdiChevronDown}
-                            size={Size.xs}
-                        />
-                    )}
-                </RawClickable>
-            )}
-
-            {(closeMode === 'hide' || showChildren) && (
-                <ul className={`${CLASSNAME}__children`} id={contentId}>
-                    {content}
-                </ul>
-            )}
-        </li>
-    );
-});
-SideNavigationItem.displayName = COMPONENT_NAME;
-SideNavigationItem.className = CLASSNAME;
-SideNavigationItem.defaultProps = DEFAULT_PROPS;

package/src/components/side-navigation/index.ts

@@ -1,2 +0,0 @@
-export * from './SideNavigation';
-export * from './SideNavigationItem';

package/src/components/skeleton/SkeletonCircle.stories.tsx

@@ -1,41 +0,0 @@
-import { Size, SkeletonCircle, SkeletonCircleProps } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { ALL_COLORS, colorArgType } from '@lumx/react/stories/controls/color';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-const sizes: SkeletonCircleProps['size'][] = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
-
-export default {
-    title: 'LumX components/skeleton/Skeleton Circle',
-    component: SkeletonCircle,
-    args: SkeletonCircle.defaultProps,
-    argTypes: {
-        size: getSelectArgType(sizes),
-        color: colorArgType,
-    },
-};
-
-/**
- * All sizes
- */
-export const AllSize = {
-    argTypes: { size: { control: false } },
-    decorators: [
-        withCombinations({
-            combinations: { cols: { key: 'size', options: sizes } },
-        }),
-    ],
-};
-
-/**
- * All colors
- */
-export const AllColor = {
-    args: { size: Size.m },
-    argTypes: { color: { control: false } },
-    decorators: [
-        withCombinations({
-            combinations: { cols: { key: 'color', options: ALL_COLORS } },
-        }),
-    ],
-};

package/src/components/skeleton/SkeletonCircle.test.tsx

@@ -1,27 +0,0 @@
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { SkeletonCircle, SkeletonCircleProps } from './SkeletonCircle';
-
-const CLASSNAME = SkeletonCircle.className as string;
-
-const setup = (props: Partial<SkeletonCircleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<SkeletonCircle {...(props as any)} />, { wrapper });
-    const skeletonCircle = queryByClassName(document.body, CLASSNAME);
-    return { props, skeletonCircle };
-};
-
-describe(`<${SkeletonCircle.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'skeletonCircle',
-        forwardAttributes: 'skeletonCircle',
-        applyTheme: {
-            affects: [{ element: 'skeletonCircle' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/skeleton/SkeletonCircle.tsx

@@ -1,52 +0,0 @@
-import classNames from 'classnames';
-
-import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface SkeletonCircleProps extends GenericProps, HasTheme {
-    /** Size variant. */
-    size: GlobalSize;
-    /** The color of the skeleton. */
-    color?: ColorPalette;
-}
-
-const DEFAULT_PROPS: Partial<SkeletonCircleProps> = {};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SkeletonCircle';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SkeletonCircle component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SkeletonCircle = forwardRef<SkeletonCircleProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, color, theme }))}
-        />
-    );
-});
-SkeletonCircle.displayName = COMPONENT_NAME;
-SkeletonCircle.defaultProps = DEFAULT_PROPS;
-SkeletonCircle.className = CLASSNAME;

package/src/components/skeleton/SkeletonRectangle.stories.tsx

@@ -1,82 +0,0 @@
-import { AspectRatio, Size, SkeletonRectangle, SkeletonRectangleVariant, SkeletonRectangleProps } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { ALL_COLORS, colorArgType } from '@lumx/react/stories/controls/color';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-const variants: SkeletonRectangleProps['variant'][] = [
-    SkeletonRectangleVariant.squared,
-    SkeletonRectangleVariant.rounded,
-    SkeletonRectangleVariant.pill,
-];
-const sizes: SkeletonRectangleProps['size'][] = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
-const aspectRatios: SkeletonRectangleProps['aspectRatio'][] = [
-    AspectRatio.wide,
-    AspectRatio.horizontal,
-    AspectRatio.square,
-    AspectRatio.vertical,
-];
-
-export default {
-    title: 'LumX components/skeleton/Skeleton Rectangle',
-    component: SkeletonRectangle,
-    args: SkeletonRectangle.defaultProps,
-    argTypes: {
-        width: getSelectArgType(sizes),
-        height: getSelectArgType(sizes),
-        aspectRatio: getSelectArgType(aspectRatios),
-        color: colorArgType,
-        variant: getSelectArgType(variants),
-    },
-};
-
-/**
- * All sizes
- */
-export const AllSize = {
-    argTypes: { width: { control: false }, height: { control: false } },
-    decorators: [
-        withCombinations({
-            // Using same width than height
-            combinations: { cols: Object.fromEntries(sizes.map((s) => [s, { height: s, width: s }])) },
-        }),
-    ],
-};
-
-/**
- * All ratios (for a fixed width)
- */
-export const AllRatios = {
-    args: { width: Size.xl },
-    argTypes: { aspectRatio: { control: false } },
-    decorators: [
-        withCombinations({
-            combinations: { cols: { key: 'aspectRatio', options: aspectRatios } },
-        }),
-    ],
-};
-
-/**
- * All variants
- */
-export const AllVariants = {
-    args: { width: Size.l, height: Size.m },
-    argTypes: { variant: { control: false } },
-    decorators: [
-        withCombinations({
-            combinations: { cols: { key: 'variant', options: variants } },
-        }),
-    ],
-};
-
-/**
- * All colors
- */
-export const AllColors = {
-    args: { width: Size.l, height: Size.m },
-    argTypes: { color: { control: false } },
-    decorators: [
-        withCombinations({
-            combinations: { cols: { key: 'color', options: ALL_COLORS } },
-        }),
-    ],
-};

package/src/components/skeleton/SkeletonRectangle.test.tsx

@@ -1,27 +0,0 @@
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { SkeletonRectangle, SkeletonRectangleProps } from './SkeletonRectangle';
-
-const CLASSNAME = SkeletonRectangle.className as string;
-
-const setup = (props: Partial<SkeletonRectangleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<SkeletonRectangle {...(props as any)} />, { wrapper });
-    const skeletonRectangle = queryByClassName(document.body, CLASSNAME);
-    return { props, skeletonRectangle };
-};
-
-describe(`<${SkeletonRectangle.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'skeletonRectangle',
-        forwardAttributes: 'skeletonRectangle',
-        applyTheme: {
-            affects: [{ element: 'skeletonRectangle' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});