@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/toolbar/Toolbar.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface ToolbarProps extends GenericProps {
+    /** After content (placed after the label). */
+    after?: ReactNode;
+    /** Before content (placed before the label). */
+    before?: ReactNode;
+    /** Label content. */
+    label?: ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Toolbar';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<ToolbarProps> = {};
+
+/**
+ * Toolbar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Toolbar: Comp<ToolbarProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { after, before, className, label, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    hasAfter: Boolean(after),
+                    hasBefore: Boolean(before),
+                    hasLabel: Boolean(label),
+                    prefix: CLASSNAME,
+                }),
+            )}
+        >
+            {before && <div className={`${CLASSNAME}__before`}>{before}</div>}
+            {label && <div className={`${CLASSNAME}__label`}>{label}</div>}
+            {after && <div className={`${CLASSNAME}__after`}>{after}</div>}
+        </div>
+    );
+});
+Toolbar.displayName = COMPONENT_NAME;
+Toolbar.className = CLASSNAME;
+Toolbar.defaultProps = DEFAULT_PROPS;

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

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

package/dist/src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,172 @@
+import { mdiHelp, mdiPrinter } from '@lumx/icons';
+import {
+    Button,
+    Dialog,
+    Dropdown,
+    FlexBox,
+    Icon,
+    IconButton,
+    Orientation,
+    Placement,
+    Size,
+    Switch,
+    Tooltip,
+} from '@lumx/react';
+import { select, text } from '@storybook/addon-knobs';
+import noop from 'lodash/noop';
+import range from 'lodash/range';
+import React, { Fragment, useRef, useState } from 'react';
+
+export default { title: 'LumX components/tooltip/Tooltip' };
+
+export const ForceOpen = () => {
+    return (
+        <Tooltip
+            forceOpen
+            placement={select(
+                'placement',
+                [Placement.TOP, Placement.BOTTOM, Placement.RIGHT, Placement.LEFT],
+                Placement.TOP,
+            )}
+            label={text('label', 'Tooltip label')}
+        >
+            <Button>Button</Button>
+        </Tooltip>
+    );
+};
+
+export const InlineTooltip = () => (
+    <div className="lumx-spacing-margin-huge">
+        Some text with a
+        <Tooltip label="extremely complex and difficult to follow" forceOpen>
+            <abbr style={{ borderBottom: '1px dotted', margin: '0 4px' }}>convoluted</abbr>
+        </Tooltip>
+        word in it. And some text with a contextual help at the end
+        <Tooltip
+            label="A contextual help is help that is displayed in your product or web site"
+            placement={Placement.TOP}
+            forceOpen
+        >
+            <Icon icon={mdiHelp} size={Size.xxs} style={{ display: 'inline-block', verticalAlign: 'super' }} />
+        </Tooltip>
+        .
+    </div>
+);
+
+export const MultilineTooltip = () => (
+    <>
+        <Tooltip label="Only one sentence.">
+            <Button>One line</Button>
+        </Tooltip>
+        <Tooltip label={'First sentence.\nSecond sentence.\nThird sentence.\n'}>
+            <Button>Multiline</Button>
+        </Tooltip>
+    </>
+);
+
+export const EmptyTooltip = () => (
+    <>
+        <Tooltip label="">
+            <Button>Empty</Button>
+        </Tooltip>
+        <Tooltip label={false}>
+            <Button>Conditionnaly not displayed</Button>
+        </Tooltip>
+    </>
+);
+
+export const TooltipWithDropdown = () => {
+    const [button, setButton] = useState<HTMLElement | null>(null);
+    const [isOpen, setOpen] = useState(false);
+    return (
+        <>
+            <Tooltip label={!isOpen && 'Tooltip'} placement="top">
+                <Button ref={setButton} onClick={() => setOpen((o) => !o)}>
+                    Anchor
+                </Button>
+            </Tooltip>
+            <Dropdown anchorRef={{ current: button }} isOpen={isOpen}>
+                Dropdown
+            </Dropdown>
+        </>
+    );
+};
+
+export const TooltipOnDisabledButton = () => {
+    const [disabled, setDisabled] = useState(false);
+
+    return (
+        <>
+            <Switch isChecked={disabled} onChange={setDisabled}>
+                Toggle button disabled
+            </Switch>
+            <Tooltip label="Tooltip on disabled button">
+                <Button isDisabled={disabled} onClick={noop}>
+                    Click to disable button
+                </Button>
+            </Tooltip>
+        </>
+    );
+};
+
+export const TooltipOnDifferentComponents = () => {
+    return (
+        <FlexBox orientation={Orientation.horizontal} className="lumx-spacing-margin-top-huge">
+            <FlexBox fillSpace />
+            <FlexBox fillSpace>
+                <Tooltip forceOpen label="Tooltip on Button">
+                    <Button>Button</Button>
+                </Tooltip>
+            </FlexBox>
+            <FlexBox fillSpace>
+                <IconButton icon={mdiPrinter} label="Tooltip on IconButton" tooltipProps={{ forceOpen: true }} />
+            </FlexBox>
+            <FlexBox fillSpace>
+                <Tooltip forceOpen label="Tooltip on Icon">
+                    <Icon icon={mdiPrinter} style={{ display: 'inline-block' }} />
+                </Tooltip>
+            </FlexBox>
+            <FlexBox fillSpace>
+                <Tooltip forceOpen label="Tooltip on shaped Icon">
+                    <Icon icon={mdiPrinter} hasShape />
+                </Tooltip>
+            </FlexBox>
+            <FlexBox fillSpace>
+                <Tooltip forceOpen label="Tooltip on word">
+                    <span>word</span>
+                </Tooltip>
+            </FlexBox>
+        </FlexBox>
+    );
+};
+
+export const HideTooltipOnHiddenAnchor = () => {
+    const anchorRef = useRef(null);
+    const [isOpen, setOpen] = useState(false);
+    return (
+        <>
+            The tooltip should show when the button is hovered but it should disappear when the popover get in-between
+            the mouse and the button
+            <br />
+            <Tooltip label="Tooltip label">
+                <Button ref={anchorRef} onClick={() => setOpen((wasOpen) => !wasOpen)}>
+                    Open popover
+                </Button>
+            </Tooltip>
+            <Dialog isOpen={isOpen} onClose={() => setOpen(false)}>
+                Dialog
+            </Dialog>
+        </>
+    );
+};
+
+export const StressTest = () => {
+    return range(1000).map((i) => (
+        <Fragment key={i}>
+            <Tooltip label={`Label ${i}`}>
+                <Button>Button {i}</Button>
+            </Tooltip>
+            <br />
+        </Fragment>
+    ));
+};

package/dist/src/components/tooltip/Tooltip.test.tsx

@@ -0,0 +1,105 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
+
+import { Button, Icon } from '@lumx/react';
+import { Tooltip, TooltipProps } from './Tooltip';
+
+const CLASSNAME = Tooltip.className as string;
+
+jest.mock('uid', () => ({ uid: () => 'uid' }));
+
+type SetupProps = Partial<TooltipProps>;
+
+/**
+ * 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 = renderer(
+        <Tooltip label="Tooltip" {...props}>
+            Anchor
+        </Tooltip>,
+    );
+    const tooltip = wrapper.find(`.${CLASSNAME}`);
+
+    return {
+        props,
+        tooltip,
+        wrapper,
+    };
+};
+
+jest.mock('./useTooltipOpen', () => ({ useTooltipOpen: () => true }));
+
+describe(`<${Tooltip.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 { tooltip, wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(tooltip).toExist();
+            expect(tooltip).toHaveClassName(CLASSNAME);
+        });
+
+        it('should return children when empty label', () => {
+            const wrapper = shallow(
+                <Tooltip label="">
+                    <Icon icon="icon" />
+                </Tooltip>,
+            );
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('should wrap children', () => {
+            // Wrap string children
+            const wrapper1 = shallow(<Tooltip label="tooltip1">children</Tooltip>);
+            expect(wrapper1).toMatchSnapshot();
+
+            // Wrap fragment children
+            const wrapper2 = shallow(
+                <Tooltip label="tooltip1">
+                    <>children</>
+                </Tooltip>,
+            );
+            expect(wrapper2).toMatchSnapshot();
+        });
+
+        it('should not wrap Icon', () => {
+            const wrapper = shallow(
+                <Tooltip label="tooltip1">
+                    <Icon icon="icon" />
+                </Tooltip>,
+            );
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('should not wrap Button', () => {
+            const wrapper = shallow(
+                <Tooltip label="tooltip1">
+                    <Button>button</Button>
+                </Tooltip>,
+            );
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        it('should work on disabled elements', () => {
+            const wrapper = shallow(
+                <Tooltip label="Tooltip on disabled button" forceOpen>
+                    <Button isDisabled>Empty</Button>
+                </Tooltip>,
+            );
+            expect(wrapper).toMatchSnapshot();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'tooltip', prop: 'tooltip' }, { className: CLASSNAME });
+});

package/dist/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,122 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { forwardRef, ReactNode, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { usePopper } from 'react-popper';
+import { uid } from 'uid';
+
+import classNames from 'classnames';
+
+import { Placement } from '@lumx/react/components/popover/Popover';
+
+import { DOCUMENT } from '@lumx/react/constants';
+
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+
+import { useInjectTooltipRef } from './useInjectTooltipRef';
+import { useTooltipOpen } from './useTooltipOpen';
+
+/** Position of the tooltip relative to the anchor element. */
+export type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface TooltipProps extends GenericProps {
+    /** Anchor (element on which we activate the tooltip). */
+    children: ReactNode;
+    /** Delay (in ms) before closing the tooltip. */
+    delay?: number;
+    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */
+    forceOpen?: boolean;
+    /** Label text. */
+    label?: string | null | false;
+    /** Placement of the tooltip relative to the anchor. */
+    placement?: TooltipPlacement;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Tooltip';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<TooltipProps> = {
+    placement: Placement.BOTTOM,
+};
+
+/**
+ * Arrow size (in pixel).
+ */
+const ARROW_SIZE = 8;
+
+/**
+ * Tooltip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;
+    // Disable in SSR or without a label.
+    if (!DOCUMENT || !label) {
+        return <>{children}</>;
+    }
+
+    const id = useMemo(() => `tooltip-${uid()}`, []);
+
+    const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
+    const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
+    const { styles, attributes } = usePopper(anchorElement, popperElement, {
+        placement,
+        modifiers: [
+            {
+                name: 'offset',
+                options: { offset: [0, ARROW_SIZE] },
+            },
+        ],
+    });
+
+    const position = attributes?.popper?.['data-popper-placement'] ?? placement;
+    const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;
+    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);
+
+    return (
+        <>
+            {wrappedChildren}
+            {isOpen &&
+                createPortal(
+                    <div
+                        ref={mergeRefs(ref, setPopperElement)}
+                        {...forwardedProps}
+                        id={id}
+                        role="tooltip"
+                        aria-label={label}
+                        className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}
+                        style={styles.popper}
+                        {...attributes.popper}
+                    >
+                        <div className={`${CLASSNAME}__arrow`} />
+                        <div className={`${CLASSNAME}__inner`}>
+                            {label.indexOf('\n') !== -1
+                                ? label.split('\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)
+                                : label}
+                        </div>
+                    </div>,
+                    document.body,
+                )}
+        </>
+    );
+});
+Tooltip.displayName = COMPONENT_NAME;
+Tooltip.className = CLASSNAME;
+Tooltip.defaultProps = DEFAULT_PROPS;

package/dist/src/components/tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -0,0 +1,233 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Tooltip> Snapshots and structure should not wrap Button 1`] = `
+<Fragment>
+  <Button
+    aria-describedby="tooltip-uid"
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    button
+  </Button>
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      aria-label="tooltip1"
+      className="lumx-tooltip lumx-tooltip--position-bottom"
+      id="tooltip-uid"
+      role="tooltip"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+        }
+      }
+    >
+      <div
+        className="lumx-tooltip__arrow"
+      />
+      <div
+        className="lumx-tooltip__inner"
+      >
+        tooltip1
+      </div>
+    </div>
+  </Portal>
+</Fragment>
+`;
+
+exports[`<Tooltip> Snapshots and structure should not wrap Icon 1`] = `
+<Fragment>
+  <Icon
+    aria-describedby="tooltip-uid"
+    icon="icon"
+  />
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      aria-label="tooltip1"
+      className="lumx-tooltip lumx-tooltip--position-bottom"
+      id="tooltip-uid"
+      role="tooltip"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+        }
+      }
+    >
+      <div
+        className="lumx-tooltip__arrow"
+      />
+      <div
+        className="lumx-tooltip__inner"
+      >
+        tooltip1
+      </div>
+    </div>
+  </Portal>
+</Fragment>
+`;
+
+exports[`<Tooltip> Snapshots and structure should render correctly 1`] = `
+<Fragment>
+  <div
+    aria-describedby="tooltip-uid"
+    className="lumx-tooltip-anchor-wrapper"
+  >
+    Anchor
+  </div>
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      aria-label="Tooltip"
+      className="lumx-tooltip lumx-tooltip--position-bottom"
+      id="tooltip-uid"
+      role="tooltip"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+        }
+      }
+    >
+      <div
+        className="lumx-tooltip__arrow"
+      />
+      <div
+        className="lumx-tooltip__inner"
+      >
+        Tooltip
+      </div>
+    </div>
+  </Portal>
+</Fragment>
+`;
+
+exports[`<Tooltip> Snapshots and structure should return children when empty label 1`] = `
+<Fragment>
+  <Icon
+    icon="icon"
+  />
+</Fragment>
+`;
+
+exports[`<Tooltip> Snapshots and structure should work on disabled elements 1`] = `
+<Fragment>
+  <div
+    aria-describedby="tooltip-uid"
+    className="lumx-tooltip-anchor-wrapper"
+  >
+    <Button
+      emphasis="high"
+      isDisabled={true}
+      size="m"
+      theme="light"
+    >
+      Empty
+    </Button>
+  </div>
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      aria-label="Tooltip on disabled button"
+      className="lumx-tooltip lumx-tooltip--position-bottom"
+      id="tooltip-uid"
+      role="tooltip"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+        }
+      }
+    >
+      <div
+        className="lumx-tooltip__arrow"
+      />
+      <div
+        className="lumx-tooltip__inner"
+      >
+        Tooltip on disabled button
+      </div>
+    </div>
+  </Portal>
+</Fragment>
+`;
+
+exports[`<Tooltip> Snapshots and structure should wrap children 1`] = `
+<Fragment>
+  <div
+    aria-describedby="tooltip-uid"
+    className="lumx-tooltip-anchor-wrapper"
+  >
+    children
+  </div>
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      aria-label="tooltip1"
+      className="lumx-tooltip lumx-tooltip--position-bottom"
+      id="tooltip-uid"
+      role="tooltip"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+        }
+      }
+    >
+      <div
+        className="lumx-tooltip__arrow"
+      />
+      <div
+        className="lumx-tooltip__inner"
+      >
+        tooltip1
+      </div>
+    </div>
+  </Portal>
+</Fragment>
+`;
+
+exports[`<Tooltip> Snapshots and structure should wrap children 2`] = `
+<Fragment>
+  children
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      aria-label="tooltip1"
+      className="lumx-tooltip lumx-tooltip--position-bottom"
+      id="tooltip-uid"
+      role="tooltip"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+        }
+      }
+    >
+      <div
+        className="lumx-tooltip__arrow"
+      />
+      <div
+        className="lumx-tooltip__inner"
+      >
+        tooltip1
+      </div>
+    </div>
+  </Portal>
+</Fragment>
+`;

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

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