@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/table/__snapshots__/Table.test.tsx.snap

@@ -0,0 +1,263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
+<table
+  className="lumx-table lumx-table--has-dividers lumx-table--theme-light"
+  style={
+    {
+      "minWidth": 620,
+    }
+  }
+>
+  <TableHeader>
+    <TableRow>
+      <TableCell
+        isSortable={true}
+        key="dessert"
+        onHeaderClick={[Function]}
+        variant="head"
+      >
+        Dessert
+      </TableCell>
+      <TableCell
+        isSortable={true}
+        key="calories"
+        onHeaderClick={[Function]}
+        variant="head"
+        width="100"
+      >
+        Calories
+      </TableCell>
+      <TableCell
+        isSortable={true}
+        key="fat"
+        onHeaderClick={[Function]}
+        sortOrder="asc"
+        variant="head"
+        width="100"
+      >
+        Fat (g)
+      </TableCell>
+      <TableCell
+        icon="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10Z"
+        isSortable={false}
+        key="comments"
+        onHeaderClick={[Function]}
+        variant="head"
+        width="150"
+      >
+        Comments
+      </TableCell>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow
+      key="1"
+    >
+      <TableCell
+        variant="body"
+      >
+        <FlexBox
+          hAlign="center"
+          orientation="horizontal"
+        >
+          <Thumbnail
+            alt="Frozen yogurt"
+            aspectRatio="square"
+            className="lumx-spacing-margin-right-big"
+            fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+            image="/demo-assets/landscape1.jpg"
+            loading="lazy"
+            size="m"
+            theme="light"
+            variant="rounded"
+          />
+          <Link
+            color="dark"
+            href="./"
+          >
+            <span
+              className="lumx-typography-subtitle1"
+            >
+              Frozen yogurt
+            </span>
+          </Link>
+          <FlexBox
+            hAlign="center"
+            marginAuto="left"
+            orientation="horizontal"
+          >
+            <IconButton
+              emphasis="low"
+              icon="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+              label="Informations"
+              size="m"
+              theme="light"
+            />
+            <IconButton
+              emphasis="low"
+              icon="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
+              label="More options"
+              size="m"
+              theme="light"
+            />
+          </FlexBox>
+        </FlexBox>
+      </TableCell>
+      <TableCell
+        variant="body"
+      >
+        159
+      </TableCell>
+      <TableCell
+        variant="body"
+      >
+        6
+      </TableCell>
+      <TableCell
+        variant="body"
+      >
+        Lorem ipsum
+      </TableCell>
+    </TableRow>
+    <TableRow
+      key="2"
+    >
+      <TableCell
+        variant="body"
+      >
+        <FlexBox
+          hAlign="center"
+          orientation="horizontal"
+        >
+          <Thumbnail
+            alt="Ice cream sandwich"
+            aspectRatio="square"
+            className="lumx-spacing-margin-right-big"
+            fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+            image="/demo-assets/landscape2.jpg"
+            loading="lazy"
+            size="m"
+            theme="light"
+            variant="rounded"
+          />
+          <Link
+            color="dark"
+            href="./"
+          >
+            <span
+              className="lumx-typography-subtitle1"
+            >
+              Ice cream sandwich
+            </span>
+          </Link>
+          <FlexBox
+            hAlign="center"
+            marginAuto="left"
+            orientation="horizontal"
+          >
+            <IconButton
+              emphasis="low"
+              icon="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+              label="Informations"
+              size="m"
+              theme="light"
+            />
+            <IconButton
+              emphasis="low"
+              icon="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
+              label="More options"
+              size="m"
+              theme="light"
+            />
+          </FlexBox>
+        </FlexBox>
+      </TableCell>
+      <TableCell
+        variant="body"
+      >
+        237
+      </TableCell>
+      <TableCell
+        variant="body"
+      >
+        9
+      </TableCell>
+      <TableCell
+        variant="body"
+      >
+        Lorem ipsum
+      </TableCell>
+    </TableRow>
+    <TableRow
+      key="3"
+    >
+      <TableCell
+        variant="body"
+      >
+        <FlexBox
+          hAlign="center"
+          orientation="horizontal"
+        >
+          <Thumbnail
+            alt="Eclair"
+            aspectRatio="square"
+            className="lumx-spacing-margin-right-big"
+            fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+            image="/demo-assets/landscape3.jpg"
+            loading="lazy"
+            size="m"
+            theme="light"
+            variant="rounded"
+          />
+          <Link
+            color="dark"
+            href="./"
+          >
+            <span
+              className="lumx-typography-subtitle1"
+            >
+              Eclair
+            </span>
+          </Link>
+          <FlexBox
+            hAlign="center"
+            marginAuto="left"
+            orientation="horizontal"
+          >
+            <IconButton
+              emphasis="low"
+              icon="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+              label="Informations"
+              size="m"
+              theme="light"
+            />
+            <IconButton
+              emphasis="low"
+              icon="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
+              label="More options"
+              size="m"
+              theme="light"
+            />
+          </FlexBox>
+        </FlexBox>
+      </TableCell>
+      <TableCell
+        variant="body"
+      >
+        262
+      </TableCell>
+      <TableCell
+        variant="body"
+      >
+        16
+      </TableCell>
+      <TableCell
+        variant="body"
+      >
+        Lorem ipsum
+      </TableCell>
+    </TableRow>
+  </TableBody>
+</table>
+`;

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

@@ -0,0 +1,5 @@
+export * from './Table';
+export * from './TableBody';
+export * from './TableCell';
+export * from './TableHeader';
+export * from './TableRow';

package/dist/src/components/tabs/Tab.test.tsx

@@ -0,0 +1,116 @@
+import { mdiCheck } from '@lumx/icons';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import React, { ReactElement } from 'react';
+
+import { Tab, TabProps } from './Tab';
+import { setupTabProviderMocks } from './test.mocks';
+
+const CLASSNAME = Tab.className as string;
+
+// Mock useTabProviderContext.
+jest.mock('./state', () => {
+    const state = jest.requireActual('./state');
+    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
+});
+
+type SetupProps = Partial<TabProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+    const props: TabProps = { label: 'Test Tab Label', ...propsOverride };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<Tab {...props} />);
+
+    return { props, wrapper };
+};
+
+describe(`<${Tab.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render', () => {
+            setupTabProviderMocks({ index: 1 });
+            const { wrapper } = setup({});
+            expect(wrapper).toMatchSnapshot();
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+
+        it('should render icon', () => {
+            setupTabProviderMocks({ index: 2 });
+            const { wrapper } = setup({ icon: mdiCheck });
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('should render active state', () => {
+            setupTabProviderMocks({ index: 3, isActive: true });
+            const { wrapper } = setup({});
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should use the given props to add classes', () => {
+            setupTabProviderMocks();
+            const props: any = {
+                isActive: true,
+                isDisabled: true,
+            };
+            const { wrapper } = setup(props);
+
+            Object.keys(props).forEach((prop) => {
+                expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: prop, value: props[prop] }));
+            });
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        it('should trigger `onChange` when focused if the provider is configured to do so', () => {
+            const { changeToTab } = setupTabProviderMocks({ shouldActivateOnFocus: true });
+            const { wrapper } = setup({}, false);
+
+            wrapper.simulate('focus');
+            expect(changeToTab).toHaveBeenCalledTimes(1);
+        });
+
+        it('should trigger `onChange` when clicked', () => {
+            const { changeToTab } = setupTabProviderMocks();
+            const { wrapper } = setup({}, false);
+
+            wrapper.simulate('click');
+            expect(changeToTab).toHaveBeenCalledTimes(1);
+        });
+
+        it('should trigger `onChange` when pressing `enter`', () => {
+            const { changeToTab } = setupTabProviderMocks();
+            const { wrapper } = setup({}, false);
+
+            wrapper.simulate('keypress', { key: 'Enter' });
+            expect(changeToTab).toHaveBeenCalledTimes(1);
+        });
+
+        it('should not trigger `onChange` when pressing any other key', () => {
+            const { changeToTab } = setupTabProviderMocks();
+            const { wrapper } = setup({}, false);
+
+            wrapper.simulate('keypress', { key: 'a' });
+            expect(changeToTab).not.toHaveBeenCalled();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(
+        (...args: any[]) => {
+            setupTabProviderMocks();
+            return setup(...args);
+        },
+        { className: 'wrapper', prop: 'wrapper' },
+        { className: CLASSNAME },
+    );
+});

package/dist/src/components/tabs/Tab.tsx

@@ -0,0 +1,120 @@
+import { Icon, IconProps, Size } from '@lumx/react';
+import { CSS_PREFIX } from '@lumx/react/constants';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
+
+import classNames from 'classnames';
+import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
+import { useTabProviderContext } from './state';
+
+/**
+ * Defines the props of the component.
+ */
+export interface TabProps extends GenericProps {
+    /** Children are not supported. */
+    children?: never;
+    /** Icon (SVG path). */
+    icon?: IconProps['icon'];
+    /** Native id property. */
+    id?: string;
+    /** Whether the tab is active or not. */
+    isActive?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Label content. */
+    label: string | ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Tab';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = `${CSS_PREFIX}-tabs__link`;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<TabProps> = {};
+
+/**
+ * Tab component.
+ *
+ * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) => {
+    const {
+        className,
+        disabled,
+        icon,
+        id,
+        isActive: propIsActive,
+        isDisabled = disabled,
+        label,
+        onFocus,
+        onKeyPress,
+        tabIndex = -1,
+        ...forwardedProps
+    } = props;
+    const state = useTabProviderContext('tab', id);
+    const isActive = propIsActive || state?.isActive;
+
+    const changeToCurrentTab = useCallback(() => {
+        if (isDisabled) {
+            return;
+        }
+        state?.changeToTab();
+    }, [isDisabled, state]);
+
+    const handleFocus: FocusEventHandler = useCallback(
+        (event) => {
+            onFocus?.(event);
+            if (state?.shouldActivateOnFocus) {
+                changeToCurrentTab();
+            }
+        },
+        [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],
+    );
+
+    const handleKeyPress: KeyboardEventHandler = useCallback(
+        (event) => {
+            onKeyPress?.(event);
+            if (event.key !== 'Enter') {
+                return;
+            }
+            changeToCurrentTab();
+        },
+        [changeToCurrentTab, onKeyPress],
+    );
+
+    return (
+        <button
+            ref={ref}
+            {...forwardedProps}
+            type="button"
+            id={state?.tabId}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive, isDisabled }))}
+            onClick={changeToCurrentTab}
+            onKeyPress={handleKeyPress}
+            onFocus={handleFocus}
+            role="tab"
+            tabIndex={isActive ? 0 : tabIndex}
+            aria-disabled={isDisabled}
+            aria-selected={isActive}
+            aria-controls={state?.tabPanelId}
+        >
+            {icon && <Icon icon={icon} size={Size.xs} />}
+            {label && <span>{label}</span>}
+        </button>
+    );
+});
+Tab.displayName = COMPONENT_NAME;
+Tab.className = CLASSNAME;
+Tab.defaultProps = DEFAULT_PROPS;

package/dist/src/components/tabs/TabList.test.tsx

@@ -0,0 +1,80 @@
+import { Tab, Alignment } from '@lumx/react';
+
+import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import React, { ReactElement } from 'react';
+import { build, oneOf } from 'test-data-bot';
+import { TabList, TabListLayout, TabListProps } from './TabList';
+import { setupTabProviderMocks } from './test.mocks';
+
+const CLASSNAME = TabList.className as string;
+
+// Mock useTabProviderContext.
+jest.mock('./state', () => {
+    const state = jest.requireActual('./state');
+    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
+});
+
+type SetupProps = Partial<TabListProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+    const tabs = [<Tab key={0} label="Tab 0" />, <Tab key={1} label="Tab 1" />];
+    const props: TabListProps = {
+        children: tabs,
+        'aria-label': 'Tab list',
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper = renderer(<TabList {...props} />);
+
+    return { props, wrapper };
+};
+
+describe(`<${TabList.displayName}>`, () => {
+    beforeEach(() => {
+        setupTabProviderMocks();
+    });
+
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render correctly', () => {
+            const { wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(wrapper).toExist();
+            expect(wrapper).toHaveClassName(CLASSNAME);
+
+            expect(wrapper.childAt(0)).toExist();
+            expect(wrapper.childAt(0)).toHaveClassName('lumx-tabs__links');
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should use the given props', () => {
+            const modifiedPropsBuilder: () => SetupProps = build('props').fields({
+                layout: TabListLayout.clustered,
+                position: oneOf(Alignment.center, Alignment.right),
+            });
+
+            const modifiedProps: SetupProps = modifiedPropsBuilder();
+
+            const { wrapper } = setup({ ...modifiedProps });
+
+            Object.keys(modifiedProps).forEach((prop) => {
+                expect(wrapper).toHaveClassName(
+                    getBasicClass({ prefix: CLASSNAME, type: prop, value: modifiedProps[prop] }),
+                );
+            });
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/tabs/TabList.tsx

@@ -0,0 +1,82 @@
+import { Alignment, Theme } from '@lumx/react';
+import { CSS_PREFIX } from '@lumx/react/constants';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+
+import classNames from 'classnames';
+import React, { forwardRef, ReactNode } from 'react';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
+
+export enum TabListLayout {
+    clustered = 'clustered',
+    fixed = 'fixed',
+}
+
+/**
+ * Defines the props of the component.
+ */
+export interface TabListProps extends GenericProps, HasTheme {
+    /** ARIA label (purpose of the set of tabs). */
+    ['aria-label']: string;
+    /** Tab list. */
+    children: ReactNode;
+    /** Layout of the tabs in the list. */
+    layout?: TabListLayout;
+    /** Position of the tabs in the list (requires 'clustered' layout). */
+    position?: Alignment;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'TabList';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = `${CSS_PREFIX}-tabs`;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<TabListProps> = {
+    layout: TabListLayout.fixed,
+    position: Alignment.left,
+    theme: Theme.light,
+};
+
+/**
+ * TabList component.
+ *
+ * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const TabList: Comp<TabListProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { 'aria-label': ariaLabel, children, className, layout, position, theme, ...forwardedProps } = props;
+    const tabListRef = React.useRef(null);
+    useRovingTabIndex({
+        parentRef: tabListRef,
+        elementSelector: '[role="tab"]',
+        keepTabIndex: false,
+        extraDependencies: [children],
+    });
+
+    return (
+        <div
+            ref={mergeRefs(ref, tabListRef)}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, layout, position, theme }))}
+        >
+            <div className={`${CLASSNAME}__links`} role="tablist" aria-label={ariaLabel}>
+                {children}
+            </div>
+        </div>
+    );
+});
+TabList.displayName = COMPONENT_NAME;
+TabList.className = CLASSNAME;
+TabList.defaultProps = DEFAULT_PROPS;