@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

package/src/components/progress/Progress.tsx

@@ -1,68 +0,0 @@
-import classNames from 'classnames';
-
-import { Theme } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { ProgressLinear } from './ProgressLinear';
-import { ProgressCircular } from './ProgressCircular';
-
-/**
- * Progress variants.
- */
-export const ProgressVariant = { linear: 'linear', circular: 'circular' } as const;
-export type ProgressVariant = ValueOf<typeof ProgressVariant>;
-
-/**
- * Defines the props of the component.
- */
-export interface ProgressProps extends GenericProps, HasTheme {
-    /** Progress variant. */
-    variant?: ProgressVariant;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Progress';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ProgressProps> = {
-    variant: ProgressVariant.circular,
-};
-
-/**
- * Progress component.
- *
- * @deprecated use `ProgressLinear` and `ProgressCircular` instead.
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Progress = forwardRef<ProgressProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { className, theme = defaultTheme, variant = DEFAULT_PROPS.variant, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, variant }))}
-        >
-            {variant === ProgressVariant.circular && <ProgressCircular theme={theme} />}
-            {variant === ProgressVariant.linear && <ProgressLinear theme={theme} />}
-        </div>
-    );
-});
-Progress.displayName = COMPONENT_NAME;
-Progress.className = CLASSNAME;
-Progress.defaultProps = DEFAULT_PROPS;

package/src/components/progress/ProgressCircular.stories.tsx

@@ -1,43 +0,0 @@
-import { ProgressCircular, ProgressCircularSize, Size, Text } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-const sizes: Array<ProgressCircularSize> = [Size.xxs, Size.xs, Size.s, Size.m];
-
-export default {
-    title: 'LumX components/progress/ProgressCircular',
-    component: ProgressCircular,
-    args: ProgressCircular.defaultProps,
-    argTypes: {
-        size: getSelectArgType<ProgressCircularSize>(sizes),
-    },
-};
-
-/**
- * Default progress circular
- */
-export const Default = {};
-
-/**
- * All sizes
- */
-export const AllSizes = {
-    decorators: [
-        withCombinations({
-            combinations: { cols: { key: 'size', options: sizes } },
-        }),
-    ],
-};
-
-/**
- * Inline display variant to use inside text
- */
-export const Inline = {
-    render() {
-        return (
-            <Text as="p">
-                Some text with <ProgressCircular display="inline" size="xxs" /> inline progress
-            </Text>
-        );
-    },
-};

package/src/components/progress/ProgressCircular.test.tsx

