@lumx/react 2.2.18-alpha-hooks.1 → 2.2.20-alpha-type.1

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"
@@ -125,6 +49,13 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
     <div
       className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge"
     >
+      <input
+        hidden={true}
+        type="file"
+      />
+      <input
+        type="hidden"
+      />
       <div
         className="lumx-spacing-margin-bottom-huge"
       >
@@ -156,23 +87,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,8 +218,92 @@ 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>
 `;
 

package/src/components/dropdown/Dropdown.tsx

@@ -3,7 +3,7 @@ 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 } from '@lumx/react/components/popover/Popover';
+import { Offset, Placement, Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';
 
@@ -11,10 +11,11 @@ import { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent }
  * Defines the props of the component.
  */
 export interface DropdownProps extends GenericProps {
-    /** Reference to the element around which the dropdown is placed.
+    /**
+     * Reference to the element around which the dropdown is placed.
      * @see {@link PopoverProps#anchorRef}
      */
-    anchorRef: React.RefObject<HTMLElement>;
+    anchorRef: PopoverProps['anchorRef'];
     /** Dropdown content. */
     children: React.ReactNode;
     /**

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 });
+});

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

@@ -0,0 +1,120 @@
+import React, { forwardRef, ReactNode } from 'react';
+import classNames from 'classnames';
+import { Comp, getRootClassName } from '@lumx/react/utils';
+import { Orientation, Size, FlexBox, FlexBoxProps, Alignment, HorizontalAlignment } from '@lumx/react';
+
+export interface GenericBlockProps extends FlexBoxProps {
+    /** Component to use as visual element. */
+    figure?: ReactNode;
+    /** Actions to set after the main content. */
+    actions?: ReactNode;
+    /** Main content to display */
+    children: ReactNode;
+    /** Orientation of the 3 sections */
+    orientation?: FlexBoxProps['orientation'];
+    /** Horizontal alignment. */
+    hAlign?: FlexBoxProps['hAlign'];
+    /** Vertical alignment. */
+    vAlign?: FlexBoxProps['vAlign'];
+    /**
+     * The props to forward to the content.
+     * By default, the content will have the same alignment as wrapper.
+     */
+    contentProps?: Omit<FlexBoxProps, 'children'>;
+    /** props to forward to the actions element. */
+    actionsProps?: Omit<FlexBoxProps, 'children'>;
+    /** props to forward to the figure element. */
+    figureProps?: Omit<FlexBoxProps, 'children'>;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'GenericBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<GenericBlockProps> = {
+    gap: Size.regular,
+    orientation: Orientation.vertical,
+    hAlign: Alignment.center,
+    vAlign: Alignment.center,
+};
+
+/**
+ * The GenericBlock is a layout component made of 3 sections that can be
+ * displayed either horizontally of vertically with the same gap between each section.
+ *
+ * The sections are:
+ * * (Optional) `Figure` => A visual element to display before the main content.
+ * * (Required) `Content` => The main content displayed
+ * * (Optional) `Actions` => One or more actions to set after the element.
+ *
+ * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
+ */
+export const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        className,
+        figure,
+        figureProps,
+        children,
+        actions,
+        actionsProps,
+        gap,
+        orientation,
+        contentProps,
+        ...forwardedProps
+    } = props;
+
+    let actionsVAlign: HorizontalAlignment = Alignment.center;
+    if (orientation === Orientation.horizontal) {
+        actionsVAlign = Alignment.right;
+    }
+    let contentVAlign: HorizontalAlignment = Alignment.center;
+    if (orientation === Orientation.horizontal) {
+        contentVAlign = Alignment.left;
+    }
+
+    return (
+        <FlexBox
+            ref={ref}
+            className={classNames(className, CLASSNAME)}
+            gap={gap}
+            orientation={orientation}
+            {...forwardedProps}
+        >
+            <FlexBox {...figureProps} className={classNames(figureProps?.className, `${CLASSNAME}__figure`)}>
+                {figure}
+            </FlexBox>
+
+            {children && (
+                <FlexBox
+                    orientation={Orientation.vertical}
+                    fillSpace
+                    vAlign={contentVAlign}
+                    {...contentProps}
+                    className={classNames(contentProps?.className, `${CLASSNAME}__content`)}
+                >
+                    {children}
+                </FlexBox>
+            )}
+
+            <FlexBox
+                vAlign={actionsVAlign}
+                {...actionsProps}
+                className={classNames(actionsProps?.className, `${CLASSNAME}__actions`)}
+            >
+                {actions}
+            </FlexBox>
+        </FlexBox>
+    );
+});
+GenericBlock.displayName = COMPONENT_NAME;
+GenericBlock.className = CLASSNAME;
+GenericBlock.defaultProps = DEFAULT_PROPS;

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

@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GenericBlock> Snapshots and structure should render story 'Default' 1`] = `
+Array [
+  <FlexBox
+    className="lumx-generic-block"
+    gap="regular"
+    hAlign="center"
+    orientation="vertical"
+    vAlign="center"
+  >
+    <FlexBox
+      className="lumx-generic-block__figure"
+    >
+      <Avatar
+        alt=""
+        image="/demo-assets/persona.png"
+        size="m"
+        theme="light"
+      />
+    </FlexBox>
+    <FlexBox
+      className="lumx-generic-block__content"
+      fillSpace={true}
+      orientation="vertical"
+      vAlign="center"
+    >
+      <h2>
+        Content title
+      </h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus libero aliquet pharetra luctus. Fusce nisl turpis, posuere ac tellus at, euismod vulputate libero...
+      </p>
+    </FlexBox>
+    <FlexBox
+      className="lumx-generic-block__actions"
+      vAlign="center"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Actions
+      </Button>
+    </FlexBox>
+  </FlexBox>,
+  <FlexBox
+    className="lumx-generic-block"
+    gap="regular"
+    hAlign="center"
+    orientation="horizontal"
+    vAlign="center"
+  >
+    <FlexBox
+      className="lumx-generic-block__figure"
+    >
+      <Avatar
+        alt=""
+        image="/demo-assets/persona.png"
+        size="m"
+        theme="light"
+      />
+    </FlexBox>
+    <FlexBox
+      className="lumx-generic-block__content"
+      fillSpace={true}
+      orientation="vertical"
+      vAlign="left"
+    >
+      <h2>
+        Content title
+      </h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus libero aliquet pharetra luctus. Fusce nisl turpis, posuere ac tellus at, euismod vulputate libero...
+      </p>
+    </FlexBox>
+    <FlexBox
+      className="lumx-generic-block__actions"
+      vAlign="right"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Actions
+      </Button>
+    </FlexBox>
+  </FlexBox>,
+]
+`;