@lumx/react 3.0.7 → 3.1.0

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

@@ -0,0 +1,74 @@
+import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import React, { ReactElement } from 'react';
+
+import { TabPanel, TabPanelProps } from './TabPanel';
+import { setupTabProviderMocks } from './test.mocks';
+
+const CLASSNAME = TabPanel.className as string;
+
+// Mock useTabProviderContext.
+jest.mock('./state', () => {
+    const state = jest.requireActual('./state');
+    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
+});
+
+type SetupProps = Partial<TabPanelProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+    const props: TabPanelProps = { ...propsOverride, children: 'Tab panel content' };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<TabPanel {...props} />);
+
+    return { props, wrapper };
+};
+
+describe(`<${TabPanel.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render correctly', () => {
+            setupTabProviderMocks({ index: 1 });
+            const { wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+
+        it('should render isActive state', () => {
+            setupTabProviderMocks({ index: 2, isActive: true });
+            const { wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('should not render children when not active and lazy', () => {
+            setupTabProviderMocks({ isLazy: true, isActive: false });
+            const { wrapper } = setup();
+            expect(wrapper.find('div').props().children).toBeFalsy();
+        });
+
+        it('should render children when active and lazy', () => {
+            setupTabProviderMocks({ isLazy: true, isActive: true });
+            const { wrapper } = setup();
+            expect(wrapper.find('div').props().children).toBeTruthy();
+        });
+
+        it('should render children when not active and not lazy', () => {
+            setupTabProviderMocks({ isActive: false, isLazy: false });
+            const { wrapper } = setup();
+            expect(wrapper.find('div').props().children).toBeTruthy();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(
+        (...args: any[]) => {
+            setupTabProviderMocks();
+            return setup(...args);
+        },
+        { className: 'wrapper', prop: 'wrapper' },
+        { className: CLASSNAME },
+    );
+});

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

@@ -0,0 +1,65 @@
+import { useTabProviderContext } from '@lumx/react/components/tabs/state';
+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, { forwardRef } from 'react';
+
+/**
+ * Defines the props of the component.
+ */
+export interface TabPanelProps extends GenericProps {
+    /** Native id property */
+    id?: string;
+    /** Whether the tab is active or not. */
+    isActive?: boolean;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'TabPanel';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = `${CSS_PREFIX}-tab-panel`;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<TabPanelProps> = {};
+
+/**
+ * TabPanel component.
+ *
+ * Implements WAI-ARIA `tabpanel` 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 TabPanel: Comp<TabPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;
+
+    const state = useTabProviderContext('tabPanel', id);
+    const isActive = propIsActive || state?.isActive;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            id={state?.tabPanelId}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
+            role="tabpanel"
+            tabIndex={0}
+            aria-labelledby={state?.tabId}
+        >
+            {(!state?.isLazy || isActive) && children}
+        </div>
+    );
+});
+TabPanel.displayName = COMPONENT_NAME;
+TabPanel.className = CLASSNAME;
+TabPanel.defaultProps = DEFAULT_PROPS;

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

@@ -0,0 +1,42 @@
+import { Tab, TabList, TabPanel, TabProvider } from '@lumx/react';
+import { mount } from 'enzyme';
+import 'jest-enzyme';
+import React from 'react';
+
+describe(`<${TabProvider.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render', () => {
+            const wrapper = mount(
+                <TabProvider>
+                    <TabList aria-label="Tab list">
+                        <Tab label="tab 1" />
+                        <Tab label="tab 1" />
+                    </TabList>
+
+                    <TabPanel>Tab 1 content</TabPanel>
+                    <TabPanel>Tab 2 content</TabPanel>
+                </TabProvider>,
+            );
+            const tabs = wrapper.find(Tab).find('button');
+            const firstTab = tabs.get(0);
+            const secondTab = tabs.get(1);
+
+            const tabPanels = wrapper.find(TabPanel).find('div');
+            const firstTabPanel = tabPanels.get(0);
+            const secondTabPanel = tabPanels.get(1);
+
+            // First tab is selected.
+            expect(firstTab.props['aria-selected']).toBe(true);
+            expect(secondTab.props['aria-selected']).toBe(false);
+
+            // Tab id and tab panel aria-labelledby by should match
+            expect(firstTab.props.id).toBe(firstTabPanel.props['aria-labelledby']);
+            expect(secondTab.props.id).toBe(secondTabPanel.props['aria-labelledby']);
+
+            // Tab panel id and tab aria-controls by should match
+            expect(firstTabPanel.props.id).toBe(firstTab.props['aria-controls']);
+            expect(secondTabPanel.props.id).toBe(secondTab.props['aria-controls']);
+        });
+    });
+});

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

