@lumx/react 3.0.7 → 3.1.0

package/dist/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/dist/src/components/grid-column/index.ts

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

package/dist/src/components/heading/Heading.stories.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { imageKnob } from '@lumx/react/stories/knobs/image';
+import { Orientation, Size, Typography } from '..';
+import { Heading, HeadingLevelProvider } from '.';
+import { FlexBox } from '../flex-box';
+import { GenericBlock } from '../generic-block';
+import { Thumbnail } from '../thumbnail';
+
+export default { title: 'LumX components/heading/Heading' };
+
+export const Default = () => {
+    return (
+        <div>
+            {/* This will render a h1 */}
+            <Heading>First level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h2 */}
+                <Heading>Second Level</Heading>
+                <HeadingLevelProvider>
+                    {/* This will render a h3 */}
+                    <Heading>Third Level</Heading>
+                    {/* This will also render a h3 */}
+                    <Heading>Other Third Level</Heading>
+                    <HeadingLevelProvider>
+                        {/* This will render a h4 */}
+                        <Heading>Fourth Level</Heading>
+                        <HeadingLevelProvider>
+                            {/* This will render a h5 */}
+                            <Heading>Fifth Level</Heading>
+                        </HeadingLevelProvider>
+                    </HeadingLevelProvider>
+                </HeadingLevelProvider>
+            </HeadingLevelProvider>
+        </div>
+    );
+};
+
+export const LevelOverride = () => {
+    return (
+        <div>
+            {/* This will render a h1 */}
+            <Heading>First level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h2 */}
+                <Heading>Second Level</Heading>
+                <HeadingLevelProvider level={2}>
+                    {/* This will also render a h2 */}
+                    <Heading>Lorem ipsum</Heading>
+                    <Heading>Dolor sit amet</Heading>
+                    <Heading>Reprehenderit et aute</Heading>
+                </HeadingLevelProvider>
+            </HeadingLevelProvider>
+        </div>
+    );
+};
+
+export const HeadingManualOverride = () => {
+    return (
+        <div>
+            {/* This will render a h1 */}
+            <Heading>First level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h2 */}
+                <Heading as="h2">Forced second Level</Heading>
+                <Heading as="h3">Forced third Level</Heading>
+                <Heading as="h4">Forced fourth Level</Heading>
+            </HeadingLevelProvider>
+        </div>
+    );
+};
+
+const ListWithSubElements = () => {
+    return (
+        <HeadingLevelProvider>
+            <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
+                    <Heading typography={Typography.subtitle2}>First item</Heading>
+                </GenericBlock>
+                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
+                    <Heading typography={Typography.subtitle2}>Second item</Heading>
+                </GenericBlock>
+                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
+                    <Heading typography={Typography.subtitle2}>Third item</Heading>
+                </GenericBlock>
+            </FlexBox>
+        </HeadingLevelProvider>
+    );
+};
+
+export const TypographyOverride = () => {
+    return (
+        <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+            <Heading>My lists</Heading>
+
+            <FlexBox orientation={Orientation.horizontal} gap={Size.huge}>
+                <ListWithSubElements />
+
+                <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+                    <HeadingLevelProvider>
+                        <Heading>Sub list</Heading>
+
+                        <ListWithSubElements />
+                    </HeadingLevelProvider>
+                </FlexBox>
+            </FlexBox>
+        </FlexBox>
+    );
+};

