@lumx/react 3.0.7 → 3.1.0

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

@@ -0,0 +1,184 @@
+import React, { cloneElement, forwardRef, useMemo, useRef } from 'react';
+
+import classNames from 'classnames';
+
+import { List, ListProps } from '@lumx/react/components/list/List';
+import { Offset, Placement, Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
+import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
+import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface DropdownProps extends GenericProps {
+    /**
+     * Reference to the element around which the dropdown is placed.
+     * @see {@link PopoverProps#anchorRef}
+     */
+    anchorRef: PopoverProps['anchorRef'];
+    /** Dropdown content. */
+    children: React.ReactNode;
+    /**
+     * Whether a click anywhere out of the Dropdown would close it or not.
+     * @see {@link PopoverProps#closeOnClickAway}
+     */
+    closeOnClickAway?: boolean;
+    /**
+     * Whether to close the Dropdown when clicking in it or not.
+     */
+    closeOnClick?: boolean;
+    /**
+     * Whether an escape key press would close the Dropdown or not.
+     * @see {@link PopoverProps#closeOnEscape}
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Manage dropdown width:
+     *   - `maxWidth`: dropdown not bigger than anchor
+     *   - `minWidth` or `true`: dropdown not smaller than anchor
+     *   - `width`: dropdown equal to the anchor.
+     * @see {@link PopoverProps#fitToAnchorWidth}
+     */
+    fitToAnchorWidth?: PopoverProps['fitToAnchorWidth'];
+    /**
+     * Whether the dropdown should shrink to fit within the viewport height or not.
+     * @see {@link PopoverProps#fitWithinViewportHeight}
+     */
+    fitWithinViewportHeight?: boolean;
+    /**
+     * Whether the dropdown should be displayed or not. Useful to control the Dropdown from outside the component.
+     * @see {@link PopoverProps#isOpen}
+     */
+    isOpen: boolean;
+    /**
+     * Offset applied to the Dropdown position.
+     * @see {@link PopoverProps#offset}
+     */
+    offset?: Offset;
+    /**
+     * Preferred Dropdown placement against the anchor element.
+     * @see {@link PopoverProps#placement}
+     */
+    placement?: Placement;
+    /** Whether the focus should be set on the list when the dropdown is open or not. */
+    shouldFocusOnOpen?: boolean;
+    /** Whether the dropdown should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+    usePortal?: boolean;
+    /** Whether the focus should go back on the anchor when dropdown closes and focus is within. */
+    focusAnchorOnClose?: boolean;
+    /**
+     * Z-axis position.
+     * @see {@link PopoverProps#zIndex}
+     */
+    zIndex?: number;
+    /**
+     * On close callback.
+     * @see {@link PopoverProps#onClose}
+     */
+    onClose?(): void;
+    /** On scroll end callback. */
+    onInfiniteScroll?(): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Dropdown';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<DropdownProps> = {
+    closeOnClick: true,
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    fitToAnchorWidth: true,
+    fitWithinViewportHeight: true,
+    placement: Placement.BOTTOM_START,
+    shouldFocusOnOpen: true,
+    focusAnchorOnClose: true,
+};
+
+/**
+ * Dropdown component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        anchorRef,
+        children,
+        className,
+        closeOnClick,
+        closeOnClickAway,
+        closeOnEscape,
+        fitToAnchorWidth,
+        fitWithinViewportHeight,
+        isOpen,
+        offset,
+        focusAnchorOnClose,
+        onClose,
+        onInfiniteScroll,
+        placement,
+        shouldFocusOnOpen,
+        zIndex,
+        ...forwardedProps
+    } = props;
+    const innerRef = useRef<HTMLDivElement>(null);
+    const listElement = useRef(null);
+
+    useInfiniteScroll(innerRef, onInfiniteScroll);
+
+    const popperElement = useMemo(() => {
+        return !Array.isArray(children) && isComponent(List)(children)
+            ? cloneElement<ListProps>(children, {
+                  ...children.props,
+                  ref: listElement,
+                  onClick(evt: MouseEvent) {
+                      children.props.onClick?.(evt);
+
+                      if (closeOnClick) {
+                          onClose?.();
+                      }
+                  },
+                  isClickable: true,
+              })
+            : children;
+    }, [children, closeOnClick, onClose]);
+
+    return isOpen ? (
+        <Popover
+            ref={ref}
+            {...forwardedProps}
+            focusAnchorOnClose={focusAnchorOnClose}
+            anchorRef={anchorRef}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+            elevation={0 as any}
+            closeOnClickAway={closeOnClickAway}
+            closeOnEscape={closeOnEscape}
+            fitToAnchorWidth={fitToAnchorWidth}
+            fitWithinViewportHeight={fitWithinViewportHeight}
+            focusElement={shouldFocusOnOpen ? listElement : undefined}
+            isOpen={isOpen}
+            offset={offset}
+            onClose={onClose}
+            placement={placement}
+            zIndex={zIndex}
+        >
+            <div className={`${CLASSNAME}__menu`} ref={innerRef}>
+                {popperElement}
+            </div>
+        </Popover>
+    ) : null;
+});
+Dropdown.displayName = COMPONENT_NAME;
+Dropdown.className = CLASSNAME;
+Dropdown.defaultProps = DEFAULT_PROPS;

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Dropdown> Snapshots and structure should render correctly 1`] = `
+<Popover
+  anchorRef={
+    {
+      "current": null,
+    }
+  }
+  className="lumx-dropdown"
+  closeOnClickAway={true}
+  closeOnEscape={true}
+  elevation={0}
+  fitToAnchorWidth={true}
+  fitWithinViewportHeight={true}
+  focusAnchorOnClose={true}
+  focusElement={
+    {
+      "current": null,
+    }
+  }
+  isOpen={true}
+  placement="bottom-start"
+  usePortal={true}
+  zIndex={9999}
+>
+  <div
+    className="lumx-dropdown__menu"
+  >
+    <div>
+      This is the content of the dropdown
+    </div>
+  </div>
+</Popover>
+`;

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

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

package/dist/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { queryByRole, render } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import userEvent from '@testing-library/user-event';
+import { ExpansionPanel, ExpansionPanelProps } from '.';
+
+const CLASSNAME = ExpansionPanel.className as string;
+
+type SetupProps = Partial<ExpansionPanelProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}) => {
+    const props: ExpansionPanelProps = {
+        toggleButtonProps: { label: 'Toggle' },
+        ...propsOverride,
+    };
+    const { container } = render(<ExpansionPanel {...props} />);
+
+    return {
+        container,
+        element: getByClassName(container, CLASSNAME),
+        query: {
+            toggleButton: () => queryByRole(container, 'button', { name: /Toggle/i }),
+            header: () => queryByClassName(container, `${CLASSNAME}__header`),
+            content: () => queryByClassName(container, `${CLASSNAME}__wrapper`),
+        },
+        props,
+    };
+};
+
+describe(`<${ExpansionPanel.displayName}>`, () => {
+    describe('Render', () => {
+        it('should render default', () => {
+            const { element, query } = setup();
+            expect(element).toBeInTheDocument();
+            expect(element).toHaveClass(CLASSNAME);
+            expect(element).toHaveClass(`${CLASSNAME}--is-close`);
+            expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
+
+            // Header is visible
+            expect(query.header()).toBeInTheDocument();
+
+            // Content is not visible
+            expect(query.content()).not.toBeInTheDocument();
+
+            expect(query.toggleButton()).toHaveAttribute('aria-expanded', 'false');
+        });
+
+        it('should render open', () => {
+            const { query } = setup({ isOpen: true });
+
+            // Content is visible
+            expect(query.content()).toBeInTheDocument();
+
+            expect(query.toggleButton()).toHaveAttribute('aria-expanded', 'true');
+        });
+
+        it('should show label', () => {
+            const labelText = 'Label text';
+            const { query } = setup({ label: labelText });
+
+            expect(query.header()).toHaveTextContent(labelText);
+        });
+
+        it('should show header instead of label', () => {
+            const labelText = 'Label text';
+            const headerText = 'Header text';
+            const { query } = setup({ label: labelText, children: <header>{headerText}</header> });
+
+            expect(query.header()).toHaveTextContent(headerText);
+        });
+    });
+
+    describe('Events', () => {
+        const onOpen: jest.Mock = jest.fn();
+        const onClose: jest.Mock = jest.fn();
+        const onToggleOpen: jest.Mock = jest.fn();
+
+        beforeEach(onOpen.mockClear);
+        beforeEach(onClose.mockClear);
+        beforeEach(onToggleOpen.mockClear);
+
+        it('should open on click', async () => {
+            const { query } = setup({ isOpen: false, onOpen, onClose, onToggleOpen });
+
+            // Content is not visible
+            expect(query.content()).not.toBeInTheDocument();
+
+            // Click on toggle button
+            await userEvent.click(query.toggleButton() as any);
+            expect(onOpen).toHaveBeenCalled();
+            expect(onClose).not.toHaveBeenCalled();
+            expect(onToggleOpen).toHaveBeenCalledWith(true);
+        });
+
+        it('should close on click', async () => {
+            const { query } = setup({ isOpen: true, onOpen, onClose, onToggleOpen });
+
+            // Content is visible
+            expect(query.content()).toBeInTheDocument();
+
+            // Click on header
+            await userEvent.click(query.header() as any);
+            expect(onOpen).not.toHaveBeenCalled();
+            expect(onClose).toHaveBeenCalled();
+            expect(onToggleOpen).toHaveBeenCalledWith(false);
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
+});

package/dist/src/components/expansion-panel/ExpansionPanel.tsx

@@ -0,0 +1,170 @@
+import React, { Children, forwardRef, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
+
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import isFunction from 'lodash/isFunction';
+
+import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
+import { Callback, Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+
+/**
+ * Defines the props of the component.
+ */
+export interface ExpansionPanelProps extends GenericProps, HasTheme {
+    /** Whether the expansion panel has a background. */
+    hasBackground?: boolean;
+    /** Whether the header has a divider. */
+    hasHeaderDivider?: boolean;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Label text (overwritten if a `<header>` is provided in the children). */
+    label?: string;
+    /** On open callback. */
+    onOpen?: Callback;
+    /** On close callback. */
+    onClose?: Callback;
+    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
+    toggleButtonProps: Pick<IconButtonProps, 'label'> &
+        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
+    /** On toggle open or close callback. */
+    onToggleOpen?(shouldOpen: boolean): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ExpansionPanel';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {
+    theme: Theme.light,
+};
+
+const isDragHandle = isComponent(DragHandle);
+const isHeader = isComponent('header');
+const isFooter = isComponent('footer');
+
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        className,
+        children: anyChildren,
+        hasBackground,
+        hasHeaderDivider,
+        isOpen,
+        label,
+        onClose,
+        onOpen,
+        onToggleOpen,
+        theme,
+        toggleButtonProps,
+        ...forwardedProps
+    } = props;
+
+    const children: ReactNode[] = Children.toArray(anyChildren);
+
+    // Partition children by types.
+    const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
+
+    // Either take the header in children or create one with the label.
+    const headerProps: PropsWithChildren<any> = React.isValidElement(header) ? header.props : {};
+    const headerContent = !isEmpty(headerProps.children) ? (
+        headerProps.children
+    ) : (
+        <span className={`${CLASSNAME}__label`}>{label}</span>
+    );
+
+    const toggleOpen = () => {
+        const shouldOpen = !isOpen;
+        if (isFunction(onOpen) && shouldOpen) {
+            onOpen();
+        }
+        if (isFunction(onClose) && !shouldOpen) {
+            onClose();
+        }
+        if (isFunction(onToggleOpen)) {
+            onToggleOpen(shouldOpen);
+        }
+    };
+
+    const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+
+    const rootClassName = classNames(
+        className,
+        handleBasicClasses({
+            hasBackground,
+            hasHeader: Boolean(!isEmpty(headerProps.children)),
+            hasHeaderDivider,
+            isClose: !isOpen,
+            isDraggable: Boolean(dragHandle),
+            isOpen,
+            prefix: CLASSNAME,
+            theme,
+        }),
+    );
+
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const isContentVisible = (): boolean => get(wrapperRef.current, 'clientHeight', 0) > 0;
+
+    // Switch max height on/off to activate the CSS transition (updates when children changes).
+    const [maxHeight, setMaxHeight] = useState('0');
+    useEffect(() => {
+        const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
+        setMaxHeight(`${height}px`);
+    }, [children, isOpen]);
+
+    return (
+        <section ref={ref} {...forwardedProps} className={rootClassName}>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+            <header className={`${CLASSNAME}__header`} onClick={toggleOpen}>
+                {dragHandle && <div className={`${CLASSNAME}__header-drag`}>{dragHandle}</div>}
+
+                <div {...headerProps} className={`${CLASSNAME}__header-content`}>
+                    {headerContent}
+                </div>
+
+                <div className={`${CLASSNAME}__header-toggle`}>
+                    <IconButton
+                        {...toggleButtonProps}
+                        color={color}
+                        emphasis={Emphasis.low}
+                        icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                        aria-expanded={isOpen || 'false'}
+                    />
+                </div>
+            </header>
+
+            {(isOpen || isContentVisible()) && (
+                <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }}>
+                    <div className={`${CLASSNAME}__container`} ref={wrapperRef}>
+                        <div className={`${CLASSNAME}__content`}>{content}</div>
+
+                        {footer && <div className={`${CLASSNAME}__footer`}>{footer}</div>}
+                    </div>
+                </div>
+            )}
+        </section>
+    );
+});
+ExpansionPanel.displayName = COMPONENT_NAME;
+ExpansionPanel.className = CLASSNAME;
+ExpansionPanel.defaultProps = DEFAULT_PROPS;

