@lumx/react 3.0.7 → 3.0.8

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.7",
-        "@lumx/icons": "^3.0.7",
+        "@lumx/core": "^3.0.8",
+        "@lumx/icons": "^3.0.8",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -107,13 +107,11 @@
     "scripts": {
         "build": "rollup -c",
         "prepare": "install-peers || exit 0",
-        "prepublishOnly": "yarn build",
         "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
         "storybook": "yarn start:storybook",
         "start:storybook": "cd storybook && ./start",
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.7",
-    "gitHead": "4fec43ef3290a9f250767d3bdecf60cfcf02ee75"
+    "version": "3.0.8"
 }

package/src/components/badge/Badge.tsx

@@ -1,4 +1,4 @@
-import { Color, ColorPalette } from '@lumx/react';
+import { ColorPalette } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
@@ -11,7 +11,7 @@ export interface BadgeProps extends GenericProps {
     /** Badge content. */
     children?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
 }
 
 /**

package/src/components/button/ButtonRoot.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
+import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
@@ -22,7 +22,7 @@ export interface BaseButtonProps
         Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>,
         HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Emphasis variant. */
     emphasis?: Emphasis;
     /** Whether or not the button has a background color in low emphasis. */

package/src/components/chip/Chip.tsx

@@ -1,4 +1,4 @@
-import { Color, ColorPalette, Size, Theme } from '@lumx/react';
+import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
@@ -24,7 +24,7 @@ export interface ChipProps extends GenericProps, HasTheme {
     /** A component to be rendered before the content. */
     before?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Whether the component is clickable or not. */
     isClickable?: boolean;
     /** Whether the component is disabled or not. */

package/src/components/grid-column/GridColumn.stories.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { GridColumn } from '@lumx/react/components/grid-column/GridColumn';
+
+import range from 'lodash/range';
+import { Size } from '@lumx/react';
+
+const genericBlockStyle = { border: '1px solid red', padding: '2px 8px' };
+
+export default {
+    title: 'LumX components/grid-column/GridColumn',
+    argTypes: {
+        nbItems: {
+            control: 'number',
+            defaultValue: 6,
+            min: 0,
+        },
+        gap: {
+            control: 'select',
+            options: [Size.tiny, Size.regular, Size.big, Size.huge],
+            defaultValue: Size.regular,
+        },
+        itemMinWidth: {
+            control: 'number',
+            defaultValue: 200,
+        },
+        maxColumns: {
+            control: 'number',
+            defaultValue: 4,
+        },
+    },
+    args: {
+        style: {
+            overflow: 'hidden',
+            resize: 'horizontal',
+        },
+    },
+};
+
+const getItems = (nb) =>
+    range(nb).map((key) => (
+        // eslint-disable-next-line react/jsx-key
+        <div style={genericBlockStyle}>
+            <h2>Column {key}</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Iaculis at erat
+                pellentesque adipiscing commodo elit at imperdiet dui. Ultricies integer quis auctor elit sed vulputate.
+                Mattis enim ut tellus elementum. Ipsum suspendisse ultrices gravida dictum fusce ut..
+            </p>
+        </div>
+    ));
+
+const Template = ({ nbItems = 5, ...props }) => <GridColumn {...props}>{getItems(nbItems)}</GridColumn>;
+
+export const Default = Template.bind({});

package/src/components/grid-column/GridColumn.test.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+
+import { GridColumn } from './index';
+
+const CLASSNAME = GridColumn.className;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride = {}) => {
+    const props = { ...propsOverride };
+    const { container } = render(
+        <GridColumn {...props}>
+            <p>Content 1</p>
+            <p>Content 2</p>
+            <p>Content 3</p>
+        </GridColumn>,
+    );
+
+    const gridColumn = getByClassName(container, CLASSNAME);
+
+    return { props, container, gridColumn };
+};
+
+describe(`<${GridColumn.displayName}>`, () => {
+    it('should create default component', () => {
+        const { gridColumn } = setup();
+
+        expect(gridColumn).toBeInTheDocument();
+        expect(gridColumn.children).toHaveLength(3);
+    });
+
+    describe('Props', () => {
+        it('should override CSS props', () => {
+            const { gridColumn } = setup({
+                gap: 'regular',
+                maxColumns: 10,
+                itemMinWidth: 300,
+            });
+
+            expect(gridColumn).toHaveAttribute(
+                'style',
+                '--lumx-grid-column-item-min-width: 300px; --lumx-grid-column-columns: 10; --lumx-grid-column-gap: var(--lumx-spacing-unit-regular);',
+            );
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardAttributes: 'gridColumn',
+        forwardClassName: 'gridColumn',
+    });
+});

package/src/components/grid-column/GridColumn.tsx

@@ -0,0 +1,90 @@
+import React, { forwardRef, ReactElement, ReactNode } from 'react';
+
+import isInteger from 'lodash/isInteger';
+
+import classNames from 'classnames';
+
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { Size } from '@lumx/react';
+
+export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface GridColumnProps extends GenericProps {
+    /** Customize the root element. */
+    as?: React.ElementType;
+    /** Children elements. */
+    children?: ReactNode;
+    /** Space between columns and rows. */
+    gap?: GridColumnGapSize;
+    /** Ideal number of columns. */
+    maxColumns?: number;
+    /** Minimum width for each item, reduce the number of column if there is not enough space. */
+    itemMinWidth?: number;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'GridColumn';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<GridColumnProps> = {};
+
+/**
+ * The GridColumn is a layout component that can display children in a grid
+ * with custom display properties. It also comes with a responsive design,
+ * with a number of column that reduce when there is not enough space for each item.
+ *
+ * @param props Component props.
+ * @param ref Component ref.
+ * @return React element.
+ */
+export const GridColumn: Comp<GridColumnProps> = forwardRef(
+    (props, ref): ReactElement => {
+        const {
+            as: Component = 'div',
+            gap,
+            maxColumns,
+            itemMinWidth,
+            children,
+            className,
+            style = {},
+            ...forwardedProps
+        } = props;
+
+        return (
+            <Component
+                {...forwardedProps}
+                ref={ref as React.Ref<any>}
+                className={classNames(
+                    className,
+                    handleBasicClasses({
+                        prefix: CLASSNAME,
+                    }),
+                )}
+                style={{
+                    ...style,
+                    ['--lumx-grid-column-item-min-width' as any]: isInteger(itemMinWidth) && `${itemMinWidth}px`,
+                    ['--lumx-grid-column-columns' as any]: maxColumns,
+                    ['--lumx-grid-column-gap' as any]: gap && `var(--lumx-spacing-unit-${gap})`,
+                }}
+            >
+                {children}
+            </Component>
+        );
+    },
+);
+GridColumn.displayName = COMPONENT_NAME;
+GridColumn.className = CLASSNAME;
+GridColumn.defaultProps = DEFAULT_PROPS;

package/src/components/grid-column/index.ts

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

package/src/components/icon/Icon.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
+import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiAlertCircle } from '@lumx/icons';
@@ -14,7 +14,7 @@ export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'x
  */
 export interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Whether the icon has a shape. */

package/src/components/link/Link.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
@@ -16,7 +16,7 @@ type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAn
  */
 export interface LinkProps extends GenericProps {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Link href. */

package/src/components/progress/Progress.tsx

@@ -6,6 +6,8 @@ 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.
@@ -38,9 +40,11 @@ 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.
@@ -54,31 +58,8 @@ export const Progress: Comp<ProgressProps, HTMLDivElement> = forwardRef((props,
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, variant }))}
         >
-            <div className={classNames(`${CLASSNAME}-${variant}`)}>
-                {variant === ProgressVariant.circular && (
-                    <>
-                        <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>
-                    </>
-                )}
-                {variant === ProgressVariant.linear && (
-                    <>
-                        <div className="lumx-progress-linear__line1" />
-                        <div className="lumx-progress-linear__line2" />
-                    </>
-                )}
-            </div>
+            {variant === ProgressVariant.circular && <ProgressCircular theme={theme} />}
+            {variant === ProgressVariant.linear && <ProgressLinear theme={theme} />}
         </div>
     );
 });

package/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/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/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/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/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/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/src/components/progress/index.ts

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

package/src/index.ts

@@ -22,6 +22,7 @@ export * from './components/flex-box';
 export * from './components/generic-block';
 export * from './components/heading';
 export * from './components/grid';
+export * from './components/grid-column';
 export * from './components/icon';
 export * from './components/image-block';
 export * from './components/inline-list';

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { Progress, ProgressProps } from './Progress';
-import * as stories from '../../stories/generated/Progress/Demos.stories';
-
-const CLASSNAME = Progress.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ProgressProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<Progress {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${Progress.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, Progress);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});