@lumx/react 3.0.7 → 3.1.0

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

@@ -0,0 +1 @@
+export * from './Dialog';

package/dist/src/components/divider/Divider.test.tsx

@@ -0,0 +1,93 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { Theme } from '@lumx/react';
+import { Divider, DividerProps } from './Divider';
+
+const DEFAULT_PROPS = Divider.defaultProps as any;
+const CLASSNAME = Divider.className as string;
+
+type SetupProps = Partial<DividerProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+    const props: DividerProps = {
+        children: 'Label',
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<Divider {...props} />);
+
+    return {
+        hr: wrapper.find('hr'),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${Divider.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        it('should render correctly', () => {
+            const { hr, wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(hr).toExist();
+            expect(hr).toHaveClassName(CLASSNAME);
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should use default props', () => {
+            const { hr } = setup();
+
+            Object.keys(DEFAULT_PROPS).forEach((prop: string) => {
+                expect(hr).toHaveClassName(
+                    getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }),
+                );
+            });
+        });
+
+        it('should use the given `theme`', () => {
+            const testedProp = 'theme';
+            const modifiedProps: SetupProps = {
+                [testedProp]: Theme.dark,
+            };
+
+            const { hr } = setup(modifiedProps);
+
+            expect(hr).toHaveClassName(
+                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
+            );
+            expect(hr).not.toHaveClassName(
+                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: DEFAULT_PROPS[testedProp] }),
+            );
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        // Nothing to do here.
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        // Nothing to do here.
+    });
+
+    // 5. Test state.
+    describe('State', () => {
+        // Nothing to do here.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'hr', prop: 'hr' }, { className: CLASSNAME });
+});

