@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/side-navigation/SideNavigation.stories.tsx

@@ -0,0 +1,191 @@
+/* eslint-disable no-script-url */
+import React from 'react';
+
+import { mdiAccount } from '@lumx/icons';
+import { Emphasis, SideNavigation, SideNavigationItem } from '@lumx/react';
+
+export default { title: 'LumX components/side-navigation/Side Navigation' };
+
+const CustomLink: React.FC = ({ children, ...props }) =>
+    React.createElement('a', { ...props, style: { color: 'red' } }, children);
+
+export const Simple = () => (
+    <SideNavigation>
+        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
+        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
+        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
+        <SideNavigationItem
+            label="Navigation item"
+            emphasis={Emphasis.low}
+            linkProps={{ href: 'https://www.google.com' }}
+            toggleButtonProps={{ label: 'Toggle' }}
+        />
+        <SideNavigationItem
+            label="Navigation item"
+            emphasis={Emphasis.low}
+            linkProps={{ href: 'https://www.google.com/not-visited' }}
+            toggleButtonProps={{ label: 'Toggle' }}
+        />
+        <SideNavigationItem
+            label="Navigation item (custom link)"
+            emphasis={Emphasis.low}
+            linkAs={CustomLink}
+            linkProps={{ href: 'https://www.google.com/not-visited-1' }}
+            toggleButtonProps={{ label: 'Toggle' }}
+        />
+        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
+    </SideNavigation>
+);
+
+export const With3Levels = () => {
+    const [l1IsOpen, setL1IsOpen] = React.useState(true);
+    const [l2IsOpen, setL2IsOpen] = React.useState(true);
+    const toggleL1 = () => setL1IsOpen(!l1IsOpen);
+    const toggleL2 = () => setL2IsOpen(!l2IsOpen);
+
+    return (
+        <SideNavigation>
+            <SideNavigationItem
+                label="Level 1"
+                emphasis={Emphasis.high}
+                isOpen={l1IsOpen}
+                onClick={toggleL1}
+                toggleButtonProps={{ label: 'Toggle' }}
+            >
+                <SideNavigationItem
+                    label="Level 2"
+                    emphasis={Emphasis.medium}
+                    isOpen={l2IsOpen}
+                    onClick={toggleL2}
+                    toggleButtonProps={{ label: 'Toggle' }}
+                >
+                    <SideNavigationItem
+                        label="Level 3"
+                        emphasis={Emphasis.low}
+                        toggleButtonProps={{ label: 'Toggle' }}
+                    />
+                </SideNavigationItem>
+            </SideNavigationItem>
+        </SideNavigation>
+    );
+};
+
+export const With3LevelsAndIcons = () => {
+    const [l1IsOpen, setL1IsOpen] = React.useState(true);
+    const [l2IsOpen, setL2IsOpen] = React.useState(true);
+    const toggleL1 = () => setL1IsOpen(!l1IsOpen);
+    const toggleL2 = () => setL2IsOpen(!l2IsOpen);
+
+    return (
+        <SideNavigation>
+            <SideNavigationItem
+                label="Level 1"
+                emphasis={Emphasis.high}
+                isOpen={l1IsOpen}
+                onClick={toggleL1}
+                icon={mdiAccount}
+                toggleButtonProps={{ label: 'Toggle' }}
+            >
+                <SideNavigationItem
+                    label="Level 2"
+                    emphasis={Emphasis.medium}
+                    isOpen={l2IsOpen}
+                    onClick={toggleL2}
+                    icon={mdiAccount}
+                    toggleButtonProps={{ label: 'Toggle' }}
+                >
+                    <SideNavigationItem
+                        label="Level 3.1"
+                        emphasis={Emphasis.low}
+                        isSelected
+                        toggleButtonProps={{ label: 'Toggle' }}
+                    />
+                    <SideNavigationItem
+                        label="Level 3.2"
+                        emphasis={Emphasis.low}
+                        icon={mdiAccount}
+                        toggleButtonProps={{ label: 'Toggle' }}
+                    />
+                    <SideNavigationItem
+                        label="Level 3.3"
+                        emphasis={Emphasis.low}
+                        icon={mdiAccount}
+                        toggleButtonProps={{ label: 'Toggle' }}
+                    />
+                </SideNavigationItem>
+            </SideNavigationItem>
+        </SideNavigation>
+    );
+};
+
+export const With3LevelsAndMultiActions = () => {
+    const [l1IsOpen, setL1IsOpen] = React.useState(true);
+    const [l2IsOpen, setL2IsOpen] = React.useState(true);
+    const toggleL1 = () => setL1IsOpen(!l1IsOpen);
+    const toggleL2 = () => setL2IsOpen(!l2IsOpen);
+    const alertMessage = (message: string) => () => alert(message);
+
+    return (
+        <SideNavigation>
+            <SideNavigationItem
+                label="Level 1"
+                emphasis={Emphasis.high}
+                isOpen={l1IsOpen}
+                linkProps={{ href: 'javascript:alert("Level 1")' }}
+                icon={mdiAccount}
+                onActionClick={toggleL1}
+                toggleButtonProps={{ label: 'Toggle' }}
+            >
+                <SideNavigationItem
+                    label="Level 2"
+                    emphasis={Emphasis.medium}
+                    isOpen={l2IsOpen}
+                    linkProps={{ href: 'javascript:alert("Level 2")' }}
+                    onActionClick={toggleL2}
+                    toggleButtonProps={{ label: 'Toggle' }}
+                >
+                    <SideNavigationItem
+                        label="Level 3.1"
+                        emphasis={Emphasis.low}
+                        linkProps={{ href: 'javascript:alert("Level 3.1 item is clicked")' }}
+                        onActionClick={alertMessage('Level 3.1 action is clicked')}
+                        toggleButtonProps={{ label: 'Toggle' }}
+                    />
+                    <SideNavigationItem
+                        label="Level 3.2"
+                        emphasis={Emphasis.low}
+                        onClick={alertMessage('Level 3.2 item is clicked')}
+                        onActionClick={alertMessage('Level 3.2 action is clicked')}
+                        toggleButtonProps={{ label: 'Toggle' }}
+                    />
+                </SideNavigationItem>
+            </SideNavigationItem>
+        </SideNavigation>
+    );
+};
+
+/** Using closeMode="hide" keeps children in DOM on close */
+export const CloseModeHide = () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const toggleL1 = () => setIsOpen(!isOpen);
+
+    return (
+        <SideNavigation>
+            <SideNavigationItem
+                closeMode="hide"
+                label="Level 1"
+                emphasis={Emphasis.high}
+                isOpen={isOpen}
+                onClick={toggleL1}
+                toggleButtonProps={{ label: 'Toggle' }}
+            >
+                <SideNavigationItem
+                    closeMode="hide"
+                    label="Level 2"
+                    emphasis={Emphasis.medium}
+                    toggleButtonProps={{ label: 'Toggle' }}
+                />
+            </SideNavigationItem>
+        </SideNavigation>
+    );
+};

