@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -1,140 +0,0 @@
-import React from 'react';
-import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { Heading, HeadingLevelProvider } from '@lumx/react';
-import { WithButtonTrigger, WithIconButtonTrigger } from './PopoverDialog.stories';
-import { PopoverDialog } from './PopoverDialog';
-
-vi.mock('@lumx/react/utils/browser/isFocusVisible');
-
-describe(`<${PopoverDialog.displayName}>`, () => {
-    it('should open and init focus', async () => {
-        const label = 'Test Label';
-        render(<WithButtonTrigger label={label} />);
-
-        // Open popover
-        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
-        await userEvent.click(triggerElement);
-
-        const dialog = await screen.findByRole('dialog', { name: label });
-
-        // Focused the first button
-        expect(within(dialog).getAllByRole('button')[0]).toHaveFocus();
-    });
-
-    it('should work with aria-label', async () => {
-        const label = 'Test Label';
-        render(<WithButtonTrigger aria-label={label} />);
-
-        // Open popover
-        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
-        await userEvent.click(triggerElement);
-
-        expect(await screen.findByRole('dialog', { name: label })).toBeInTheDocument();
-    });
-
-    it('should trap focus', async () => {
-        const label = 'Test Label';
-        render(<WithButtonTrigger label={label} />);
-
-        // Open popover
-        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
-        await userEvent.click(triggerElement);
-
-        const dialog = await screen.findByRole('dialog', { name: label });
-
-        const dialogButtons = within(dialog).getAllByRole('button');
-
-        // First button should have focus by default on opening
-        expect(dialogButtons[0]).toHaveFocus();
-
-        // Tab to next button
-        await userEvent.tab();
-
-        // Second button should have focus
-        expect(dialogButtons[1]).toHaveFocus();
-
-        // Tab to next button
-        await userEvent.tab();
-
-        // As there is no more button, focus should loop back to first button.
-        expect(dialogButtons[0]).toHaveFocus();
-    });
-
-    it('should close on escape and restore focus to trigger', async () => {
-        const label = 'Test Label';
-        render(<WithButtonTrigger label={label} />);
-
-        // Open popover
-        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
-        await userEvent.click(triggerElement);
-
-        const dialog = await screen.findByRole('dialog', { name: label });
-
-        // Close the popover
-        await userEvent.keyboard('{escape}');
-
-        expect(dialog).not.toBeInTheDocument();
-
-        // Focus restored to the trigger element
-        expect(triggerElement).toHaveFocus();
-    });
-
-    it('should close externally and restore focus to trigger', async () => {
-        const label = 'Test Label';
-        render(<WithButtonTrigger label={label} />);
-
-        // Open popover
-        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
-        await userEvent.click(triggerElement);
-
-        const dialog = await screen.findByRole('dialog', { name: label });
-
-        // Close the popover
-        await userEvent.click(screen.getByRole('button', { name: 'Close' }));
-
-        expect(dialog).not.toBeInTheDocument();
-
-        // Focus restored to the trigger element
-        expect(triggerElement).toHaveFocus();
-    });
-
-    it('should close on escape and restore focus to trigger having a tooltip', async () => {
-        const label = 'Test Label';
-        render(<WithIconButtonTrigger label={label} />);
-
-        // Open popover
-        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
-        await userEvent.click(triggerElement);
-
-        const dialog = await screen.findByRole('dialog', { name: label });
-
-        // Close the popover
-        await userEvent.keyboard('{escape}');
-
-        expect(dialog).not.toBeInTheDocument();
-
-        // Focus restored to the trigger element
-        expect(triggerElement).toHaveFocus();
-    });
-
-    it('should have reset the heading level context', async () => {
-        render(
-            // This level context should not affect headings inside the popover dialog
-
-            <HeadingLevelProvider level={3}>
-                <WithIconButtonTrigger>
-                    {/* Heading inside the popover dialog */}
-                    <Heading>Title</Heading>
-                </WithIconButtonTrigger>
-            </HeadingLevelProvider>,
-        );
-
-        // Open popover
-        await userEvent.click(screen.getByRole('button', { name: 'Open popover' }));
-
-        // Heading inside should use the popover dialog heading level 2
-        expect(screen.getByRole('heading', { name: 'Title', level: 2 })).toBeInTheDocument();
-    });
-});

