@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/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 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

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