@lumx/react 3.0.7 → 3.1.0

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

@@ -0,0 +1,426 @@
+import { mdiClose } from '@lumx/icons';
+import {
+    AlertDialog,
+    Button,
+    Checkbox,
+    DatePickerField,
+    Emphasis,
+    FlexBox,
+    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';
+
+export default {
+    title: 'LumX components/dialog/Dialog',
+    parameters: {
+        // Delay Chromatic snapshot to wait for dialog to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: DIALOG_TRANSITION_DURATION,
+        },
+    },
+    // Force minimum chromatic screen size to make sure the dialog appears in view.
+    decorators: [chromaticForceScreenSize],
+};
+
+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>
+        </>
+    );
+};
+
+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>
+        </>
+    );
+};
+
+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>
+        </>
+    );
+};
+
+export const LoadingDialog = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+    return (
+        <>
+            {button}
+            <Dialog isOpen={isOpen} onClose={closeDialog} isLoading parentElement={buttonRef}>
+                {content}
+            </Dialog>
+        </>
+    );
+};
+
+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>
+        </>
+    );
+};
+
+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>
+        </>
+    );
+};
+
+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>
+        </>
+    );
+};
+
+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>
+        </>
+    );
+};
+
+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>
+        </>
+    );
+};
+
+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>
+        </>
+    );
+};
+
+export const ScrollableDialogWithHeaderAndFooter = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+    return (
+        <>
+            {button}
+            <Dialog isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef}>
+                {header}
+                {longContent}
+                {footer}
+            </Dialog>
+        </>
+    );
+};
+
+/** 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);
+    const [textValue, setTextValue] = useState('value');
+    const [checkboxValue, setCheckboxValue] = useState(false);
+    const inputRef = useRef(null);
+
+    const selectChoices = ['First item', 'Second item', 'Third item'];
+    const [value, setValue] = React.useState<string>(selectChoices[0]);
+    const [isSelectOpen, setSelectOpen] = useState(false);
+    const toggleSelect = () => setSelectOpen(!isSelectOpen);
+    const closeSelect = () => setSelectOpen(false);
+    const selectItem = (item: any) => () => {
+        closeSelect();
+        setValue(item);
+    };
+    const [date, setDate] = useState<Date | undefined>(new Date('2020-05-18'));
+    const [date2, setDate2] = useState<Date | undefined>();
+
+    const datePickerDialogButtonRef = useRef<HTMLButtonElement>(null);
+    const [isDatePickerDialogOpen, closeDatePickerDialog, openDatePickerDialog] = useBooleanState(false);
+
+    return (
+        <>
+            {button}
+            <Dialog isOpen={isOpen} onClose={closeDialog} 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} />
+                        }
+                    />
+                </header>
+                <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
+                    {/* Testing hidden input do not count in th focus trap*/}
+                    <input hidden type="file" />
+                    <input type="hidden" />
+
+                    <div className="lumx-spacing-margin-bottom-huge">
+                        The text field should capture the focus on open and a focus trap should be in place.
+                    </div>
+
+                    <TextField
+                        className="lumx-spacing-margin-bottom-huge"
+                        inputRef={inputRef}
+                        value={textValue}
+                        onChange={setTextValue}
+                        label="Text input"
+                        maxLength={10}
+                    />
+
+                    <Checkbox
+                        className="lumx-spacing-margin-bottom-huge"
+                        isChecked={checkboxValue}
+                        onChange={setCheckboxValue}
+                        label="Checkbox input"
+                    />
+
+                    <FlexBox orientation="horizontal" hAlign="bottom" gap="regular">
+                        <Button ref={datePickerDialogButtonRef} onClick={openDatePickerDialog}>
+                            Open date picker
+                        </Button>
+                        <Dialog
+                            isOpen={isDatePickerDialogOpen}
+                            parentElement={datePickerDialogButtonRef}
+                            onClose={closeDatePickerDialog}
+                        >
+                            <header>
+                                <Toolbar
+                                    label={<h1 className="lumx-typography-title">Date picker</h1>}
+                                    after={
+                                        <IconButton
+                                            label="Close"
+                                            icon={mdiClose}
+                                            onClick={closeDatePickerDialog}
+                                            emphasis={Emphasis.low}
+                                        />
+                                    }
+                                />
+                            </header>
+                            <div className="lumx-spacing-padding">
+                                <DatePickerField
+                                    locale="fr"
+                                    label="Start date"
+                                    placeholder="Pick a date"
+                                    theme={theme}
+                                    onChange={setDate}
+                                    value={date}
+                                    nextButtonProps={{ label: 'Next month' }}
+                                    previousButtonProps={{ label: 'Previous month' }}
+                                />
+                                <DatePickerField
+                                    locale="fr"
+                                    label="Start date"
+                                    placeholder="Pick a date"
+                                    theme={theme}
+                                    onChange={setDate2}
+                                    value={date2}
+                                    nextButtonProps={{ label: 'Next month' }}
+                                    previousButtonProps={{ label: 'Previous month' }}
+                                    defaultMonth={new Date('2020-05-18')}
+                                />
+                            </div>
+                        </Dialog>
+
+                        <Select
+                            className="lumx-spacing-margin-left-huge"
+                            isOpen={isSelectOpen}
+                            value={value}
+                            label="Select label"
+                            onInputClick={toggleSelect}
+                            onDropdownClose={closeSelect}
+                        >
+                            <List isClickable>
+                                {selectChoices.map((choice) => (
+                                    <ListItem
+                                        key={choice}
+                                        isSelected={value === choice}
+                                        onItemSelected={selectItem(choice)}
+                                        size={Size.tiny}
+                                    >
+                                        {choice}
+                                    </ListItem>
+                                ))}
+                            </List>
+                        </Select>
+
+                        <Button isDisabled>Disabled button (focus ignored)</Button>
+                    </FlexBox>
+
+                    {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+                    <div tabIndex={0}>Focus div</div>
+
+                    <Button isDisabled={false}>Button explicitly not disabled (should focus)</Button>
+                </div>
+            </Dialog>
+        </>
+    );
+};

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

@@ -0,0 +1,93 @@
+import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+
+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.
+jest.mock('@lumx/react/hooks/useIntersectionObserver', () => ({
+    useIntersectionObserver: () => new Map(),
+}));
+
+type SetupProps = Partial<DialogProps>;
+
+/**
+ * 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(<Dialog isOpen {...props} />);
+    const dialog = wrapper.find(`.${CLASSNAME}`);
+
+    return { props, wrapper, dialog };
+};
+
+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);
+
+        it('should trigger `onClose` when pressing `escape` key', () => {
+            const onClose = jest.fn();
+            setup({ isOpen: true, onClose }, false);
+
+            document.body.dispatchEvent(keyDown('Escape'));
+            expect(onClose).toHaveBeenCalled();
+        });
+
+        it('should not trigger `onClose` when pressing any other key', () => {
+            const onClose = jest.fn();
+            setup({ isOpen: true, onClose }, false);
+
+            document.body.dispatchEvent(keyDown('a'));
+            expect(onClose).not.toHaveBeenCalled();
+        });
+
+        it('should not trigger `onClose` when pressing `escape` key with `preventAutoClose` set to `true`', () => {
+            const onClose = jest.fn();
+            setup({ isOpen: true, onClose, preventAutoClose: true }, false);
+
+            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.
+    });
+
+    // 5. Test state.
+    describe('State', () => {
+        // Nothing to do here.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'dialog', prop: 'dialog' }, { className: CLASSNAME });
+});