@lumx/react 3.21.1 → 3.21.2-alpha.1

package/src/components/chip/Chip.test.tsx

@@ -1,245 +0,0 @@
-import React from 'react';
-
-import { Theme } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event';
-import { Chip, ChipProps } from './Chip';
-
-const CLASSNAME = Chip.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propOverrides: Partial<ChipProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props = {
-        ...propOverrides,
-    };
-
-    render(<Chip {...props} />, { wrapper });
-    const chip = getByClassName(document.body, CLASSNAME);
-    const before = queryByClassName(chip, `${CLASSNAME}__before`);
-    const after = queryByClassName(chip, `${CLASSNAME}__after`);
-
-    return { props, chip, before, after };
-};
-
-describe('<Chip />', () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { chip } = setup({ children: 'Chip text' });
-            expect(chip).toBeInTheDocument();
-            expect(chip).toHaveTextContent('Chip text');
-            expect(chip.className).toMatchInlineSnapshot(
-                '"lumx-chip lumx-chip--color-dark lumx-chip--size-m lumx-chip--is-unselected"',
-            );
-        });
-
-        it('should render dark theme', () => {
-            const { chip } = setup({ theme: Theme.dark });
-            expect(chip).toHaveClass('lumx-chip--color-light');
-        });
-
-        it('should render clickable', () => {
-            const onClick = vi.fn();
-            const { chip } = setup({ children: 'Chip text', onClick });
-            expect(chip).toHaveAttribute('role', 'button');
-            expect(chip.className).toMatchInlineSnapshot(
-                '"lumx-chip lumx-chip--is-clickable lumx-chip--color-dark lumx-chip--size-m lumx-chip--is-unselected"',
-            );
-        });
-
-        it('should render a link', () => {
-            setup({ children: 'Chip text', href: 'https://google.com', target: '_blank' });
-            const chip = screen.getByRole('link', { name: 'Chip text' });
-            expect(chip).toHaveAttribute('href', 'https://google.com');
-            expect(chip).toHaveAttribute('target', '_blank');
-            expect(chip).toHaveAttribute('tabIndex', '0');
-        });
-
-        it('should override the role', () => {
-            setup({ children: 'Chip text', role: 'radio' });
-            expect(screen.getByRole('radio', { name: 'Chip text' })).toBeInTheDocument();
-        });
-
-        it('should override the tabIndex', () => {
-            const { chip } = setup({ children: 'Chip text', tabIndex: -1 });
-            expect(chip).toHaveAttribute('tabIndex', '-1');
-        });
-    });
-
-    describe('Events', () => {
-        const onClick = vi.fn();
-        const onAfterClick = vi.fn();
-        const onBeforeClick = vi.fn();
-
-        beforeEach(() => {
-            vi.clearAllMocks();
-        });
-
-        it('should trigger onBeforeClick only when clicking on the "before" element', async () => {
-            const { after, before, chip } = setup({
-                after: 'after',
-                before: 'before',
-                onAfterClick,
-                onBeforeClick,
-                onClick,
-            });
-
-            await userEvent.click(chip);
-            expect(onBeforeClick).not.toHaveBeenCalled();
-
-            vi.clearAllMocks();
-
-            await userEvent.click(after as any);
-            expect(onBeforeClick).not.toHaveBeenCalled();
-
-            vi.clearAllMocks();
-
-            await userEvent.click(before as any);
-            expect(onBeforeClick).toHaveBeenCalled();
-        });
-
-        it('should trigger onClick when clicking on the label area', async () => {
-            const { after, before, chip } = setup({
-                after: 'after',
-                before: 'before',
-                onAfterClick,
-                onBeforeClick,
-                onClick,
-            });
-
-            await userEvent.click(chip);
-            expect(onClick).toHaveBeenCalled();
-
-            vi.clearAllMocks();
-
-            await userEvent.click(after as any);
-            expect(onClick).not.toHaveBeenCalled();
-
-            vi.clearAllMocks();
-
-            await userEvent.click(before as any);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should trigger onAfterClick only when clicking on the "after" element', async () => {
-            const { after, before, chip } = setup({
-                after: 'after',
-                before: 'before',
-                onAfterClick,
-                onBeforeClick,
-                onClick,
-            });
-
-            await userEvent.click(chip);
-            expect(onAfterClick).not.toHaveBeenCalled();
-
-            vi.clearAllMocks();
-
-            await userEvent.click(after as any);
-            expect(onAfterClick).toHaveBeenCalled();
-
-            vi.clearAllMocks();
-
-            await userEvent.click(before as any);
-            expect(onAfterClick).not.toHaveBeenCalled();
-        });
-
-        it('should not stop propagation when clicking on a "before" or "after" element without an event handler', async () => {
-            const { after, before } = setup({
-                after: 'after',
-                before: 'before',
-                onClick,
-            });
-
-            await userEvent.click(before as any);
-            expect(onClick).toHaveBeenCalled();
-
-            onClick.mockClear();
-
-            await userEvent.click(after as any);
-            expect(onClick).toHaveBeenCalled();
-        });
-
-        it('should forward key down event', async () => {
-            const onKeyDown = vi.fn();
-            const { chip } = setup({ onClick, onKeyDown });
-
-            fireEvent.keyDown(chip, { key: 'A', code: 'KeyA' });
-            expect(onKeyDown).toHaveBeenCalled();
-        });
-
-        it('should forward key down event and trigger `onClick` when pressing Enter', async () => {
-            const user = userEvent.setup();
-            const onKeyDown = vi.fn();
-            const { chip } = setup({ onClick, onKeyDown });
-
-            await user.tab();
-            expect(chip).toHaveFocus();
-
-            await userEvent.keyboard('{Enter}');
-
-            expect(onKeyDown).toHaveBeenCalled();
-            expect(onClick).toHaveBeenCalled();
-            onClick.mockClear();
-        });
-    });
-
-    describe('Disabled state', () => {
-        it('should render disabled chip button', async () => {
-            const onClick = vi.fn();
-            const { chip } = setup({ children: 'Label', isDisabled: true, onClick });
-            expect(chip).toHaveAttribute('aria-disabled', 'true');
-            await userEvent.click(chip);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should render disabled chip link', async () => {
-            const onClick = vi.fn();
-            const { chip } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
-            // Disabled link should not have an href.
-            expect(chip).not.toHaveAttribute('href');
-            expect(chip).toHaveAttribute('aria-disabled', 'true');
-            await userEvent.click(chip);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should render aria-disabled chip button', async () => {
-            const onClick = vi.fn();
-            const { chip } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(chip).toHaveAttribute('aria-disabled', 'true');
-            await userEvent.click(chip);
-            // userEvent doesn't dispatch click on aria-disabled elements, but we check just in case.
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should render aria-disabled chip link', async () => {
-            const onClick = vi.fn();
-            const { chip } = setup({
-                children: 'Label',
-                'aria-disabled': true,
-                href: 'https://example.com',
-                onClick,
-            });
-            expect(chip).toHaveAttribute('href', 'https://example.com');
-            expect(chip).toHaveAttribute('aria-disabled', 'true');
-            await userEvent.click(chip);
-            // userEvent doesn't dispatch click on aria-disabled elements, but we check just in case.
-            expect(onClick).not.toHaveBeenCalled();
-        });
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'chip',
-        forwardAttributes: 'chip',
-        applyTheme: {
-            affects: [{ element: 'chip', classModifier: 'color', inverted: true }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/chip/Chip.tsx

@@ -1,168 +0,0 @@
-import React, { MouseEventHandler, ReactNode } from 'react';
-
-import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
-
-import { ColorPalette, Size, Theme } from '@lumx/react';
-import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
-
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { onEnterPressed } from '@lumx/core/js/utils';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-
-/**
- * Chip sizes.
- */
-type ChipSize = Extract<Size, 's' | 'm'>;
-
-/**
- * Defines the props of the component.
- */
-export interface ChipProps extends GenericProps, HasTheme, HasAriaDisabled {
-    /** A component to be rendered after the content. */
-    after?: ReactNode;
-    /** A component to be rendered before the content. */
-    before?: ReactNode;
-    /** Color variant. */
-    color?: ColorPalette;
-    /** Whether the component is clickable or not. */
-    isClickable?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the chip is currently in a highlighted state or not. */
-    isHighlighted?: boolean;
-    /** Whether the component is selected or not. */
-    isSelected?: boolean;
-    /** Size variant. */
-    size?: ChipSize;
-    /** On "after" element clicked callback. */
-    onAfterClick?: MouseEventHandler;
-    /** On "before" element clicked callback. */
-    onBeforeClick?: MouseEventHandler;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Chip';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ChipProps> = {
-    size: Size.m,
-};
-
-/**
- * Chip component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
-    const {
-        after,
-        before,
-        children,
-        className,
-        color,
-        isClickable: propIsClickable,
-        isHighlighted,
-        isSelected,
-        onAfterClick,
-        onBeforeClick,
-        onClick,
-        size = DEFAULT_PROPS.size,
-        theme = defaultTheme,
-        href,
-        onKeyDown,
-        ...forwardedProps
-    } = otherProps;
-    const hasAfterClick = isFunction(onAfterClick);
-    const hasBeforeClick = isFunction(onBeforeClick);
-    const hasOnClick = isFunction(props.onClick);
-    const isButton = hasOnClick && !href;
-    const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
-
-    // Adapt color to the theme.
-    const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
-
-    const handleOnBeforeClick = useStopPropagation(onBeforeClick);
-    const handleOnAfterClick = useStopPropagation(onAfterClick);
-    const handleKeyDown = (evt: React.KeyboardEvent) => {
-        onKeyDown?.(evt);
-        if (hasOnClick) {
-            onEnterPressed(onClick)(evt);
-        }
-    };
-
-    return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        <a
-            role={isButton ? 'button' : undefined}
-            tabIndex={isClickable && !disabledStateProps.disabled ? 0 : undefined}
-            {...forwardedProps}
-            href={!disabledStateProps.disabled ? href : undefined}
-            ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    clickable: isClickable,
-                    color: chipColor,
-                    isDisabled: isAnyDisabled,
-                    hasAfter: Boolean(after),
-                    hasBefore: Boolean(before),
-                    highlighted: Boolean(isHighlighted),
-                    prefix: CLASSNAME,
-                    selected: Boolean(isSelected),
-                    size,
-                    unselected: Boolean(!isSelected),
-                }),
-            )}
-            aria-disabled={(isClickable && isAnyDisabled) || undefined}
-            onClick={hasOnClick ? onClick : undefined}
-            onKeyDown={handleKeyDown}
-        >
-            {before && (
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-                <div
-                    className={classNames(`${CLASSNAME}__before`, {
-                        [`${CLASSNAME}__before--is-clickable`]: hasBeforeClick,
-                    })}
-                    onClick={handleOnBeforeClick}
-                >
-                    {before}
-                </div>
-            )}
-            <div className={`${CLASSNAME}__label`}>{children}</div>
-            {after && (
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-                <div
-                    className={classNames(`${CLASSNAME}__after`, {
-                        [`${CLASSNAME}__after--is-clickable`]: hasAfterClick,
-                    })}
-                    onClick={handleOnAfterClick}
-                >
-                    {after}
-                </div>
-            )}
-        </a>
-    );
-});
-Chip.displayName = COMPONENT_NAME;
-Chip.className = CLASSNAME;
-Chip.defaultProps = DEFAULT_PROPS;

package/src/components/chip/ChipGroup.stories.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { Chip, ChipGroup, Size } from '@lumx/react';
-
-export default {
-    title: 'LumX components/chip/ChipGroup',
-    component: ChipGroup,
-    args: ChipGroup.defaultProps,
-    argTypes: {},
-};
-
-const chips = (
-    <>
-        <Chip size={Size.s}>Apricot</Chip>
-        <Chip size={Size.s}>Apple</Chip>
-        <Chip size={Size.s}>Banana</Chip>
-        <Chip size={Size.s}>Blueberry</Chip>
-        <Chip size={Size.s}>Lemon</Chip>
-        <Chip size={Size.s}>Orange</Chip>
-        <Chip size={Size.s}>Peach</Chip>
-        <Chip size={Size.s}>Pear</Chip>
-        <Chip size={Size.s}>Pineapple</Chip>
-        <Chip size={Size.s}>Melon</Chip>
-        <Chip size={Size.s}>Raspberry</Chip>
-        <Chip size={Size.s}>Strawberry</Chip>
-        <Chip size={Size.s}>Watermelon</Chip>
-    </>
-);
-
-/**
- * Default chip group
- */
-export const Default = {
-    args: {
-        children: chips,
-    },
-};
-
-/**
- * Small chip group
- */
-export const Small = {
-    args: {
-        children: chips,
-        style: {
-            width: '200px',
-        },
-    },
-};

package/src/components/chip/ChipGroup.test.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { ChipGroup, ChipGroupProps } from './ChipGroup';
-import { Chip } from './Chip';
-
-const CLASSNAME = ChipGroup.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propOverrides: Partial<ChipGroupProps> = {}) => {
-    const props = {
-        children: [<Chip key="1">Chip 1</Chip>, <Chip key="2">Chip 2</Chip>, <Chip key="3">Chip 3</Chip>],
-        ...propOverrides,
-    };
-    render(<ChipGroup {...props} />);
-    const chipGroup = getByClassName(document.body, CLASSNAME);
-
-    return { props, chipGroup };
-};
-
-describe('<ChipGroup />', () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { chipGroup } = setup();
-            expect(chipGroup).toBeInTheDocument();
-            expect(chipGroup).toHaveClass(CLASSNAME);
-        });
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'chipGroup',
-        forwardAttributes: 'chipGroup',
-    });
-});