package/src/components/popover-dialog/PopoverDialog.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { HeadingLevelProvider } from '@lumx/react/components/heading';
-import { Popover, PopoverProps } from '../popover/Popover';
-
-/**
- * PopoverDialog props.
- * The PopoverDialog has the same props as the Popover but requires an accessible label.
- */
-export type PopoverDialogProps = PopoverProps & HasAriaLabelOrLabelledBy;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'PopoverDialog';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<PopoverDialogProps> = {};
-
-/**
- * PopoverDialog component.
- * Defines a popover that acts like a dialog
- * * Has a dialog aria role
- * * Sets a focus trap within the popover
- * * Closes on click away and escape.
- */
-export const PopoverDialog = forwardRef<PopoverDialogProps, HTMLDivElement>((props, ref) => {
-    const {
-        children,
-        isOpen,
-        focusElement,
-        'aria-label': ariaLabel,
-        label = ariaLabel,
-        className,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <Popover
-            {...forwardedProps}
-            ref={ref}
-            className={classNames(className, CLASSNAME)}
-            role="dialog"
-            aria-modal="true"
-            /**
-             * If a label is set, set as aria-label.
-             * If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props
-             */
-            aria-label={label}
-            isOpen={isOpen}
-            focusElement={focusElement}
-            closeOnClickAway
-            closeOnEscape
-            withFocusTrap
-        >
-            <HeadingLevelProvider level={2}>{children}</HeadingLevelProvider>
-        </Popover>
-    );
-});
-
-PopoverDialog.displayName = COMPONENT_NAME;
-PopoverDialog.className = CLASSNAME;
-PopoverDialog.defaultProps = DEFAULT_PROPS;

package/src/components/popover-dialog/index.tsx

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

package/src/components/post-block/PostBlock.test.tsx

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

package/src/components/post-block/PostBlock.tsx

@@ -1,122 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-import isObject from 'lodash/isObject';
-
-import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } 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 PostBlockProps extends GenericProps, HasTheme {
-    /** Action toolbar content. */
-    actions?: ReactNode;
-    /** Attachment content. */
-    attachments?: ReactNode;
-    /** Author content. */
-    author?: ReactNode;
-    /** Metadata content. */
-    meta?: ReactNode;
-    /** Orientation. */
-    orientation?: Orientation;
-    /** Tag content. */
-    tags?: ReactNode;
-    /** Content (string, or sanitized html). */
-    text?: string | { __html: string };
-    /** Thumbnail. */
-    thumbnailProps?: ThumbnailProps;
-    /** Title. */
-    title: string;
-    /** On click callback. */
-    onClick?(): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'PostBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<PostBlockProps> = {
-    orientation: Orientation.horizontal,
-};
-
-/**
- * PostBlock component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        actions,
-        attachments,
-        author,
-        className,
-        meta,
-        onClick,
-        orientation = DEFAULT_PROPS.orientation,
-        tags,
-        text,
-        theme = defaultTheme,
-        thumbnailProps,
-        title,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <div
-            ref={ref}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, orientation, theme }))}
-            {...forwardedProps}
-        >
-            {thumbnailProps && (
-                <div className={`${CLASSNAME}__thumbnail`}>
-                    <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />
-                </div>
-            )}
-            <div className={`${CLASSNAME}__wrapper`}>
-                {author && <div className={`${CLASSNAME}__author`}>{author}</div>}
-
-                {title && (
-                    <button type="button" className={`${CLASSNAME}__title`} onClick={onClick}>
-                        {title}
-                    </button>
-                )}
-
-                {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}
-
-                {isObject(text) && text.__html ? (
-                    // eslint-disable-next-line react/no-danger
-                    <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />
-                ) : (
-                    <p className={`${CLASSNAME}__text`}>{text}</p>
-                )}
-
-                {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}
-                {(tags || actions) && (
-                    <div className={`${CLASSNAME}__toolbar`}>
-                        {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}
-                        {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-});
-PostBlock.displayName = COMPONENT_NAME;
-PostBlock.className = CLASSNAME;
-PostBlock.defaultProps = DEFAULT_PROPS;

package/src/components/post-block/index.ts

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

package/src/components/progress/Progress.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { Theme } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } 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';
-
-import { ProgressLinear } from './ProgressLinear';
-import { ProgressCircular } from './ProgressCircular';
-
-/**
- * Progress variants.
- */
-export const ProgressVariant = { linear: 'linear', circular: 'circular' } as const;
-export type ProgressVariant = ValueOf<typeof ProgressVariant>;
-
-/**
- * Defines the props of the component.
- */
-export interface ProgressProps extends GenericProps, HasTheme {
-    /** Progress variant. */
-    variant?: ProgressVariant;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Progress';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ProgressProps> = {
-    variant: ProgressVariant.circular,
-};
-
-/**
- * Progress component.
- *
- * @deprecated use `ProgressLinear` and `ProgressCircular` instead.
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Progress = forwardRef<ProgressProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { className, theme = defaultTheme, variant = DEFAULT_PROPS.variant, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, variant }))}
-        >
-            {variant === ProgressVariant.circular && <ProgressCircular theme={theme} />}
-            {variant === ProgressVariant.linear && <ProgressLinear theme={theme} />}
-        </div>
-    );
-});
-Progress.displayName = COMPONENT_NAME;
-Progress.className = CLASSNAME;
-Progress.defaultProps = DEFAULT_PROPS;

package/src/components/progress/ProgressCircular.stories.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { ProgressCircular, ProgressCircularSize, Size, Text } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-const sizes: Array<ProgressCircularSize> = [Size.xxs, Size.xs, Size.s, Size.m];
-
-export default {
-    title: 'LumX components/progress/ProgressCircular',
-    component: ProgressCircular,
-    args: ProgressCircular.defaultProps,
-    argTypes: {
-        size: getSelectArgType<ProgressCircularSize>(sizes),
-    },
-};
-
-/**
- * Default progress circular
- */
-export const Default = {};
-
-/**
- * All sizes
- */
-export const AllSizes = {
-    decorators: [
-        withCombinations({
-            combinations: { cols: { key: 'size', options: sizes } },
-        }),
-    ],
-};
-
-/**
- * Inline display variant to use inside text
- */
-export const Inline = {
-    render() {
-        return (
-            <Text as="p">
-                Some text with <ProgressCircular display="inline" size="xxs" /> inline progress
-            </Text>
-        );
-    },
-};