package/dist/src/components/heading/Heading.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { Heading, HeadingProps } from './Heading';
+import { HeadingLevelProvider } from './HeadingLevelProvider';
+
+const CLASSNAME = Heading.className as string;
+
+const setup = (props: Partial<HeadingProps> = {}) => {
+    const { container } = render(<Heading {...props} />);
+    return { props, container, element: getByClassName(container, CLASSNAME) };
+};
+
+describe(`<${Heading.displayName}>`, () => {
+    describe('Render', () => {
+        it('should render a Text component with h1 by default', () => {
+            setup({ children: 'Some text' });
+            const heading = screen.getByRole('heading', { level: 1, name: 'Some text' });
+            expect(heading).toBeInTheDocument();
+            expect(heading).toHaveClass(CLASSNAME);
+        });
+
+        it('should render with as', () => {
+            setup({ children: 'Some text', as: 'h2' });
+            const heading = screen.getByRole('heading', { level: 2, name: 'Some text' });
+            expect(heading).toBeInTheDocument();
+            expect(heading).toHaveClass(CLASSNAME);
+        });
+
+        it('should correctly render levels nested in HeadingLevel', () => {
+            render(
+                <>
+                    <Heading>Level 1</Heading>
+                    <HeadingLevelProvider>
+                        <Heading>Level 2</Heading>
+                        <HeadingLevelProvider>
+                            <Heading>Level 3</Heading>
+                            <HeadingLevelProvider>
+                                <Heading>Level 4</Heading>
+                                <HeadingLevelProvider>
+                                    <Heading>Level 5 - 1</Heading>
+                                    <Heading>Level 5 - 2</Heading>
+                                    <HeadingLevelProvider>
+                                        <Heading>Level 6</Heading>
+                                        <HeadingLevelProvider>
+                                            <Heading>Level 7</Heading>
+                                        </HeadingLevelProvider>
+                                    </HeadingLevelProvider>
+                                </HeadingLevelProvider>
+                            </HeadingLevelProvider>
+                        </HeadingLevelProvider>
+                    </HeadingLevelProvider>
+                </>,
+            );
+
+            expect(screen.getByRole('heading', { level: 1, name: 'Level 1' })).toBeInTheDocument();
+            expect(screen.getByRole('heading', { level: 2, name: 'Level 2' })).toBeInTheDocument();
+            expect(screen.getByRole('heading', { level: 3, name: 'Level 3' })).toBeInTheDocument();
+            expect(screen.getByRole('heading', { level: 4, name: 'Level 4' })).toBeInTheDocument();
+
+            const h5 = screen.getAllByRole('heading', { level: 5 });
+            expect(h5).toHaveLength(2);
+            expect(h5[0]).toHaveTextContent('Level 5 - 1');
+            expect(h5[1]).toHaveTextContent('Level 5 - 2');
+            // There should be 2 h6 because it is the maximum value;
+            const h6 = screen.getAllByRole('heading', { level: 6 });
+            expect(h6).toHaveLength(2);
+            expect(h6[0]).toHaveTextContent('Level 6');
+            expect(h6[1]).toHaveTextContent('Level 7');
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+    });
+});

package/dist/src/components/heading/Heading.tsx

@@ -0,0 +1,63 @@
+import { Comp, HeadingElement } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+import { Text, TextProps } from '../text';
+import { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './constants';
+import { useHeadingLevel } from './useHeadingLevel';
+
+/**
+ * Defines the props of the component.
+ */
+export interface HeadingProps extends Partial<TextProps> {
+    /**
+     * Display a specific heading level instead of the one provided by parent context provider.
+     */
+    as?: HeadingElement;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Heading';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {} as const;
+
+/**
+ * Renders a heading component.
+ * Extends the `Text` Component with the heading level automatically computed based on
+ * the current level provided by the context.
+ */
+export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
+    const { children, as, className, ...forwardedProps } = props;
+    const { headingElement } = useHeadingLevel();
+
+    return (
+        <Text
+            ref={ref}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                }),
+            )}
+            as={as || headingElement}
+            typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[headingElement]}
+            {...forwardedProps}
+        >
+            {children}
+        </Text>
+    );
+});
+
+Heading.displayName = COMPONENT_NAME;
+Heading.className = CLASSNAME;
+Heading.defaultProps = DEFAULT_PROPS;

package/dist/src/components/heading/HeadingLevelProvider.tsx