package/dist/src/components/expansion-panel/index.ts

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

package/dist/src/components/flag/Flag.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+
+import { mdiHeart } from '@lumx/icons';
+import { ColorPalette, Flag } from '@lumx/react';
+
+export default { title: 'LumX components/flag/Flag' };
+
+export const defaultProps = ({ theme }: any) => <Flag label={text('Label', 'hearing')} theme={theme} />;
+export const withIcon = ({ theme }: any) => <Flag icon={mdiHeart} label={text('Label', 'hearing')} theme={theme} />;
+export const withColor = ({ theme }: any) => {
+    return (
+        <>
+            <Flag color={ColorPalette.blue} icon={mdiHeart} label="blue" theme={theme} />
+            <Flag color={ColorPalette.dark} icon={mdiHeart} label="dark" theme={theme} />
+            <Flag color={ColorPalette.green} icon={mdiHeart} label="green" theme={theme} />
+            <Flag color={ColorPalette.primary} icon={mdiHeart} label="primary" theme={theme} />
+            <Flag color={ColorPalette.red} icon={mdiHeart} label="red" theme={theme} />
+            <Flag color={ColorPalette.secondary} icon={mdiHeart} label="secondary" theme={theme} />
+            <Flag color={ColorPalette.yellow} icon={mdiHeart} label="yellow" theme={theme} />
+        </>
+    );
+};