package/dist/src/components/side-navigation/SideNavigation.test.tsx

@@ -0,0 +1,52 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
+
+import { SideNavigation, SideNavigationProps } from './SideNavigation';
+
+const CLASSNAME = SideNavigation.className as string;
+
+type SetupProps = Partial<SideNavigationProps>;
+
+/**
+ * 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(<SideNavigation {...props} />);
+
+    return {
+        props,
+        root: wrapper.find(`.${CLASSNAME}`),
+        wrapper,
+    };
+};
+
+describe(`<${SideNavigation.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        // Here is an example of a basic rendering check, with snapshot.
+
+        it('should render correctly', () => {
+            const { root, wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(root).toExist();
+            expect(root).toHaveClassName(CLASSNAME);
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values. => no default props
+
+    // 3. Test events. => no events
+
+    // 4. Test conditions => no conditions
+
+    // 5. Test state => no state
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'root', prop: 'root' }, { className: CLASSNAME });
+});

package/dist/src/components/side-navigation/SideNavigation.tsx

@@ -0,0 +1,54 @@
+import React, { Children, forwardRef, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { SideNavigationItem, Theme } from '@lumx/react';
+
+import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface SideNavigationProps extends GenericProps, HasTheme {
+    /** SideNavigationItem elements. */
+    children: ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SideNavigation';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * SideNavigation component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const SideNavigation: Comp<SideNavigationProps, HTMLUListElement> = forwardRef((props, ref) => {
+    const { children, className, theme, ...forwardedProps } = props;
+    const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
+
+    return (
+        <ul
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                theme === Theme.dark && 'lumx-color-font-light-N',
+                handleBasicClasses({ prefix: CLASSNAME }),
+            )}
+        >
+            {content}
+        </ul>
+    );
+});
+SideNavigation.displayName = COMPONENT_NAME;
+SideNavigation.className = CLASSNAME;