@@ -0,0 +1,59 @@
+import React, { ReactNode, useEffect, useReducer } from 'react';
+import { INIT_STATE, TabProviderContext, reducer } from './state';
+
+export interface TabProviderProps {
+    /** Active tab index. */
+    activeTabIndex?: number;
+    /** Tab provider children. */
+    children: ReactNode;
+    /** Tab panel children should not render if the tab panel is hidden. */
+    isLazy?: boolean;
+    /** Activate tabs on focus. */
+    shouldActivateOnFocus?: boolean;
+
+    /** Tab change callback. */
+    onChange?(index: number): void;
+}
+
+const DEFAULT_PROPS: Partial<TabProviderProps> = {
+    isLazy: INIT_STATE.isLazy,
+    shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,
+};
+
+/**
+ * This component provides a context in which tabs can be defined and linked to their tab panel.
+ *
+ * It does not produce any markup so you can wrap it around any React elements and then split the TabList and TabPanel
+ * components in the react tree.
+ *
+ * @param  props React component props.
+ * @return React element.
+ */
+export const TabProvider: React.FC<TabProviderProps> = (props) => {
+    const { children, onChange, ...propState } = props;
+    const [state, dispatch] = useReducer(reducer, INIT_STATE);
+
+    // On prop state change => dispatch update.
+    useEffect(
+        () => {
+            dispatch({ type: 'update', payload: propState });
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [dispatch, ...Object.values(propState)],
+    );
+
+    // On active tab index state change => send update to the onChange.
+    useEffect(
+        () => {
+            if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {
+                return;
+            }
+            onChange(state.activeTabIndex);
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [onChange, state.activeTabIndex],
+    );
+
+    return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;
+};
+TabProvider.defaultProps = DEFAULT_PROPS;

package/dist/src/components/tabs/Tabs.stories.tsx

@@ -0,0 +1,134 @@
+import { Button, Dialog, Tab, TabList, TabPanel, TabProvider } from '@lumx/react';
+import { number } from '@storybook/addon-knobs';
+import get from 'lodash/get';
+import times from 'lodash/times';
+import React, { useState } from 'react';
+
+export default { title: 'LumX components/tabs' };
+
+/* Control active tab externally (with activate tab on focus). */
+export const Controlled = ({ theme }: any) => {
+    const [activeTab, setActiveTab] = useState(1);
+    const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(get(evt, 'target.value', '0'), 10));
+
+    const [isLazy, setIsLazy] = useState(true);
+    const changeIsLazy = (evt: any) => setIsLazy(get(evt, 'target.checked'));
+
+    const [shouldActivateOnFocus, setShouldActivateOnFocus] = useState(true);
+    const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(get(evt, 'target.checked'));
+
+    return (
+        <>
+            <div>
+                Active tab index:
+                <input type="number" min={0} max={2} value={activeTab} onChange={changeActiveTabIndex} />
+            </div>
+
+            <div>
+                Lazy render tab panel content:
+                <input type="checkbox" checked={isLazy} onChange={changeIsLazy} />
+            </div>
+
+            <div>
+                Activate tab on focus:
+                <input type="checkbox" checked={shouldActivateOnFocus} onChange={changeShouldActivateOnFocus} />
+            </div>
+            <TabProvider
+                activeTabIndex={activeTab}
+                onChange={setActiveTab}
+                isLazy={isLazy}
+                shouldActivateOnFocus={shouldActivateOnFocus}
+            >
+                <TabList theme={theme} aria-label="Tab list">
+                    <Tab label="Tab a" />
+                    <Tab label="Tab b" />
+                    <Tab label="Tab c" />
+                </TabList>
+
+                <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
+                <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
+                <TabPanel className="lumx-spacing-padding-huge">Tab c content</TabPanel>
+            </TabProvider>
+        </>
+    );
+};
+
+/* Control active tab internally (with activate tab on focus). */
+export const NotControlled = ({ theme }: any) => {
+    return (
+        <TabProvider shouldActivateOnFocus onChange={console.log}>
+            <TabList theme={theme} aria-label="Tab list">
+                <Tab label="Tab a" />
+                <Tab label="Tab b" />
+            </TabList>
+            <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
+            <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
+        </TabProvider>
+    );
+};
+
+/* Display tabs far from their tab panels. */
+export const DisabledTab = ({ theme }: any) => (
+    <TabProvider shouldActivateOnFocus>
+        <TabList theme={theme} aria-label="Tab list">
+            <Tab label="Tab 1" />
+            <Tab label="Tab 2" isDisabled />
+            <Tab label="Tab 3" />
+        </TabList>
+        <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
+        <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
+        <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
+    </TabProvider>
+);
+
+/* Display tabs far from their tab panels. */
+export const SplitTabListAndTabPanels = ({ theme }: any) => {
+    const [isOpen, setOpen] = useState(true);
+    const [activeTabIndex, onChange] = useState(1);
+
+    return (
+        <TabProvider activeTabIndex={activeTabIndex} onChange={onChange} isLazy={false}>
+            <Button
+                onClick={() => {
+                    setOpen(!isOpen);
+                    onChange(1);
+                }}
+            >
+                Open dialog with tabs in footer
+            </Button>
+            <Dialog isOpen={isOpen} forceFooterDivider onClose={() => setOpen(false)}>
+                <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
+                <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
+                <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
+
+                <footer>
+                    <TabList theme={theme} aria-label="Tab list">
+                        <Tab label="Tab 1" />
+                        <Tab label="Tab 2" />
+                        <Tab label="Tab 3" />
+                    </TabList>
+                </footer>
+            </Dialog>
+        </TabProvider>
+    );
+};
+
+/* Dynamically generate tabs. */
+export const DynamicTabs = ({ theme }: any) => {
+    const tabCount = number('Tab count', 3);
+    return (
+        <TabProvider>
+            <TabList theme={theme} aria-label="Tab list">
+                {times(tabCount, (tabNumber) => (
+                    <Tab key={tabNumber} label={`Tab ${tabNumber}`} />
+                ))}
+            </TabList>
+
+            {times(tabCount, (tabNumber) => (
+                <TabPanel key={tabNumber} className="lumx-spacing-padding-huge">
+                    Tab {tabNumber} content
+                </TabPanel>
+            ))}
+        </TabProvider>
+    );
+};

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

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Tab> Snapshots and structure should render 1`] = `
+<button
+  aria-controls="tab-panel-1"
+  aria-selected={false}
+  className="lumx-tabs__link"
+  id="tab-1"
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyPress={[Function]}
+  role="tab"
+  tabIndex={-1}
+  type="button"
+>
+  <span>
+    Test Tab Label
+  </span>
+</button>
+`;
+
+exports[`<Tab> Snapshots and structure should render active state 1`] = `
+<button
+  aria-controls="tab-panel-3"
+  aria-selected={true}
+  className="lumx-tabs__link lumx-tabs__link--is-active"
+  id="tab-3"
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyPress={[Function]}
+  role="tab"
+  tabIndex={0}
+  type="button"
+>
+  <span>
+    Test Tab Label
+  </span>
+</button>
+`;
+
+exports[`<Tab> Snapshots and structure should render icon 1`] = `
+<button
+  aria-controls="tab-panel-2"
+  aria-selected={false}
+  className="lumx-tabs__link"
+  id="tab-2"
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyPress={[Function]}
+  role="tab"
+  tabIndex={-1}
+  type="button"
+>
+  <Icon
+    icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+    size="xs"
+  />
+  <span>
+    Test Tab Label
+  </span>
+</button>
+`;

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TabList> Snapshots and structure should render correctly 1`] = `
+<div
+  className="lumx-tabs lumx-tabs--layout-fixed lumx-tabs--position-left lumx-tabs--theme-light"
+>
+  <div
+    aria-label="Tab list"
+    className="lumx-tabs__links"
+    role="tablist"
+  >
+    <Tab
+      key="0"
+      label="Tab 0"
+    />
+    <Tab
+      key="1"
+      label="Tab 1"
+    />
+  </div>
+</div>
+`;

