@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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

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

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