package/dist/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -0,0 +1,175 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import without from 'lodash/without';
+
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { mdiAccount } from '@lumx/icons';
+
+import { SideNavigationItem, SideNavigationItemProps } from './SideNavigationItem';
+
+const DEFAULT_PROPS = SideNavigationItem.defaultProps as any;
+const CLASSNAME = SideNavigationItem.className as string;
+
+type SetupProps = Partial<SideNavigationItemProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+    const props: any = {
+        toggleButtonProps: { label: 'Toggle' },
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<SideNavigationItem {...props} />);
+
+    return {
+        chevron: wrapper.find(`.${CLASSNAME}__chevron`),
+        children: wrapper.find(`.${CLASSNAME}__children`),
+        icon: wrapper.find(`.${CLASSNAME}__icon`),
+        label: wrapper.find(`.${CLASSNAME}__link span`),
+        link: wrapper.find(`.${CLASSNAME}__link`),
+        props,
+        root: wrapper.find(`.${CLASSNAME}`),
+        wrapper,
+    };
+};
+
+describe(`<${SideNavigationItem.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        // Here is an example of a basic rendering check, with snapshot.
+
+        it('should render correctly', () => {
+            const { root, wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(root).toExist();
+            expect(root).toHaveClassName(CLASSNAME);
+        });
+
+        it('should render correctly with split actions', () => {
+            const { root, wrapper } = setup({ linkProps: { href: 'http://toto.com' }, onClick: () => null });
+            expect(wrapper).toMatchSnapshot();
+
+            expect(root).toExist();
+            expect(root).toHaveClassName(CLASSNAME);
+        });
+
+        it('should unmount children by default when closed', () => {
+            const { children } = setup({
+                children: <SideNavigationItem label="Child 1" toggleButtonProps={{ label: 'Toggle' }} />,
+            });
+            expect(children).not.toExist();
+        });
+
+        it('should keep children in DOM when closed and with closeMode="hide"', () => {
+            const { children } = setup({
+                closeMode: 'hide',
+                children: <SideNavigationItem key="1" label="Child 1" toggleButtonProps={{ label: 'Toggle' }} />,
+            });
+            expect(children).toExist();
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        // Here are some examples of basic props check.
+
+        it('should use default props', () => {
+            const { root } = setup();
+
+            const propNames = without(Object.keys(DEFAULT_PROPS), 'closeMode');
+            for (const prop of propNames) {
+                const className = getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] });
+                if (className) {
+                    expect(root).toHaveClassName(className);
+                }
+            }
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        const onClick: jest.Mock = jest.fn();
+
+        beforeEach(onClick.mockClear);
+
+        it('should trigger `onClick`', () => {
+            const { link } = setup({ onClick }, false);
+            link.simulate('click');
+            expect(onClick).toHaveBeenCalled();
+        });
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        // Here is an example of children types check.
+
+        const items = [
+            <SideNavigationItem key="a" label="a" toggleButtonProps={{ label: 'Toggle' }} />,
+            <SideNavigationItem key="b" label="b" toggleButtonProps={{ label: 'Toggle' }} />,
+        ];
+
+        it('should hide chevron when no children are passed', () => {
+            const { chevron } = setup({
+                children: [],
+            });
+
+            expect(chevron).not.toExist();
+        });
+
+        it('should show chevron when children are passed', () => {
+            const { chevron } = setup({
+                children: items,
+            });
+
+            expect(chevron).toExist();
+        });
+
+        it('should hide children when children are passed and isOpen is false', () => {
+            const { children } = setup({
+                children: items,
+                isOpen: false,
+            });
+
+            expect(children).not.toExist();
+        });
+
+        it('should show children when children are passed and isOpen is true', () => {
+            const { children } = setup({
+                children: items,
+                isOpen: true,
+            });
+
+            expect(children).toExist();
+        });
+
+        it('should show icon when provided', () => {
+            const { icon } = setup({
+                icon: mdiAccount,
+            });
+
+            expect(icon).toExist();
+        });
+
+        it('should add props to link when provided', () => {
+            const { link } = setup({
+                linkProps: {
+                    href: '/',
+                },
+            });
+
+            expect(link.prop('href')).toEqual('/');
+        });
+    });
+
+    // 5. Test state => no state
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'root', prop: 'root' }, { className: CLASSNAME });
+});

package/dist/src/components/side-navigation/SideNavigationItem.tsx

@@ -0,0 +1,162 @@
+import React, { Children, forwardRef, ReactNode } from 'react';
+
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+
+import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
+
+import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
+
+import { Callback, Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { onEnterPressed } from '@lumx/react/utils/event';
+import { renderLink } from '@lumx/react/utils/renderLink';
+
+/**
+ * Defines the props of the component.
+ */
+export interface SideNavigationItemProps extends GenericProps {
+    /** SideNavigationItem elements. */
+    children?: ReactNode;
+    /** Emphasis variant. */
+    emphasis?: Emphasis;
+    /** Label content. */
+    label: string | ReactNode;
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** Props to pass to the link (minus those already set by the SideNavigationItem props). */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
+    toggleButtonProps: Pick<IconButtonProps, 'label'> &
+        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+    /** On action button click callback. */
+    onActionClick?(evt: React.MouseEvent): void;
+    /** On click callback. */
+    onClick?(evt: React.MouseEvent): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SideNavigationItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<SideNavigationItemProps> = {
+    emphasis: Emphasis.high,
+    closeMode: 'unmount',
+};
+
+/**
+ * SideNavigationItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> = forwardRef((props, ref) => {
+    const {
+        children,
+        className,
+        emphasis,
+        icon,
+        isOpen,
+        isSelected,
+        label,
+        linkAs,
+        linkProps,
+        onActionClick,
+        onClick,
+        toggleButtonProps,
+        closeMode = 'unmount',
+        ...forwardedProps
+    } = props;
+
+    const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
+    const hasContent = !isEmpty(content);
+    const shouldSplitActions = Boolean(onActionClick);
+    const showChildren = hasContent && isOpen;
+
+    return (
+        <li
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    emphasis,
+                    isOpen: showChildren,
+                    isSelected,
+                    prefix: CLASSNAME,
+                }),
+            )}
+        >
+            {shouldSplitActions ? (
+                <div className={`${CLASSNAME}__wrapper`}>
+                    {renderLink(
+                        {
+                            linkAs,
+                            ...linkProps,
+                            className: `${CLASSNAME}__link`,
+                            onClick,
+                            tabIndex: 0,
+                        },
+                        icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
+                        <span>{label}</span>,
+                    )}
+
+                    <IconButton
+                        {...toggleButtonProps}
+                        className={`${CLASSNAME}__toggle`}
+                        icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                        size={Size.m}
+                        emphasis={Emphasis.low}
+                        onClick={onActionClick}
+                    />
+                </div>
+            ) : (
+                renderLink(
+                    {
+                        linkAs,
+                        ...linkProps,
+                        className: `${CLASSNAME}__link`,
+                        tabIndex: 0,
+                        onClick,
+                        onKeyDown: onClick ? onEnterPressed(onClick as Callback) : undefined,
+                    },
+                    icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
+                    <span>{label}</span>,
+                    hasContent && (
+                        <Icon
+                            className={`${CLASSNAME}__chevron`}
+                            icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                            size={Size.xs}
+                        />
+                    ),
+                )
+            )}
+
+            {(closeMode === 'hide' || showChildren) && <ul className={`${CLASSNAME}__children`}>{content}</ul>}
+        </li>
+    );
+});
+SideNavigationItem.displayName = COMPONENT_NAME;
+SideNavigationItem.className = CLASSNAME;
+SideNavigationItem.defaultProps = DEFAULT_PROPS;

package/dist/src/components/side-navigation/__snapshots__/SideNavigation.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SideNavigation> Snapshots and structure should render correctly 1`] = `
+<ul
+  className="lumx-side-navigation"
+/>
+`;

package/dist/src/components/side-navigation/__snapshots__/SideNavigationItem.test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SideNavigationItem> Snapshots and structure should render correctly 1`] = `
+<li
+  className="lumx-side-navigation-item lumx-side-navigation-item--emphasis-high"
+>
+  <a
+    className="lumx-side-navigation-item__link"
+    tabIndex={0}
+  >
+    <span />
+  </a>
+</li>
+`;
+
+exports[`<SideNavigationItem> Snapshots and structure should render correctly with split actions 1`] = `
+<li
+  className="lumx-side-navigation-item lumx-side-navigation-item--emphasis-high"
+>
+  <a
+    className="lumx-side-navigation-item__link"
+    href="http://toto.com"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+  >
+    <span />
+  </a>
+</li>
+`;

package/dist/src/components/side-navigation/index.ts

@@ -0,0 +1,2 @@
+export * from './SideNavigation';
+export * from './SideNavigationItem';