@lumx/react 3.20.1-alpha.3 → 3.20.1-alpha.31

package/src/components/progress-tracker/ProgressTrackerProvider.tsx

@@ -1,67 +0,0 @@
-import { ReactNode, useEffect, useReducer } from 'react';
-import { INIT_STATE, TabProviderContext, reducer } from '../tabs/state';
-
-export interface ProgressTrackerProviderProps {
-    /** Active step index. */
-    activeStepIndex?: number;
-    /** ProgressTrackerProvider children. */
-    children: ReactNode;
-    /** Step panel children should not render if the step panel is hidden. */
-    isLazy?: boolean;
-    /** Activate tabs on focus. */
-    shouldActivateOnFocus?: boolean;
-    /** Step change callback. */
-    onChange?(index: number): void;
-}
-
-const DEFAULT_PROPS: Partial<ProgressTrackerProviderProps> = {
-    isLazy: INIT_STATE.isLazy,
-    shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,
-};
-
-/**
- * This component provides a context in which steps can be defined and linked to their step panel.
- *
- * It does not produce any markup so you can wrap it around any React elements and then split the ProgressTracker and ProgressTrackerPanel
- * components in the react tree.
- *
- * This works exactly as TabProvider so it uses TabProviderContext and tabs state.
- *
- * @param  props React component props.
- * @return React element.
- */
-export const ProgressTrackerProvider: React.FC<ProgressTrackerProviderProps> = (props) => {
-    const { children, onChange, ...propState } = props;
-    const [state, dispatch] = useReducer(reducer, INIT_STATE);
-
-    // On prop state change => dispatch update.
-    useEffect(
-        () => {
-            dispatch({
-                type: 'update',
-                payload: {
-                    ...DEFAULT_PROPS,
-                    ...propState,
-                    activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex,
-                },
-            });
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [dispatch, ...Object.values(propState)],
-    );
-
-    // On active tab index state change => send update to the onChange.
-    useEffect(
-        () => {
-            if (state === INIT_STATE || !onChange || propState.activeStepIndex === state.activeTabIndex) {
-                return;
-            }
-            onChange(state.activeTabIndex);
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [onChange, state.activeTabIndex],
-    );
-
-    return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;
-};
-ProgressTrackerProvider.defaultProps = DEFAULT_PROPS;

package/src/components/progress-tracker/ProgressTrackerStep.test.tsx

@@ -1,36 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
-import { ProgressTrackerStep, ProgressTrackerStepProps } from './ProgressTrackerStep';
-
-const CLASSNAME = ProgressTrackerStep.className as string;
-
-type SetupProps = Partial<ProgressTrackerStepProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}) => {
-    const props = { label: 'Test Step Label', ...propsOverride };
-    render(<ProgressTrackerStep {...props} />);
-    const progressTrackerStep = getByClassName(document.body, CLASSNAME);
-
-    return { props, progressTrackerStep };
-};
-
-describe(`<${ProgressTrackerStep.displayName}>`, () => {
-    it('should render default', () => {
-        const label = 'Step';
-        const { progressTrackerStep } = setup({ label });
-        expect(progressTrackerStep).toBe(screen.queryByRole('tab', { name: label }));
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'progressTrackerStep',
-        forwardAttributes: 'progressTrackerStep',
-        forwardRef: 'progressTrackerStep',
-    });
-});

package/src/components/progress-tracker/ProgressTrackerStep.tsx

