@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/button/ButtonGroup.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component
+ */
+export type ButtonGroupProps = GenericProps;
+
+/**
+ * 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: Comp<ButtonGroupProps, HTMLDivElement> = forwardRef((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/dist/src/components/button/ButtonRoot.test.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+
+import { mount } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+
+import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
+import {
+    BUTTON_CLASSNAME,
+    BUTTON_WRAPPER_CLASSNAME,
+    ButtonRoot,
+    ButtonRootProps,
+} from '@lumx/react/components/button/ButtonRoot';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+type SetupProps = Partial<ButtonRootProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}) => {
+    const props: any = { ...propsOverride };
+    const wrapper: Wrapper = mount(<ButtonRoot {...props} />);
+
+    return {
+        button: wrapper.find(`.${BUTTON_CLASSNAME}`),
+        buttonWrapper: wrapper.find(`.${BUTTON_WRAPPER_CLASSNAME}`),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${ButtonRoot.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render button with label', () => {
+            const props: Partial<ButtonRootProps> = {
+                children: 'Label',
+            };
+            const { button, buttonWrapper, wrapper } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonWrapper).not.toExist();
+
+            expect(button).toExist();
+            expect(button.type()).toEqual('button');
+
+            expect(button.contains(props.children)).toBe(true);
+        });
+
+        it('should render button with wrapper and label', () => {
+            const props: Partial<ButtonRootProps> = {
+                children: 'Label',
+                hasBackground: true,
+            };
+            const { button, buttonWrapper, wrapper } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonWrapper).toExist();
+
+            expect(button).toExist();
+            expect(button.type()).toEqual('button');
+
+            expect(button.contains(props.children)).toBe(true);
+        });
+
+        it('should render anchor button with label', () => {
+            const props: Partial<ButtonRootProps> = {
+                children: 'Label',
+                href: 'example.com',
+                target: '_blank',
+            };
+            const { button, buttonWrapper, wrapper } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonWrapper).not.toExist();
+
+            expect(button).toExist();
+            expect(button.type()).toEqual('a');
+            expect(button.contains(props.children)).toBe(true);
+
+            const actualProps = button.props() as Partial<ButtonRootProps>;
+            expect(actualProps.href).toEqual(props.href);
+            expect(actualProps.target).toEqual(props.target);
+        });
+
+        it('should render anchor button with wrapper and label', () => {
+            const props: Partial<ButtonRootProps> = {
+                children: 'Label',
+                hasBackground: true,
+                href: 'example.com',
+                target: '_blank',
+            };
+            const { button, buttonWrapper, wrapper } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonWrapper).toExist();
+
+            expect(button).toExist();
+            expect(button.type()).toEqual('a');
+            expect(button.contains(props.children)).toBe(true);
+
+            const actualProps = button.props() as Partial<ButtonRootProps>;
+            expect(actualProps.href).toEqual(props.href);
+            expect(actualProps.target).toEqual(props.target);
+        });
+
+        it('should render custom link', () => {
+            const CustomLink: React.FC = ({ children, ...props }) =>
+                React.createElement('a', { ...props, style: { color: 'red' } }, children);
+            const { wrapper } = setup({ href: 'foo', linkAs: CustomLink });
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should use default color', () => {
+            const props: Partial<ButtonRootProps> = {};
+            const { button, wrapper } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(button).toExist();
+            expect(button).toHaveClassName(
+                getBasicClass({ prefix: BUTTON_CLASSNAME, type: 'color', value: ColorPalette.dark }),
+            );
+        });
+
+        it('should not have default color in low or medium emphasis', () => {
+            const props: Partial<ButtonRootProps> = {
+                emphasis: Emphasis.low,
+            };
+            const { button, wrapper } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(button).not.toHaveClassName(
+                getBasicClass({ prefix: BUTTON_CLASSNAME, type: 'color', value: ColorPalette.primary }),
+            );
+        });
+
+        it('should use given props', () => {
+            // Props used for the button.
+            const buttonProps: Partial<ButtonRootProps> = {
+                color: ColorPalette.red,
+                emphasis: Emphasis.high,
+                size: Size.s,
+                theme: Theme.dark,
+                variant: 'icon',
+            };
+            // Props used for the button wrapper.
+            const buttonWrapperProps: Partial<ButtonRootProps> = {
+                variant: buttonProps.variant,
+            };
+            const { button, buttonWrapper, wrapper } = setup({
+                ...buttonProps,
+                hasBackground: true,
+            });
+            expect(wrapper).toMatchSnapshot();
+
+            // The button wrapper classes.
+            for (const [type, value] of Object.entries(buttonProps)) {
+                expect(button).toHaveClassName(getBasicClass({ prefix: BUTTON_CLASSNAME, type, value }));
+            }
+
+            // The button wrapper classes.
+            for (const [type, value] of Object.entries(buttonWrapperProps)) {
+                expect(buttonWrapper).toHaveClassName(getBasicClass({ prefix: BUTTON_WRAPPER_CLASSNAME, type, value }));
+            }
+        });
+
+        it('should be full width', () => {
+            const buttonProps: Partial<ButtonRootProps> = {
+                fullWidth: true,
+                emphasis: Emphasis.high,
+                theme: Theme.light,
+            };
+
+            const { wrapper, button } = setup(buttonProps);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(button).toHaveClassName(getBasicClass({ prefix: BUTTON_CLASSNAME, type: 'fullWidth', value: true }));
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        // Nothing to do here.
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        // Tested in step 1.
+    });
+
+    // 5. Test state.
+    describe('State', () => {
+        // Nothing to do here.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'button', prop: 'button' }, { className: BUTTON_CLASSNAME });
+});

package/dist/src/components/button/ButtonRoot.tsx

@@ -0,0 +1,190 @@
+import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, 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 { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
+import { renderLink } from '@lumx/react/utils/renderLink';
+
+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 {
+    /** 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. */
+    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: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
+    const {
+        'aria-label': ariaLabel,
+        children,
+        className,
+        color,
+        disabled,
+        emphasis,
+        hasBackground,
+        href,
+        isDisabled = disabled,
+        isSelected,
+        isActive,
+        isFocused,
+        isHovered,
+        linkAs,
+        name,
+        size,
+        target,
+        theme,
+        variant,
+        type = 'button',
+        fullWidth,
+        ...forwardedProps
+    } = props;
+
+    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,
+            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)) && !isDisabled) {
+        return renderLink(
+            {
+                linkAs,
+                ...forwardedProps,
+                'aria-label': ariaLabel,
+                href,
+                target,
+                className: buttonClassName,
+                ref: ref as RefObject<HTMLAnchorElement>,
+            },
+            children,
+        );
+    }
+    return (
+        <button
+            {...forwardedProps}
+            disabled={isDisabled}
+            aria-disabled={isDisabled}
+            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/dist/src/components/button/IconButton.test.tsx

@@ -0,0 +1,103 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { mdiClose } from '@lumx/icons';
+
+import { IconButton, IconButtonProps } from './IconButton';
+
+const DEFAULT_PROPS = IconButton.defaultProps as any;
+const CLASSNAME = IconButton.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 = {}, shallowRendering = true) => {
+    const props: any = { ...propsOverride };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+
+    const wrapper: Wrapper = renderer(<IconButton {...props} />);
+
+    return {
+        buttonRoot: wrapper.find('ButtonRoot'),
+        icon: wrapper.find('Icon'),
+        img: wrapper.find('img'),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${IconButton.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render icon button', () => {
+            const { buttonRoot, icon, img, wrapper } = setup({});
+            expect(wrapper).toMatchSnapshot();
+            expect(buttonRoot).toExist();
+            expect(icon).toExist();
+            expect(img).not.toExist();
+        });
+
+        it('should render icon button with an image', () => {
+            const { buttonRoot, icon, img, wrapper } = setup({ image: 'http://foo.com' });
+            expect(wrapper).toMatchSnapshot();
+            expect(buttonRoot).toExist();
+            expect(icon).not.toExist();
+            expect(img).toExist();
+        });
+
+        it('should render icon button with an image if both props are set', () => {
+            const { buttonRoot, icon, img, wrapper } = setup({ image: 'http://foo.com', icon: mdiClose });
+            expect(wrapper).toMatchSnapshot();
+            expect(buttonRoot).toExist();
+            expect(icon).not.toExist();
+            expect(img).toExist();
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should use default props', () => {
+            const { wrapper, buttonRoot } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            const actualProps = buttonRoot.props() as IconButtonProps;
+            expect(actualProps.variant).toEqual('icon');
+            for (const [propName, propValue] of Object.entries(DEFAULT_PROPS)) {
+                expect(actualProps[propName]).toEqual(propValue);
+            }
+        });
+
+        it('should forward any CSS class', () => {
+            const props = {
+                className: 'component component--is-tested',
+            };
+            const { wrapper, buttonRoot } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonRoot).toHaveClassName(props.className);
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        // Nothing to do here.
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        // Nothing to do here.
+    });
+
+    // 5. Test state.
+    describe('State', () => {
+        // Nothing to do here.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { prop: 'buttonRoot' }, { className: CLASSNAME });
+});

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

@@ -0,0 +1,80 @@
+import React, { forwardRef } from 'react';
+
+import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react';
+import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
+import { Comp } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
+
+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,
+    theme: Theme.light,
+};
+
+/**
+ * IconButton component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {
+    const { emphasis, image, icon, label, size, theme, 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}
+                    />
+                ) : (
+                    <Icon icon={icon as string} />
+                )}
+            </ButtonRoot>
+        </Tooltip>
+    );
+});
+IconButton.displayName = COMPONENT_NAME;
+IconButton.className = CLASSNAME;
+IconButton.defaultProps = DEFAULT_PROPS;