@lumx/react 3.0.7 → 3.1.0

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/storybook/build

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+yarn install
+yarn build "$@"

package/storybook/generate-demo-stories.js

@@ -0,0 +1,59 @@
+const path = require('path');
+const glob = require('glob');
+const fs = require('fs');
+const lodash = require('lodash');
+
+const generateStory = (component, storyFiles) => `/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/${lodash.kebabCase(component)}/${component} Demos' };
+
+${storyFiles
+    .map((storyFile) => {
+        const fileNameWithoutExtension = path.basename(storyFile.replace(/\.\w+$/, ''));
+        const storyName = lodash.startCase(fileNameWithoutExtension).replace(/ /g, '');
+        const storyPath = `./${fileNameWithoutExtension}`;
+        return `export { App as ${storyName} } from '${storyPath}';`;
+    })
+    .join('\n')}
+`;
+
+// Generate site demo component demo as stories.
+function generateDemoStories() {
+    // Base path for generated stories.
+    const basePath = path.join(__dirname, '..', 'src', 'stories', 'generated');
+    // Reset directory.
+    try {
+        fs.rmdirSync(basePath, { recursive: true });
+        fs.mkdirSync(basePath, { recursive: true });
+    } catch (e) {}
+
+    const generatedStoriesFiles = [];
+    const componentDemos = glob.sync(
+        path.join(__dirname, '..', '..', 'site-demo', 'content', 'product', 'components', '*'),
+    );
+    for (const componentDemo of componentDemos) {
+        const demoFiles = glob.sync(path.join(componentDemo, 'react', '*.tsx'));
+        if (demoFiles.length === 0) continue;
+
+        const component = lodash.startCase(path.basename(componentDemo)).replace(/ /g, '');
+        const componentDemoDir = path.join(basePath, component);
+        fs.mkdirSync(componentDemoDir);
+
+        const storyFiles = demoFiles.map((demoFile) => {
+            const storyFile = path.join(componentDemoDir, path.basename(demoFile));
+            fs.symlinkSync(path.relative(path.dirname(storyFile), demoFile), storyFile);
+            return storyFile;
+        });
+
+        const story = generateStory(component, storyFiles);
+
+        const generatedDemoStoryFile = path.join(componentDemoDir, `Demos.stories.tsx`);
+        fs.writeFileSync(generatedDemoStoryFile, story);
+
+        generatedStoriesFiles.push(generatedDemoStoryFile);
+    }
+    return generatedStoriesFiles;
+}
+
+module.exports = generateDemoStories;