package/dist/src/components/flag/Flag.test.tsx

@@ -0,0 +1,86 @@
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import React, { ReactElement } from 'react';
+
+import { ColorPalette, Theme } from '@lumx/react';
+import { mdiAbTesting } from '@lumx/icons';
+import { itShouldRenderStories, commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { Flag, FlagProps } from './Flag';
+import * as stories from './Flag.stories';
+
+const CLASSNAME = Flag.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propOverrides: Partial<FlagProps> = {}, shallowRendering = true) => {
+    const props = {
+        label: 'default',
+        ...propOverrides,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper = renderer(<Flag {...props} />);
+
+    return {
+        props,
+        iconEl: wrapper.find('Icon'),
+        wrapper,
+    };
+};
+
+describe(`<${Flag.displayName} />`, () => {
+    // 1. Test render via snapshot (default state of component).
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, Flag);
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        it('should use the icon', () => {
+            const { iconEl } = setup({ icon: mdiAbTesting });
+
+            expect(iconEl).toBeDefined();
+            expect(iconEl.prop('icon')).toEqual(mdiAbTesting);
+        });
+
+        it('should have correct default color', () => {
+            const { wrapper } = setup({});
+            expect(wrapper).toHaveClassName(
+                getBasicClass({
+                    prefix: CLASSNAME,
+                    type: 'color',
+                    value: ColorPalette.dark,
+                }),
+            );
+        });
+
+        it('should switch color with theme', () => {
+            const { wrapper } = setup({ theme: Theme.dark });
+            expect(wrapper).toHaveClassName(
+                getBasicClass({
+                    prefix: CLASSNAME,
+                    type: 'color',
+                    value: ColorPalette.light,
+                }),
+            );
+        });
+
+        it('should use the color', () => {
+            const color = ColorPalette.green;
+            const { wrapper } = setup({ icon: mdiAbTesting, color });
+
+            expect(wrapper).toHaveClassName(
+                getBasicClass({
+                    prefix: CLASSNAME,
+                    type: 'color',
+                    value: color,
+                }),
+            );
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/flag/Flag.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+
+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';
+
+export interface FlagProps extends GenericProps, HasTheme {
+    /** Color of the component. */
+    color?: ColorPalette;
+    /** Icon to use before the label. */
+    icon?: string;
+    /** Text label of the flag. */
+    label: string;
+}
+
+const COMPONENT_NAME = 'Flag';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const DEFAULT_PROPS: Partial<FlagProps> = {
+    theme: Theme.light,
+};
+
+/**
+ * Flag component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { label, icon, color, className, theme, ...forwardedProps } = props;
+    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+
+    return (
+        <div
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}
+            ref={ref}
+        >
+            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
+            <span className={`${CLASSNAME}__label`}>{label}</span>
+        </div>
+    );
+});
+Flag.displayName = COMPONENT_NAME;
+Flag.className = CLASSNAME;
+Flag.defaultProps = DEFAULT_PROPS;