@@ -1,159 +0,0 @@
-import { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';
-
-import classNames from 'classnames';
-
-import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
-import { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-import { useTabProviderContext } from '../tabs/state';
-
-/**
- * Defines the props of the component.
- */
-export interface ProgressTrackerStepProps extends GenericProps {
-    /** Children are not supported. */
-    children?: never;
-    /** Whether the step should be in error state or not. */
-    hasError?: boolean;
-    /** Helper text. */
-    helper?: string | null;
-    /** Native id property. */
-    id?: string;
-    /** Whether the current step is active or not. */
-    isActive?: boolean;
-    /** Whether the current step is completed or not. */
-    isComplete?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Label text. */
-    label?: string | null;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ProgressTrackerStep';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ProgressTrackerStepProps> = {};
-
-/**
- * ProgressTrackerStep component.
- *
- * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ProgressTrackerStep = forwardRef<ProgressTrackerStepProps, HTMLButtonElement>((props, ref) => {
-    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
-    const {
-        className,
-        hasError,
-        helper,
-        id,
-        isActive: propIsActive,
-        isComplete,
-        label,
-        onFocus,
-        onKeyPress,
-        tabIndex = -1,
-        ...forwardedProps
-    } = otherProps;
-    const state = useTabProviderContext('tab', id);
-    const isActive = propIsActive || state?.isActive;
-
-    const changeToCurrentTab = useCallback(() => {
-        if (isAnyDisabled) {
-            return;
-        }
-        state?.changeToTab();
-    }, [isAnyDisabled, state]);
-
-    const handleFocus: FocusEventHandler = useCallback(
-        (event) => {
-            onFocus?.(event);
-            if (state?.shouldActivateOnFocus) {
-                changeToCurrentTab();
-            }
-        },
-        [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],
-    );
-
-    const handleKeyPress: KeyboardEventHandler = useCallback(
-        (event) => {
-            onKeyPress?.(event);
-            if (event.key !== 'Enter') {
-                return;
-            }
-            changeToCurrentTab();
-        },
-        [changeToCurrentTab, onKeyPress],
-    );
-
-    const getIcon = (): string => {
-        if (isComplete) {
-            return mdiCheckCircle;
-        }
-
-        if (isActive) {
-            return hasError ? mdiAlertCircle : mdiRadioboxMarked;
-        }
-
-        return mdiRadioboxBlank;
-    };
-
-    return (
-        <button
-            ref={ref}
-            {...forwardedProps}
-            type="button"
-            id={state?.tabId}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    hasError,
-                    isActive,
-                    isClickable: state && !isAnyDisabled,
-                    isComplete,
-                }),
-            )}
-            onClick={changeToCurrentTab}
-            onKeyPress={handleKeyPress}
-            onFocus={handleFocus}
-            role="tab"
-            tabIndex={isActive ? 0 : tabIndex}
-            aria-disabled={isAnyDisabled}
-            aria-selected={isActive}
-            aria-controls={state?.tabPanelId}
-        >
-            <Icon className={`${CLASSNAME}__state`} icon={getIcon()} size={Size.s} />
-
-            <InputLabel htmlFor={state?.tabId || ''} className={`${CLASSNAME}__label`}>
-                {label}
-            </InputLabel>
-
-            {helper && (
-                <InputHelper kind={hasError ? Kind.error : Kind.info} className={`${CLASSNAME}__helper`}>
-                    {helper}
-                </InputHelper>
-            )}
-        </button>
-    );
-});
-ProgressTrackerStep.displayName = COMPONENT_NAME;
-ProgressTrackerStep.className = CLASSNAME;
-ProgressTrackerStep.defaultProps = DEFAULT_PROPS;

package/src/components/progress-tracker/ProgressTrackerStepPanel.test.tsx

@@ -1,34 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { ProgressTrackerStepPanel, ProgressTrackerStepPanelProps } from './ProgressTrackerStepPanel';
-
-const CLASSNAME = ProgressTrackerStepPanel.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: Partial<ProgressTrackerStepPanelProps> = {}) => {
-    const props = { ...propsOverride, children: 'Tab panel content' };
-    render(<ProgressTrackerStepPanel {...props} />);
-    const progressTrackerStepPanel = getByClassName(document.body, CLASSNAME);
-
-    return { props, progressTrackerStepPanel };
-};
-
-describe(`<${ProgressTrackerStepPanel.displayName}>`, () => {
-    it('should render default', () => {
-        const content = 'Content';
-        const { progressTrackerStepPanel } = setup({ children: content });
-        expect(progressTrackerStepPanel).toBe(screen.queryByRole('tabpanel'));
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'progressTrackerStepPanel',
-        forwardRef: 'progressTrackerStepPanel',
-        forwardAttributes: 'progressTrackerStepPanel',
-    });
-});

package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx

@@ -1,67 +0,0 @@
-import classNames from 'classnames';
-
-import { useTabProviderContext } from '@lumx/react/components/tabs/state';
-import { CSS_PREFIX } from '@lumx/react/constants';
-import { GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface ProgressTrackerStepPanelProps extends GenericProps {
-    /** Native id property. */
-    id?: string;
-    /** Whether the step is active or not. */
-    isActive?: boolean;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ProgressTrackerStepPanel';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = `${CSS_PREFIX}-step-panel`;
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ProgressTrackerStepPanelProps> = {};
-
-/**
- * ProgressTrackerStepPanel component.
- *
- * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ProgressTrackerStepPanel = forwardRef<ProgressTrackerStepPanelProps, HTMLDivElement>((props, ref) => {
-    const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
-
-    const state = useTabProviderContext('tabPanel', id);
-    const isActive = propIsActive || state?.isActive;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            id={state?.tabPanelId}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
-            role="tabpanel"
-            tabIndex={isActive ? 0 : -1}
-            aria-labelledby={state?.tabId}
-        >
-            {(!state?.isLazy || isActive) && children}
-        </div>
-    );
-});
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME;
-ProgressTrackerStepPanel.className = CLASSNAME;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;

package/src/components/progress-tracker/index.ts

@@ -1,4 +0,0 @@
-export * from './ProgressTrackerProvider';
-export * from './ProgressTracker';
-export * from './ProgressTrackerStep';
-export * from './ProgressTrackerStepPanel';

package/src/components/radio-button/RadioButton.stories.tsx

@@ -1,71 +0,0 @@
-import { RadioButton } 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';
-import uniqueId from 'lodash/uniqueId';
-
-export default {
-    title: 'LumX components/radio-button/Radio button',
-    component: RadioButton,
-    args: {
-        ...RadioButton.defaultProps,
-        name: 'radiobutton-html-name',
-        value: 'radiobutton-html-value',
-    },
-    argTypes: {
-        onChange: { action: true },
-        name: { control: false },
-        value: { control: false },
-    },
-    decorators: [
-        withValueOnChange({
-            valueProp: 'isChecked',
-            valueTransform: (value) => value === 'radiobutton-html-value',
-        }),
-    ],
-};
-
-/**
- * Default radio button
- */
-export const Default = {};
-
-/**
- * With label and helper
- */
-export const LabelAndHelper = {
-    args: {
-        label: 'Radio button label',
-        helper: loremIpsum('tiny'),
-    },
-};
-
-/**
- * All state combinations
- */
-export const AllStates = {
-    args: { ...LabelAndHelper.args, helper: 'Radio button helper' },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: {
-                    Default: {},
-                    Checked: { isChecked: true },
-                },
-                cols: {
-                    Default: {},
-                    Disabled: { isDisabled: true },
-                    'ARIA Disabled': { 'aria-disabled': true },
-                },
-            },
-            combinator(a, b) {
-                return Object.assign(a, b, {
-                    // Injecting a unique name for each radio buttons to make sure they can be individually focused
-                    name: uniqueId('name'),
-                    // Disabling
-                    onChange: undefined,
-                });
-            },
-        }),
-    ],
-};