package/src/components/progress/ProgressCircular.test.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-
-import { ProgressCircular, ProgressCircularProps } from './ProgressCircular';
-
-const CLASSNAME = ProgressCircular.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ProgressCircularProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const { container } = render(<ProgressCircular {...(props as any)} />, { wrapper });
-    const element = getByClassName(container, CLASSNAME);
-    return { container, element, props };
-};
-
-describe(`<${ProgressCircular.displayName}>`, () => {
-    it('should render default', () => {
-        const { element } = setup();
-        expect(element).toHaveClass(`${CLASSNAME}--size-m`);
-        expect(element.tagName).toBe('DIV');
-    });
-
-    it('should render size xs', () => {
-        const { element } = setup({ size: 'xs' });
-        expect(element).toHaveClass(`${CLASSNAME}--size-xs`);
-    });
-
-    it('should render display inline', () => {
-        const { element } = setup({ display: 'inline' });
-        expect(element.tagName).toBe('SPAN');
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'element',
-        forwardAttributes: 'element',
-        applyTheme: {
-            affects: [{ element: 'element' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/progress/ProgressCircular.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { Theme, Size } 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';
-
-/**
- * Progress sizes.
- */
-export type ProgressCircularSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm'>;
-
-/**
- * Defines the props of the component.
- */
-export interface ProgressCircularProps extends GenericProps, HasTheme {
-    /**
-     * Progress circular size.
-     */
-    size?: ProgressCircularSize;
-    /**
-     * Progress display type (inline or block).
-     * @default 'block'
-     */
-    display?: 'inline' | 'block';
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ProgressCircular';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
-    size: Size.m,
-    display: 'block',
-};
-
-/**
- * ProgressCircularProps component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ProgressCircular = forwardRef<ProgressCircularProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        className,
-        theme = defaultTheme,
-        size = DEFAULT_PROPS.size,
-        display = DEFAULT_PROPS.display,
-        ...forwardedProps
-    } = props;
-    const Element = display === 'block' ? 'div' : 'span';
-
-    return (
-        <Element
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, size, display }))}
-        >
-            <Element className="lumx-progress-circular__double-bounce1" />
-            <Element className="lumx-progress-circular__double-bounce2" />
-
-            <svg className="lumx-progress-circular__svg" viewBox="25 25 50 50">
-                <circle className="lumx-progress-circular__path" cx="50" cy="50" r="20" fill="none" strokeWidth="5" />
-            </svg>
-        </Element>
-    );
-});
-ProgressCircular.displayName = COMPONENT_NAME;
-ProgressCircular.className = CLASSNAME;
-ProgressCircular.defaultProps = DEFAULT_PROPS;

package/src/components/progress/ProgressLinear.stories.tsx

@@ -1,12 +0,0 @@
-import { ProgressLinear } from '@lumx/react';
-
-export default {
-    title: 'LumX components/progress/ProgressLinear',
-    component: ProgressLinear,
-    args: ProgressLinear.defaultProps,
-};
-
-/**
- * Default progress linear
- */
-export const Default = {};

package/src/components/progress/ProgressLinear.test.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-
-import { ProgressLinear, ProgressLinearProps } from './ProgressLinear';
-
-const CLASSNAME = ProgressLinear.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ProgressLinearProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const { container } = render(<ProgressLinear {...(props as any)} />, { wrapper });
-    const element = getByClassName(container, CLASSNAME);
-    return { container, element, props };
-};
-
-describe(`<${ProgressLinear.displayName}>`, () => {
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'element',
-        forwardAttributes: 'element',
-        applyTheme: {
-            affects: [{ element: 'element' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});