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

package/src/components/button/ButtonGroup.tsx

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

@@ -0,0 +1,163 @@
+import { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
+
+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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
+import { useDisableStateProps } from '@lumx/react/utils/disabled';
+
+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,
+        isSelected,
+        isActive,
+        isFocused,
+        isHovered,
+        linkAs,
+        size,
+        theme,
+        variant,
+        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: props.isDisabled || props['aria-disabled'],
+            isActive,
+            isFocused,
+            isHovered,
+            prefix: BUTTON_CLASSNAME,
+            size,
+            theme: emphasis === Emphasis.high && theme,
+            variant,
+            fullWidth,
+        }),
+    );
+
+    return (
+        <RawClickable
+            as={linkAs || (forwardedProps.href ? 'a' : 'button')}
+            {...forwardedProps}
+            {...disabledStateProps}
+            aria-disabled={isAnyDisabled}
+            aria-label={ariaLabel}
+            ref={ref as RefObject<HTMLButtonElement>}
+            className={buttonClassName}
+        >
+            {children}
+        </RawClickable>
+    );
+});
+ButtonRoot.displayName = COMPONENT_NAME;
+ButtonRoot.defaultProps = {};

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

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

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

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

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

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

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

@@ -0,0 +1,154 @@
+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 = vi.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 = vi.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 = vi.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',
+        },
+    });
+});