@lumx/react 3.0.6 → 3.0.7-alpha.1

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

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

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

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

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

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

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

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

@@ -0,0 +1,41 @@
+// 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>
+`;