@lumx/react 2.2.18 → 2.2.20

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

@@ -1,3 +1,4 @@
+import noop from 'lodash/noop';
 import { mdiClose } from '@lumx/icons';
 import {
     AlertDialog,
@@ -17,7 +18,8 @@ import {
 } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { select } from '@storybook/addon-knobs';
-import React, { RefObject, useRef, useState } from 'react';
+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';
@@ -43,8 +45,8 @@ 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 = () => setOpen(true);
-    const closeDialog = () => setOpen(false);
+    const openDialog = useCallback(() => setOpen(true), []);
+    const closeDialog = useCallback(() => setOpen(false), []);
 
     return {
         button: (
@@ -283,7 +285,8 @@ export const ScrollableDialogWithHeaderAndFooter = ({ theme }: any) => {
     );
 };
 
-export const DialogWithFocusableElements = ({ theme }: any) => {
+/** 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);
@@ -300,6 +303,9 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
     };
     const [date, setDate] = useState<Date | undefined>(new Date('2020-05-18'));
 
+    const datePickerDialogButtonRef = useRef<HTMLButtonElement>(null);
+    const [isDatePickerDialogOpen, closeDatePickerDialog, openDatePickerDialog] = useBooleanState(false);
+
     return (
         <>
             {button}
@@ -334,16 +340,51 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                     />
 
                     <FlexBox orientation="horizontal" hAlign="bottom" gap="regular">
-                        <DatePickerField
-                            locale="fr"
-                            label="Start date"
-                            placeholder="Pick a date"
-                            theme={theme}
-                            onChange={setDate}
-                            value={date}
-                            nextButtonProps={{ label: 'Next month' }}
-                            previousButtonProps={{ label: 'Previous month' }}
-                        />
+                        <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={noop}
+                                    value={undefined}
+                                    nextButtonProps={{ label: 'Next month' }}
+                                    previousButtonProps={{ label: 'Previous month' }}
+                                    defaultMonth={new Date('2020-05-18')}
+                                />
+                            </div>
+                        </Dialog>
 
                         <Select
                             className="lumx-spacing-margin-left-huge"
@@ -372,6 +413,8 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
 
                     {/* 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/src/components/dialog/Dialog.tsx

@@ -142,7 +142,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     const localContentRef = useRef<HTMLDivElement>(null);
     // Handle focus trap.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocusTrap(wrapperRef.current, focusElement?.current);
+    useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDisableBodyScroll(isOpen && localContentRef.current);

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

@@ -1,82 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dialog> Snapshots and structure should render story DialogWithAlertDialog 1`] = `
-<Fragment>
-  <Button
-    emphasis="high"
-    onClick={[Function]}
-    size="m"
-    theme="light"
-  >
-    Open dialog
-  </Button>
-  <Dialog
-    isOpen={true}
-    onClose={[Function]}
-    parentElement={
-      Object {
-        "current": undefined,
-      }
-    }
-    size="big"
-  >
-    <div
-      className="lumx-spacing-padding"
-    >
-      
-Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
-Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
-dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
-commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
-festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
-habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
-Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
-Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
-immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
-timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
-iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
-Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
-tertiam. Cras mattis iudicium purus sit amet fermentum
-    </div>
-    <footer>
-      <Toolbar
-        after={
-          <Button
-            emphasis="low"
-            onClick={[Function]}
-            size="m"
-            theme="light"
-          >
-            Close
-          </Button>
-        }
-      />
-    </footer>
-  </Dialog>
-  <AlertDialog
-    confirmProps={
-      Object {
-        "label": "Confirm",
-        "onClick": [Function],
-      }
-    }
-    isOpen={false}
-    kind="info"
-    onClose={[Function]}
-    parentElement={
-      Object {
-        "current": undefined,
-      }
-    }
-    size="tiny"
-    title="Default (info)"
-  >
-    Consequat deserunt officia aute laborum tempor anim sint est.
-  </AlertDialog>
-</Fragment>
-`;
-
-exports[`<Dialog> Snapshots and structure should render story DialogWithFocusableElements 1`] = `
+exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`] = `
 <Fragment>
   <Button
     emphasis="high"
@@ -156,23 +80,84 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
         hAlign="bottom"
         orientation="horizontal"
       >
-        <DatePickerField
-          label="Start date"
-          locale="fr"
-          nextButtonProps={
-            Object {
-              "label": "Next month",
-            }
-          }
-          onChange={[Function]}
-          placeholder="Pick a date"
-          previousButtonProps={
+        <Button
+          emphasis="high"
+          onClick={[Function]}
+          size="m"
+          theme="light"
+        >
+          Open date picker
+        </Button>
+        <Dialog
+          isOpen={false}
+          onClose={[Function]}
+          parentElement={
             Object {
-              "label": "Previous month",
+              "current": null,
             }
           }
-          value={2020-05-18T00:00:00.000Z}
-        />
+          size="big"
+        >
+          <header>
+            <Toolbar
+              after={
+                <IconButton
+                  emphasis="low"
+                  icon="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+                  label="Close"
+                  onClick={[Function]}
+                  size="m"
+                  theme="light"
+                />
+              }
+              label={
+                <h1
+                  className="lumx-typography-title"
+                >
+                  Date picker
+                </h1>
+              }
+            />
+          </header>
+          <div
+            className="lumx-spacing-padding"
+          >
+            <DatePickerField
+              label="Start date"
+              locale="fr"
+              nextButtonProps={
+                Object {
+                  "label": "Next month",
+                }
+              }
+              onChange={[Function]}
+              placeholder="Pick a date"
+              previousButtonProps={
+                Object {
+                  "label": "Previous month",
+                }
+              }
+              value={2020-05-18T00:00:00.000Z}
+            />
+            <DatePickerField
+              defaultMonth={2020-05-18T00:00:00.000Z}
+              label="Start date"
+              locale="fr"
+              nextButtonProps={
+                Object {
+                  "label": "Next month",
+                }
+              }
+              onChange={[Function]}
+              placeholder="Pick a date"
+              previousButtonProps={
+                Object {
+                  "label": "Previous month",
+                }
+              }
+            />
+          </div>
+        </Dialog>
         <Select
           className="lumx-spacing-margin-left-huge"
           isOpen={false}
@@ -226,11 +211,95 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
       >
         Focus div
       </div>
+      <Button
+        emphasis="high"
+        isDisabled={false}
+        size="m"
+        theme="light"
+      >
+        Button explicitly not disabled (should focus)
+      </Button>
     </div>
   </Dialog>
 </Fragment>
 `;
 
+exports[`<Dialog> Snapshots and structure should render story DialogWithAlertDialog 1`] = `
+<Fragment>
+  <Button
+    emphasis="high"
+    onClick={[Function]}
+    size="m"
+    theme="light"
+  >
+    Open dialog
+  </Button>
+  <Dialog
+    isOpen={true}
+    onClose={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="big"
+  >
+    <div
+      className="lumx-spacing-padding"
+    >
+      
+Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
+Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
+dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
+commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
+festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
+habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
+Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
+Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
+immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
+timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
+iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
+tertiam. Cras mattis iudicium purus sit amet fermentum
+    </div>
+    <footer>
+      <Toolbar
+        after={
+          <Button
+            emphasis="low"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            Close
+          </Button>
+        }
+      />
+    </footer>
+  </Dialog>
+  <AlertDialog
+    confirmProps={
+      Object {
+        "label": "Confirm",
+        "onClick": [Function],
+      }
+    }
+    isOpen={false}
+    kind="info"
+    onClose={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="tiny"
+    title="Default (info)"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </AlertDialog>
+</Fragment>
+`;
+
 exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFooterAndDivider 1`] = `
 <Fragment>
   <Button

package/src/components/generic-block/GenericBlock.stories.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { mdiPencil } from '@lumx/icons';
+import { GenericBlock, Button, Icon, Size, Orientation, Alignment } from '@lumx/react';
+
+export default { title: 'LumX components/generic-block/GenericBlock' };
+
+export const Horizontal = ({ theme }: any) => (
+    <GenericBlock
+        orientation={Orientation.horizontal}
+        figure={<Icon icon={mdiPencil} size={Size.m} />}
+        actionsProps={{
+            style: { border: '1px solid red' },
+        }}
+        figureProps={{
+            style: { border: '1px solid red' },
+        }}
+        contentProps={{
+            style: { border: '1px solid red' },
+        }}
+        actions={<Button theme={theme}>Button</Button>}
+    >
+        Content
+    </GenericBlock>
+);
+
+export const HorizontalWithAlignment = ({ theme }: any) => (
+    <GenericBlock
+        orientation={Orientation.horizontal}
+        figure={<Icon icon={mdiPencil} size={Size.m} />}
+        actionsProps={{
+            fillSpace: true,
+            style: { border: '1px solid red' },
+            vAlign: 'center',
+        }}
+        figureProps={{
+            style: { border: '1px solid red' },
+        }}
+        contentProps={{
+            style: { border: '1px solid red' },
+        }}
+        actions={<Button theme={theme}>Centered button</Button>}
+    >
+        Content
+    </GenericBlock>
+);
+
+export const HorizontalTop = ({ theme }: any) => (
+    <GenericBlock
+        orientation={Orientation.horizontal}
+        hAlign={Alignment.top}
+        figure={<Icon icon={mdiPencil} size={Size.m} />}
+        actionsProps={{
+            style: { border: '1px solid red' },
+        }}
+        figureProps={{
+            style: { border: '1px solid red' },
+        }}
+        contentProps={{
+            style: { border: '1px solid red' },
+        }}
+        actions={<Button theme={theme}>Centered button</Button>}
+    >
+        Content
+    </GenericBlock>
+);
+
+export const Vertical = ({ theme }: any) => (
+    <GenericBlock
+        orientation={Orientation.vertical}
+        figure={<Icon icon={mdiPencil} size={Size.m} />}
+        actionsProps={{
+            fillSpace: true,
+            style: { border: '1px solid red' },
+        }}
+        figureProps={{
+            style: { border: '1px solid red' },
+        }}
+        contentProps={{
+            style: { border: '1px solid red' },
+        }}
+        actions={<Button theme={theme}>Button</Button>}
+    >
+        Content
+    </GenericBlock>
+);
+
+export const GapSizes = ({ theme }: any) => (
+    <>
+        <GenericBlock
+            orientation={Orientation.vertical}
+            figure={<Icon icon={mdiPencil} size={Size.m} />}
+            gap={Size.regular}
+            style={{ marginBottom: 40 }}
+            actionsProps={{
+                style: { border: '1px solid red' },
+            }}
+            figureProps={{
+                style: { border: '1px solid red' },
+            }}
+            contentProps={{
+                style: { border: '1px solid red' },
+            }}
+            actions={<Button theme={theme}>Button</Button>}
+        >
+            <h2>Small gap size</h2>
+            <p>For small blocks</p>
+        </GenericBlock>
+
+        <GenericBlock
+            orientation={Orientation.vertical}
+            figure={<Icon icon={mdiPencil} size={Size.m} />}
+            gap={Size.big}
+            style={{ marginBottom: 40 }}
+            actionsProps={{
+                style: { border: '1px solid red' },
+            }}
+            figureProps={{
+                style: { border: '1px solid red' },
+            }}
+            contentProps={{
+                style: { border: '1px solid red' },
+            }}
+            actions={<Button theme={theme}>Button</Button>}
+        >
+            <h2>Medium gap size</h2>
+            <p>For medium blocks</p>
+        </GenericBlock>
+
+        <GenericBlock
+            orientation={Orientation.vertical}
+            figure={<Icon icon={mdiPencil} size={Size.m} />}
+            gap={Size.huge}
+            style={{ marginBottom: 40 }}
+            actionsProps={{
+                style: { border: '1px solid red' },
+            }}
+            figureProps={{
+                style: { border: '1px solid red' },
+            }}
+            contentProps={{
+                style: { border: '1px solid red' },
+            }}
+            actions={<Button theme={theme}>Button</Button>}
+        >
+            <h2>Big gap size</h2>
+            <p>For large blocks</p>
+        </GenericBlock>
+    </>
+);

package/src/components/generic-block/GenericBlock.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { GenericBlock, GenericBlockProps } from './GenericBlock';
+import * as stories from '../../stories/generated/GenericBlock/Demos.stories';
+
+const CLASSNAME = GenericBlock.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<GenericBlockProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<GenericBlock {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${GenericBlock.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, GenericBlock);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});