@lumx/react 3.20.1-alpha.5 → 3.20.1-alpha.50

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,
-        },
-    });
-});

package/src/components/lightbox/Lightbox.tsx

@@ -1,180 +0,0 @@
-import React, { RefObject, useRef, useEffect, AriaAttributes } from 'react';
-
-import classNames from 'classnames';
-
-import { mdiClose } from '@lumx/icons';
-import { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';
-import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
-import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
-import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
-import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { Portal } from '@lumx/react/utils';
-
-/**
- * Defines the props of the component.
- */
-export interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
-    /** Props to pass to the close button (minus those already set by the Lightbox props). */
-    closeButtonProps?: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-    /** Reference to the element that triggered modal opening to set focus on. */
-    parentElement: RefObject<any>;
-    /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */
-    focusElement?: RefObject<HTMLElement>;
-    /** Whether to keep the dialog open on clickaway or escape press. */
-    preventAutoClose?: boolean;
-    /** Z-axis position. */
-    zIndex?: number;
-    /** On close callback. */
-    onClose?(): void;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Lightbox';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Lightbox component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) => {
-    const {
-        'aria-labelledby': propAriaLabelledBy,
-        ariaLabelledBy = propAriaLabelledBy,
-        'aria-label': propAriaLabel,
-        ariaLabel = propAriaLabel,
-        children,
-        className,
-        closeButtonProps,
-        isOpen,
-        onClose,
-        parentElement,
-        focusElement,
-        preventAutoClose,
-        theme,
-        zIndex,
-        ...forwardedProps
-    } = props;
-    if (!DOCUMENT) {
-        // Can't render in SSR.
-        return null;
-    }
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const childrenRef = useRef<any>(null);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const wrapperRef = useRef<HTMLDivElement>(null);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const closeButtonRef = useRef<HTMLButtonElement>(null);
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDisableBodyScroll(isOpen && wrapperRef.current);
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);
-
-    // Handle focus trap.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocusTrap(
-        // Focus trap zone
-        isOpen && wrapperRef.current,
-        // Focus element (fallback on close button and then on the dialog)
-        focusElement?.current || closeButtonRef.current || wrapperRef.current,
-    );
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const previousOpen = useRef(isOpen);
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        if (isOpen !== previousOpen.current) {
-            previousOpen.current = isOpen;
-
-            // Focus the parent element on close.
-            if (!isOpen && parentElement && parentElement.current) {
-                parentElement.current.focus();
-            }
-        }
-    }, [isOpen, parentElement]);
-
-    // Close lightbox on escape key pressed.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useCallbackOnEscape(onClose);
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const clickAwayRefs = useRef([wrapperRef]);
-
-    if (!isOpen && !isVisible) return null;
-
-    return (
-        <Portal>
-            <div
-                ref={mergeRefs(ref, wrapperRef)}
-                {...forwardedProps}
-                aria-label={ariaLabel}
-                aria-labelledby={ariaLabelledBy}
-                aria-modal="true"
-                role="dialog"
-                tabIndex={-1}
-                className={classNames(
-                    className,
-                    handleBasicClasses({
-                        prefix: CLASSNAME,
-                        isHidden: !isOpen,
-                        isShown: isOpen || isVisible,
-                        theme,
-                    }),
-                )}
-                style={{ zIndex }}
-            >
-                {closeButtonProps && (
-                    <div className={`${CLASSNAME}__close`}>
-                        <IconButton
-                            {...closeButtonProps}
-                            ref={closeButtonRef}
-                            emphasis="low"
-                            hasBackground
-                            icon={mdiClose}
-                            theme="dark"
-                            type="button"
-                            onClick={onClose}
-                        />
-                    </div>
-                )}
-                <HeadingLevelProvider level={2}>
-                    <ThemeProvider value={undefined}>
-                        <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
-                            <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
-                                {children}
-                            </div>
-                        </ClickAwayProvider>
-                    </ThemeProvider>
-                </HeadingLevelProvider>
-            </div>
-        </Portal>
-    );
-});
-Lightbox.displayName = COMPONENT_NAME;
-Lightbox.className = CLASSNAME;

package/src/components/lightbox/index.ts

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