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

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

@@ -0,0 +1,96 @@
+import { 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

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

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

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

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

@@ -0,0 +1,65 @@
+import { 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

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

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

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

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

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

@@ -0,0 +1,69 @@
+import { 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

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

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

@@ -0,0 +1,101 @@
+/* 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

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