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

package/src/components/button/ButtonGroup.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component
- */
-export interface ButtonGroupProps extends GenericProps {
-    /**
-     * Children
-     */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ButtonGroup';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ButtonGroupProps> = {};
-
-/**
- * ButtonGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ButtonGroup = forwardRef<ButtonGroupProps, HTMLDivElement>((props, ref) => {
-    const { children, className, ...forwardedProps } = props;
-
-    return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
-            {children}
-        </div>
-    );
-});
-ButtonGroup.displayName = COMPONENT_NAME;
-ButtonGroup.className = CLASSNAME;
-ButtonGroup.defaultProps = DEFAULT_PROPS;

package/src/components/button/ButtonRoot.tsx

@@ -1,193 +0,0 @@
-import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
-
-import isEmpty from 'lodash/isEmpty';
-
-import classNames from 'classnames';
-
-import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
-import { CSS_PREFIX } from '@lumx/react/constants';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/core/js/utils/className';
-import { renderLink } from '@lumx/react/utils/react/renderLink';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-
-type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-
-/**
- * Button size definition.
- */
-export type ButtonSize = Extract<Size, 's' | 'm'>;
-
-export interface BaseButtonProps
-    extends GenericProps,
-        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>,
-        HasTheme,
-        HasAriaDisabled {
-    /** Color variant. */
-    color?: ColorPalette;
-    /** Emphasis variant. */
-    emphasis?: Emphasis;
-    /** Whether or not the button has a background color in low emphasis. */
-    hasBackground?: boolean;
-    /** Native anchor href property. It determines whether the Button will be a <button> or an <a>. */
-    href?: string;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is selected or not (unsupported in `high` emphasis). */
-    isSelected?: boolean;
-    /** Native button name property. */
-    name?: string;
-    /** Size variant. */
-    size?: ButtonSize;
-    /** Native anchor target property. */
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    /** Native button type. */
-    type?: HTMLButtonProps['type'];
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-}
-
-export interface ButtonRootProps extends BaseButtonProps {
-    variant: 'button' | 'icon';
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ButtonRoot';
-
-export const BUTTON_WRAPPER_CLASSNAME = `${CSS_PREFIX}-button-wrapper`;
-export const BUTTON_CLASSNAME = `${CSS_PREFIX}-button`;
-
-/**
- * Render a button wrapper with the ButtonRoot inside.
- *
- * @param  props Component props.
- * @return React element.
- */
-const renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {
-    const { color, emphasis, variant, fullWidth } = props;
-
-    const adaptedColor =
-        emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
-
-    const wrapperClassName = classNames(
-        handleBasicClasses({
-            color: adaptedColor,
-            prefix: BUTTON_WRAPPER_CLASSNAME,
-            variant,
-            fullWidth,
-        }),
-    );
-    const buttonProps = { ...props, hasBackground: false };
-
-    return (
-        <div className={wrapperClassName}>
-            {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
-            <ButtonRoot {...buttonProps} />
-        </div>
-    );
-};
-
-/**
- * ButtonRoot component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
-    const {
-        'aria-label': ariaLabel,
-        children,
-        className,
-        color,
-        emphasis,
-        hasBackground,
-        href,
-        isSelected,
-        isActive,
-        isFocused,
-        isHovered,
-        linkAs,
-        name,
-        size,
-        target,
-        theme,
-        variant,
-        type = 'button',
-        fullWidth,
-        ...forwardedProps
-    } = otherProps;
-
-    const adaptedColor =
-        color ||
-        (emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light) ||
-        (emphasis === Emphasis.high && ColorPalette.primary) ||
-        ColorPalette.dark;
-
-    if (hasBackground) {
-        return renderButtonWrapper({ ...props, ref, variant, color: adaptedColor });
-    }
-
-    const buttonClassName = classNames(
-        className,
-        handleBasicClasses({
-            color: adaptedColor,
-            emphasis,
-            isSelected,
-            isDisabled: isAnyDisabled,
-            isActive,
-            isFocused,
-            isHovered,
-            prefix: BUTTON_CLASSNAME,
-            size,
-            theme: emphasis === Emphasis.high && theme,
-            variant,
-            fullWidth,
-        }),
-    );
-
-    /**
-     * If the linkAs prop is used, we use the linkAs component instead of a <button>.
-     * If there is an href attribute, we display an <a> instead of a <button>.
-     *
-     * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.
-     */
-    if ((linkAs || !isEmpty(props.href)) && !isAnyDisabled) {
-        return renderLink(
-            {
-                linkAs,
-                ...forwardedProps,
-                'aria-label': ariaLabel,
-                href,
-                target,
-                className: buttonClassName,
-                ref: ref as RefObject<HTMLAnchorElement>,
-            },
-            children,
-        );
-    }
-    return (
-        <button
-            {...forwardedProps}
-            {...disabledStateProps}
-            aria-disabled={isAnyDisabled}
-            aria-label={ariaLabel}
-            ref={ref as RefObject<HTMLButtonElement>}
-            className={buttonClassName}
-            name={name}
-            type={
-                // eslint-disable-next-line react/button-has-type
-                type
-            }
-        >
-            {children}
-        </button>
-    );
-});
-ButtonRoot.displayName = COMPONENT_NAME;
-ButtonRoot.defaultProps = {};

package/src/components/button/IconButton.stories.tsx

@@ -1,52 +0,0 @@
-import { mdiSend } from '@lumx/icons';
-import { ButtonSize, Emphasis, IconButton, Size } from '@lumx/react';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { colorArgType } from '@lumx/react/stories/controls/color';
-import { SQUARE_IMAGES, squareImageArgType } from '@lumx/react/stories/controls/image';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { StateVariations } from './Button.stories';
-
-export default {
-    title: 'LumX components/button/IconButton',
-    component: IconButton,
-    argTypes: {
-        isSelected: { control: 'boolean' },
-        isDisabled: { control: 'boolean' },
-        hasBackground: { control: 'boolean' },
-        emphasis: getSelectArgType(Emphasis),
-        size: getSelectArgType<ButtonSize>([Size.s, Size.m]),
-        icon: iconArgType,
-        color: colorArgType,
-        ref: { table: { disable: true } },
-        onClick: { action: true, table: { disable: true } },
-        linkAs: { table: { disable: true } },
-        className: { table: { disable: true } },
-        target: { if: { arg: 'href', exists: true }, control: { type: 'inline-radio' } },
-        type: { if: { arg: 'href', exists: false }, control: { type: 'inline-radio' } },
-    },
-    args: IconButton.defaultProps,
-};
-
-/**
- * Default IconButton
- */
-export const Default = {
-    args: { icon: mdiSend, label: 'Button label' },
-};
-
-/**
- * IconButton using an image
- */
-export const WithImage = {
-    argTypes: squareImageArgType,
-    args: { image: SQUARE_IMAGES.square1 },
-};
-
-/**
- * Check icon button style variations (color, states, emphasis, etc.)
- */
-export const IconStateVariations = {
-    ...Default,
-    argTypes: { ...Default.args, ...StateVariations.argTypes },
-    decorators: StateVariations.decorators,
-};

package/src/components/button/IconButton.test.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { Button } from '@lumx/react';
-import { render, screen } from '@testing-library/react';
-import { getByClassName, queryByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
-
-import { IconButton, IconButtonProps } from './IconButton';
-
-const CLASSNAME = Button.className as string;
-
-type SetupProps = Partial<IconButtonProps>;
-
-/**
- * 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(<IconButton {...props} />, { wrapper });
-    const iconButton = getByClassName(document.body, CLASSNAME);
-    const icon = queryByClassName(iconButton, 'lumx-icon');
-    const img = queryByTagName(iconButton, 'IMG');
-
-    return { props, iconButton, icon, img };
-};
-
-describe(`<${IconButton.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { iconButton, icon, img } = setup();
-            expect(iconButton).toBeInTheDocument();
-            expect(iconButton.className).toMatchInlineSnapshot(
-                '"lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--size-m lumx-button--theme-light lumx-button--variant-icon"',
-            );
-
-            expect(icon).toBeInTheDocument();
-            expect(img).not.toBeInTheDocument();
-        });
-
-        it('should render label', () => {
-            const label = 'Label';
-            const { iconButton } = setup({ label });
-            expect(iconButton).toBe(screen.queryByRole('button', { name: label }));
-        });
-
-        it('should render icon button with an image', () => {
-            const { iconButton, icon, img } = setup({ image: 'http://foo.com' });
-
-            expect(iconButton).toBeInTheDocument();
-            expect(icon).not.toBeInTheDocument();
-            expect(img).toBeInTheDocument();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'iconButton',
-        forwardAttributes: 'iconButton',
-        forwardRef: 'iconButton',
-        applyTheme: {
-            affects: [{ element: 'iconButton' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/button/IconButton.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-
-import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';
-import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-export interface IconButtonProps extends BaseButtonProps {
-    /**
-     * Icon (SVG path).
-     * If `image` is also set, `image` will be used instead.
-     */
-    icon?: string;
-    /**
-     * Image (image url).
-     * Has priority over `icon`.
-     */
-    image?: string;
-    /**
-     * Label text (required for a11y purpose).
-     * If you really don't want an aria-label, you can set an empty label (this is not recommended).
-     */
-    label: string;
-    /**
-     * Props to pass to the tooltip.
-     * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
-     * */
-    tooltipProps?: Partial<TooltipProps>;
-    /** Whether the tooltip should be hidden or not. */
-    hideTooltip?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'IconButton';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<IconButtonProps> = {
-    emphasis: Emphasis.high,
-    size: Size.m,
-};
-
-/**
- * IconButton component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        emphasis = DEFAULT_PROPS.emphasis,
-        image,
-        icon,
-        label,
-        size = DEFAULT_PROPS.size,
-        theme = defaultTheme,
-        tooltipProps,
-        hideTooltip,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>
-            <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant="icon">
-                {image ? (
-                    <img
-                        // no need to set alt as an aria-label is already set on the button
-                        alt=""
-                        src={image}
-                    />
-                ) : (
-                    <ThemeProvider value={undefined}>
-                        <Icon icon={icon as string} />
-                    </ThemeProvider>
-                )}
-            </ButtonRoot>
-        </Tooltip>
-    );
-});
-IconButton.displayName = COMPONENT_NAME;
-IconButton.className = CLASSNAME;
-IconButton.defaultProps = DEFAULT_PROPS;

package/src/components/button/index.ts

@@ -1,4 +0,0 @@
-export type { BaseButtonProps, ButtonSize } from './ButtonRoot';
-export * from './Button';
-export * from './IconButton';
-export * from './ButtonGroup';

package/src/components/checkbox/Checkbox.stories.tsx

@@ -1,64 +0,0 @@
-import { Checkbox } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-export default {
-    title: 'LumX components/checkbox/Checkbox',
-    component: Checkbox,
-    decorators: [withValueOnChange({ valueProp: 'isChecked' })],
-    args: {
-        isChecked: false,
-        name: 'checkbox-html-name',
-        value: 'checkbox-html-value',
-    },
-    argTypes: {
-        onChange: { action: true },
-        name: { control: false },
-        value: { control: false },
-    },
-};
-
-/**
- * Default checkbox
- */
-export const Default = {};
-
-/**
- * With label and helper
- */
-export const LabelAndHelper = {
-    args: {
-        label: 'Checkbox label',
-        helper: loremIpsum('tiny'),
-    },
-};
-
-/**
- * With intermediate state
- */
-export const IntermediateState = {
-    args: {
-        isChecked: 'intermediate',
-    },
-};
-
-/**
- * Disabled
- */
-export const Disabled = {
-    args: {
-        label: 'Checkbox label',
-        helper: 'Checkbox is disabled because...',
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: {
-                    disabled: { disabled: true },
-                    'aria-disabled': { 'aria-disabled': true },
-                },
-            },
-        }),
-    ],
-};

