@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/progress-tracker/ProgressTracker.tsx

@@ -1,89 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
-import { useTabProviderContextState } from '../tabs/state';
-
-/**
- * Defines the props of the component.
- */
-export interface ProgressTrackerProps extends GenericProps {
-    /** ARIA label (purpose of the set of steps). */
-    ['aria-label']: string;
-    /** Step list. */
-    children: ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ProgressTracker';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ProgressTrackerProps> = {};
-
-/**
- * ProgressTracker component.
- *
- * Implements WAI-ARIA `tablist` 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 ProgressTracker: Comp<ProgressTrackerProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { 'aria-label': ariaLabel, children, className, ...forwardedProps } = props;
-    const stepListRef = React.useRef(null);
-    useRovingTabIndex({
-        parentRef: stepListRef,
-        elementSelector: '[role="tab"]',
-        keepTabIndex: false,
-        extraDependencies: [children],
-    });
-
-    const state = useTabProviderContextState();
-    const numberOfSteps = state?.ids?.tab?.length || 0;
-    const backgroundPosition: number = numberOfSteps > 0 ? 100 / (numberOfSteps * 2) : 0;
-    const trackPosition: number =
-        numberOfSteps > 0 ? ((100 / (numberOfSteps - 1)) * (state?.activeTabIndex || 0)) / 100 : 0;
-
-    return (
-        <div
-            ref={mergeRefs(ref, stepListRef)}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
-            <div className={`${CLASSNAME}__steps`} role="tablist" aria-label={ariaLabel}>
-                {children}
-            </div>
-
-            <div
-                className={`${CLASSNAME}__background-bar`}
-                style={{ left: `${backgroundPosition}%`, right: `${backgroundPosition}%` }}
-            />
-
-            <div
-                className={`${CLASSNAME}__foreground-bar`}
-                style={{
-                    left: `${backgroundPosition}%`,
-                    right: `${backgroundPosition}%`,
-                    transform: `scaleX(${trackPosition})`,
-                }}
-            />
-        </div>
-    );
-});
-ProgressTracker.displayName = COMPONENT_NAME;
-ProgressTracker.className = CLASSNAME;
-ProgressTracker.defaultProps = DEFAULT_PROPS;

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

@@ -1,42 +0,0 @@
-import { ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel } from '@lumx/react';
-import { mount } from 'enzyme';
-import 'jest-enzyme';
-import React from 'react';
-
-describe(`<${ProgressTrackerProvider.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render', () => {
-            const wrapper = mount(
-                <ProgressTrackerProvider>
-                    <ProgressTracker aria-label="Progress tracker steps">
-                        <ProgressTrackerStep label="step 1" />
-                        <ProgressTrackerStep label="step 1" />
-                    </ProgressTracker>
-
-                    <ProgressTrackerStepPanel>Progress tracker step 1 content</ProgressTrackerStepPanel>
-                    <ProgressTrackerStepPanel>Progress tracker step 2 content</ProgressTrackerStepPanel>
-                </ProgressTrackerProvider>,
-            );
-            const steps = wrapper.find(ProgressTrackerStep).find('button');
-            const firstProgressTrackerStep = steps.get(0);
-            const secondProgressTrackerStep = steps.get(1);
-
-            const stepPanels = wrapper.find(ProgressTrackerStepPanel).find('div');
-            const firstProgressTrackerStepPanel = stepPanels.get(0);
-            const secondProgressTrackerStepPanel = stepPanels.get(1);
-
-            // First step is selected.
-            expect(firstProgressTrackerStep.props['aria-selected']).toBe(true);
-            expect(secondProgressTrackerStep.props['aria-selected']).toBe(false);
-
-            // ProgressTrackerStep id and step panel aria-labelledby by should match
-            expect(firstProgressTrackerStep.props.id).toBe(firstProgressTrackerStepPanel.props['aria-labelledby']);
-            expect(secondProgressTrackerStep.props.id).toBe(secondProgressTrackerStepPanel.props['aria-labelledby']);
-
-            // ProgressTrackerStep panel id and step aria-controls by should match
-            expect(firstProgressTrackerStepPanel.props.id).toBe(firstProgressTrackerStep.props['aria-controls']);
-            expect(secondProgressTrackerStepPanel.props.id).toBe(secondProgressTrackerStep.props['aria-controls']);
-        });
-    });
-});

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

@@ -1,66 +0,0 @@
-import React, { 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: {
-                    ...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/dist/src/components/progress-tracker/ProgressTrackerStep.test.tsx

@@ -1,128 +0,0 @@
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
-
-import { setupTabProviderMocks } from '../tabs/test.mocks';
-import { ProgressTrackerStep, ProgressTrackerStepProps } from './ProgressTrackerStep';
-
-const CLASSNAME = ProgressTrackerStep.className as string;
-
-// Mock useTabProviderContext.
-jest.mock('../tabs/state', () => {
-    const state = jest.requireActual('../tabs/state');
-    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
-});
-
-type SetupProps = Partial<ProgressTrackerStepProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: ProgressTrackerStepProps = { label: 'Test Step Label', ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<ProgressTrackerStep {...props} />);
-
-    return { props, wrapper };
-};
-
-describe(`<${ProgressTrackerStep.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render', () => {
-            setupTabProviderMocks({ index: 1 });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-
-        it('should render active state', () => {
-            setupTabProviderMocks({ index: 3, isActive: true });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should render complete state', () => {
-            setupTabProviderMocks({ index: 3, isComplete: true });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should render erroneous state', () => {
-            setupTabProviderMocks({ index: 3, hasError: true });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should render active erroneous state', () => {
-            setupTabProviderMocks({ index: 3, isActive: true, hasError: true });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use the given props to add classes', () => {
-            setupTabProviderMocks();
-            const props: any = {
-                isActive: true,
-                hasError: true,
-                isComplete: true,
-            };
-            const { wrapper } = setup(props);
-
-            Object.keys(props).forEach((prop) => {
-                expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: prop, value: props[prop] }));
-            });
-        });
-    });
-
-    // 3. Test events.
-    describe('Events', () => {
-        it('should trigger `onChange` when focused if the provider is configured to do so', () => {
-            const { changeToTab } = setupTabProviderMocks({ shouldActivateOnFocus: true });
-            const { wrapper } = setup({}, false);
-
-            wrapper.simulate('focus');
-            expect(changeToTab).toHaveBeenCalledTimes(1);
-        });
-
-        it('should trigger `onChange` when clicked', () => {
-            const { changeToTab } = setupTabProviderMocks();
-            const { wrapper } = setup({}, false);
-
-            wrapper.simulate('click');
-            expect(changeToTab).toHaveBeenCalledTimes(1);
-        });
-
-        it('should trigger `onChange` when pressing `enter`', () => {
-            const { changeToTab } = setupTabProviderMocks();
-            const { wrapper } = setup({}, false);
-
-            wrapper.simulate('keypress', { key: 'Enter' });
-            expect(changeToTab).toHaveBeenCalledTimes(1);
-        });
-
-        it('should not trigger `onChange` when pressing any other key', () => {
-            const { changeToTab } = setupTabProviderMocks();
-            const { wrapper } = setup({}, false);
-
-            wrapper.simulate('keypress', { key: 'a' });
-            expect(changeToTab).not.toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuite(
-        (...args: any[]) => {
-            setupTabProviderMocks();
-            return setup(...args);
-        },
-        { className: 'wrapper', prop: 'wrapper' },
-        { className: CLASSNAME },
-    );
-});

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

@@ -1,159 +0,0 @@
-import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, useCallback } from 'react';
-
-import classNames from 'classnames';
-
-import { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
-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: Comp<ProgressTrackerStepProps, HTMLButtonElement> = forwardRef((props, ref) => {
-    const {
-        className,
-        disabled,
-        hasError,
-        helper,
-        id,
-        isActive: propIsActive,
-        isComplete,
-        isDisabled = disabled,
-        label,
-        onFocus,
-        onKeyPress,
-        tabIndex = -1,
-        ...forwardedProps
-    } = props;
-    const state = useTabProviderContext('tab', id);
-    const isActive = propIsActive || state?.isActive;
-
-    const changeToCurrentTab = useCallback(() => {
-        if (isDisabled) {
-            return;
-        }
-        state?.changeToTab();
-    }, [isDisabled, 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 && !isDisabled,
-                    isComplete,
-                }),
-            )}
-            onClick={changeToCurrentTab}
-            onKeyPress={handleKeyPress}
-            onFocus={handleFocus}
-            role="tab"
-            tabIndex={isActive ? 0 : tabIndex}
-            aria-disabled={isDisabled}
-            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/dist/src/components/progress-tracker/ProgressTrackerStepPanel.test.tsx

@@ -1,73 +0,0 @@
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
-import { setupTabProviderMocks } from '../tabs/test.mocks';
-import { ProgressTrackerStepPanel, ProgressTrackerStepPanelProps } from './ProgressTrackerStepPanel';
-
-const CLASSNAME = ProgressTrackerStepPanel.className as string;
-
-// Mock useTabProviderContext.
-jest.mock('../tabs/state', () => {
-    const state = jest.requireActual('../tabs/state');
-    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
-});
-
-type SetupProps = Partial<ProgressTrackerStepPanelProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: ProgressTrackerStepPanelProps = { ...propsOverride, children: 'Tab panel content' };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<ProgressTrackerStepPanel {...props} />);
-
-    return { props, wrapper };
-};
-
-describe(`<${ProgressTrackerStepPanel.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            setupTabProviderMocks({ index: 1 });
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-
-        it('should render isActive state', () => {
-            setupTabProviderMocks({ index: 2, isActive: true });
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should not render children when not active and lazy', () => {
-            setupTabProviderMocks({ isLazy: true, isActive: false });
-            const { wrapper } = setup();
-            expect(wrapper.find('div').props().children).toBeFalsy();
-        });
-
-        it('should render children when active and lazy', () => {
-            setupTabProviderMocks({ isLazy: true, isActive: true });
-            const { wrapper } = setup();
-            expect(wrapper.find('div').props().children).toBeTruthy();
-        });
-
-        it('should render children when not active and not lazy', () => {
-            setupTabProviderMocks({ isActive: false, isLazy: false });
-            const { wrapper } = setup();
-            expect(wrapper.find('div').props().children).toBeTruthy();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuite(
-        (...args: any[]) => {
-            setupTabProviderMocks();
-            return setup(...args);
-        },
-        { className: 'wrapper', prop: 'wrapper' },
-        { className: CLASSNAME },
-    );
-});

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

@@ -1,67 +0,0 @@
-import { useTabProviderContext } from '@lumx/react/components/tabs/state';
-import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
-
-import classNames from 'classnames';
-import React, { forwardRef } from 'react';
-
-/**
- * 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;
-}
-
-/**
- * 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: Comp<ProgressTrackerStepPanelProps, HTMLDivElement> = forwardRef(
-    (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={0}
-                aria-labelledby={state?.tabId}
-            >
-                {(!state?.isLazy || isActive) && children}
-            </div>
-        );
-    },
-);
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME;
-ProgressTrackerStepPanel.className = CLASSNAME;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;

package/dist/src/components/progress-tracker/__snapshots__/ProgressTracker.test.tsx.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ProgressTracker> Snapshots and structure should render correctly 1`] = `
-<div
-  className="lumx-progress-tracker"
->
-  <div
-    aria-label="Steps"
-    className="lumx-progress-tracker__steps"
-    role="tablist"
-  >
-    <ProgressTrackerStep
-      key="0"
-      label="Step 0"
-    />
-    <ProgressTrackerStep
-      key="1"
-      label="Step 1"
-    />
-  </div>
-  <div
-    className="lumx-progress-tracker__background-bar"
-    style={
-      {
-        "left": "25%",
-        "right": "25%",
-      }
-    }
-  />
-  <div
-    className="lumx-progress-tracker__foreground-bar"
-    style={
-      {
-        "left": "25%",
-        "right": "25%",
-        "transform": "scaleX(0)",
-      }
-    }
-  />
-</div>
-`;