@lumx/react 3.0.7-alpha.2 → 3.0.7-alpha.4

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

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

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

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

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

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

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

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

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