@@ -0,0 +1,30 @@
+import { HeadingElement } from '@lumx/react/utils/type';
+import React, { ReactNode } from 'react';
+import { MAX_HEADING_LEVEL } from './constants';
+import { HeadingLevelContext } from './context';
+import { useHeadingLevel } from './useHeadingLevel';
+
+export interface HeadingLevelProviderProps {
+    /** The heading level to start at. If left undefined, the parent context will be used, if any. */
+    level?: number;
+    /** The children to display */
+    children: ReactNode;
+}
+
+/**
+ * Provide a new heading level context.
+ */
+export const HeadingLevelProvider: React.FC<HeadingLevelProviderProps> = ({ children, level }) => {
+    const { level: contextLevel } = useHeadingLevel();
+
+    const incrementedLevel = level || contextLevel + 1;
+    /** Don't allow a level beyond the maximum level. */
+    const nextLevel = incrementedLevel > MAX_HEADING_LEVEL ? MAX_HEADING_LEVEL : incrementedLevel;
+    const headingElement = `h${nextLevel}` as HeadingElement;
+
+    return (
+        <HeadingLevelContext.Provider value={{ level: nextLevel, headingElement }}>
+            {children}
+        </HeadingLevelContext.Provider>
+    );
+};

package/dist/src/components/heading/constants.ts

@@ -0,0 +1,16 @@
+import { Typography } from '..';
+
+/** The maximum authorized heading level. */
+export const MAX_HEADING_LEVEL = 6;
+
+/**
+ * Typography to use by default depending on the heading level.
+ */
+export const DEFAULT_TYPOGRAPHY_BY_LEVEL = {
+    h1: Typography.display1,
+    h2: Typography.headline,
+    h3: Typography.title,
+    h4: Typography.subtitle2,
+    h5: Typography.subtitle1,
+    h6: Typography.body2,
+};

package/dist/src/components/heading/context.tsx

@@ -0,0 +1,13 @@
+import { HeadingElement } from '@lumx/react/utils/type';
+import { createContext } from 'react';
+
+interface HeadingLevelContext {
+    /** The current level */
+    level: number;
+    /** The heading element matching the current level */
+    headingElement: HeadingElement;
+}
+
+const defaultContext: HeadingLevelContext = { level: 1, headingElement: 'h1' };
+
+export const HeadingLevelContext = createContext<HeadingLevelContext>(defaultContext);

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

@@ -0,0 +1,3 @@
+export * from './Heading';
+export * from './HeadingLevelProvider';
+export * from './useHeadingLevel';

package/dist/src/components/heading/useHeadingLevel.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HeadingLevelContext } from './context';
+
+export const useHeadingLevel = () => {
+    const { level = 1, headingElement = 'h1' } = React.useContext(HeadingLevelContext);
+
+    return { level, headingElement };
+};

package/dist/src/components/icon/Icon.stories.tsx

