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

package/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,164 @@
+import React, { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+
+import classNames from 'classnames';
+
+import { mdiCheck, mdiMinus } from '@lumx/icons';
+
+import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useId } from '@lumx/react/hooks/useId';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+
+/**
+ * Intermediate state of checkbox.
+ */
+const INTERMEDIATE_STATE = 'intermediate';
+
+/**
+ * Defines the props of the component.
+ */
+export interface CheckboxProps extends GenericProps, HasTheme, HasAriaDisabled {
+    /** Helper text. */
+    helper?: string;
+    /** Native input id property. */
+    id?: string;
+    /** Native input ref. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Whether it is checked or not or intermediate. */
+    isChecked?: boolean | 'intermediate';
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Label text. */
+    label?: ReactNode;
+    /** Native input name property. */
+    name?: string;
+    /** Native input value property. */
+    value?: string;
+    /** optional props for input */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /** On change callback. */
+    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Checkbox';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<CheckboxProps> = {};
+
+/**
+ * Checkbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        checked,
+        className,
+        helper,
+        id,
+        inputRef,
+        isChecked = checked,
+        label,
+        name,
+        onChange,
+        theme = defaultTheme,
+        value,
+        inputProps = {},
+        ...forwardedProps
+    } = otherProps;
+    const localInputRef = React.useRef<HTMLInputElement>(null);
+    const generatedInputId = useId();
+    const inputId = id || generatedInputId;
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!isChecked, value, name, event);
+        }
+    };
+
+    const intermediateState = isChecked === INTERMEDIATE_STATE;
+
+    React.useEffect(() => {
+        const input = localInputRef.current;
+        if (input) input.indeterminate = intermediateState;
+    }, [intermediateState]);
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    // Whether state is intermediate class name will "-checked"
+                    isChecked: intermediateState ? true : isChecked,
+                    isDisabled: isAnyDisabled,
+                    isUnchecked: !isChecked,
+                    prefix: CLASSNAME,
+                    theme,
+                }),
+            )}
+        >
+            <div className={`${CLASSNAME}__input-wrapper`}>
+                <input
+                    ref={useMergeRefs(inputRef, localInputRef)}
+                    type="checkbox"
+                    id={inputId}
+                    className={`${CLASSNAME}__input-native`}
+                    {...disabledStateProps}
+                    name={name}
+                    value={value}
+                    checked={isChecked}
+                    onChange={handleChange}
+                    aria-describedby={helper ? `${inputId}-helper` : undefined}
+                    aria-checked={intermediateState ? 'mixed' : Boolean(isChecked)}
+                    readOnly={inputProps.readOnly || disabledStateProps['aria-disabled']}
+                    {...inputProps}
+                />
+
+                <div className={`${CLASSNAME}__input-placeholder`}>
+                    <div className={`${CLASSNAME}__input-background`} />
+
+                    <div className={`${CLASSNAME}__input-indicator`}>
+                        <Icon icon={intermediateState ? mdiMinus : mdiCheck} />
+                    </div>
+                </div>
+            </div>
+
+            <div className={`${CLASSNAME}__content`}>
+                {label && (
+                    <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>
+                        {label}
+                    </InputLabel>
+                )}
+                {helper && (
+                    <InputHelper id={`${inputId}-helper`} className={`${CLASSNAME}__helper`} theme={theme}>
+                        {helper}
+                    </InputHelper>
+                )}
+            </div>
+        </div>
+    );
+});
+Checkbox.displayName = COMPONENT_NAME;
+Checkbox.className = CLASSNAME;
+Checkbox.defaultProps = DEFAULT_PROPS;

package/src/components/checkbox/index.ts

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

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

@@ -0,0 +1,164 @@
+import omit from 'lodash/omit';
+import { mdiClose, mdiViewList } from '@lumx/icons';
+import { Chip, ChipProps, ColorPalette, Icon, Size, Theme } from '@lumx/react';
+
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { withTheming } from '@lumx/react/stories/utils/theming';
+import { DESIGN_TOKENS } from '@lumx/core/src/js/constants/design-tokens';
+import pick from 'lodash/pick';
+import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
+
+const chipSizes = [Size.m, Size.s];
+export default {
+    title: 'LumX components/chip/Chip',
+    component: Chip,
+    args: omit(Chip.defaultProps, ['theme']),
+    argTypes: {
+        size: getSelectArgType<ChipProps['size']>(chipSizes),
+        before: { control: false },
+        after: { control: false },
+    },
+};
+
+/**
+ * Default chip with label
+ */
+export const Default = {
+    args: { children: 'Chip label' },
+};
+
+/**
+ * Clickable chip
+ */
+export const ChipButton = {
+    args: { children: 'Chip label' },
+    argTypes: { onClick: { action: true } },
+};
+
+/**
+ * Link chip
+ */
+export const ChipLink = {
+    args: {
+        children: 'Chip link',
+        href: 'https://example.com',
+        target: '_blank',
+    },
+};
+
+/**
+ * With custom elements at the start and end of the chip
+ */
+export const WithAfterAndBefore = {
+    argTypes: {
+        onBeforeClick: { action: true },
+        onClick: { action: true },
+        onAfterClick: { action: true },
+    },
+    args: {
+        before: <Icon icon={mdiViewList} />,
+        children: 'Chip label',
+        after: <Icon icon={mdiClose} />,
+    },
+};
+
+/**
+ * All combinations of color, size and states.
+ */
+export const ColorVariants = {
+    ...WithAfterAndBefore,
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'color', options: withUndefined(ColorPalette) },
+                sections: { key: 'size', options: chipSizes },
+                cols: {
+                    Default: {},
+                    Hover: { 'data-lumx-hover': true },
+                    Active: { 'data-lumx-active': true },
+                    Disabled: { isDisabled: true },
+                    Focused: { 'data-focus-visible-added': true },
+                },
+            },
+        }),
+    ],
+};
+
+/**
+ * All combinations of color, size and states.
+ */
+export const SelectedVariants = {
+    ...WithAfterAndBefore,
+    decorators: [
+        withThemedBackground(),
+        withCombinations({
+            combinations: {
+                sections: { 'Size m': {}, 'Size s': { size: 's' } },
+                rows: {
+                    'theme=light': { theme: Theme.light },
+                    'Selected & theme=light': { isSelected: true, theme: Theme.light },
+                    'theme=dark': { theme: Theme.dark },
+                    'Selected & theme=dark': { isSelected: true, theme: Theme.dark },
+                },
+                cols: {
+                    Default: {},
+                    Hover: { 'data-lumx-hover': true },
+                    Active: { 'data-lumx-active': true },
+                    Disabled: { isDisabled: true },
+                    Focused: { 'data-focus-visible-added': true },
+                },
+            },
+        }),
+    ],
+};
+
+/**
+ * Test chip CSS variable theming
+ */
+export const Theming = {
+    ...SelectedVariants,
+    decorators: [
+        ...SelectedVariants.decorators,
+        withTheming({
+            properties: pick(DESIGN_TOKENS, ['chip']),
+            values: `
+            --lumx-chip-emphasis-selected-state-default-border-width: 2px;
+            --lumx-chip-emphasis-selected-state-default-theme-light-border-color: red;
+            --lumx-chip-emphasis-selected-state-default-theme-light-background-color: blue;
+            --lumx-chip-emphasis-selected-state-default-theme-dark-border-color: blue;
+            --lumx-chip-emphasis-selected-state-default-theme-dark-background-color: red;
+
+            --lumx-chip-emphasis-selected-state-hover-border-width: 3px;
+            --lumx-chip-emphasis-selected-state-hover-theme-light-border-color: green;
+            --lumx-chip-emphasis-selected-state-hover-theme-light-background-color: violet;
+            --lumx-chip-emphasis-selected-state-hover-theme-dark-border-color: violet;
+            --lumx-chip-emphasis-selected-state-hover-theme-dark-background-color: green;
+
+            --lumx-chip-emphasis-selected-state-active-border-width: 4px;
+            --lumx-chip-emphasis-selected-state-active-theme-light-border-color: orange;
+            --lumx-chip-emphasis-selected-state-active-theme-light-background-color: pink;
+            --lumx-chip-emphasis-selected-state-active-theme-dark-border-color: pink;
+            --lumx-chip-emphasis-selected-state-active-theme-dark-background-color: orange;
+            `,
+        }),
+    ],
+};
+
+/**
+ * Test Chip disabled states
+ */
+export const Disabled = {
+    args: {
+        children: 'Chip label',
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { disabled: { disabled: true }, 'aria-disabled': { 'aria-disabled': true } },
+                cols: { button: { onClick: () => {} }, link: { href: 'https://example.com' } },
+            },
+        }),
+    ],
+};

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

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