@lumx/react 3.21.1-alpha.0 → 3.21.2-alpha.0

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

@@ -1,83 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import isInteger from 'lodash/isInteger';
-import classNames from 'classnames';
-
-import { Size } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-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 = forwardRef<GridColumnProps>((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, 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

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

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

@@ -1,70 +0,0 @@
-import React from 'react';
-import { headingElementArgType, HEADING_ELEMENTS } from '@lumx/react/stories/controls/element';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { ALL_TYPOGRAPHY } from '@lumx/react/stories/controls/typography';
-import { Heading, HeadingLevelProvider } from '.';
-import TextStories from '../text/Text.stories';
-
-export default {
-    title: 'LumX components/heading/Heading',
-    component: Heading,
-    args: Heading.defaultProps,
-    argTypes: {
-        ...TextStories.argTypes,
-        as: headingElementArgType,
-        children: { control: 'text' },
-    },
-};
-
-/**
- * Default heading with text
- */
-export const Default = {
-    args: { children: 'Some heading text' },
-};
-
-/**
- * All supported heading elements
- */
-export const AllLevels = {
-    ...Default,
-    argTypes: { as: { control: false } },
-    decorators: [withCombinations({ combinations: { rows: { key: 'as', options: HEADING_ELEMENTS } } })],
-};
-
-/**
- * All typography
- */
-export const AllTypography = {
-    ...Default,
-    argTypes: { typography: { control: false } },
-    decorators: [withCombinations({ combinations: { rows: { key: 'typography', options: ALL_TYPOGRAPHY } } })],
-};
-
-/**
- * Nest HeadingLevelProvider to increment heading levels
- */
-export const NestedHeadingLevelProvider = () => (
-    <>
-        {/* 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>
-    </>
-);

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

@@ -1,84 +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);
-            expect(heading).toHaveClass('lumx-typography-display1');
-        });
-
-        it('should render with as with the correct default typography', () => {
-            setup({ children: 'Some text', as: 'h2' });
-            const heading = screen.getByRole('heading', { level: 2, name: 'Some text' });
-            expect(heading).toBeInTheDocument();
-            expect(heading).toHaveClass(CLASSNAME);
-            expect(heading).toHaveClass('lumx-typography-headline');
-        });
-
-        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/src/components/heading/Heading.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { HeadingElement } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-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;
-    /**
-     * Children
-     */
-    children?: React.ReactNode;
-}
-
-/**
- * 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 = forwardRef<HeadingProps>((props, ref) => {
-    const { children, as, className, ...forwardedProps } = props;
-    const { headingElement } = useHeadingLevel();
-
-    const computedHeadingElement = as || headingElement;
-    return (
-        <Text
-            ref={ref}
-            className={classNames(className, CLASSNAME)}
-            as={computedHeadingElement}
-            typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]}
-            {...forwardedProps}
-        >
-            {children}
-        </Text>
-    );
-});
-
-Heading.displayName = COMPONENT_NAME;
-Heading.className = CLASSNAME;
-Heading.defaultProps = DEFAULT_PROPS;

package/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/src/components/heading/constants.ts

@@ -1,16 +0,0 @@
-import { Typography } from '@lumx/core/js/constants';
-
-/** 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/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/src/components/heading/index.ts

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

package/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/src/components/icon/Icon.stories.tsx

@@ -1,73 +0,0 @@
-import { mdiEmail } from '@lumx/icons';
-import { ColorPalette, ColorVariant, GridColumn, Icon, IconSizes, Size } from '@lumx/react';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-
-const iconSizes: Array<IconSizes> = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
-
-export default {
-    title: 'LumX components/icon/Icon',
-    component: Icon,
-    args: Icon.defaultProps,
-    argTypes: {
-        icon: iconArgType,
-        hasShape: { control: 'boolean' },
-        color: colorArgType,
-        colorVariant: colorVariantArgType,
-    },
-};
-
-/**
- * All combinations of size and shape
- */
-export const SizeAndShape = {
-    args: {
-        icon: mdiEmail,
-    },
-    argTypes: {
-        hasShape: { control: false },
-        size: { control: false },
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                cols: { key: 'size', options: withUndefined(iconSizes) },
-                rows: {
-                    Default: {},
-                    'Has shape': { hasShape: true },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * All combinations of size and shape
- */
-export const AllColors = {
-    args: {
-        size: Size.m,
-        icon: mdiEmail,
-    },
-    argTypes: {
-        hasShape: { control: false },
-        color: { control: false },
-        colorVariant: { control: false },
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: { key: 'color', options: withUndefined(ColorPalette) },
-                cols: { key: 'colorVariant', options: withUndefined(ColorVariant) },
-                sections: {
-                    Default: {},
-                    'Has shape': { hasShape: true },
-                },
-            },
-        }),
-        withWrapper({ maxColumns: 2, itemMinWidth: 500 }, GridColumn),
-    ],
-};

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

@@ -1,127 +0,0 @@
-import React from 'react';
-
-import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-
-import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-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 = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: IconProps = {
-        icon: 'mdiPlus',
-        ...propsOverride,
-    };
-    render(<Icon {...props} />, { wrapper });
-    const i = getByClassName(document.body, CLASSNAME);
-    const svg = getByTagName(i, 'svg');
-    const path = getByTagName(svg, 'path');
-
-    return { i, svg, path, props };
-};
-
-describe(`<${Icon.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { i, svg, path, props } = setup();
-
-            expect(i).toBeInTheDocument();
-            expect(i).toHaveClass(CLASSNAME);
-            expect(i?.className).toMatchInlineSnapshot('"lumx-icon lumx-icon--no-shape lumx-icon--path"');
-
-            expect(svg).toBeInTheDocument();
-            expect(svg).toHaveAttribute('aria-hidden', 'true');
-            expect(svg).not.toHaveAttribute('role');
-
-            expect(path).toBeInTheDocument();
-            expect(path).toHaveAttribute('d', props.icon);
-        });
-
-        it('should adapt svg with alternate text', () => {
-            const { svg, props } = setup({ alt: 'Alternate text' });
-            expect(svg).toHaveAttribute('aria-label', props.alt);
-            expect(svg).not.toHaveAttribute('aria-hidden');
-            expect(svg).toHaveAttribute('role');
-        });
-
-        describe('size', () => {
-            it('should render size', () => {
-                const { i } = setup({ size: Size.s });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xxs size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xxs });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xs size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xs });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xxl size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xxl });
-                expect(i).toHaveClass('lumx-icon--size-xl');
-            });
-
-            it('should add default size with hasShape', () => {
-                const { i } = setup({ hasShape: true });
-                expect(i).toHaveClass('lumx-icon--size-m');
-            });
-        });
-
-        describe('color', () => {
-            it('should render color and color variant', () => {
-                const { i } = setup({
-                    color: ColorPalette.primary,
-                    colorVariant: ColorVariant.D1,
-                });
-                expect(i).toHaveClass('lumx-icon--color-primary lumx-icon--color-variant-D1');
-            });
-
-            it('should improve yellow icon color contrast with alert circle icon', () => {
-                const { i } = setup({
-                    color: ColorPalette.yellow,
-                    icon: mdiAlertCircle,
-                });
-                expect(i).toHaveClass('lumx-icon--color-yellow lumx-icon--has-dark-layer');
-            });
-
-            it('should set a default color on dark theme', () => {
-                const { i } = setup({ theme: Theme.dark });
-                expect(i).toHaveClass('lumx-icon--color-light lumx-icon--theme-dark');
-            });
-
-            it('should set a default color on has shape', () => {
-                const { i } = setup({ hasShape: true });
-                expect(i).toHaveClass('lumx-icon--color-dark lumx-icon--has-shape');
-            });
-
-            it('should set a default color variant on has shape & dark color', () => {
-                const { i } = setup({ color: ColorPalette.dark, hasShape: true });
-                expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
-            });
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'i',
-        forwardAttributes: 'i',
-        applyTheme: {
-            affects: [{ element: 'i', classModifier: 'color', inverted: true }],
-            viaProp: true,
-            viaContext: true,
-        },
-    });
-});