@lumx/react 3.21.1 → 3.21.2-alpha.1

package/src/components/checkbox/Checkbox.stories.tsx

@@ -1,64 +0,0 @@
-import { Checkbox } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-export default {
-    title: 'LumX components/checkbox/Checkbox',
-    component: Checkbox,
-    decorators: [withValueOnChange({ valueProp: 'isChecked' })],
-    args: {
-        isChecked: false,
-        name: 'checkbox-html-name',
-        value: 'checkbox-html-value',
-    },
-    argTypes: {
-        onChange: { action: true },
-        name: { control: false },
-        value: { control: false },
-    },
-};
-
-/**
- * Default checkbox
- */
-export const Default = {};
-
-/**
- * With label and helper
- */
-export const LabelAndHelper = {
-    args: {
-        label: 'Checkbox label',
-        helper: loremIpsum('tiny'),
-    },
-};
-
-/**
- * With intermediate state
- */
-export const IntermediateState = {
-    args: {
-        isChecked: 'intermediate',
-    },
-};
-
-/**
- * Disabled
- */
-export const Disabled = {
-    args: {
-        label: 'Checkbox label',
-        helper: 'Checkbox is disabled because...',
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: {
-                    disabled: { disabled: true },
-                    'aria-disabled': { 'aria-disabled': true },
-                },
-            },
-        }),
-    ],
-};

package/src/components/checkbox/Checkbox.test.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-
-import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Checkbox, CheckboxProps } from './Checkbox';
-
-const CLASSNAME = Checkbox.className as string;
-
-type SetupProps = Partial<CheckboxProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: any = { id: 'fixedId', ...propsOverride };
-    render(<Checkbox {...props} />, { wrapper });
-
-    const checkbox = getByClassName(document.body, CLASSNAME);
-    const helper = queryByClassName(checkbox, `${CLASSNAME}__helper`);
-    const label = queryByClassName(checkbox, `${CLASSNAME}__label`);
-    const input = getByTagName(checkbox, 'input');
-    return { checkbox, helper, label, input, props };
-};
-
-describe(`<${Checkbox.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render correctly', () => {
-            const { checkbox, input, label, helper } = setup();
-            expect(checkbox).toBeInTheDocument();
-            expect(checkbox).toHaveClass(CLASSNAME);
-            expect(checkbox).not.toHaveClass('lumx-checkbox--is-disabled');
-            expect(checkbox).toHaveClass('lumx-checkbox--is-unchecked');
-
-            expect(label).not.toBeInTheDocument();
-            expect(helper).not.toBeInTheDocument();
-
-            expect(input).toBeInTheDocument();
-            expect(input).not.toBeChecked();
-            expect(input).toHaveAttribute('aria-checked', 'false');
-            expect(input).not.toBeDisabled();
-        });
-
-        it('should render disabled and checked', () => {
-            const { checkbox, input } = setup({
-                isDisabled: true,
-                isChecked: true,
-            });
-            expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
-            expect(checkbox).toHaveClass('lumx-checkbox--is-checked');
-
-            expect(input).toBeChecked();
-            expect(input).toHaveAttribute('aria-checked', 'true');
-            expect(input).toBeDisabled();
-        });
-
-        it('should render intermediate state', () => {
-            const { checkbox, input } = setup({
-                isChecked: 'intermediate',
-            });
-            expect(checkbox).toHaveClass('lumx-checkbox--is-checked');
-
-            expect(input).toBeChecked();
-            expect(input).toHaveAttribute('aria-checked', 'mixed');
-        });
-
-        it('should render helper and label', () => {
-            const id = 'checkbox1';
-            const { props, helper, label, input } = setup({
-                id,
-                helper: 'Test helper',
-                label: 'Test label',
-            });
-
-            expect(helper).toBeInTheDocument();
-            expect(helper).toHaveTextContent(props.helper);
-            expect(helper).toHaveAttribute('id');
-
-            expect(label).toBeInTheDocument();
-            expect(label).toHaveTextContent(props.label);
-            expect(label).toHaveAttribute('for', id);
-
-            expect(input).toHaveAttribute('id', id);
-            expect(input).toHaveAttribute('aria-describedby', helper?.id);
-        });
-
-        it('should forward input props', () => {
-            const { props, input } = setup({
-                inputProps: {
-                    'aria-labelledby': 'labelledby-id',
-                },
-            });
-
-            expect(input).toHaveAttribute('aria-labelledby', props.inputProps['aria-labelledby']);
-        });
-    });
-
-    describe('Events', () => {
-        const onChange = vi.fn();
-
-        it('should trigger `onChange` when checkbox is clicked', async () => {
-            const value = 'value';
-            const name = 'name';
-            const { input } = setup({ checked: false, onChange, value, name });
-            expect(input).not.toBeChecked();
-
-            await userEvent.click(input);
-
-            expect(onChange).toHaveBeenCalledWith(true, value, name, expect.any(Object));
-        });
-    });
-
-    describe('Disabled state', () => {
-        it('should be disabled with isDisabled', async () => {
-            const onChange = vi.fn();
-            const { checkbox, input } = setup({ isDisabled: true, onChange });
-
-            expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
-            expect(input).toBeDisabled();
-
-            // Should not trigger onChange.
-            await userEvent.click(input);
-            expect(onChange).not.toHaveBeenCalled();
-        });
-
-        it('should be disabled with aria-disabled', async () => {
-            const onChange = vi.fn();
-            const { checkbox, input } = setup({ 'aria-disabled': true, onChange });
-
-            expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
-            // Note: input is not disabled (so it can be focused) but it's readOnly.
-            expect(input).not.toBeDisabled();
-            expect(input).toHaveAttribute('aria-disabled', 'true');
-            expect(input).toHaveAttribute('readOnly');
-
-            // Should not trigger onChange.
-            await userEvent.click(input);
-            expect(onChange).not.toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'checkbox',
-        forwardAttributes: 'checkbox',
-        applyTheme: {
-            affects: [{ element: 'checkbox' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/checkbox/Checkbox.tsx

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

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

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

@@ -1,166 +0,0 @@
-import React from 'react';
-
-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' } },
-            },
-        }),
-    ],
-};