package/src/components/radio-button/RadioButton.test.tsx

@@ -1,143 +0,0 @@
-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 { RadioButton, RadioButtonProps } from '.';
-
-const CLASSNAME = RadioButton.className as string;
-
-type SetupProps = Partial<RadioButtonProps>;
-
-/**
- * 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(<RadioButton {...props} />, { wrapper });
-
-    const radioButton = getByClassName(document.body, CLASSNAME);
-    const helper = queryByClassName(radioButton, `${CLASSNAME}__helper`);
-    const label = queryByClassName(radioButton, `${CLASSNAME}__label`);
-    const input = getByTagName(radioButton, 'input');
-    return { radioButton, helper, label, input, props };
-};
-
-describe(`<${RadioButton.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render correctly', () => {
-            const { radioButton, input, label, helper } = setup();
-            expect(radioButton).toBeInTheDocument();
-            expect(radioButton).toHaveClass(CLASSNAME);
-            expect(radioButton).not.toHaveClass('lumx-radio-button--is-disabled');
-            expect(radioButton).toHaveClass('lumx-radio-button--is-unchecked');
-
-            expect(label).not.toBeInTheDocument();
-            expect(helper).not.toBeInTheDocument();
-
-            expect(input).toBeInTheDocument();
-            expect(input).not.toBeChecked();
-            expect(input).not.toBeDisabled();
-        });
-
-        it('should render disabled and checked', () => {
-            const { radioButton, input } = setup({
-                isDisabled: true,
-                isChecked: true,
-            });
-            expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
-            expect(radioButton).toHaveClass('lumx-radio-button--is-checked');
-
-            expect(input).toBeChecked();
-            expect(input).toBeDisabled();
-        });
-
-        it('should render helper and label', () => {
-            const id = 'radioButton1';
-            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 radioButton 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(value, name, expect.any(Object));
-        });
-    });
-
-    describe('Disabled state', () => {
-        it('should be disabled with isDisabled', async () => {
-            const onChange = vi.fn();
-            const { radioButton, input } = setup({ isDisabled: true, onChange });
-
-            expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
-            expect(input).toBeDisabled();
-            expect(input).toHaveAttribute('readOnly');
-
-            // 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 { radioButton, input } = setup({ 'aria-disabled': true, onChange });
-
-            expect(radioButton).toHaveClass('lumx-radio-button--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: 'radioButton',
-        forwardAttributes: 'radioButton',
-        applyTheme: {
-            affects: [{ element: 'radioButton' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});