package/dist/src/components/divider/Divider.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Theme } from '@lumx/react';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface DividerProps extends GenericProps, HasTheme {}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Divider';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<DividerProps> = {
+    theme: Theme.light,
+};
+
+/**
+ * Divider component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {
+    const { className, theme, ...forwardedProps } = props;
+
+    return (
+        <hr
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
+        />
+    );
+});
+Divider.displayName = COMPONENT_NAME;
+Divider.className = CLASSNAME;
+Divider.defaultProps = DEFAULT_PROPS;

package/dist/src/components/divider/__snapshots__/Divider.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Divider> Snapshots and structure should render correctly 1`] = `
+<hr
+  className="lumx-divider lumx-divider--theme-light"
+>
+  Label
+</hr>
+`;

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

@@ -0,0 +1 @@
+export * from './Divider';

package/dist/src/components/drag-handle/DragHandle.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { mdiDragVertical } from '@lumx/icons';
+import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface DragHandleProps extends GenericProps, HasTheme {}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'DragHandle';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * DragHandle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { className, theme, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
+        >
+            <Icon
+                icon={mdiDragVertical}
+                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}
+                size={Size.xs}
+            />
+        </div>
+    );
+});
+DragHandle.displayName = COMPONENT_NAME;
+DragHandle.className = CLASSNAME;

package/dist/src/components/drag-handle/index.ts

@@ -0,0 +1 @@
+export * from './DragHandle';

package/dist/src/components/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,216 @@
+import range from 'lodash/range';
+import React, { useRef, useState } from 'react';
+
+import { mdiHome } from '@lumx/icons';
+import {
+    Alignment,
+    Button,
+    Dropdown,
+    FlexBox,
+    IconButton,
+    List,
+    ListItem,
+    Orientation,
+    Placement,
+    Size,
+} from '@lumx/react';
+
+export default { title: 'LumX components/dropdown/Dropdown' };
+
+export const MatchAnchorWithMinWidth = () => {
+    const buttonRef1 = useRef<any>(null);
+    const buttonRef2 = useRef<any>(null);
+    return (
+        <>
+            <div>Match anchor width only if the dropdown is smaller</div>
+            <FlexBox orientation={Orientation.horizontal}>
+                <IconButton label="Home" icon={mdiHome} ref={buttonRef1} />
+                <Dropdown anchorRef={buttonRef1} isOpen>
+                    Big dropdown
+                </Dropdown>
+
+                <FlexBox marginAuto={Alignment.left}>
+                    <Button ref={buttonRef2}>Big button with long text</Button>
+                </FlexBox>
+                <Dropdown anchorRef={buttonRef2} isOpen>
+                    Small Dropdown
+                </Dropdown>
+            </FlexBox>
+        </>
+    );
+};
+
+export const LongPagePlacement = () => {
+    const anchorFirstRef = React.useRef(null);
+    const [isFirstOpen, setFirstIsOpen] = React.useState(false);
+    const toggleFirstMenu = () => setFirstIsOpen(!isFirstOpen);
+    const closeFirstMenu = () => setFirstIsOpen(false);
+
+    const onFirstMenuSelected = (item: string) => () => {
+        console.log('selected item', item);
+        closeFirstMenu();
+    };
+
+    const anchorSecondRef = React.useRef(null);
+    const [isSecondOpen, setSecondIsOpen] = React.useState(false);
+    const toggleSecondMenu = () => setSecondIsOpen(!isSecondOpen);
+    const closeSecondMenu = () => setSecondIsOpen(false);
+
+    const onSecondMenuSelected = (item: string) => () => {
+        console.log('selected item', item);
+        closeSecondMenu();
+    };
+
+    const anchorThirdRef = React.useRef(null);
+    const [isThirdOpen, setThirdIsOpen] = React.useState(false);
+    const toggleThirdMenu = () => setThirdIsOpen(!isThirdOpen);
+    const closeThirdMenu = () => setThirdIsOpen(false);
+
+    const onThirdMenuSelected = (item: string) => () => {
+        console.log('selected item', item);
+        closeThirdMenu();
+    };
+
+    return (
+        <div className="demo-grid">
+            Scroll down and open the dropdown.
+            <div style={{ marginTop: '100px' }}>
+                <Button ref={anchorFirstRef} onClick={toggleFirstMenu}>
+                    First Menu
+                </Button>
+
+                <Dropdown
+                    closeOnClickAway
+                    closeOnEscape
+                    isOpen={isFirstOpen}
+                    onClose={closeFirstMenu}
+                    placement={Placement.BOTTOM_START}
+                    anchorRef={anchorFirstRef}
+                >
+                    <List isClickable>
+                        <ListItem onItemSelected={onFirstMenuSelected('losangeles')} size={Size.tiny}>
+                            Los Angeles
+                        </ListItem>
+
+                        <ListItem onItemSelected={onFirstMenuSelected('monterrey')} size={Size.tiny}>
+                            Monterrey
+                        </ListItem>
+
+                        <ListItem onItemSelected={onFirstMenuSelected('georgetown')} size={Size.tiny}>
+                            Georgetown
+                        </ListItem>
+
+                        <ListItem onItemSelected={onFirstMenuSelected('cali')} size={Size.tiny}>
+                            Cali
+                        </ListItem>
+
+                        <ListItem onItemSelected={onFirstMenuSelected('trondheim')} size={Size.tiny}>
+                            Trondheim
+                        </ListItem>
+                    </List>
+                </Dropdown>
+            </div>
+            <div style={{ marginTop: '1000px' }}>
+                <Button ref={anchorSecondRef} onClick={toggleSecondMenu}>
+                    Second Menu
+                </Button>
+
+                <Dropdown
+                    closeOnClickAway
+                    closeOnEscape
+                    isOpen={isSecondOpen}
+                    onClose={closeSecondMenu}
+                    placement={Placement.BOTTOM_START}
+                    anchorRef={anchorSecondRef}
+                >
+                    <List isClickable>
+                        <ListItem onItemSelected={onSecondMenuSelected('losangeles')} size={Size.tiny}>
+                            Los Angeles
+                        </ListItem>
+
+                        <ListItem onItemSelected={onSecondMenuSelected('monterrey')} size={Size.tiny}>
+                            Monterrey
+                        </ListItem>
+
+                        <ListItem onItemSelected={onSecondMenuSelected('georgetown')} size={Size.tiny}>
+                            Georgetown
+                        </ListItem>
+
+                        <ListItem onItemSelected={onSecondMenuSelected('cali')} size={Size.tiny}>
+                            Cali
+                        </ListItem>
+
+                        <ListItem onItemSelected={onSecondMenuSelected('trondheim')} size={Size.tiny}>
+                            Trondheim
+                        </ListItem>
+                    </List>
+                </Dropdown>
+            </div>
+            <div style={{ marginTop: '2000px' }}>
+                <Button ref={anchorThirdRef} onClick={toggleThirdMenu}>
+                    Third Menu
+                </Button>
+
+                <Dropdown
+                    closeOnClickAway
+                    closeOnEscape
+                    isOpen={isThirdOpen}
+                    onClose={closeThirdMenu}
+                    placement={Placement.BOTTOM_START}
+                    anchorRef={anchorThirdRef}
+                >
+                    <List isClickable>
+                        <ListItem onItemSelected={onThirdMenuSelected('losangeles')} size={Size.tiny}>
+                            Los Angeles
+                        </ListItem>
+
+                        <ListItem onItemSelected={onThirdMenuSelected('monterrey')} size={Size.tiny}>
+                            Monterrey
+                        </ListItem>
+
+                        <ListItem onItemSelected={onThirdMenuSelected('georgetown')} size={Size.tiny}>
+                            Georgetown
+                        </ListItem>
+
+                        <ListItem onItemSelected={onThirdMenuSelected('cali')} size={Size.tiny}>
+                            Cali
+                        </ListItem>
+
+                        <ListItem onItemSelected={onThirdMenuSelected('trondheim')} size={Size.tiny}>
+                            Trondheim
+                        </ListItem>
+                    </List>
+                </Dropdown>
+            </div>
+        </div>
+    );
+};
+LongPagePlacement.parameters = {
+    // Disables Chromatic snapshot (not relevant for this story).
+    chromatic: { disable: true },
+};
+
+export const InfiniteScroll = () => {
+    const buttonRef = useRef(null);
+    const [items, setItems] = useState(range(10));
+    const onInfiniteScroll = () => {
+        setItems([...items, ...range(items.length, items.length + 10)]);
+    };
+
+    return (
+        <>
+            <Button ref={buttonRef}>Anchor</Button>
+            <Dropdown anchorRef={buttonRef} isOpen onInfiniteScroll={onInfiniteScroll}>
+                <List>
+                    {items.map((item) => (
+                        <ListItem key={item}>{item}</ListItem>
+                    ))}
+                </List>
+            </Dropdown>
+        </>
+    );
+};
+InfiniteScroll.parameters = {
+    // Disables Chromatic snapshot (not relevant for this story).
+    chromatic: { disable: true },
+};

package/dist/src/components/dropdown/Dropdown.test.tsx

@@ -0,0 +1,97 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+
+import { Dropdown, DropdownProps } from './Dropdown';
+
+const CLASSNAME = Dropdown.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = ({ ...propsOverride }: Partial<DropdownProps> = {}, shallowRendering = true) => {
+    const anchorRef = React.createRef<HTMLButtonElement>();
+    const props: DropdownProps = {
+        anchorRef,
+        children: <div>This is the content of the dropdown</div>,
+        isOpen: true,
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<Dropdown {...props} />);
+    return {
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${Dropdown.displayName}>`, () => {
+    // 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).toHaveClassName(CLASSNAME);
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        const onClose: jest.Mock = jest.fn();
+        let eventListeners: {
+            keydown?(evt: any): void;
+        };
+
+        beforeEach(() => {
+            document.body.addEventListener = jest.fn((type, cb) => {
+                (eventListeners as any)[type] = cb;
+            });
+            eventListeners = {};
+            onClose.mockClear();
+        });
+
+        it('should trigger `onClose` when pressing `escape` key', () => {
+            setup(
+                {
+                    closeOnEscape: true,
+                    onClose,
+                    isOpen: true,
+                },
+                false,
+            );
+
+            eventListeners.keydown?.({ key: 'Escape' });
+            expect(onClose).toHaveBeenCalled();
+        });
+
+        it('should not trigger `onClose` when pressing any other key', () => {
+            setup({ isOpen: true, onClose, closeOnEscape: true }, false);
+
+            eventListeners.keydown?.({ key: 'a' });
+            expect(onClose).not.toHaveBeenCalled();
+        });
+
+        it('should not trigger `onClose` when pressing `escape` key with `closeOnEscape` set to `false`', () => {
+            setup({ isOpen: true, onClose, closeOnEscape: false }, false);
+
+            eventListeners.keydown?.({ key: 'Escape' });
+            expect(onClose).not.toHaveBeenCalled();
+        });
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        // Nothing to do here.
+    });
+
+    // 5. Test state.
+    describe('State', () => {
+        // Nothing to do here.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});