@@ -0,0 +1,76 @@
+import React, { Fragment } from 'react';
+
+import { mdiEmail } from '@lumx/icons';
+import { ColorPalette, ColorVariant, FlexBox, Icon, IconSizes, Size } from '@lumx/react';
+import { Orientation } from '..';
+
+export default { title: 'LumX components/icon/Icon', parameters: { hasGreyBackground: true } };
+
+const iconSizes: Array<IconSizes | undefined> = [
+    undefined,
+    Size.xxs,
+    Size.xs,
+    Size.s,
+    Size.m,
+    Size.l,
+    Size.xl,
+    Size.xxl,
+];
+
+const TemplateSizeVariants = ({ hasShape, theme }: any) => (
+    <FlexBox orientation={Orientation.horizontal}>
+        {iconSizes.map((size) => (
+            <FlexBox fillSpace key={`${size}`}>
+                <h2>Size: {size || 'undefined'}</h2>
+                <Icon icon={mdiEmail} size={size} hasShape={hasShape} theme={theme} />
+            </FlexBox>
+        ))}
+    </FlexBox>
+);
+
+export const AllSize = ({ theme }: any) => TemplateSizeVariants({ theme });
+
+export const AllSizeWithShape = ({ theme }: any) => TemplateSizeVariants({ theme, hasShape: true });
+
+const TemplateColorVariants = ({ hasShape, theme }: any) => {
+    const withUndefined = (a: any) => [undefined].concat(Object.values(a));
+    return (
+        <FlexBox orientation={Orientation.horizontal}>
+            {withUndefined(ColorPalette).map((color) => (
+                <FlexBox fillSpace key={`${color}`}>
+                    <small key={`${color}`}>Color: {color || 'undefined'}</small>
+                    <br />
+                    {withUndefined(Object.values(ColorVariant).reverse()).map((colorVariant) => (
+                        <Fragment key={`${colorVariant}`}>
+                            {!colorVariant && (
+                                <>
+                                    <small>No theme</small>
+                                    <Icon
+                                        icon={mdiEmail}
+                                        color={color}
+                                        colorVariant={colorVariant}
+                                        size="m"
+                                        hasShape={hasShape}
+                                    />
+                                </>
+                            )}
+                            <small>Variant: {colorVariant || 'undefined'}</small>
+                            <Icon
+                                icon={mdiEmail}
+                                color={color}
+                                colorVariant={colorVariant}
+                                size="m"
+                                theme={theme}
+                                hasShape={hasShape}
+                            />
+                        </Fragment>
+                    ))}
+                </FlexBox>
+            ))}
+        </FlexBox>
+    );
+};
+
+export const AllColors = ({ theme }: any) => TemplateColorVariants({ theme });
+
+export const AllColorsWithShape = ({ theme }: any) => TemplateColorVariants({ theme, hasShape: true });

package/dist/src/components/icon/Icon.test.tsx

@@ -0,0 +1,102 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { build, fake, oneOf } from 'test-data-bot';
+
+import { mdiCheck, mdiPlus } from '@lumx/icons';
+import { ColorPalette, ColorVariant, Size } from '@lumx/react';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { Icon, IconProps } from './Icon';
+
+const CLASSNAME = Icon.className as string;
+
+type SetupProps = Partial<IconProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+    const props: IconProps = {
+        icon: 'mdiPlus',
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<Icon {...props} />);
+
+    return {
+        i: wrapper.find('i'),
+        path: wrapper.find('path'),
+        svg: wrapper.find('svg'),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${Icon.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render correctly', () => {
+            const { i, path, svg, wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(i).toExist();
+            expect(i).toHaveClassName(CLASSNAME);
+
+            expect(svg).toExist();
+            expect(path).toExist();
+        });
+
+        it('should render color & color variant', () => {
+            const { wrapper } = setup({ color: ColorPalette.primary, colorVariant: ColorVariant.D1 });
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it("shouldn't use any default props", () => {
+            const { i } = setup();
+
+            ['color', 'size'].forEach((prop: string) => {
+                expect(i).not.toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: prop, value: '' }));
+            });
+        });
+
+        it('should use the given props', () => {
+            const modifiedPropsBuilder: () => SetupProps = build('props').fields({
+                color: fake((fakeData: any) => fakeData.commerce.color()),
+                icon: oneOf(mdiPlus, mdiCheck),
+                size: oneOf(...Object.values(Size)),
+            });
+
+            const modifiedProps: SetupProps = modifiedPropsBuilder();
+
+            const { i, path } = setup({ ...modifiedProps });
+
+            Object.keys(modifiedProps).forEach((prop: string) => {
+                if (prop === 'icon') {
+                    expect(path).toHaveProp('d', modifiedProps[prop]);
+                } else {
+                    expect(i).toHaveClassName(
+                        getBasicClass({ prefix: CLASSNAME, type: prop, value: modifiedProps[prop] }),
+                    );
+                }
+            });
+        });
+    });
+
+    // 3. Test events.
+    // N/A
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    // N/A
+
+    // 5. Test state.
+    // N/A
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'i', prop: 'i' }, { className: CLASSNAME });
+});