@@ -1,46 +0,0 @@
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-
-import { ProgressCircular, ProgressCircularProps } from './ProgressCircular';
-
-const CLASSNAME = ProgressCircular.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ProgressCircularProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const { container } = render(<ProgressCircular {...(props as any)} />, { wrapper });
-    const element = getByClassName(container, CLASSNAME);
-    return { container, element, props };
-};
-
-describe(`<${ProgressCircular.displayName}>`, () => {
-    it('should render default', () => {
-        const { element } = setup();
-        expect(element).toHaveClass(`${CLASSNAME}--size-m`);
-        expect(element.tagName).toBe('DIV');
-    });
-
-    it('should render size xs', () => {
-        const { element } = setup({ size: 'xs' });
-        expect(element).toHaveClass(`${CLASSNAME}--size-xs`);
-    });
-
-    it('should render display inline', () => {
-        const { element } = setup({ display: 'inline' });
-        expect(element.tagName).toBe('SPAN');
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'element',
-        forwardAttributes: 'element',
-        applyTheme: {
-            affects: [{ element: 'element' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/progress/ProgressCircular.tsx

@@ -1,82 +0,0 @@
-import classNames from 'classnames';
-
-import { Theme, Size } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Progress sizes.
- */
-export type ProgressCircularSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm'>;
-
-/**
- * Defines the props of the component.
- */
-export interface ProgressCircularProps extends GenericProps, HasTheme {
-    /**
-     * Progress circular size.
-     */
-    size?: ProgressCircularSize;
-    /**
-     * Progress display type (inline or block).
-     * @default 'block'
-     */
-    display?: 'inline' | 'block';
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ProgressCircular';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
-    size: Size.m,
-    display: 'block',
-};
-
-/**
- * ProgressCircularProps component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ProgressCircular = forwardRef<ProgressCircularProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        className,
-        theme = defaultTheme,
-        size = DEFAULT_PROPS.size,
-        display = DEFAULT_PROPS.display,
-        ...forwardedProps
-    } = props;
-    const Element = display === 'block' ? 'div' : 'span';
-
-    return (
-        <Element
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, size, display }))}
-        >
-            <Element className="lumx-progress-circular__double-bounce1" />
-            <Element className="lumx-progress-circular__double-bounce2" />
-
-            <svg className="lumx-progress-circular__svg" viewBox="25 25 50 50">
-                <circle className="lumx-progress-circular__path" cx="50" cy="50" r="20" fill="none" strokeWidth="5" />
-            </svg>
-        </Element>
-    );
-});
-ProgressCircular.displayName = COMPONENT_NAME;
-ProgressCircular.className = CLASSNAME;
-ProgressCircular.defaultProps = DEFAULT_PROPS;

package/src/components/progress/ProgressLinear.stories.tsx

@@ -1,12 +0,0 @@
-import { ProgressLinear } from '@lumx/react';
-
-export default {
-    title: 'LumX components/progress/ProgressLinear',
-    component: ProgressLinear,
-    args: ProgressLinear.defaultProps,
-};
-
-/**
- * Default progress linear
- */
-export const Default = {};

package/src/components/progress/ProgressLinear.test.tsx

@@ -1,30 +0,0 @@
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-
-import { ProgressLinear, ProgressLinearProps } from './ProgressLinear';
-
-const CLASSNAME = ProgressLinear.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ProgressLinearProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const { container } = render(<ProgressLinear {...(props as any)} />, { wrapper });
-    const element = getByClassName(container, CLASSNAME);
-    return { container, element, props };
-};
-
-describe(`<${ProgressLinear.displayName}>`, () => {
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'element',
-        forwardAttributes: 'element',
-        applyTheme: {
-            affects: [{ element: 'element' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/progress/ProgressLinear.tsx

@@ -1,50 +0,0 @@
-import classNames from 'classnames';
-
-import { Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-export interface ProgressLinearProps extends GenericProps, HasTheme {}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ProgressLinear';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ProgressLinearProps> = {};
-
-/**
- * ProgressLinear component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ProgressLinear = forwardRef<ProgressLinearProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { className, theme = defaultTheme, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
-        >
-            <div className="lumx-progress-linear__line1" />
-            <div className="lumx-progress-linear__line2" />
-        </div>
-    );
-});
-ProgressLinear.displayName = COMPONENT_NAME;
-ProgressLinear.className = CLASSNAME;
-ProgressLinear.defaultProps = DEFAULT_PROPS;

package/src/components/progress/index.ts

@@ -1,3 +0,0 @@
-export * from './Progress';
-export * from './ProgressCircular';
-export * from './ProgressLinear';

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

@@ -1,145 +0,0 @@
-import {
-    Button,
-    ColorPalette,
-    FlexBox,
-    Orientation,
-    ProgressTracker,
-    ProgressTrackerProvider,
-    ProgressTrackerStep,
-    ProgressTrackerStepPanel,
-} from '@lumx/react';
-import cloneDeep from 'lodash/cloneDeep';
-import set from 'lodash/set';
-import { useState } from 'react';
-
-export default { title: 'LumX components/progress-tracker/Progress Tracker' };
-
-export const Controlled = () => {
-    const [activeStep, setActiveStep] = useState(1);
-
-    const [steps, setSteps] = useState([
-        {
-            label: 'First',
-            isDisabled: false,
-            isComplete: true,
-            hasError: false,
-        },
-        {
-            label: 'Second',
-            isDisabled: false,
-            isComplete: false,
-            hasError: false,
-        },
-        {
-            label: 'Third',
-            isDisabled: true,
-            isComplete: false,
-            hasError: false,
-        },
-        {
-            label: 'Fourth',
-            isDisabled: true,
-            isComplete: false,
-            hasError: false,
-        },
-        {
-            label: 'Fifth',
-            helper: 'Almost done',
-            isDisabled: true,
-            isComplete: false,
-            hasError: false,
-        },
-    ]);
-
-    const toggleError = (index: number) => () => {
-        const clonedSteps = cloneDeep(steps);
-        set(clonedSteps, [index, 'hasError'], !steps[index].hasError);
-        set(clonedSteps, [index, 'isComplete'], false);
-        setSteps(clonedSteps);
-    };
-
-    const previous = (index: number) => () => setActiveStep(index - 1);
-
-    const next = (index: number) => () => {
-        const isLast = index === steps.length - 1;
-        const clonedSteps = cloneDeep(steps);
-        set(clonedSteps, [index, 'isComplete'], true);
-        set(clonedSteps, [index, 'hasError'], false);
-        if (!isLast) {
-            set(clonedSteps, [index + 1, 'isDisabled'], false);
-            setActiveStep(index + 1);
-        }
-        setSteps(clonedSteps);
-    };
-
-    return (
-        <ProgressTrackerProvider activeStepIndex={activeStep} onChange={setActiveStep}>
-            <ProgressTracker aria-label="Steps with a linear progression">
-                {steps.map((step) => (
-                    <ProgressTrackerStep key={step.label} {...step} />
-                ))}
-            </ProgressTracker>
-            {steps.map((step, index) => (
-                <ProgressTrackerStepPanel key={`${step.label}-panel`}>
-                    <FlexBox orientation={Orientation.horizontal}>
-                        <FlexBox fillSpace />
-                        <FlexBox
-                            orientation={Orientation.vertical}
-                            style={{ width: '700px' }}
-                            className="lumx-spacing-margin-top-huge"
-                        >
-                            <p style={{ textAlign: 'justify' }}>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper aliquet purus, a
-                                viverra odio pharetra vitae. Morbi condimentum et dui luctus tristique. Etiam turpis
-                                turpis, tristique eu lobortis vel, vulputate at mi. Ut commodo metus non fringilla
-                                semper. Aenean eu dignissim ante. Cras libero ligula, luctus quis mauris eget,
-                                vestibulum mattis ante. Donec elementum mi nisl, quis dictum lorem scelerisque sit amet.
-                                Nullam blandit tellus et tortor ornare efficitur. Vivamus blandit mauris in elementum
-                                lobortis. Nam molestie aliquet vehicula. Maecenas lacinia sodales nunc. Nam orci nisl,
-                                pellentesque sed hendrerit eget, tincidunt id lacus. Donec malesuada ex elit, eget
-                                sagittis nisl aliquam vitae. Aliquam efficitur tellus non enim efficitur suscipit a sit
-                                amet eros. Donec non lorem ullamcorper, varius ligula vitae, efficitur risus. Cras
-                                porttitor libero justo, nec porta enim eleifend vel.
-                            </p>
-                            <FlexBox orientation={Orientation.horizontal} className="lumx-spacing-margin-top-huge">
-                                <FlexBox fillSpace>
-                                    {index === 0 ? undefined : (
-                                        <Button onClick={previous(index)} color={ColorPalette.secondary}>
-                                            Previous
-                                        </Button>
-                                    )}
-                                </FlexBox>
-                                <Button
-                                    onClick={toggleError(index)}
-                                    color={ColorPalette.red}
-                                    className="lumx-spacing-margin-right-regular"
-                                >
-                                    Toggle error
-                                </Button>
-                                <Button
-                                    onClick={next(index)}
-                                    color={ColorPalette.primary}
-                                    isDisabled={index === steps.length - 1 && step.isComplete}
-                                >
-                                    {index === steps.length - 1 ? 'Complete' : 'Next with success'}
-                                </Button>
-                            </FlexBox>
-                        </FlexBox>
-                        <FlexBox fillSpace />
-                    </FlexBox>
-                </ProgressTrackerStepPanel>
-            ))}
-        </ProgressTrackerProvider>
-    );
-};
-
-export const NotControlled = () => (
-    <ProgressTrackerProvider onChange={console.log}>
-        <ProgressTracker aria-label="Steps with a linear progression">
-            <ProgressTrackerStep label="Step 1" />
-            <ProgressTrackerStep label="Step 2" />
-        </ProgressTracker>
-        <ProgressTrackerStepPanel className="lumx-spacing-padding">Step 1 panel</ProgressTrackerStepPanel>
-        <ProgressTrackerStepPanel className="lumx-spacing-padding">Step 2 panel</ProgressTrackerStepPanel>
-    </ProgressTrackerProvider>
-);

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

@@ -1,42 +0,0 @@
-import { ProgressTrackerStep } from '@lumx/react';
-import { render, within } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
-import { ProgressTracker, ProgressTrackerProps } from './ProgressTracker';
-
-const CLASSNAME = ProgressTracker.className as string;
-
-type SetupProps = Partial<ProgressTrackerProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}) => {
-    const steps = [<ProgressTrackerStep key={0} label="Step 0" />, <ProgressTrackerStep key={1} label="Step 1" />];
-    const props = {
-        children: steps,
-        'aria-label': 'Steps',
-        ...propsOverride,
-    };
-    render(<ProgressTracker {...props} />);
-    const progressTracker = getByClassName(document.body, CLASSNAME);
-
-    return { props, progressTracker };
-};
-
-describe(`<${ProgressTracker.displayName}>`, () => {
-    it('should render default', () => {
-        const label = 'Steps';
-        const { progressTracker } = setup({ 'aria-label': label });
-        expect(within(progressTracker).queryByRole('tablist', { name: label })).toBeInTheDocument();
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'progressTracker',
-        forwardAttributes: 'progressTracker',
-        forwardRef: 'progressTracker',
-    });
-});

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

@@ -1,87 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-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 = forwardRef<ProgressTrackerProps, HTMLDivElement>((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, 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/src/components/progress-tracker/ProgressTrackerProvider.test.tsx

@@ -1,65 +0,0 @@
-import {
-    ProgressTracker,
-    ProgressTrackerProvider,
-    ProgressTrackerProviderProps,
-    ProgressTrackerStep,
-    ProgressTrackerStepPanel,
-} from '@lumx/react';
-
-import { render } from '@testing-library/react';
-import { checkTabActive, query } from '../tabs/test-utils';
-
-const setup = (props: Partial<ProgressTrackerProviderProps> = {}) =>
-    render(
-        <ProgressTrackerProvider {...props}>
-            <ProgressTracker aria-label="Progress tracker steps">
-                <ProgressTrackerStep label="Step 1" />
-                <ProgressTrackerStep label="Step 2" />
-            </ProgressTracker>
-
-            <ProgressTrackerStepPanel>Progress tracker step 1 content</ProgressTrackerStepPanel>
-            <ProgressTrackerStepPanel>Progress tracker step 2 content</ProgressTrackerStepPanel>
-        </ProgressTrackerProvider>,
-    );
-
-describe(`<${ProgressTrackerProvider.displayName}>`, () => {
-    describe('default config', () => {
-        it('should render aria tab pattern', () => {
-            setup();
-
-            // Step list
-            const tabList = query.tabList('Progress tracker steps');
-            expect(tabList).toBeInTheDocument();
-            expect(query.tabs(tabList).length).toBe(2);
-
-            // Step 1
-            const tab1 = query.tab('Step 1', tabList);
-            expect(tab1).toBeInTheDocument();
-
-            // Step 2
-            const tab2 = query.tab('Step 2', tabList);
-            expect(tab2).toBeInTheDocument();
-
-            // Step panel 1
-            const tabPanel1 = query.tabPanel('Step 1');
-            expect(tabPanel1).toBeInTheDocument();
-            expect(tab1).toHaveAttribute('aria-controls', tabPanel1?.id);
-
-            // Step panel 2
-            const tabPanel2 = query.tabPanel('Step 2');
-            expect(tabPanel2).toBeInTheDocument();
-            expect(tab2).toHaveAttribute('aria-controls', tabPanel2?.id);
-
-            // First step is active
-            checkTabActive('Step 1');
-        });
-    });
-
-    describe('not lazy', () => {
-        it('should render panel content', () => {
-            setup({ isLazy: false });
-
-            checkTabActive('Step 1', { isLazy: false });
-        });
-    });
-});