@lumx/react 3.1.4 → 3.2.0

package/src/components/dialog/Dialog.stories.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable react-hooks/rules-of-hooks,react/jsx-key */
+import React, { useRef, useState } from 'react';
+
+import over from 'lodash/over';
 import { mdiClose } from '@lumx/icons';
 import {
     AlertDialog,
@@ -6,25 +10,28 @@ import {
     DatePickerField,
     Emphasis,
     FlexBox,
+    Heading,
     IconButton,
     List,
     ListItem,
     Select,
     Size,
     TextField,
-    Theme,
     Toolbar,
 } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
-import { select } from '@storybook/addon-knobs';
-import React, { RefObject, useCallback, useRef, useState } from 'react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import { Dialog, DialogSizes } from './Dialog';
-import { loremIpsum } from '../../stories/knobs/lorem';
-import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
+
+import { Dialog } from './Dialog';
+import { loremIpsum } from '../../stories/utils/lorem';
+
+const dialogSizes = [Size.tiny, Size.regular, Size.big, Size.huge];
 
 export default {
     title: 'LumX components/dialog/Dialog',
+    component: Dialog,
     parameters: {
         // Delay Chromatic snapshot to wait for dialog to open.
         chromatic: {
@@ -32,261 +39,148 @@ export default {
             delay: DIALOG_TRANSITION_DURATION,
         },
     },
-    // Force minimum chromatic screen size to make sure the dialog appears in view.
-    decorators: [chromaticForceScreenSize],
+    decorators: [
+        // Force minimum chromatic screen size to make sure the dialog appears in view.
+        withChromaticForceScreenSize(),
+    ],
+    args: Dialog.defaultProps,
+    argTypes: {
+        size: getSelectArgType(dialogSizes),
+        onVisibilityChange: { action: true },
+        children: { control: false },
+    },
+    render(props: any) {
+        const buttonRef = useRef<HTMLButtonElement>(null);
+        const [isOpen, close, open] = useBooleanState(true);
+        return (
+            <>
+                <Button ref={buttonRef} onClick={open}>
+                    Open dialog
+                </Button>
+                <Dialog {...props} isOpen={isOpen} onClose={close} parentElement={buttonRef} />
+            </>
+        );
+    },
 };
 
-const header = <header className="lumx-spacing-padding lumx-typography-title">Dialog header</header>;
-const content = <div className="lumx-spacing-padding">{loremIpsum('short')}</div>;
-const longContent = <div className="lumx-spacing-padding">{loremIpsum('long')}</div>;
-const footer = <footer className="lumx-spacing-padding">Dialog footer</footer>;
-
-function useOpenButton(theme: Theme, defaultState = true) {
-    const buttonRef = useRef() as RefObject<HTMLButtonElement>;
-    const [isOpen, setOpen] = useState(defaultState);
-    const openDialog = useCallback(() => setOpen(true), []);
-    const closeDialog = useCallback(() => setOpen(false), []);
-
-    return {
-        button: (
-            <Button ref={buttonRef} onClick={openDialog} theme={theme}>
-                Open dialog
-            </Button>
-        ),
-        buttonRef,
-        openDialog,
-        closeDialog,
-        isOpen,
-    };
-}
-
-export const SimpleDialog = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    return (
-        <>
-            {button}
-            <Dialog isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef}>
-                {content}
-            </Dialog>
-        </>
-    );
+/**
+ * Default dialog
+ */
+export const Default = {
+    args: { children: loremIpsum('short') },
 };
 
-export const PreventDialogAutoClose = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    return (
-        <>
-            {button}
-            <Dialog preventAutoClose isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef}>
-                {content}
-                <footer>
-                    <Toolbar
-                        after={
-                            <Button onClick={closeDialog} emphasis={Emphasis.low}>
-                                Close
-                            </Button>
-                        }
-                    />
-                </footer>
-            </Dialog>
-        </>
-    );
+/**
+ * Loading state
+ */
+export const Loading = {
+    args: { ...Default.args, isLoading: true },
 };
 
