@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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