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

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

@@ -1,356 +0,0 @@
-import React from 'react';
-import omit from 'lodash/omit';
-import pick from 'lodash/pick';
-
-import { Button, ButtonSize, Emphasis, GridColumn, Size, Text, Theme } from '@lumx/react';
-import { mdiAccountBox } from '@lumx/icons';
-
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { colorArgType } from '@lumx/react/stories/controls/color';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { disableArgTypes } from '@lumx/react/stories/utils/disableArgTypes';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
-import { withTheming } from '@lumx/react/stories/utils/theming';
-import { DESIGN_TOKENS } from '@lumx/core/js/constants/design-tokens';
-
-const buttonSizes = [Size.m, Size.s];
-const buttonEmphasis = [Emphasis.high, Emphasis.medium, Emphasis.low];
-
-// Combination of props that should be avoided
-const excludeCombination = ({ isSelected, emphasis, hasBackground }: any) => {
-    // isSelected is only supported in medium emphasis
-    if (isSelected && emphasis && emphasis !== Emphasis.medium && emphasis !== Emphasis.low) return true;
-    // hasBackground is only supported in low emphasis
-    if (hasBackground && emphasis && emphasis !== Emphasis.low) return true;
-    return false;
-};
-
-export default {
-    title: 'LumX components/button/Button',
-    component: Button,
-    argTypes: {
-        isSelected: { control: 'boolean', if: { arg: 'emphasis', eq: 'medium' } },
-        isDisabled: { control: 'boolean' },
-        hasBackground: { control: 'boolean', if: { arg: 'emphasis', eq: 'low' } },
-        emphasis: getSelectArgType(buttonEmphasis),
-        size: getSelectArgType<ButtonSize>(buttonSizes),
-        rightIcon: iconArgType,
-        leftIcon: 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: omit(Button.defaultProps, ['theme']),
-};
-
-/**
- * Default button
- */
-export const Default = {
-    args: {
-        children: 'Default button',
-    },
-};
-
-/**
- * All combinations of size and emphasis
- */
-export const SizeAndEmphasis = {
-    args: {
-        children: 'Button',
-    },
-    argTypes: {
-        // Disable props that are used in the combinations
-        ...disableArgTypes(['emphasis', 'size']),
-    },
-    decorators: [
-        withThemedBackground(),
-        withCombinations({
-            cellStyle: { padding: '10px' },
-            combinations: {
-                sections: { key: 'theme', options: Object.values(Theme) },
-                rows: { medium: { size: Size.m }, small: { size: Size.s } },
-                cols: { key: 'emphasis', options: buttonEmphasis },
-            },
-        }),
-        withWrapper({ maxColumns: 3, itemMinWidth: 350 }, GridColumn),
-    ],
-};
-
-/**
- * Setting a href to transform the button into a link.
- */
-export const LinkButton = {
-    args: {
-        href: 'https://example.com',
-        children: 'Link button',
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                cols: {
-                    Default: {},
-                    Disabled: { isDisabled: true },
-                    AriaDisabled: { 'aria-disabled': true },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * Demo content sizing
- */
-export const ContentSizing = {
-    decorators: [
-        withCombinations({
-            colStyle: { width: '50%' },
-            cellStyle: { maxWidth: '400px', overflow: 'hidden' },
-            combinations: {
-                rows: {
-                    Default: {},
-                    FullWidth: { fullWidth: true },
-                },
-                cols: {
-                    'Short text': {
-                        children: 'Short text',
-                    },
-                    'Long text': {
-                        children: (
-                            <Text as="span" truncate>
-                                {loremIpsum('long')}
-                            </Text>
-                        ),
-                    },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * Check button style variations (color, states, emphasis, etc.)
- */
-export const StateVariations = {
-    args: {
-        children: 'Button',
-        rightIcon: mdiAccountBox,
-    },
-    argTypes: {
-        ...disableArgTypes([
-            'emphasis',
-            'hasBackground',
-            'isSelected',
-            'isDisabled',
-            'color',
-            'fullWidth',
-            'type',
-            'name',
-            'href',
-        ]),
-    },
-    decorators: [
-        withThemedBackground(),
-        withCombinations({
-            tableStyle: { width: '100%' },
-            firstColStyle: { whiteSpace: 'nowrap', width: '1%' },
-            excludeCombination,
-            combinations: {
-                // Colors
-                rows: {
-                    Default: {},
-                    'Color: red': { color: 'red' },
-                    'Theme: dark': { theme: 'dark' },
-                    'Theme: dark & color: green': { theme: 'dark', color: 'green' },
-                    Selected: { isSelected: true },
-                    'Selected & theme dark': { isSelected: true, theme: 'dark' },
-                },
-                // States
-                cols: {
-                    'Default state': {},
-                    Hovered: { isHovered: true },
-                    Active: { isActive: true },
-                    Focused: { isFocused: true },
-                    Disabled: { isDisabled: true },
-                    AriaDisabled: { 'aria-disabled': true },
-                },
-                // Emphasis/Background
-                sections: {
-                    'Default (emphasis high)': {},
-                    'Emphasis medium': { emphasis: 'medium' },
-                    'Emphasis low': { emphasis: 'low' },
-                    'Full width': { fullWidth: true },
-                    'Emphasis low + has background': { emphasis: 'low', hasBackground: true },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * Demo button LumX CSS theming variable
- */
-export const Theming = {
-    args: { children: 'Label' },
-    argTypes: {
-        ...disableArgTypes(['isDisabled', 'href', 'name', 'type', 'emphasis']),
-    },
-    decorators: [
-        withThemedBackground(),
-        withCombinations({
-            excludeCombination,
-            combinations: {
-                // States
-                cols: {
-                    Default: {},
-                    Hovered: { isHovered: true },
-                    Active: { isActive: true },
-                    Focused: { isFocused: true },
-                    Disabled: { isDisabled: true },
-                    AriaDisabled: { 'aria-disabled': true },
-                },
-                rows: {
-                    Default: {},
-                    Selected: { isSelected: true },
-                    'Has background': { hasBackground: true },
-                },
-            },
-        }),
-        withTheming({
-            properties: pick(DESIGN_TOKENS, ['button']),
-            values: `
-            --lumx-button-height: 50px;
-            --lumx-button-border-radius: 2px;
-
-            /////////////
-            --lumx-button-emphasis-high-state-default-padding-horizontal: 10px;
-            --lumx-button-emphasis-high-state-default-border-width: 2px;
-            --lumx-button-emphasis-high-state-hover-padding-horizontal: 15px;
-            --lumx-button-emphasis-high-state-hover-border-width: 4px;
-            --lumx-button-emphasis-high-state-active-padding-horizontal: 20px;
-            --lumx-button-emphasis-high-state-active-border-width: 6px;
-
-            --lumx-button-emphasis-high-state-default-theme-light-background-color: darkred;
-            --lumx-button-emphasis-high-state-default-theme-light-color: green;
-            --lumx-button-emphasis-high-state-default-theme-light-border-color: green;
-            --lumx-button-emphasis-high-state-hover-theme-light-background-color: rebeccapurple;
-            --lumx-button-emphasis-high-state-hover-theme-light-color: yellow;
-            --lumx-button-emphasis-high-state-hover-theme-light-border-color: yellow;
-            --lumx-button-emphasis-high-state-active-theme-light-background-color: black;
-            --lumx-button-emphasis-high-state-active-theme-light-color: blue;
-            --lumx-button-emphasis-high-state-active-theme-light-border-color: blue;
-
-            --lumx-button-emphasis-high-state-default-theme-dark-background-color: rebeccapurple;
-            --lumx-button-emphasis-high-state-default-theme-dark-color: hotpink;
-            --lumx-button-emphasis-high-state-default-theme-dark-border-color: hotpink;
-            --lumx-button-emphasis-high-state-hover-theme-dark-background-color: yellow;
-            --lumx-button-emphasis-high-state-hover-theme-dark-color: blue;
-            --lumx-button-emphasis-high-state-hover-theme-dark-border-color: blue;
-            --lumx-button-emphasis-high-state-active-theme-dark-background-color: green;
-            --lumx-button-emphasis-high-state-active-theme-dark-color: red;
-            --lumx-button-emphasis-high-state-active-theme-dark-border-color: red;
-
-            /////////////
-            --lumx-button-emphasis-medium-state-default-padding-horizontal: 5px;
-            --lumx-button-emphasis-medium-state-default-border-width: 6px;
-            --lumx-button-emphasis-medium-state-hover-padding-horizontal: 10px;
-            --lumx-button-emphasis-medium-state-hover-border-width: 4px;
-            --lumx-button-emphasis-medium-state-active-padding-horizontal: 2px;
-            --lumx-button-emphasis-medium-state-active-border-width: 2px;
-
-            --lumx-button-emphasis-medium-state-default-theme-light-background-color: lightblue;
-            --lumx-button-emphasis-medium-state-default-theme-light-color: hotpink;
-            --lumx-button-emphasis-medium-state-default-theme-light-border-color: hotpink;
-            --lumx-button-emphasis-medium-state-hover-theme-light-background-color: red;
-            --lumx-button-emphasis-medium-state-hover-theme-light-color: rebeccapurple;
-            --lumx-button-emphasis-medium-state-hover-theme-light-border-color: rebeccapurple;
-            --lumx-button-emphasis-medium-state-active-theme-light-background-color: lightseagreen;
-            --lumx-button-emphasis-medium-state-active-theme-light-color: maroon;
-            --lumx-button-emphasis-medium-state-active-theme-light-border-color: maroon;
-
-            --lumx-button-emphasis-medium-state-default-theme-dark-background-color: mediumorchid;
-            --lumx-button-emphasis-medium-state-default-theme-dark-color: midnightblue;
-            --lumx-button-emphasis-medium-state-default-theme-dark-border-color: midnightblue;
-            --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: olive;
-            --lumx-button-emphasis-medium-state-hover-theme-dark-color: orangered;
-            --lumx-button-emphasis-medium-state-hover-theme-dark-border-color: orangered;
-            --lumx-button-emphasis-medium-state-active-theme-dark-background-color: salmon;
-            --lumx-button-emphasis-medium-state-active-theme-dark-color: seagreen;
-            --lumx-button-emphasis-medium-state-active-theme-dark-border-color: seagreen;
-
-            /////////////
-            --lumx-button-emphasis-selected-state-default-padding-horizontal: 5px;
-            --lumx-button-emphasis-selected-state-default-border-width: 1px;
-            --lumx-button-emphasis-selected-state-hover-padding-horizontal: 2px;
-            --lumx-button-emphasis-selected-state-hover-border-width: 2px;
-            --lumx-button-emphasis-selected-state-active-padding-horizontal: 10px;
-            --lumx-button-emphasis-selected-state-active-border-width: 3px;
-
-            --lumx-button-emphasis-selected-state-default-theme-light-background-color: yellowgreen;
-            --lumx-button-emphasis-selected-state-default-theme-light-color: bisque;
-            --lumx-button-emphasis-selected-state-default-theme-light-border-color: bisque;
-            --lumx-button-emphasis-selected-state-hover-theme-light-background-color: cadetblue;
-            --lumx-button-emphasis-selected-state-hover-theme-light-color: coral;
-            --lumx-button-emphasis-selected-state-hover-theme-light-border-color: coral;
-            --lumx-button-emphasis-selected-state-active-theme-light-background-color: darkgoldenrod;
-            --lumx-button-emphasis-selected-state-active-theme-light-color: darkslategrey;
-            --lumx-button-emphasis-selected-state-active-theme-light-border-color: darkslategrey;
-
-            --lumx-button-emphasis-selected-state-default-theme-dark-background-color: gold;
-            --lumx-button-emphasis-selected-state-default-theme-dark-color: ghostwhite;
-            --lumx-button-emphasis-selected-state-default-theme-dark-border-color: ghostwhite;
-            --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: lightcoral;
-            --lumx-button-emphasis-selected-state-hover-theme-dark-color: magenta;
-            --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: magenta;
-            --lumx-button-emphasis-selected-state-active-theme-dark-background-color: mediumslateblue;
-            --lumx-button-emphasis-selected-state-active-theme-dark-color: mistyrose;
-            --lumx-button-emphasis-selected-state-active-theme-dark-border-color: mistyrose;
-
-            /////////////
-            --lumx-button-emphasis-low-state-default-padding-horizontal: 1px;
-            --lumx-button-emphasis-low-state-default-border-width: 10px;
-            --lumx-button-emphasis-low-state-hover-padding-horizontal: 2px;
-            --lumx-button-emphasis-low-state-hover-border-width: 5px;
-            --lumx-button-emphasis-low-state-active-padding-horizontal: 3px;
-            --lumx-button-emphasis-low-state-active-border-width: 2px;
-
-            --lumx-button-emphasis-low-state-default-theme-light-background-color: rgb(from lightcyan r g b / 50%);
-            --lumx-button-emphasis-low-state-default-theme-light-color: rgb(from goldenrod r g b / 50%);
-            --lumx-button-emphasis-low-state-default-theme-light-border-color: rgb(from goldenrod r g b / 50%);
-            --lumx-button-emphasis-low-state-hover-theme-light-background-color: rgb(from darkslategray r g b / 50%);
-            --lumx-button-emphasis-low-state-hover-theme-light-color: rgb(from crimson r g b / 50%);
-            --lumx-button-emphasis-low-state-hover-theme-light-border-color: rgb(from crimson r g b / 50%);
-            --lumx-button-emphasis-low-state-active-theme-light-background-color: rgb(from blanchedalmond r g b / 50%);
-            --lumx-button-emphasis-low-state-active-theme-light-color: rgb(from firebrick r g b / 50%);
-            --lumx-button-emphasis-low-state-active-theme-light-border-color: rgb(from firebrick r g b / 50%);
-
-            --lumx-button-emphasis-low-state-default-theme-dark-background-color: rgb(from blueviolet r g b / 50%);
-            --lumx-button-emphasis-low-state-default-theme-dark-color: rgb(from chartreuse r g b / 50%);
-            --lumx-button-emphasis-low-state-default-theme-dark-border-color: rgb(from chartreuse r g b / 50%);
-            --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgb(from darkturquoise r g b / 50%);
-            --lumx-button-emphasis-low-state-hover-theme-dark-color: rgb(from goldenrod r g b / 50%);
-            --lumx-button-emphasis-low-state-hover-theme-dark-border-color: rgb(from goldenrod r g b / 50%);
-            --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgb(from magenta r g b / 50%);
-            --lumx-button-emphasis-low-state-active-theme-dark-color: rgb(from lightsteelblue r g b / 50%);
-            --lumx-button-emphasis-low-state-active-theme-dark-border-color: rgb(from lightsteelblue r g b / 50%);
-        `,
-        }),
-        withCombinations({
-            combinations: {
-                sections: { key: 'emphasis', options: buttonEmphasis },
-            },
-        }),
-        withCombinations({
-            combinations: {
-                sections: { 'Theme light': { theme: 'light' }, 'Theme dark': { theme: 'dark' } },
-            },
-        }),
-    ],
-};

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

@@ -1,127 +0,0 @@
-import React from 'react';
-
-import { mdiCheck, mdiPlus } from '@lumx/icons';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { Emphasis, Icon } from '@lumx/react';
-
-import { Button, ButtonProps } from './Button';
-
-const CLASSNAME = Button.className as string;
-
-type SetupProps = Partial<ButtonProps>;
-
-/**
- * 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(<Button {...props} />, { wrapper });
-    const button = getByClassName(document.body, CLASSNAME);
-    const buttonWrapper = queryByClassName(document.body, 'lumx-button-wrapper');
-    const icons = queryAllByClassName(button, Icon.className as string);
-    return { props, button, buttonWrapper, icons };
-};
-
-describe(`<${Button.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const label = 'Label';
-            const { button, icons } = setup({ children: label });
-            expect(button).toBe(screen.queryByRole('button', { name: label }));
-            expect(button).toHaveAttribute('type', 'button');
-            expect(button.className).toMatchInlineSnapshot(
-                '"lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--size-m lumx-button--theme-light lumx-button--variant-button"',
-            );
-            expect(icons.length).toBe(0);
-        });
-
-        it('should render icons', () => {
-            const label = 'Label';
-            const { button, icons } = setup({ children: label, rightIcon: mdiPlus, leftIcon: mdiCheck });
-            expect(button).toHaveTextContent(label);
-            expect(icons.length).toBe(2);
-        });
-
-        it('should render link', () => {
-            const label = 'Label';
-            const { button } = setup({ children: label, href: 'https://example.com' });
-            expect(button).toBe(screen.queryByRole('link', { name: label }));
-        });
-
-        it('should render emphasis low', () => {
-            const { button } = setup({ emphasis: Emphasis.low });
-            expect(button.className).toMatchInlineSnapshot(
-                '"lumx-button lumx-button--color-dark lumx-button--emphasis-low lumx-button--size-m lumx-button--variant-button"',
-            );
-        });
-
-        it('should render hasBackground', () => {
-            const label = 'Label';
-            const { buttonWrapper, button } = setup({ children: label, hasBackground: true });
-            expect(buttonWrapper).toBeInTheDocument();
-            expect(button).toBe(within(buttonWrapper as any).queryByRole('button', { name: label }));
-        });
-    });
-
-    describe('Disabled state', () => {
-        it('should render disabled button', async () => {
-            const onClick = jest.fn();
-            const { button } = setup({ children: 'Label', disabled: true, onClick });
-            expect(button).toHaveAttribute('disabled');
-            await userEvent.click(button);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should render disabled link', async () => {
-            const onClick = jest.fn();
-            const { button } = setup({ children: 'Label', disabled: true, href: 'https://example.com', onClick });
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
-            expect(button).toHaveAttribute('disabled');
-            await userEvent.click(button);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should render aria-disabled button', async () => {
-            const onClick = jest.fn();
-            const { button } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(button).toHaveAttribute('aria-disabled');
-            await userEvent.click(button);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should render aria-disabled link', async () => {
-            const onClick = jest.fn();
-            const { button } = setup({
-                children: 'Label',
-                'aria-disabled': true,
-                href: 'https://example.com',
-                onClick,
-            });
-            expect(button).toHaveAccessibleName('Label');
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
-            expect(button).toHaveAttribute('aria-disabled', 'true');
-            await userEvent.click(button);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'button',
-        forwardAttributes: 'button',
-        forwardRef: 'button',
-        applyTheme: {
-            affects: [{ element: 'button' }, { not: { element: 'icons' } }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-            defaultProps: { rightIcon: mdiPlus, leftIcon: mdiCheck },
-        },
-    });
-});

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',
-    });
-});