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

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

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

@@ -0,0 +1,125 @@
+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 = vi.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 = vi.fn();
+            const { button } = setup({ children: 'Label', disabled: true, href: 'https://example.com', onClick });
+            expect(screen.queryByRole('link')).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-disabled', 'true');
+            // Simulate standard disabled state (not focusable)
+            expect(button).toHaveAttribute('tabindex', '-1');
+            await userEvent.click(button);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should render aria-disabled button', async () => {
+            const onClick = vi.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 = vi.fn();
+            const { button } = setup({
+                children: 'Label',
+                'aria-disabled': true,
+                href: 'https://example.com',
+                onClick,
+            });
+            expect(button).toHaveAccessibleName('Label');
+            expect(screen.queryByRole('link')).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

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

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

@@ -0,0 +1,41 @@
+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',
+    });
+});