@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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