@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/badge/Badge.stories.tsx

@@ -0,0 +1,45 @@
+import { mdiHeart } from '@lumx/icons';
+import { AspectRatio, Badge, ColorPalette, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
+import { select, text } from '@storybook/addon-knobs';
+import React, { Fragment } from 'react';
+
+export default { title: 'LumX components/badge/Badge' };
+
+export const WithText = () => (
+    <Badge color={select('Colors', ColorPalette, ColorPalette.blue)}>
+        <span>{text('Value', '30')}</span>
+    </Badge>
+);
+
+export const WithIcon = () => (
+    <Badge color={select('Colors', ColorPalette, ColorPalette.red)}>
+        <Icon icon={mdiHeart} />
+    </Badge>
+);
+
+export const WithThumbnail = () => (
+    <Badge color={select('Colors', ColorPalette, ColorPalette.light)}>
+        <Thumbnail
+            alt="Logo"
+            aspectRatio={AspectRatio.square}
+            image="/logo.svg"
+            size={Size.xxs}
+            variant={ThumbnailVariant.rounded}
+        />
+    </Badge>
+);
+
+export const AllColors = () => (
+    <dl>
+        {Object.values(ColorPalette).map((color) => (
+            <Fragment key={color}>
+                <dt>{color}</dt>
+                <dd>
+                    <Badge color={color}>
+                        <Icon icon={mdiHeart} />
+                    </Badge>
+                </dd>
+            </Fragment>
+        ))}
+    </dl>
+);

package/dist/src/components/badge/Badge.test.tsx

@@ -0,0 +1,91 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { Theme } from '@lumx/react';
+import { Badge, BadgeProps } from './Badge';
+
+const DEFAULT_PROPS = Badge.defaultProps as any;
+const CLASSNAME = Badge.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: Partial<BadgeProps> = {}, shallowRendering = true) => {
+    const props: BadgeProps = {
+        children: <span>30</span>,
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<Badge {...props} />);
+
+    return {
+        badge: wrapper.find(`div`),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${Badge.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render correctly', () => {
+            const { wrapper, badge } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(badge).toExist();
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should use default props', () => {
+            const { badge } = setup();
+
+            Object.keys(DEFAULT_PROPS).forEach((prop: string) => {
+                expect(badge).toHaveClassName(
+                    getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }),
+                );
+            });
+        });
+
+        it('should use the given `theme`', () => {
+            const testedProp = 'color';
+            const modifiedProps: Partial<BadgeProps> = {
+                [testedProp]: Theme.dark,
+            };
+
+            const { badge } = setup(modifiedProps);
+
+            expect(badge).toHaveClassName(
+                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
+            );
+            expect(badge).not.toHaveClassName(
+                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: DEFAULT_PROPS[testedProp] }),
+            );
+        });
+    });
+
+    // 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, { className: 'badge', prop: 'badge' }, { className: CLASSNAME });
+});

package/dist/src/components/badge/Badge.tsx

@@ -0,0 +1,55 @@
+import { ColorPalette } from '@lumx/react';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import classNames from 'classnames';
+import React, { forwardRef, ReactNode } from 'react';
+
+/**
+ * Defines the props of the component.
+ */
+export interface BadgeProps extends GenericProps {
+    /** Badge content. */
+    children?: ReactNode;
+    /** Color variant. */
+    color?: ColorPalette;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Badge';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<BadgeProps> = {
+    color: ColorPalette.primary,
+};
+
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { children, className, color, ...forwardedProps } = props;
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color }))}
+        >
+            {children}
+        </div>
+    );
+});
+Badge.displayName = COMPONENT_NAME;
+Badge.className = CLASSNAME;
+Badge.defaultProps = DEFAULT_PROPS;