-export const DialogWithAlertDialog = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    const { openDialog: openAlertDialog, closeDialog: closeAlertDialog, isOpen: isAlertDialogOpen } = useOpenButton(
-        theme,
-        false,
-    );
-
-    const handleSubmitDialog = () => {
-        closeDialog();
-        openAlertDialog();
-    };
-
-    return (
-        <>
-            {button}
-            <Dialog isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef}>
-                {content}
-                <footer>
-                    <Toolbar
-                        after={
-                            <Button onClick={handleSubmitDialog} emphasis={Emphasis.low}>
-                                Close
-                            </Button>
-                        }
-                    />
-                </footer>
-            </Dialog>
-            <AlertDialog
-                isOpen={isAlertDialogOpen}
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                title="Default (info)"
-                confirmProps={{ onClick: closeAlertDialog, label: 'Confirm' }}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
-};
-
-export const Sizes = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    const sizes: DialogSizes[] = [Size.tiny, Size.regular, Size.big, Size.huge];
-    return (
-        <>
-            {button}
-            Use the knobs to change the dialog size!
-            <Dialog
-                isOpen={isOpen}
-                onClose={closeDialog}
-                size={select('Dialog size', sizes, Size.tiny)}
-                parentElement={buttonRef}
-            >
-                {longContent}
-            </Dialog>
-        </>
-    );
+/**
+ * Basic header/footer props
+ */
+export const WithHeaderFooter = {
+    args: { ...Default.args, header: 'Dialog header', footer: 'Dialog footer' },
 };
 
-export const LoadingDialog = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    return (
-        <>
-            {button}
-            <Dialog isOpen={isOpen} onClose={closeDialog} isLoading parentElement={buttonRef}>
-                {content}
-            </Dialog>
-        </>
-    );
+/**
+ * More complex header/footer in children
+ */
+export const WithHeaderFooterChildren = {
+    args: {
+        children: [
+            <header>
+                <Toolbar
+                    label={<Heading typography="title">Dialog heading</Heading>}
+                    after={<IconButton label="Close" emphasis="low" icon={mdiClose} />}
+                />
+            </header>,
+            <div className="lumx-spacing-padding-huge">{loremIpsum('short')}</div>,
+            <footer>
+                <Toolbar after={<Button>Close</Button>} />
+            </footer>,
+        ],
+    },
 };
 
-export const DialogWithHeaderFooterProps = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    return (
-        <>
-            {button}
-            <Dialog
-                isOpen={isOpen}
-                onClose={closeDialog}
-                header="Header prop"
-                footer="Footer prop"
-                parentElement={buttonRef}
-            >
-                {content}
-            </Dialog>
-        </>
-    );
+/**
+ * Forcing header/footer dividers
+ */
+export const ForceDivider = {
+    args: { ...WithHeaderFooter.args, forceFooterDivider: true, forceHeaderDivider: true },
 };
 
-export const DialogWithHeaderFooterChildren = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    return (
-        <>
-            {button}
-            <Dialog isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef}>
-                {header}
-                {content}
-                {footer}
-            </Dialog>
-        </>
-    );
+/**
+ * Long scrollable content
+ */
+export const LongContent = {
+    args: { ...WithHeaderFooter.args, children: loremIpsum('long') },
 };
 
-export const DialogWithHeaderFooterPropsAndChildren = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    return (
-        <>
-            {button}
-            <Dialog
-                isOpen={isOpen}
-                onClose={closeDialog}
-                header=" Header prop"
-                footer=" Footer prop"
-                parentElement={buttonRef}
-            >
-                {header}
-                {content}
-                {footer}
-            </Dialog>
-        </>
-    );
+/**
+ * Prevent auto close (click outside & close on escape)
+ */
+export const PreventAutoClose = {
+    args: { ...Default.args, preventAutoClose: true },
 };
 
-export const DialogWithHeaderFooterAndDivider = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    return (
-        <>
-            {button}
-            <Dialog
-                isOpen={isOpen}
-                onClose={closeDialog}
-                forceFooterDivider
-                forceHeaderDivider
-                parentElement={buttonRef}
-            >
-                {header}
-                {content}
-                {footer}
-            </Dialog>
-        </>
-    );
+/**
+ * Prevent close on escape
+ */
+export const PreventCloseOnEscape = {
+    args: { ...Default.args, preventCloseOnEscape: true },
 };
 