package/src/components/checkbox/Checkbox.test.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-
-import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Checkbox, CheckboxProps } from './Checkbox';
-
-const CLASSNAME = Checkbox.className as string;
-
-type SetupProps = Partial<CheckboxProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: any = { id: 'fixedId', ...propsOverride };
-    render(<Checkbox {...props} />, { wrapper });
-
-    const checkbox = getByClassName(document.body, CLASSNAME);
-    const helper = queryByClassName(checkbox, `${CLASSNAME}__helper`);
-    const label = queryByClassName(checkbox, `${CLASSNAME}__label`);
-    const input = getByTagName(checkbox, 'input');
-    return { checkbox, helper, label, input, props };
-};
-
-describe(`<${Checkbox.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render correctly', () => {
-            const { checkbox, input, label, helper } = setup();
-            expect(checkbox).toBeInTheDocument();
-            expect(checkbox).toHaveClass(CLASSNAME);
-            expect(checkbox).not.toHaveClass('lumx-checkbox--is-disabled');
-            expect(checkbox).toHaveClass('lumx-checkbox--is-unchecked');
-
-            expect(label).not.toBeInTheDocument();
-            expect(helper).not.toBeInTheDocument();
-
-            expect(input).toBeInTheDocument();
-            expect(input).not.toBeChecked();
-            expect(input).toHaveAttribute('aria-checked', 'false');
-            expect(input).not.toBeDisabled();
-        });
-
-        it('should render disabled and checked', () => {
-            const { checkbox, input } = setup({
-                isDisabled: true,
-                isChecked: true,
-            });
-            expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
-            expect(checkbox).toHaveClass('lumx-checkbox--is-checked');
-
-            expect(input).toBeChecked();
-            expect(input).toHaveAttribute('aria-checked', 'true');
-            expect(input).toBeDisabled();
-        });
-
-        it('should render intermediate state', () => {
-            const { checkbox, input } = setup({
-                isChecked: 'intermediate',
-            });
-            expect(checkbox).toHaveClass('lumx-checkbox--is-checked');
-
-            expect(input).toBeChecked();
-            expect(input).toHaveAttribute('aria-checked', 'mixed');
-        });
-
-        it('should render helper and label', () => {
-            const id = 'checkbox1';
-            const { props, helper, label, input } = setup({
-                id,
-                helper: 'Test helper',
-                label: 'Test label',
-            });
-
-            expect(helper).toBeInTheDocument();
-            expect(helper).toHaveTextContent(props.helper);
-            expect(helper).toHaveAttribute('id');
-
-            expect(label).toBeInTheDocument();
-            expect(label).toHaveTextContent(props.label);
-            expect(label).toHaveAttribute('for', id);
-
-            expect(input).toHaveAttribute('id', id);
-            expect(input).toHaveAttribute('aria-describedby', helper?.id);
-        });
-
-        it('should forward input props', () => {
-            const { props, input } = setup({
-                inputProps: {
-                    'aria-labelledby': 'labelledby-id',
-                },
-            });
-
-            expect(input).toHaveAttribute('aria-labelledby', props.inputProps['aria-labelledby']);
-        });
-    });
-
-    describe('Events', () => {
-        const onChange = jest.fn();
-
-        it('should trigger `onChange` when checkbox is clicked', async () => {
-            const value = 'value';
-            const name = 'name';
-            const { input } = setup({ checked: false, onChange, value, name });
-            expect(input).not.toBeChecked();
-
-            await userEvent.click(input);
-
-            expect(onChange).toHaveBeenCalledWith(true, value, name, expect.any(Object));
-        });
-    });
-
-    describe('Disabled state', () => {
-        it('should be disabled with isDisabled', async () => {
-            const onChange = jest.fn();
-            const { checkbox, input } = setup({ isDisabled: true, onChange });
-
-            expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
-            expect(input).toBeDisabled();
-
-            // Should not trigger onChange.
-            await userEvent.click(input);
-            expect(onChange).not.toHaveBeenCalled();
-        });
-
-        it('should be disabled with aria-disabled', async () => {
-            const onChange = jest.fn();
-            const { checkbox, input } = setup({ 'aria-disabled': true, onChange });
-
-            expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
-            // Note: input is not disabled (so it can be focused) but it's readOnly.
-            expect(input).not.toBeDisabled();
-            expect(input).toHaveAttribute('aria-disabled', 'true');
-            expect(input).toHaveAttribute('readOnly');
-
-            // Should not trigger onChange.
-            await userEvent.click(input);
-            expect(onChange).not.toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'checkbox',
-        forwardAttributes: 'checkbox',
-        applyTheme: {
-            affects: [{ element: 'checkbox' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});