@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PostBlock> Snapshots and structure should render story 'Default' 1`] = `
+<div
+  className="lumx-post-block lumx-post-block--orientation-horizontal lumx-post-block--theme-light"
+>
+  <div
+    className="lumx-post-block__thumbnail"
+  >
+    <Thumbnail
+      alt="Landscape"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/landscape1.jpg"
+      loading="lazy"
+      theme="light"
+      variant="rounded"
+    />
+  </div>
+  <div
+    className="lumx-post-block__wrapper"
+  >
+    <div
+      className="lumx-post-block__author"
+    >
+      <UserBlock
+        avatarProps={
+          {
+            "alt": "Avatar",
+            "image": "/demo-assets/avatar2.jpg",
+          }
+        }
+        name="Matthias Manoukian"
+        orientation="horizontal"
+        size="s"
+        theme="light"
+      />
+    </div>
+    <button
+      className="lumx-post-block__title"
+      type="button"
+    >
+      Annual Bonus Payments
+    </button>
+    <span
+      className="lumx-post-block__meta"
+    >
+      1 day ago in community's name
+    </span>
+    <p
+      className="lumx-post-block__text"
+      dangerouslySetInnerHTML={
+        {
+          "__html": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus libero aliquet pharetra luctus. Fusce nisl turpis, posuere ac tellus at, euismod vulputate libero...",
+        }
+      }
+    />
+    <div
+      className="lumx-post-block__attachments"
+    >
+      <UserBlock
+        avatarProps={
+          {
+            "alt": "Avatar",
+            "image": "/demo-assets/persona.png",
+          }
+        }
+        fields={
+          [
+            "Head of Design",
+            "Lyon",
+          ]
+        }
+        name="Matthias Manoukian"
+        orientation="vertical"
+        size="l"
+        theme="light"
+      />
+    </div>
+    <div
+      className="lumx-post-block__toolbar"
+    >
+      <div
+        className="lumx-post-block__tags"
+      >
+        <ChipGroup
+          align="left"
+        >
+          <Chip
+            size="s"
+            theme="light"
+          >
+            tag1
+          </Chip>
+          <Chip
+            size="s"
+            theme="light"
+          >
+            tag2
+          </Chip>
+          <Chip
+            size="s"
+            theme="light"
+          >
+            tag3
+          </Chip>
+        </ChipGroup>
+      </div>
+      <div
+        className="lumx-post-block__actions"
+      >
+        <FlexBox
+          orientation="horizontal"
+        >
+          <Button
+            emphasis="low"
+            leftIcon="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9Z"
+            size="s"
+            theme="light"
+          >
+            <span>
+              16
+            </span>
+          </Button>
+          <Button
+            emphasis="low"
+            leftIcon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            size="s"
+            theme="light"
+          >
+            <span>
+              8
+            </span>
+          </Button>
+        </FlexBox>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

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

package/dist/src/components/progress/Progress.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Theme } from '@lumx/react';
+
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+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> = {
+    theme: Theme.light,
+    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: Comp<ProgressProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { className, theme, 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/dist/src/components/progress/ProgressCircular.stories.tsx

@@ -0,0 +1,18 @@
+import { ProgressCircular } from '@lumx/react';
+import React, { Fragment } from 'react';
+
+export default {
+    title: 'LumX components/progress/ProgressCircular',
+};
+
+const SIZES = ['xxs', 'xs', 's', 'm', undefined] as const;
+
+export const Default = ({ theme }: any) => <ProgressCircular theme={theme} />;
+
+export const Sizes = ({ theme }: any) =>
+    SIZES.map((size) => (
+        <Fragment key={String(size)}>
+            <span>{String(size)}</span>
+            <ProgressCircular theme={theme} size={size} />
+        </Fragment>
+    ));

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

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { Theme } from '@lumx/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> = {}) => {
+    const { container } = render(<ProgressCircular {...(props as any)} />);
+    const element = getByClassName(container, CLASSNAME);
+    return { container, element, props };
+};
+
+describe(`<${ProgressCircular.displayName}>`, () => {
+    it('should render default', () => {
+        const { element } = setup();
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+        expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
+        expect(element).toHaveClass(`${CLASSNAME}--size-m`);
+    });
+
+    it('should render dark theme', () => {
+        const { element } = setup({ theme: Theme.dark });
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+        expect(element).toHaveClass(`${CLASSNAME}--theme-dark`);
+    });
+
+    it('should render size xs', () => {
+        const { element } = setup({ size: 'xs' });
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+        expect(element).toHaveClass(`${CLASSNAME}--size-xs`);
+    });
+
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+    });
+});

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

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Theme, Size } from '@lumx/react';
+
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * 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;
+}
+
+/**
+ * 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> = {
+    theme: Theme.light,
+    size: Size.m,
+};
+
+/**
+ * ProgressCircularProps component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const ProgressCircular: Comp<ProgressCircularProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { className, theme, size, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, size }))}
+        >
+            <div className="lumx-progress-circular__double-bounce1" />
+            <div 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>
+        </div>
+    );
+});
+ProgressCircular.displayName = COMPONENT_NAME;
+ProgressCircular.className = CLASSNAME;
+ProgressCircular.defaultProps = DEFAULT_PROPS;

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

@@ -0,0 +1,8 @@
+import { ProgressLinear } from '@lumx/react';
+import React from 'react';
+
+export default {
+    title: 'LumX components/progress/ProgressLinear',
+};
+
+export const Default = ({ theme }: any) => <ProgressLinear theme={theme} />;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { Theme } from '@lumx/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> = {}) => {
+    const { container } = render(<ProgressLinear {...(props as any)} />);
+    const element = getByClassName(container, CLASSNAME);
+    return { container, element, props };
+};
+
+describe(`<${ProgressLinear.displayName}>`, () => {
+    it('should render default', () => {
+        const { element } = setup();
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+        expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
+    });
+
+    it('should render dark theme', () => {
+        const { element } = setup({ theme: Theme.dark });
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass(CLASSNAME);
+        expect(element).toHaveClass(`${CLASSNAME}--theme-dark`);
+    });
+
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
+});

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

@@ -0,0 +1,52 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Theme } from '@lumx/react';
+
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+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> = {
+    theme: Theme.light,
+};
+
+/**
+ * ProgressLinear component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const ProgressLinear: Comp<ProgressLinearProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { className, theme, ...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/dist/src/components/progress/index.ts

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

package/dist/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 React, { 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/dist/src/components/progress-tracker/ProgressTracker.test.tsx

@@ -0,0 +1,57 @@
+import { ProgressTrackerStep } from '@lumx/react';
+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 { ProgressTracker, ProgressTrackerProps } from './ProgressTracker';
+
+const CLASSNAME = ProgressTracker.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<ProgressTrackerProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+    const steps = [<ProgressTrackerStep key={0} label="Step 0" />, <ProgressTrackerStep key={1} label="Step 1" />];
+    const props: ProgressTrackerProps = {
+        children: steps,
+        'aria-label': 'Steps',
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<ProgressTracker {...props} />);
+
+    return { props, wrapper };
+};
+
+describe(`<${ProgressTracker.displayName}>`, () => {
+    beforeEach(() => {
+        setupTabProviderMocks();
+    });
+
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render correctly', () => {
+            const { wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(wrapper).toExist();
+            expect(wrapper).toHaveClassName(CLASSNAME);
+
+            expect(wrapper.childAt(0)).toExist();
+            expect(wrapper.childAt(0)).toHaveClassName('lumx-progress-tracker__steps');
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});