@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/src/components/post-block/PostBlock.tsx

@@ -0,0 +1,122 @@
+import { ReactNode } from 'react';
+
+import classNames from 'classnames';
+import isObject from 'lodash/isObject';
+
+import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } 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';
+
+/**
+ * Defines the props of the component.
+ */
+export interface PostBlockProps extends GenericProps, HasTheme {
+    /** Action toolbar content. */
+    actions?: ReactNode;
+    /** Attachment content. */
+    attachments?: ReactNode;
+    /** Author content. */
+    author?: ReactNode;
+    /** Metadata content. */
+    meta?: ReactNode;
+    /** Orientation. */
+    orientation?: Orientation;
+    /** Tag content. */
+    tags?: ReactNode;
+    /** Content (string, or sanitized html). */
+    text?: string | { __html: string };
+    /** Thumbnail. */
+    thumbnailProps?: ThumbnailProps;
+    /** Title. */
+    title: string;
+    /** On click callback. */
+    onClick?(): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'PostBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<PostBlockProps> = {
+    orientation: Orientation.horizontal,
+};
+
+/**
+ * PostBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        actions,
+        attachments,
+        author,
+        className,
+        meta,
+        onClick,
+        orientation = DEFAULT_PROPS.orientation,
+        tags,
+        text,
+        theme = defaultTheme,
+        thumbnailProps,
+        title,
+        ...forwardedProps
+    } = props;
+
+    return (
+        <div
+            ref={ref}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, orientation, theme }))}
+            {...forwardedProps}
+        >
+            {thumbnailProps && (
+                <div className={`${CLASSNAME}__thumbnail`}>
+                    <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />
+                </div>
+            )}
+            <div className={`${CLASSNAME}__wrapper`}>
+                {author && <div className={`${CLASSNAME}__author`}>{author}</div>}
+
+                {title && (
+                    <button type="button" className={`${CLASSNAME}__title`} onClick={onClick}>
+                        {title}
+                    </button>
+                )}
+
+                {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}
+
+                {isObject(text) && text.__html ? (
+                    // eslint-disable-next-line react/no-danger
+                    <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />
+                ) : (
+                    <p className={`${CLASSNAME}__text`}>{text}</p>
+                )}
+
+                {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}
+                {(tags || actions) && (
+                    <div className={`${CLASSNAME}__toolbar`}>
+                        {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}
+                        {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});
+PostBlock.displayName = COMPONENT_NAME;
+PostBlock.className = CLASSNAME;
+PostBlock.defaultProps = DEFAULT_PROPS;

package/src/components/post-block/index.ts

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

package/src/components/progress/Progress.tsx

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,42 @@
+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',
+    });
+});