@lumx/react 3.21.1 → 3.21.2-alpha.1

package/src/components/button/Button.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-
-import { Emphasis, Icon, Size, Theme, Text, ThemeProvider } from '@lumx/react';
-import { isComponent } from '@lumx/react/utils/type';
-import { getBasicClass, getRootClassName } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { BaseButtonProps, ButtonRoot } from './ButtonRoot';
-
-/**
- * Button emphasis definition.
- * @deprecated Use Emphasis instead.
- */
-export const ButtonEmphasis = Emphasis;
-
-/**
- * Defines the props of the component.
- */
-export interface ButtonProps extends BaseButtonProps {
-    /** Left icon (SVG path). */
-    leftIcon?: string;
-    /** Right icon (SVG path). */
-    rightIcon?: string;
-    /** When `true`, the button gets as large as possible. */
-    fullWidth?: boolean;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Button';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ButtonProps> = {
-    emphasis: Emphasis.high,
-    size: Size.m,
-};
-
-/**
- * Button component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        children,
-        className,
-        emphasis = DEFAULT_PROPS.emphasis,
-        leftIcon,
-        rightIcon,
-        size = DEFAULT_PROPS.size,
-        theme = defaultTheme,
-        ...forwardedProps
-    } = props;
-
-    const buttonClassName = classNames(
-        className,
-        getBasicClass({ prefix: CLASSNAME, type: 'hasLeftIcon', value: !isEmpty(leftIcon) }),
-        getBasicClass({ prefix: CLASSNAME, type: 'hasRightIcon', value: !isEmpty(rightIcon) }),
-    );
-
-    return (
-        <ButtonRoot
-            ref={ref}
-            {...{ emphasis, size, theme, ...forwardedProps }}
-            className={buttonClassName}
-            variant="button"
-        >
-            {leftIcon && !isEmpty(leftIcon) && (
-                // Theme is handled in the button scss
-                <ThemeProvider value={undefined}>
-                    <Icon icon={leftIcon} />
-                </ThemeProvider>
-            )}
-            {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}
-            {rightIcon && !isEmpty(rightIcon) && (
-                // Theme is handled in the button scss
-                <ThemeProvider value={undefined}>
-                    <Icon icon={rightIcon} />
-                </ThemeProvider>
-            )}
-        </ButtonRoot>
-    );
-});
-Button.displayName = COMPONENT_NAME;
-Button.className = CLASSNAME;
-Button.defaultProps = DEFAULT_PROPS;

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

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { Button, ButtonGroup, Emphasis, IconButton, Size } from '@lumx/react';
-import { mdiAbjadArabic, mdiFoodApple, mdiMenuDown } from '@lumx/icons';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-export default {
-    title: 'LumX components/button/ButtonGroup',
-    component: ButtonGroup,
-    argTypes: { children: { control: false } },
-};
-
-/** Size & emphasis variants */
-export const Variants = {
-    render: ({ size, emphasis, theme }: any) => (
-        <ButtonGroup>
-            <Button size={size} emphasis={emphasis} theme={theme}>
-                Button
-            </Button>
-            <IconButton size={size} emphasis={emphasis} theme={theme} label="IconButton" icon={mdiMenuDown} />
-        </ButtonGroup>
-    ),
-    decorators: [
-        withCombinations({
-            cellStyle: { padding: '10px' },
-            combinations: {
-                rows: { '': { size: Size.m }, 'size=s': { size: Size.s } },
-                cols: { key: 'emphasis', options: [undefined, Emphasis.medium, Emphasis.low] },
-            },
-        }),
-    ],
-};
-
-export const OneButton = {
-    args: { children: <Button>Button</Button> },
-};
-
-export const ManyButtons = {
-    args: {
-        children: (
-            <>
-                <span className="visually-hidden">Ignore me</span>
-                <Button emphasis="medium">Button 1</Button>
-                <span className="visually-hidden">Ignore me</span>
-                <IconButton emphasis="medium" label="IconButton" icon={mdiFoodApple} />
-                <span className="visually-hidden">Ignore me</span>
-                <IconButton emphasis="medium" isSelected label="IconButton" icon={mdiAbjadArabic} />
-                <span className="visually-hidden">Ignore me</span>
-                <Button emphasis="medium">Button 2</Button>
-                <span className="visually-hidden">Ignore me</span>
-            </>
-        ),
-    },
-};

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

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import { mdiPlus } from '@lumx/icons';
-import { Button, IconButton } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-
-import { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
-
-const CLASSNAME = ButtonGroup.className as string;
-
-type SetupProps = Partial<ButtonGroupProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}) => {
-    const props: ButtonGroupProps = {
-        children: (
-            <>
-                <Button>Label</Button>
-                <IconButton label="Add" icon={mdiPlus} />
-            </>
-        ),
-        ...propsOverride,
-    };
-
-    render(<ButtonGroup {...props} />);
-    const buttonGroup = getByClassName(document.body, CLASSNAME);
-
-    return { props, buttonGroup };
-};
-
-describe(`<${ButtonGroup.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'buttonGroup',
-        forwardAttributes: 'buttonGroup',
-        forwardRef: 'buttonGroup',
-    });
-});

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,163 +0,0 @@
-import React, { 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

@@ -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';