package/src/components/chip/ChipGroup.tsx

@@ -1,60 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { HorizontalAlignment } from '@lumx/core/js/constants';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
-
-/**
- * Defines the props of the component.
- */
-export interface ChipGroupProps extends GenericProps {
-    /**
-     * Chip horizontal alignment.
-     * @deprecated
-     */
-    align?: HorizontalAlignment;
-    /** List of Chip. */
-    children: ReactNode;
-}
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ChipGroupProps> = {};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ChipGroup';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * ChipGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const InternalChipGroup = forwardRef<ChipGroupProps, HTMLDivElement>((props, ref) => {
-    const { align, children, className, ...forwardedProps } = props;
-
-    return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
-            {children}
-        </div>
-    );
-});
-InternalChipGroup.displayName = COMPONENT_NAME;
-InternalChipGroup.className = CLASSNAME;
-InternalChipGroup.defaultProps = DEFAULT_PROPS;
-
-export const ChipGroup = Object.assign(InternalChipGroup, { useChipGroupNavigation });

package/src/components/chip/index.ts

@@ -1,2 +0,0 @@
-export * from './Chip';
-export * from './ChipGroup';

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -1,92 +0,0 @@
-/* eslint-disable react/jsx-key,react/display-name */
-import React from 'react';
-import { mdiDotsHorizontal, mdiHeart, mdiReply } from '@lumx/icons';
-import { Button, CommentBlock } from '@lumx/react';
-import { IconButton } from '@lumx/react/components/button/IconButton';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { avatarImageArgType, AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-
-export default {
-    title: 'LumX components/comment-block/CommentBlock',
-    component: CommentBlock,
-    decorators: [withNestedProps()],
-    args: {
-        'avatarProps.image': AVATAR_IMAGES.avatar1,
-    },
-    argTypes: {
-        'avatarProps.image': avatarImageArgType,
-        actions: { control: false },
-        headerActions: { control: false },
-        children: { control: false },
-    },
-};
-
-/**
- * Minimal comment block
- */
-export const Minimal = {
-    args: {
-        text: loremIpsum('short'),
-    },
-};
-
-/**
- * Full-featured comment block
- */
-export const FullFeatured = {
-    args: {
-        name: 'Emmitt O. Lum',
-        text: loremIpsum('short'),
-        date: '5 days ago',
-        fullDate: 'Monday, March 30, 2021 at 4:06 PM',
-        hasActions: true,
-    },
-    render: (props: any) => (
-        <CommentBlock
-            {...props}
-            actions={[
-                <Button emphasis="low" size="s" leftIcon={mdiHeart}>
-                    24 likes
-                </Button>,
-                <Button emphasis="low" size="s" leftIcon={mdiReply}>
-                    Reply
-                </Button>,
-            ]}
-            headerActions={<IconButton label="Actions" icon={mdiDotsHorizontal} emphasis="low" size="s" />}
-        />
-    ),
-};
-
-/**
- * Marked as relevant
- */
-export const Relevant = {
-    ...FullFeatured,
-    args: { ...FullFeatured.args, isRelevant: true },
-};
-
-/**
- * Comment thread
- */
-export const Thread = {
-    ...FullFeatured,
-    args: {
-        ...FullFeatured.args,
-        isOpen: true,
-        children: [
-            <CommentBlock
-                avatarProps={{ image: AVATAR_IMAGES.avatar2, alt: '' }}
-                name="John Doe"
-                date="5 days ago"
-                text={loremIpsum('tiny')}
-            />,
-            <CommentBlock
-                avatarProps={{ image: AVATAR_IMAGES.avatar4, alt: '' }}
-                name="Jane Doe"
-                date="5 days ago"
-                text={loremIpsum('tiny')}
-            />,
-        ],
-    },
-};

package/src/components/comment-block/CommentBlock.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 { CommentBlock, CommentBlockProps } from './CommentBlock';
-
-const CLASSNAME = CommentBlock.className as string;
-
-const setup = (props: Partial<CommentBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<CommentBlock {...(props as any)} />, { wrapper });
-    const commentBlock = queryByClassName(document.body, CLASSNAME);
-    return { props, commentBlock };
-};
-
-describe(`<${CommentBlock.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'commentBlock',
-        forwardAttributes: 'commentBlock',
-        applyTheme: {
-            affects: [{ element: 'commentBlock' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});