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

package/src/components/inline-list/InlineList.test.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, screen, within } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { InlineList, InlineListProps } from '.';
-
-const CLASSNAME = InlineList.className as string;
-
-const setup = (props: Partial<InlineListProps> = {}) => {
-    render(<InlineList {...props} />);
-    const inlineList = queryByClassName(document.body, CLASSNAME);
-    return { props, inlineList };
-};
-
-describe(`<${InlineList.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render default', () => {
-            const { inlineList } = setup({ children: ['Some text', 'Some other text'] });
-
-            expect(inlineList).toBeInTheDocument();
-
-            const list = screen.getByRole('list');
-            expect(list).toBeInTheDocument();
-
-            const listItems = within(list).queryAllByRole('listitem');
-            expect(listItems.length).toBe(2);
-            expect(listItems[0]).toHaveTextContent('Some text');
-            expect(listItems[1]).toHaveTextContent('Some other text');
-        });
-
-        it('should render with typography', () => {
-            const { inlineList } = setup({ typography: 'body2', children: 'Some text' });
-            expect(inlineList).toHaveClass('lumx-typography-body2');
-        });
-
-        it('should render with color', () => {
-            const { inlineList } = setup({ color: 'blue', children: 'Some text' });
-            expect(inlineList).toHaveClass('lumx-color-font-blue-N');
-        });
-
-        it('should render with color and variant', () => {
-            const { inlineList } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
-            expect(inlineList).toHaveClass('lumx-color-font-blue-D2');
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'inlineList',
-        forwardAttributes: 'inlineList',
-    });
-});

package/src/components/inline-list/InlineList.tsx

@@ -1,96 +0,0 @@
-import React, { Children, isValidElement } from 'react';
-
-import classNames from 'classnames';
-
-import { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface InlineListProps extends GenericProps {
-    /**
-     * Text color.
-     */
-    color?: ColorWithVariants;
-    /**
-     * Lightened or darkened variant of the selected color.
-     */
-    colorVariant?: ColorVariant;
-    /**
-     * Typography variant.
-     */
-    typography?: Typography;
-    /**
-     * Activate line wrap on overflow.
-     */
-    wrap?: boolean;
-    /**
-     * Children
-     */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'InlineList';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {} as const;
-
-/**
- * InlineList component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const InlineList = forwardRef<InlineListProps>((props, ref) => {
-    const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;
-    const typographyClassName = typography && getTypographyClassName(typography);
-    return (
-        // eslint-disable-next-line jsx-a11y/no-redundant-roles
-        <ul
-            {...forwardedProps}
-            ref={ref as any}
-            className={classNames(
-                className,
-                CLASSNAME,
-                wrap && `${CLASSNAME}--wrap`,
-                fontColorClass(color, colorVariant),
-                typographyClassName,
-            )}
-            // Lists with removed bullet style can lose their a11y list role on some browsers
-            role="list"
-        >
-            {Children.toArray(children).map((child, index) => {
-                const key = (isValidElement(child) && child.key) || index;
-                return (
-                    // We need to item is set as display: contents which removes the semantic.
-                    // eslint-disable-next-line jsx-a11y/no-redundant-roles
-                    <li key={key} role="listitem" className={`${CLASSNAME}__item`}>
-                        {index !== 0 && (
-                            <span className={`${CLASSNAME}__item-separator`} aria-hidden="true">
-                                {'\u00A0•\u00A0'}
-                            </span>
-                        )}
-                        {child}
-                    </li>
-                );
-            })}
-        </ul>
-    );
-});
-InlineList.displayName = COMPONENT_NAME;
-InlineList.className = CLASSNAME;
-InlineList.defaultProps = DEFAULT_PROPS;

package/src/components/inline-list/index.ts

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

package/src/components/input-helper/InputHelper.stories.tsx

@@ -1,35 +0,0 @@
-import { InputHelper, Kind } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-
-export default {
-    title: 'LumX components/input-helper/Input Helper',
-    component: InputHelper,
-    argTypes: {
-        kind: getSelectArgType(Kind),
-    },
-    args: {
-        ...InputHelper.defaultProps,
-        children: 'Some helper text',
-    },
-};
-
-/**
- * Default input helper
- */
-export const Default = {};
-
-/**
- * All `kind` variants
- */
-export const AllKinds = {
-    argTypes: { kind: { control: false } },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: { key: 'kind', options: withUndefined(Kind) },
-            },
-        }),
-    ],
-};

package/src/components/input-helper/InputHelper.test.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-
-import { Kind, Theme } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-import { INPUT_HELPER_CONFIGURATION } from '@lumx/react/components/input-helper/constants';
-import { InputHelper, InputHelperProps } from './InputHelper';
-
-const CLASSNAME = InputHelper.className as string;
-
-type SetupProps = Partial<InputHelperProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: any = { ...propsOverride };
-    render(<InputHelper {...props} />, { wrapper });
-    const helper = getByClassName(document.body, CLASSNAME);
-
-    return { helper, props };
-};
-
-describe(`<${InputHelper.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render text', () => {
-            const { props, helper } = setup({ children: 'helper text' });
-
-            expect(helper).toHaveTextContent(props.children);
-            expect(helper.className).toMatchInlineSnapshot('"lumx-input-helper lumx-input-helper--theme-light"');
-        });
-
-        it('should render dark theme', () => {
-            const { helper } = setup({ theme: Theme.dark });
-            expect(helper).toHaveClass('lumx-input-helper--theme-dark');
-        });
-
-        it.each(Object.values(Kind))('should render kind %s', (kind) => {
-            const { helper } = setup({ kind });
-            const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
-            if (color) expect(helper).toHaveClass(`${CLASSNAME}--color-${color}`);
-        });
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'helper',
-        forwardAttributes: 'helper',
-        applyTheme: {
-            affects: [{ element: 'helper' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/input-helper/InputHelper.tsx

@@ -1,65 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Kind, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { INPUT_HELPER_CONFIGURATION } from './constants';
-
-/**
- * Defines the props of the component.
- */
-export interface InputHelperProps extends GenericProps, HasTheme {
-    /** Helper content. */
-    children: string | ReactNode;
-    /** Helper variant. */
-    kind?: Kind;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'InputHelper';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<InputHelperProps> = {
-    kind: Kind.info,
-};
-
-/**
- * InputHelper component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const InputHelper = forwardRef<InputHelperProps, HTMLParagraphElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { children, className, kind = DEFAULT_PROPS.kind, theme = defaultTheme, ...forwardedProps } = props;
-    const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
-
-    return (
-        <p
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, theme }))}
-        >
-            {children}
-        </p>
-    );
-});
-
-InputHelper.displayName = COMPONENT_NAME;
-InputHelper.className = CLASSNAME;
-InputHelper.defaultProps = DEFAULT_PROPS;

package/src/components/input-helper/constants.ts

@@ -1,11 +0,0 @@
-export const INPUT_HELPER_CONFIGURATION: Record<string, { color: string }> = {
-    error: {
-        color: 'red',
-    },
-    success: {
-        color: 'green',
-    },
-    warning: {
-        color: 'yellow',
-    },
-};

package/src/components/input-helper/index.ts

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

package/src/components/input-label/InputLabel.stories.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { Typography } from '@lumx/react';
-
-import { InputLabel } from './InputLabel';
-
-export default {
-    title: 'LumX components/input-label/Input Label',
-    component: InputLabel,
-    args: {
-        ...InputLabel.defaultProps,
-        children: 'Label text',
-    },
-    argTypes: {
-        isRequired: { control: 'boolean' },
-    },
-    decorators: [
-        /**
-         * Associate label with an input
-         */
-        (Story: any, ctx: any) => (
-            <>
-                <input type="hidden" id="123" />
-                <Story args={{ ...ctx.args, htmlFor: '123' }} />
-            </>
-        ),
-    ],
-};
-
-/**
- * Default input label
- */
-export const Default = {};
-
-/**
- * Required input label
- */
-export const IsRequired = {
-    args: { isRequired: true },
-};
-
-/**
- * Default input label
- */
-export const WithCustomTypography = {
-    args: { typography: Typography.subtitle1 },
-};

package/src/components/input-label/InputLabel.test.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import { Theme, Typography } from '@lumx/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { getTypographyClassName } from '@lumx/core/js/utils/className';
-import { render } from '@testing-library/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { InputLabel, InputLabelProps } from './InputLabel';
-
-const CLASSNAME = InputLabel.className as string;
-
-type SetupProps = Partial<InputLabelProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: any = { htmlFor: 'id', ...propsOverride };
-    render(<InputLabel {...props} />, { wrapper });
-    const label = getByClassName(document.body, CLASSNAME);
-
-    return { label, props };
-};
-
-describe(`<${InputLabel.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render text', () => {
-            const { label, props } = setup({
-                children: 'Some label text',
-                htmlFor: '123',
-            });
-            expect(label).toHaveTextContent(props.children);
-            expect(label).toHaveAttribute('for', props.htmlFor);
-        });
-
-        it('should render dark theme & required', () => {
-            const { label } = setup({ children: 'The label', theme: Theme.dark, isRequired: true });
-            expect(label).toHaveClass(CLASSNAME);
-            expect(label).toHaveClass(`${CLASSNAME}--theme-dark`);
-            expect(label).toHaveClass(`${CLASSNAME}--is-required`);
-        });
-
-        it('should render typography', () => {
-            const { label } = setup({ children: 'The label', typography: Typography.body1 });
-            expect(label).toHaveClass(CLASSNAME);
-            expect(label).toHaveClass(getTypographyClassName(Typography.body1));
-        });
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'label',
-        forwardAttributes: 'label',
-        applyTheme: {
-            affects: [{ element: 'label' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/input-label/InputLabel.tsx

@@ -1,69 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Theme, Typography } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses, getTypographyClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-
-/**
- * Defines the props of the component.
- */
-export interface InputLabelProps extends GenericProps, HasTheme {
-    /** Typography variant. */
-    typography?: Typography;
-    /** Label content. */
-    children: string | ReactNode;
-    /** Native htmlFor property. */
-    htmlFor: string;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'InputLabel';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<InputLabelProps> = {};
-
-/**
- * InputLabel component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const InputLabel = forwardRef<InputLabelProps, HTMLLabelElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { children, className, htmlFor, isRequired, theme = defaultTheme, typography, ...forwardedProps } = props;
-    const typographyClass = typography && getTypographyClassName(typography);
-
-    return (
-        <label
-            ref={ref}
-            {...forwardedProps}
-            htmlFor={htmlFor}
-            className={classNames(
-                className,
-                handleBasicClasses({ prefix: CLASSNAME, isRequired, theme, hasCustomTypography: Boolean(typography) }),
-                typographyClass,
-            )}
-        >
-            {children}
-        </label>
-    );
-});
-InputLabel.displayName = COMPONENT_NAME;
-InputLabel.className = CLASSNAME;
-InputLabel.defaultProps = DEFAULT_PROPS;

package/src/components/input-label/index.ts

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

package/src/components/lightbox/Lightbox.stories.tsx

@@ -1,101 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks,react/display-name */
-import React from 'react';
-import { ImageBlock, Alignment, Lightbox, Button, Slideshow, SlideshowItem } from '@lumx/react';
-import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import { LANDSCAPE_IMAGES, LANDSCAPE_IMAGES_ALT } from '@lumx/react/stories/controls/image';
-
-export default {
-    title: 'LumX components/lightbox/Lightbox',
-    component: Lightbox,
-    args: Lightbox.defaultProps,
-    argTypes: {
-        children: { control: false },
-    },
-    render: (props: any) => {
-        const buttonRef = React.useRef<HTMLButtonElement>(null);
-        const [isOpen, close, open] = useBooleanState(true);
-        return (
-            <>
-                <Button ref={buttonRef} onClick={open}>
-                    Open lightbox
-                </Button>
-                <Lightbox {...props} parentElement={buttonRef} isOpen={isOpen} onClose={close} />
-            </>
-        );
-    },
-};
-
-/**
- * Base LightBox with image block
- */
-export const Image = {
-    args: {
-        'aria-label': 'Fullscreen image',
-        children: (
-            <ImageBlock
-                align={Alignment.center}
-                fillHeight
-                image={LANDSCAPE_IMAGES.landscape1}
-                alt={LANDSCAPE_IMAGES_ALT.landscape1}
-            />
-        ),
-    },
-};
-
-/**
- * LightBox with image block and close button
- */
-export const WithCloseButton = {
-    args: {
-        ...Image.args,
-        closeButtonProps: { label: 'Close' },
-    },
-};
-
-/**
- * Demo a LightBox containing an image slideshow
- */
-export const ImageSlideshow = {
-    args: {
-        'aria-label': 'Fullscreen image slideshow',
-        closeButtonProps: { label: 'Close' },
-        children: (
-            <Slideshow
-                aria-label="Image slideshow"
-                theme="dark"
-                slideshowControlsProps={{
-                    nextButtonProps: { label: 'Next image' },
-                    previousButtonProps: { label: 'Previous image' },
-                }}
-                slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
-            >
-                <SlideshowItem>
-                    <ImageBlock
-                        align="center"
-                        fillHeight
-                        image={LANDSCAPE_IMAGES.landscape1}
-                        alt={LANDSCAPE_IMAGES_ALT.landscape1}
-                    />
-                </SlideshowItem>
-
-                <SlideshowItem>
-                    <ImageBlock
-                        align="center"
-                        fillHeight
-                        image={LANDSCAPE_IMAGES.landscape2}
-                        alt={LANDSCAPE_IMAGES_ALT.landscape2}
-                    />
-                </SlideshowItem>
-
-                <SlideshowItem>
-                    <ImageBlock
-                        align="center"
-                        fillHeight
-                        image={LANDSCAPE_IMAGES.landscape3}
-                        alt={LANDSCAPE_IMAGES_ALT.landscape3}
-                    />
-                </SlideshowItem>
-            </Slideshow>
-        ),
-    },
-};

package/src/components/lightbox/Lightbox.test.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render, screen } from '@testing-library/react';
-import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
-
-import { Heading, HeadingLevelProvider } from '@lumx/react';
-import { Lightbox, LightboxProps } from './Lightbox';
-
-const CLASSNAME = Lightbox.className as string;
-
-const setup = (props: Partial<LightboxProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const propsOverride = {
-        isOpen: true,
-        children: <ThemeSentinel />,
-        ...props,
-    } as any;
-    const { container } = render(<Lightbox {...propsOverride} />, { wrapper });
-    const lightbox = queryByClassName(document.body, CLASSNAME);
-    const themeSentinel = screen.queryByTestId(ThemeSentinel.testId);
-    return { props, container, lightbox, themeSentinel };
-};
-
-describe(`<${Lightbox.displayName}>`, () => {
-    it('should have reset the heading level context', () => {
-        setup(
-            {
-                // Heading inside the lightbox
-                children: <Heading>Title</Heading>,
-            },
-            {
-                // This level context should not affect headings inside the lightbox
-                wrapper({ children }) {
-                    return <HeadingLevelProvider level={3}>{children}</HeadingLevelProvider>;
-                },
-            },
-        );
-        // Heading inside should use the lightbox heading level 2
-        expect(screen.queryByRole('heading', { name: 'Title', level: 2 })).toBeInTheDocument();
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'lightbox',
-        forwardAttributes: 'lightbox',
-        forwardRef: 'lightbox',
-        applyTheme: {
-            affects: [{ not: { element: 'themeSentinel' } }],
-            viaProp: true,
-            viaContext: true,
-        },
-    });
-});