package/dist/src/components/tabs/__snapshots__/TabPanel.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TabPanel> Snapshots and structure should render correctly 1`] = `
+<div
+  aria-labelledby="tab-1"
+  className="lumx-tab-panel"
+  id="tab-panel-1"
+  role="tabpanel"
+  tabIndex={0}
+>
+  Tab panel content
+</div>
+`;
+
+exports[`<TabPanel> Snapshots and structure should render isActive state 1`] = `
+<div
+  aria-labelledby="tab-2"
+  className="lumx-tab-panel lumx-tab-panel--is-active"
+  id="tab-panel-2"
+  role="tabpanel"
+  tabIndex={0}
+>
+  Tab panel content
+</div>
+`;

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

@@ -0,0 +1,4 @@
+export * from './TabProvider';
+export * from './TabList';
+export * from './Tab';
+export * from './TabPanel';

package/dist/src/components/tabs/state.ts

@@ -0,0 +1,116 @@
+import { Dispatch, createContext, useCallback, useContext, useEffect, useMemo } from 'react';
+import { uid } from 'uid';
+
+type TabType = 'tab' | 'tabPanel';
+
+export interface State {
+    isLazy: boolean;
+    shouldActivateOnFocus: boolean;
+    activeTabIndex: number;
+    ids: Record<TabType, string[]>;
+}
+
+export const INIT_STATE: State = {
+    isLazy: true,
+    shouldActivateOnFocus: false,
+    activeTabIndex: 0,
+    ids: { tab: [], tabPanel: [] },
+};
+
+export type Action =
+    | { type: 'update'; payload: Partial<State> }
+    | { type: 'setActiveTabIndex'; payload: number }
+    | { type: 'register'; payload: { type: TabType; id: string } }
+    | { type: 'unregister'; payload: { type: TabType; id: string } };
+
+export const reducer = (state: State, action: Action): State => {
+    switch (action.type) {
+        case 'update':
+            return { ...state, ...action.payload };
+        case 'setActiveTabIndex': {
+            if (state.activeTabIndex === action.payload) {
+                return state;
+            }
+            // Change active tab index.
+            return { ...state, activeTabIndex: action.payload };
+        }
+        case 'register': {
+            const { type, id } = action.payload;
+            // Append tab/tabPanel id in state.
+            return { ...state, ids: { ...state.ids, [type]: [...state.ids[type], id] } };
+        }
+        case 'unregister': {
+            const { type, id } = action.payload;
+            const index = state.ids[type].indexOf(id);
+            if (index === -1) return state;
+            // Remove tab & tab panel at index.
+            const tabIds = [...state.ids.tab];
+            tabIds.splice(index, 1);
+            const tabPanelIds = [...state.ids.tabPanel];
+            tabPanelIds.splice(index, 1);
+            return {
+                ...state,
+                ids: { tab: tabIds, tabPanel: tabPanelIds },
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export const TabProviderContext = createContext<[State, Dispatch<Action>] | null>(null);
+
+export type TabState = Pick<Required<State>, 'isLazy' | 'shouldActivateOnFocus'> & {
+    isActive: boolean;
+    tabId: string;
+    tabPanelId: string;
+    changeToTab(): void;
+};
+
+/* eslint-disable react-hooks/rules-of-hooks */
+export const useTabProviderContext = (type: TabType, originalId?: string): undefined | TabState => {
+    const context = useContext(TabProviderContext);
+    if (!context) {
+        return undefined;
+    }
+    const [state, dispatch] = context;
+
+    // Current tab or tab panel id.
+    const id = useMemo(
+        () => originalId || `${type}-${uid()}`,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    );
+    useEffect(
+        () => {
+            // On mount: register tab or tab panel id.
+            dispatch({ type: 'register', payload: { type, id } });
+            return () => {
+                // On unmount: unregister tab or tab panel id.
+                dispatch({ type: 'unregister', payload: { type, id } });
+            };
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    );
+
+    // Find tab/tabPanel index using it's id.
+    const index = useMemo(() => state.ids[type].indexOf(id), [state.ids, type, id]);
+    const tabId = useMemo(() => state.ids.tab[index] || '', [state, index]);
+    const tabPanelId = useMemo(() => state.ids.tabPanel[index] || '', [state, index]);
+    const isActive = useMemo(() => state.activeTabIndex === index, [state, index]);
+    const changeToTab = useCallback(() => dispatch({ type: 'setActiveTabIndex', payload: index }), [dispatch, index]);
+    return {
+        isLazy: state.isLazy,
+        shouldActivateOnFocus: state.shouldActivateOnFocus,
+        tabId,
+        tabPanelId,
+        isActive,
+        changeToTab,
+    };
+};
+
+export const useTabProviderContextState = (): State | undefined => {
+    const context = useContext(TabProviderContext);
+    return context?.[0];
+};

package/dist/src/components/tabs/test.mocks.ts

@@ -0,0 +1,33 @@
+import { TabState, useTabProviderContext, useTabProviderContextState } from './state';
+
+export function setupTabProviderMocks(options: any = {}) {
+    const changeToTab = jest.fn();
+    const mockedHook = jest.fn(
+        (): TabState => {
+            const index = options.index || 0;
+            const isLazy = options.isLazy as any;
+            const shouldActivateOnFocus = options.shouldActivateOnFocus as any;
+            const isActive = options.isActive || false;
+            return {
+                isLazy,
+                shouldActivateOnFocus,
+                changeToTab,
+                tabId: `tab-${index}`,
+                tabPanelId: `tab-panel-${index}`,
+                isActive,
+            };
+        },
+    );
+    (useTabProviderContext as jest.Mock).mockImplementationOnce(mockedHook);
+
+    const mockedHook2 = jest.fn((): any => {
+        const index = options.index || 0;
+        const numberOfSteps = options.numberOfSteps || 2;
+        return {
+            ids: { tab: { length: numberOfSteps } },
+            activeTabIndex: index,
+        };
+    });
+    (useTabProviderContextState as jest.Mock).mockImplementationOnce(mockedHook2);
+    return { mockedHook, changeToTab };
+}