package/dist/src/components/badge/__snapshots__/Badge.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Badge> Snapshots and structure should render correctly 1`] = `
+<div
+  className="lumx-badge lumx-badge--color-primary"
+>
+  <span>
+    30
+  </span>
+</div>
+`;

package/dist/src/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge';

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

@@ -0,0 +1,156 @@
+import React, { Fragment } from 'react';
+import { mdiSend } from '@lumx/icons';
+import { Button, ColorPalette, IconButton, Text } from '@lumx/react';
+import { squareImageKnob } from '@lumx/react/stories/knobs/image';
+import { buttonSize } from '@lumx/react/stories/knobs/buttonKnob';
+import { emphasis } from '@lumx/react/stories/knobs/emphasisKnob';
+import { boolean, select, text } from '@storybook/addon-knobs';
+
+export default { title: 'LumX components/button/Button' };
+
+const DEFAULT_PROPS = Button.defaultProps as any;
+
+export const SimpleButton = ({ theme }: any) => {
+    return (
+        <Button
+            aria-pressed={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
+            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
+            theme={theme}
+            rightIcon={select('Right icon', { none: undefined, mdiSend }, undefined)}
+            leftIcon={select('Left icon', { none: undefined, mdiSend }, undefined)}
+            size={buttonSize()}
+            isSelected={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
+            isDisabled={boolean('isDisabled', Boolean(DEFAULT_PROPS.isDisabled))}
+            color={select('color', ColorPalette, DEFAULT_PROPS.color)}
+            href={text('Button link', '')}
+            hasBackground={boolean('hasBackground', Boolean(DEFAULT_PROPS.hasBackground))}
+        >
+            {text('Button content', 'Simple button')}
+        </Button>
+    );
+};
+
+export const SimpleButtonWithTruncatedText = ({ theme }: any) => {
+    const buttonText =
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Potenti nullam ac tortor vitae. Lorem ipsum dolor sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Ultrices tincidunt arcu non sodales neque sodales.';
+    return (
+        <Button
+            aria-pressed={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
+            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
+            theme={theme}
+            rightIcon={select('Right icon', { none: undefined, mdiSend }, undefined)}
+            leftIcon={select('Left icon', { none: undefined, mdiSend }, undefined)}
+            size={buttonSize()}
+            isSelected={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
+            isDisabled={boolean('isDisabled', Boolean(DEFAULT_PROPS.isDisabled))}
+            color={select('color', ColorPalette, DEFAULT_PROPS.color)}
+            href={text('Button link', '')}
+            hasBackground={boolean('hasBackground', Boolean(DEFAULT_PROPS.hasBackground))}
+            fullWidth
+            title={buttonText}
+        >
+            <Text as="span" truncate>
+                {text('Button content', buttonText)}
+            </Text>
+        </Button>
+    );
+};
+
+export const WithHref = () => <Button href="https://google.com">Button with redirection</Button>;
+
+export const Disabled = () => <Button isDisabled>Disabled button</Button>;
+
+export const DisabledWithHref = () => (
+    <Button href="https://google.com" isDisabled>
+        Disabled button with redirection
+    </Button>
+);
+
+export const IconButtonWithImage = ({ theme }: any) => (
+    <div>
+        <IconButton
+            theme={theme}
+            label="Image label"
+            image={squareImageKnob()}
+            size={buttonSize()}
+            hasBackground={boolean('Has background', false)}
+            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
+            color={select('color', ColorPalette, DEFAULT_PROPS.color)}
+        />
+    </div>
+);
+
+export const FullWidthButton = () => <Button fullWidth>Full width button</Button>;
+
+/**
+ * Template story to generate all variants for button and icon button.
+ */
+const AllVariantTemplate = (Component: any, props: any) => () => {
+    // Major variants.
+    const variants = {
+        'Default (emphasis high)': {},
+        'Full width': { fullWidth: true },
+        'Emphasis medium': { emphasis: 'medium' },
+        'Emphasis low': { emphasis: 'low' },
+        'Has background (emphasis low)': { emphasis: 'low', hasBackground: true },
+        'Has background + Full width': { emphasis: 'low', hasBackground: true, fullWidth: true },
+    } as const;
+
+    // Color modifiers.
+    const colorModifiers = {
+        Default: {},
+        'Color: light': { color: 'light' },
+        'Color: dark': { color: 'dark' },
+        'Color: red': { color: 'red' },
+        'Theme: dark': { theme: 'dark' },
+    } as const;
+
+    // State modifiers.
+    const stateModifiers = {
+        'Default state': {},
+        Selected: { isSelected: true },
+        Hovered: { isHovered: true },
+        Focused: { isFocused: true },
+        Active: { isActive: true },
+        Disabled: { isDisabled: true },
+    };
+
+    return (
+        <div style={{ background: 'lightgray' }}>
+            {Object.entries(stateModifiers).map(([stateKey, state]) => (
+                <Fragment key={stateKey}>
+                    <h2>{stateKey}</h2>
+                    <table style={{ width: '100%' }}>
+                        <tr>
+                            <td style={{ whiteSpace: 'nowrap', width: 200 }} />
+                            {Object.keys(colorModifiers).map((colorKey) => (
+                                <td key={colorKey}>{colorKey}</td>
+                            ))}
+                        </tr>
+
+                        {Object.entries(variants).map(([variantKey, variant]: any) => (
+                            <tr key={variantKey}>
+                                <td>{variantKey}</td>
+                                {Object.entries(colorModifiers).map(([colorKey, color]) => (
+                                    <td key={colorKey}>
+                                        <Component {...props} {...variant} {...color} {...state} />
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </table>
+                </Fragment>
+            ))}
+        </div>
+    );
+};
+
+/**
+ * Check button style variations (color, states, emphasis, etc.)
+ */
+export const ButtonVariations = AllVariantTemplate(Button, { children: 'Button' });
+
+/**
+ * Check icon button style variations (color, states, emphasis, etc.)
+ */
+export const IconButtonVariations = AllVariantTemplate(IconButton, { label: 'Send', icon: mdiSend });

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

@@ -0,0 +1,152 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { mdiCheck, mdiChevronDown, mdiPlus } from '@lumx/icons';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+import { Button, ButtonProps } from './Button';
+
+const DEFAULT_PROPS = Button.defaultProps as any;
+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 = {}, shallowRendering = true) => {
+    const props: any = { ...propsOverride };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+
+    const wrapper: Wrapper = renderer(<Button {...props} />);
+
+    return {
+        buttonRoot: wrapper.find('ButtonRoot'),
+        icon: wrapper.find('Icon'),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${Button.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render button with label', () => {
+            const label = 'Label';
+            const { buttonRoot, icon, wrapper } = setup({
+                children: label,
+            });
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonRoot).toExist();
+
+            expect(icon).not.toExist();
+
+            expect(buttonRoot.contains(label)).toBe(true);
+        });
+
+        it('should render button with label and right icon', () => {
+            const label = 'Label';
+            const { buttonRoot, icon, wrapper } = setup({
+                children: label,
+                rightIcon: mdiChevronDown,
+            });
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonRoot).toExist();
+
+            expect(icon).toExist();
+            expect(icon.length).toEqual(1);
+
+            expect(buttonRoot.contains(label)).toBe(true);
+        });
+
+        it('should render button with label and left icon', () => {
+            const label = 'Label';
+            const { buttonRoot, icon, wrapper } = setup({
+                children: label,
+                leftIcon: mdiChevronDown,
+            });
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonRoot).toExist();
+
+            expect(icon).toExist();
+            expect(icon.length).toEqual(1);
+
+            expect(buttonRoot.contains(label)).toBe(true);
+        });
+
+        it('should render button with label and icons', () => {
+            const label = 'Label';
+            const { buttonRoot, icon, wrapper } = setup({
+                children: label,
+                leftIcon: mdiCheck,
+                rightIcon: mdiChevronDown,
+            });
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonRoot).toExist();
+
+            expect(icon).toExist();
+            expect(icon.length).toEqual(2);
+
+            expect(buttonRoot.contains(label)).toBe(true);
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should use default props', () => {
+            const { buttonRoot } = setup();
+
+            const actualProps = buttonRoot.props() as Partial<ButtonProps>;
+            expect(actualProps.variant).toEqual('button');
+            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);
+        });
+
+        it('should use the given props for class names', () => {
+            const props: Partial<ButtonProps> = {
+                leftIcon: mdiChevronDown,
+                rightIcon: mdiPlus,
+            };
+            const { wrapper, buttonRoot } = setup(props);
+            expect(wrapper).toMatchSnapshot();
+
+            expect(buttonRoot).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasLeftIcon', value: true }));
+            expect(buttonRoot).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasRightIcon', 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', () => {
+        // 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/Button.tsx

@@ -0,0 +1,81 @@
+import React, { forwardRef, ReactNode } from 'react';
+
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+
+import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
+import { Comp, isComponent } from '@lumx/react/utils/type';
+import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
+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 {
+    /** Button content. */
+    children?: ReactNode;
+    /** Left icon (SVG path). */
+    leftIcon?: string;
+    /** Right icon (SVG path). */
+    rightIcon?: string;
+    /** When `true`, the button gets as large as possible. */
+    fullWidth?: boolean;
+}
+
+/**
+ * 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,
+    theme: Theme.light,
+};
+
+/**
+ * Button component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
+    const { children, className, emphasis, leftIcon, rightIcon, size, theme, ...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) && <Icon icon={leftIcon} />}
+            {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}
+            {rightIcon && !isEmpty(rightIcon) && <Icon icon={rightIcon} />}
+        </ButtonRoot>
+    );
+});
+Button.displayName = COMPONENT_NAME;
+Button.className = CLASSNAME;
+Button.defaultProps = DEFAULT_PROPS;

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

@@ -0,0 +1,66 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { mdiPlus } from '@lumx/icons';
+import { Button, IconButton } from '@lumx/react';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+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 = {}, shallowRendering = true) => {
+    const props: ButtonGroupProps = {
+        children: (
+            <>
+                <Button>Label</Button>
+                <IconButton label="Add" icon={mdiPlus} />
+            </>
+        ),
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<ButtonGroup {...props} />);
+
+    return {
+        group: wrapper.find(`.${CLASSNAME}`),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${ButtonGroup.displayName}>`, () => {
+    // 1. Test render via snapshot (default state of component).
+    describe('Snapshots and structure', () => {
+        it('should render correctly a group button', () => {
+            const { group, wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(group).toExist();
+            expect(group).toHaveClassName(CLASSNAME);
+
+            expect(group.children().length).toEqual(2);
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    // N/A
+
+    // 3. Test events.
+    // N/A
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    // N/A
+
+    // 5. Test state.
+    // N/A
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'group', prop: 'group' }, { className: CLASSNAME });
+});