@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/generic-block/GenericBlock.test.tsx

@@ -0,0 +1,152 @@
+import React, { createRef } from 'react';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite } from '@lumx/react/testing/utils';
+
+import { GenericBlock, GenericBlockProps } from '.';
+
+const CLASSNAME = GenericBlock.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<GenericBlockProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<GenericBlock {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${GenericBlock.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        it('should render default', () => {
+            const wrapper = shallow(
+                <GenericBlock figure="figure" actions="actions">
+                    Content
+                </GenericBlock>,
+            );
+
+            expect(wrapper.prop('gap')).toBe('big');
+            expect(wrapper.prop('orientation')).toBe('horizontal');
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toHaveLength(1);
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content).toHaveLength(1);
+            expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('orientation')).toBe('vertical');
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions).toHaveLength(1);
+        });
+
+        it('should forward vAlign & hAlign', () => {
+            const wrapper = shallow(
+                <GenericBlock figure="figure" actions="actions" vAlign="left" hAlign="bottom">
+                    Content
+                </GenericBlock>,
+            );
+
+            expect(wrapper.prop('vAlign')).toBe('left');
+            expect(wrapper.prop('hAlign')).toBe('bottom');
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toHaveLength(1);
+            expect(figure.prop('vAlign')).toBe('left');
+            expect(figure.prop('hAlign')).toBe('bottom');
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content).toHaveLength(1);
+            expect(content.prop('vAlign')).toBe('left');
+            expect(content.prop('hAlign')).toBe('bottom');
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions).toHaveLength(1);
+            expect(actions.prop('vAlign')).toBe('left');
+            expect(actions.prop('hAlign')).toBe('bottom');
+        });
+
+        it('should combine figure props', () => {
+            const wrapper = shallow(
+                <GenericBlock figure="Figure 1" figureProps={{ className: 'figure1', vAlign: 'left' }}>
+                    <GenericBlock.Figure className="figure2" fillSpace>
+                        Figure 2
+                    </GenericBlock.Figure>
+                </GenericBlock>,
+            );
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toHaveClassName('figure1');
+            expect(figure).toHaveClassName('figure2');
+            expect(figure.prop('fillSpace')).toBe(true);
+            expect(figure.prop('vAlign')).toBe('left');
+            expect(figure).toHaveText('Figure 1Figure 2');
+
+            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
+            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
+        });
+
+        it('should combine content props', () => {
+            const wrapper = shallow(
+                <GenericBlock contentProps={{ className: 'content1', vAlign: 'left' }}>
+                    Content 1
+                    <GenericBlock.Content className="content2" fillSpace>
+                        Content 2
+                    </GenericBlock.Content>
+                </GenericBlock>,
+            );
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content).toHaveClassName('content1');
+            expect(content).toHaveClassName('content2');
+            expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('vAlign')).toBe('left');
+            expect(content).toHaveText('Content 2Content 1');
+
+            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
+            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
+        });
+
+        it('should combine actions props', () => {
+            const wrapper = shallow(
+                <GenericBlock actions="Actions 1" actionsProps={{ className: 'actions1', vAlign: 'left' }}>
+                    <GenericBlock.Actions className="actions2" fillSpace>
+                        Actions 2
+                    </GenericBlock.Actions>
+                </GenericBlock>,
+            );
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions).toHaveClassName('actions1');
+            expect(actions).toHaveClassName('actions2');
+            expect(actions.prop('fillSpace')).toBe(true);
+            expect(actions.prop('vAlign')).toBe('left');
+            expect(actions).toHaveText('Actions 1Actions 2');
+
+            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
+            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
+        });
+
+        it('should forward refs', () => {
+            const rootRef = createRef<HTMLDivElement>();
+            const figureRef = createRef<HTMLDivElement>();
+            const contentRef = createRef<HTMLDivElement>();
+            const actionsRef = createRef<HTMLDivElement>();
+            shallow(
+                <GenericBlock ref={rootRef}>
+                    <GenericBlock.Figure ref={figureRef} />
+                    <GenericBlock.Content ref={contentRef} />
+                    <GenericBlock.Actions ref={actionsRef} />
+                </GenericBlock>,
+            );
+            expect(rootRef.current).toBeDefined();
+            expect(figureRef.current).toBeDefined();
+            expect(contentRef.current).toBeDefined();
+            expect(actionsRef.current).toBeDefined();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/generic-block/GenericBlock.tsx

@@ -0,0 +1,222 @@
+import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
+import { Comp, isComponentType } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
+import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';
+
+export interface GenericBlockProps extends FlexBoxProps {
+    /**
+     * Component to use as visual element.
+     */
+    figure?: ReactNode;
+    /**
+     * Actions to set after the main content.
+     */
+    actions?: ReactNode;
+    /**
+     * Main content to display or sections components
+     * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})
+     */
+    children: ReactNode;
+    /**
+     * Orientation of the 3 sections
+     */
+    orientation?: FlexBoxProps['orientation'];
+    /**
+     * Horizontal alignment.
+     */
+    hAlign?: FlexBoxProps['hAlign'];
+    /**
+     * Vertical alignment.
+     */
+    vAlign?: FlexBoxProps['vAlign'];
+    /**
+     * The props to forward to the content.
+     * By default, the content will have the same alignment as wrapper.
+     */
+    contentProps?: Omit<FlexBoxProps, 'children'>;
+    /**
+     * props to forward to the actions element.
+     */
+    actionsProps?: Omit<FlexBoxProps, 'children'>;
+    /**
+     * props to forward to the figure element.
+     */
+    figureProps?: Omit<FlexBoxProps, 'children'>;
+    /**
+     * Gap space between sections.
+     */
+    gap?: GenericBlockGapSize;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'GenericBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<GenericBlockProps> = {
+    gap: Size.big,
+    orientation: Orientation.horizontal,
+};
+
+type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
+
+interface GenericBlockSectionProps extends FlexBoxProps {
+    /**
+     * Gap space between items.
+     */
+    gap?: GenericBlockGapSize;
+}
+
+interface GenericBlock extends BaseGenericBlock {
+    /**
+     * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject
+     * the "figure" section of the block (instead of using `figure` and `figureProps` props).
+     */
+    Figure: Comp<GenericBlockSectionProps>;
+    /**
+     * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject
+     * the "content" section of the block (instead of using `content` and `contentProps` props).
+     */
+    Content: Comp<GenericBlockSectionProps>;
+    /**
+     * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject
+     * the "actions" section of the block (instead of using `actions` and `actionsProps` props).
+     */
+    Actions: Comp<GenericBlockSectionProps>;
+}
+
+const Figure = noop.bind({}) as Comp<FlexBoxProps>;
+const isFigure = isComponentType(Figure);
+
+const Content = noop.bind({}) as Comp<FlexBoxProps>;
+const isContent = isComponentType(Content);
+
+const Actions = noop.bind({}) as Comp<FlexBoxProps>;
+const isActions = isComponentType(Actions);
+
+/**
+ * The GenericBlock is a layout component made of 3 sections that can be
+ * displayed either horizontally of vertically with the same gap between each section.
+ *
+ * The sections are:
+ * - `Figure` => A visual element to display before the main content.
+ * - `Content` => The main content displayed
+ * - `Actions` => One or more actions to set after the element.
+ *
+ * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
+ */
+const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
+    const {
+        className,
+        figure,
+        figureProps,
+        children,
+        actions,
+        actionsProps,
+        gap,
+        orientation,
+        contentProps,
+        ...forwardedProps
+    } = props;
+
+    const sections = React.useMemo(() => {
+        // Split children by section type
+        const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(
+            Children.toArray(children),
+            [isFigure, isContent, isActions],
+        );
+        return {
+            figureChild,
+            figureChildProps: (figureChild as ReactElement)?.props,
+            contentChild,
+            contentChildProps: (contentChild as ReactElement)?.props,
+            actionsChild,
+            actionsChildProps: (actionsChild as ReactElement)?.props,
+            otherChildren: otherChildren.filter((child) => !isEmpty(child)),
+        };
+    }, [children]);
+
+    return (
+        <FlexBox
+            ref={ref}
+            className={classNames(className, CLASSNAME)}
+            gap={gap}
+            orientation={orientation}
+            {...forwardedProps}
+        >
+            {(figure || sections.figureChildProps?.children) && (
+                <FlexBox
+                    ref={(sections.figureChild as any)?.ref}
+                    vAlign={forwardedProps.vAlign}
+                    hAlign={forwardedProps.hAlign}
+                    {...figureProps}
+                    {...sections.figureChildProps}
+                    className={classNames(
+                        figureProps?.className,
+                        sections.figureChildProps?.className,
+                        `${CLASSNAME}__figure`,
+                    )}
+                >
+                    {figure}
+                    {sections.figureChildProps?.children}
+                </FlexBox>
+            )}
+
+            {(sections.contentChildProps?.children || sections.otherChildren.length > 0) && (
+                <FlexBox
+                    ref={(sections.contentChild as any)?.ref}
+                    orientation={Orientation.vertical}
+                    fillSpace
+                    vAlign={forwardedProps.vAlign}
+                    hAlign={forwardedProps.hAlign}
+                    {...contentProps}
+                    {...sections.contentChildProps}
+                    className={classNames(
+                        contentProps?.className,
+                        sections.contentChildProps?.className,
+                        `${CLASSNAME}__content`,
+                    )}
+                >
+                    {sections.contentChildProps?.children}
+                    {sections.otherChildren}
+                </FlexBox>
+            )}
+
+            {(actions || sections.actionsChildProps?.children) && (
+                <FlexBox
+                    ref={(sections.actionsChild as any)?.ref}
+                    vAlign={forwardedProps.vAlign}
+                    hAlign={forwardedProps.hAlign}
+                    {...actionsProps}
+                    {...sections.actionsChildProps}
+                    className={classNames(
+                        actionsProps?.className,
+                        sections.actionsChildProps?.className,
+                        `${CLASSNAME}__actions`,
+                    )}
+                >
+                    {actions}
+                    {sections.actionsChildProps?.children}
+                </FlexBox>
+            )}
+        </FlexBox>
+    );
+});
+BaseGenericBlock.displayName = COMPONENT_NAME;
+BaseGenericBlock.className = CLASSNAME;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS;
+
+export const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });

package/dist/src/components/generic-block/constants.ts

@@ -0,0 +1,9 @@
+import pick from 'lodash/pick';
+import { Size } from '@lumx/react';
+import { ValueOf } from '@lumx/react/utils/type';
+
+/**
+ * Accepted gap sizes for the generic block.
+ */
+export const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
+export type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;

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

@@ -0,0 +1,2 @@
+export * from './GenericBlock';
+export { GenericBlockGapSize } from './constants';

package/dist/src/components/grid/Grid.tsx

@@ -0,0 +1,73 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Alignment, Orientation, Size } from '@lumx/react';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface GridProps extends GenericProps {
+    /** Orientation. */
+    orientation?: Orientation;
+    /** Whether the children are wrapped or not. */
+    wrap?: string;
+    /** Vertical alignment. */
+    vAlign?: Alignment;
+    /** Horizontal alignment. */
+    hAlign?: Alignment;
+    /** Gutter size. */
+    gutter?: GridGutterSize;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Grid';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<GridProps> = {
+    orientation: Orientation.horizontal,
+    wrap: 'nowrap',
+};
+
+/**
+ * Grid component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Grid: Comp<GridProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { children, className, gutter, hAlign, orientation, vAlign, wrap, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                `${CLASSNAME}-container`,
+                { [`${CLASSNAME}--h-align-${hAlign}`]: hAlign },
+                { [`${CLASSNAME}--v-align-${vAlign}`]: vAlign },
+                handleBasicClasses({ prefix: CLASSNAME, orientation, wrap, gutter }),
+            )}
+        >
+            {children}
+        </div>
+    );
+});
+Grid.displayName = COMPONENT_NAME;
+Grid.className = CLASSNAME;
+Grid.defaultProps = DEFAULT_PROPS;

package/dist/src/components/grid/GridItem.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Alignment } from '@lumx/react';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+
+/**
+ * Defines the props of the component.
+ */
+export interface GridItemProps extends GenericProps {
+    /** Alignment. */
+    align?: Alignment;
+    /** Order. */
+    order?: Columns;
+    /** Width. */
+    width?: Columns;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'GridItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * GridItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const GridItem: Comp<GridItemProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { children, className, width, align, order, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, width, order, align }))}
+        >
+            {children}
+        </div>
+    );
+});
+GridItem.displayName = COMPONENT_NAME;
+GridItem.className = CLASSNAME;

package/dist/src/components/grid/index.ts

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './GridItem';

package/dist/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/dist/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',
+    });
+});