@lumx/react 3.20.1-alpha.2 → 3.20.1-alpha.20

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,47 +0,0 @@
-import DefaultStory, { SizeAndShape as DefaultSizeAndShape } from '@lumx/core/js/components/Icon/Stories';
-import { mdiEmail } from '@lumx/icons';
-import { ColorPalette, ColorVariant, GridColumn, Icon, Size } from '@lumx/react';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-
-export default {
-    title: 'LumX components/icon/Icon',
-    component: Icon,
-    ...DefaultStory,
-};
-
-/**
- * All combinations of size and shape
- */
-export const SizeAndShape = {
-    ...DefaultSizeAndShape,
-};
-
-/**
- * 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,44 +0,0 @@
-import React from '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 Tests from '@lumx/core/js/components/Icon/Tests';
-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}>`, () => {
-    Tests((props: IconProps, { wrapper }: any) => render(<Icon {...props} />, { wrapper }));
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'i',
-        forwardAttributes: 'i',
-        applyTheme: {
-            affects: [{ element: 'i', classModifier: 'color', inverted: true }],
-            viaProp: true,
-            viaContext: true,
-        },
-    });
-});

package/src/components/icon/Icon.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { Icon as UI, IconProps, IconSizes } from '@lumx/core/js/components/Icon';
-
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-
-export type { IconProps, IconSizes };
-/**
- * Icon component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
-    const defaultTheme = useTheme();
-
-    return <UI ref={ref} {...props} theme={props.theme || defaultTheme} />;
-});
-
-Icon.displayName = UI.displayName;
-Icon.className = UI.className;
-Icon.defaultProps = UI.defaultProps;

package/src/components/icon/index.ts

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

package/src/components/image-block/ImageBlock.stories.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-
-import {
-    Alignment,
-    AspectRatio,
-    Chip,
-    ChipGroup,
-    HorizontalAlignment,
-    IconButton,
-    ImageBlock,
-    ImageBlockCaptionPosition,
-    ImageBlockSize,
-    Size,
-} from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { imageArgType, PORTRAIT_IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
-import { mdiFileEdit } from '@lumx/icons';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { focusPoint } from '@lumx/react/stories/controls/focusPoint';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-
-export default {
-    title: 'LumX components/image-block/Image Block',
-    component: ImageBlock,
-    argTypes: {
-        size: getSelectArgType<ImageBlockSize>([Size.xl, Size.xxl]),
-        image: imageArgType,
-        captionPosition: getSelectArgType(ImageBlockCaptionPosition),
-        'thumbnailProps.aspectRatio': getSelectArgType(AspectRatio),
-        align: getSelectArgType<HorizontalAlignment>([Alignment.left, Alignment.center, Alignment.right]),
-        tags: { control: false },
-        actions: { control: false },
-    },
-    args: { ...ImageBlock.defaultProps, image: LANDSCAPE_IMAGES.landscape1 },
-    decorators: [withNestedProps()],
-};
-
-export const WithCaptionBelow = {
-    args: {
-        captionPosition: ImageBlockCaptionPosition.below,
-        size: Size.xxl,
-        title: 'Image block title',
-        description: 'Image block description',
-    },
-};
-
-export const WithCaptionOver = {
-    args: {
-        captionPosition: ImageBlockCaptionPosition.over,
-        size: Size.xxl,
-        title: 'Image block title',
-        description: 'Image block description',
-    },
-};
-
-export const WithAlign = {
-    args: {
-        ...WithCaptionBelow.args,
-        image: LANDSCAPE_IMAGES.landscape1s200,
-        size: undefined,
-        align: Alignment.center,
-    },
-};
-
-export const WithTags = {
-    args: {
-        size: Size.xxl,
-        tags: (
-            <ChipGroup align={Alignment.left}>
-                <Chip size={Size.s}>Tag 1</Chip>
-                <Chip size={Size.s}>Tag 2</Chip>
-            </ChipGroup>
-        ),
-    },
-};
-
-export const WithActions = {
-    args: {
-        size: Size.xxl,
-        actions: <IconButton label="Edit" icon={mdiFileEdit} />,
-    },
-};
-
-export const WithFocusPointHorizontal = {
-    args: {
-        size: Size.xxl,
-        'thumbnailProps.aspectRatio': AspectRatio.vertical,
-        'thumbnailProps.focusPoint.x': 1,
-        'thumbnailProps.focusPoint.y': 0,
-    },
-    argTypes: {
-        'thumbnailProps.focusPoint.x': focusPoint,
-        'thumbnailProps.focusPoint.y': focusPoint,
-    },
-};
-
-export const WithFocusPointVertical = {
-    args: {
-        size: Size.xxl,
-        image: PORTRAIT_IMAGES.portrait1,
-        'thumbnailProps.aspectRatio': AspectRatio.horizontal,
-        'thumbnailProps.focusPoint.x': 0,
-        'thumbnailProps.focusPoint.y': 1,
-    },
-    argTypes: {
-        'thumbnailProps.focusPoint.x': focusPoint,
-        'thumbnailProps.focusPoint.y': focusPoint,
-    },
-};
-export const FullFeatured = {
-    args: {
-        ...WithCaptionBelow.args,
-        ...WithTags.args,
-        ...WithActions.args,
-        ...WithFocusPointVertical.args,
-        ...WithAlign.args,
-    },
-    decorators: [withWrapper({ style: { width: 400, height: 300 } })],
-};