-export const ScrollableDialog = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    return (
-        <>
-            {button}
-            <Dialog isOpen={isOpen} onClose={closeDialog} size={Size.regular} parentElement={buttonRef}>
-                {longContent}
-            </Dialog>
-        </>
-    );
+/**
+ * Prevent close on click outside
+ */
+export const PreventCloseOnClick = {
+    args: { ...Default.args, preventCloseOnClick: true },
 };
 
-export const WithAnimationCallbacks = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-    const handleVisibiltyCallback = (isVisible: boolean) => {
-        alert(isVisible ? 'OPEN' : 'CLOSE');
-    };
-
-    return (
-        <>
-            {button}
-            <Dialog
-                isOpen={isOpen}
-                onClose={closeDialog}
-                size={Size.regular}
-                parentElement={buttonRef}
-                onVisibilityChange={handleVisibiltyCallback}
-            >
-                {content}
-            </Dialog>
-        </>
-    );
-};
+/**
+ * Dialog needing a confirmation before close using an AlertDialog
+ */
+export const WithConfirmClose = () => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const closeButtonRef = useRef<HTMLButtonElement>(null);
+    const [isOpen, close, open] = useBooleanState(true);
+    const [isAlertDialogOpen, closeAlertDialog, openAlertDialog] = useBooleanState(false);
 
-export const ScrollableDialogWithHeaderAndFooter = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
     return (
         <>
-            {button}
-            <Dialog isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef}>
-                {header}
-                {longContent}
-                {footer}
+            <Button ref={buttonRef} onClick={open}>
+                Open dialog
+            </Button>
+            <Dialog isOpen={isOpen} onClose={openAlertDialog} parentElement={buttonRef}>
+                <FlexBox orientation="vertical" vAlign="center" className="lumx-spacing-padding-huge">
+                    {loremIpsum('tiny')}
+                    <Button ref={closeButtonRef} onClick={openAlertDialog}>
+                        Close
+                    </Button>
+                </FlexBox>
             </Dialog>
+            <AlertDialog
+                isOpen={isAlertDialogOpen}
+                onClose={closeAlertDialog}
+                parentElement={closeButtonRef}
+                title="Confirm close"
+                confirmProps={{ onClick: over([close, closeAlertDialog]), label: 'Confirm' }}
+                cancelProps={{ onClick: closeAlertDialog, label: 'Cancel' }}
+            >
+                {loremIpsum('tiny')}
+            </AlertDialog>
         </>
     );
 };
 
-/** Test dialog focus trap (focus is contained inside the dialog) with all kinds of focusable and non-focusable items */
-export const DialogFocusTrap = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+/**
+ * Test dialog focus trap (focus is contained inside the dialog) with all kinds of focusable and non-focusable items
+ */
+export const FocusTrap = () => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const [isOpen, close, open] = useBooleanState(true);
     const [textValue, setTextValue] = useState('value');
     const [checkboxValue, setCheckboxValue] = useState(false);
     const inputRef = useRef(null);
@@ -308,14 +202,14 @@ export const DialogFocusTrap = ({ theme }: any) => {
 
     return (
         <>
-            {button}
-            <Dialog isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef} focusElement={inputRef}>
+            <Button ref={buttonRef} onClick={open}>
+                Open dialog
+            </Button>
+            <Dialog isOpen={isOpen} onClose={close} parentElement={buttonRef} focusElement={inputRef}>
                 <header>
                     <Toolbar
                         label={<span className="lumx-typography-title">Dialog header</span>}
-                        after={
-                            <IconButton label="Close" icon={mdiClose} onClick={closeDialog} emphasis={Emphasis.low} />
-                        }
+                        after={<IconButton label="Close" icon={mdiClose} onClick={close} emphasis={Emphasis.low} />}
                     />
                 </header>
                 <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
@@ -370,7 +264,6 @@ export const DialogFocusTrap = ({ theme }: any) => {
                                     locale="fr"
                                     label="Start date"
                                     placeholder="Pick a date"
-                                    theme={theme}
                                     onChange={setDate}
                                     value={date}
                                     nextButtonProps={{ label: 'Next month' }}
@@ -380,7 +273,6 @@ export const DialogFocusTrap = ({ theme }: any) => {
                                     locale="fr"
                                     label="Start date"
                                     placeholder="Pick a date"
-                                    theme={theme}
                                     onChange={setDate2}
                                     value={date2}
                                     nextButtonProps={{ label: 'Next month' }}

package/src/components/dialog/Dialog.test.tsx

@@ -5,8 +5,6 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 import React, { ReactElement } from 'react';
 
-import * as stories from './Dialog.stories';
-
 const CLASSNAME = Dialog.className as string;
 
 // Mock out the useIntersectionObserver hook since it can't work with Jest/Enzyme.
@@ -29,26 +27,6 @@ const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
 };
 
 describe(`<${Dialog.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        // Do snapshot render test on every stories.
-        for (const [storyName, Story] of Object.entries(stories)) {
-            if (typeof Story !== 'function') {
-                continue;
-            }
-
-            it(`should render story ${storyName}`, () => {
-                const wrapper = shallow(<Story />);
-                expect(wrapper).toMatchSnapshot();
-            });
-        }
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        // Nothing to do here.
-    });
-
     // 3. Test events.
     describe('Events', () => {
         const keyDown = (key: string) => new KeyboardEvent('keydown', { key } as any);
@@ -76,16 +54,14 @@ describe(`<${Dialog.displayName}>`, () => {
             document.body.dispatchEvent(keyDown('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.
-    });
+        it('should not trigger `onClose` when pressing `escape` key with `preventCloseOnEscape` set to `true`', () => {
+            const onClose = jest.fn();
+            setup({ isOpen: true, onClose, preventCloseOnEscape: true }, false);
 
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
+            document.body.dispatchEvent(keyDown('Escape'));
+            expect(onClose).not.toHaveBeenCalled();
+        });
     });
 
     // Common tests suite.

package/src/components/dialog/Dialog.tsx

@@ -43,6 +43,10 @@ export interface DialogProps extends GenericProps {
     focusElement?: RefObject<HTMLElement>;
     /** Whether to keep the dialog open on clickaway or escape press. */
     preventAutoClose?: boolean;
+    /** Whether to keep the dialog open on escape press. */
+    preventCloseOnEscape?: boolean;
+    /** Whether to keep the dialog open on clickaway. */
+    preventCloseOnClick?: boolean;
     /** Size variant. */
     size?: DialogSizes;
     /** Z-axis position. */
@@ -53,6 +57,8 @@ export interface DialogProps extends GenericProps {
     onClose?(): void;
     /** Callback called when the open animation starts and the close animation finishes. */
     onVisibilityChange?(isVisible: boolean): void;
+    /** whether to disable the scroll on the body or not */
+    disableBodyScroll?: boolean;
 }
 
 export type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -75,6 +81,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<DialogProps> = {
     size: Size.big,
+    disableBodyScroll: true,
 };
 
 /**
@@ -108,6 +115,9 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
         zIndex,
         dialogProps,
         onVisibilityChange,
+        disableBodyScroll,
+        preventCloseOnClick,
+        preventCloseOnEscape,
         ...forwardedProps
     } = props;
 
@@ -125,8 +135,10 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
         }
     }, [isOpen, parentElement]);
 
+    const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;
+
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useCallbackOnEscape(onClose, isOpen && !preventAutoClose);
+    useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const wrapperRef = useRef<HTMLDivElement>(null);
@@ -141,7 +153,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDisableBodyScroll(isOpen && localContentRef.current);
+    useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [sentinelTop, setSentinelTop] = useState<Element | null>(null);
@@ -175,6 +187,8 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), onVisibilityChange);
 
+    const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
+
     return isOpen || isVisible
         ? createPortal(
               <div
@@ -196,7 +210,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
 
                   <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
                       <ClickAwayProvider
-                          callback={!preventAutoClose && onClose}
+                          callback={!shouldPreventCloseOnClickAway && onClose}
                           childrenRefs={clickAwayRefs}
                           parentRef={rootRef}
                       >