@lumx/react 2.2.19 → 2.2.20-alpha-type.1

package/src/components/checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`<Checkbox> Props should use the given props 1`] = `
     className="lumx-checkbox__input-wrapper"
   >
     <input
+      aria-describedby="fixedId-helper"
       className="lumx-checkbox__input-native"
       id="fixedId"
       onChange={[Function]}
@@ -41,6 +42,7 @@ exports[`<Checkbox> Props should use the given props 1`] = `
     </InputLabel>
     <InputHelper
       className="lumx-checkbox__helper"
+      id="fixedId-helper"
       kind="info"
       theme="light"
     >
@@ -58,6 +60,7 @@ exports[`<Checkbox> Props should use the given props while passing custom props
     className="lumx-checkbox__input-wrapper"
   >
     <input
+      aria-describedby="fixedId-helper"
       aria-labelledby="labelledby-id"
       className="lumx-checkbox__input-native"
       id="fixedId"
@@ -92,6 +95,7 @@ exports[`<Checkbox> Props should use the given props while passing custom props
     </InputLabel>
     <InputHelper
       className="lumx-checkbox__helper"
+      id="fixedId-helper"
       kind="info"
       theme="light"
     >

package/src/components/date-picker/DatePickerField.tsx

@@ -62,7 +62,7 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
         value,
         ...forwardedProps
     } = props;
-    const wrapperRef = useRef(null);
+    const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
     const anchorRef = useRef(null);
 
     const [isOpen, setIsOpen] = useState(false);
@@ -83,8 +83,8 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
     };
 
     // Handle focus trap.
-    const todayOrSelectedDateRef = useRef<HTMLButtonElement>(null);
-    useFocusTrap(todayOrSelectedDateRef.current && wrapperRef.current, todayOrSelectedDateRef.current);
+    const [todayOrSelectedDate, setTodayOrSelectedDate] = useState<HTMLButtonElement | null>(null);
+    useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);
 
     const onTextFieldChange = (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {
         if (!textFieldValue) {
@@ -121,19 +121,18 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
                     closeOnClickAway
                     closeOnEscape
                 >
-                    <div ref={wrapperRef}>
-                        <DatePicker
-                            locale={locale}
-                            maxDate={maxDate}
-                            minDate={minDate}
-                            value={value}
-                            onChange={onDatePickerChange}
-                            todayOrSelectedDateRef={todayOrSelectedDateRef}
-                            defaultMonth={defaultMonth}
-                            nextButtonProps={nextButtonProps}
-                            previousButtonProps={previousButtonProps}
-                        />
-                    </div>
+                    <DatePicker
+                        ref={setWrapperElement}
+                        locale={locale}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        value={value}
+                        onChange={onDatePickerChange}
+                        todayOrSelectedDateRef={setTodayOrSelectedDate}
+                        defaultMonth={defaultMonth}
+                        nextButtonProps={nextButtonProps}
+                        previousButtonProps={previousButtonProps}
+                    />
                 </Popover>
             ) : null}
         </>

package/src/components/date-picker/types.ts

@@ -1,6 +1,6 @@
 import { IconButtonProps } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils';
-import { RefObject } from 'react';
+import { Ref } from 'react';
 
 /**
  * Defines the props of the component.
@@ -20,7 +20,7 @@ export interface DatePickerProps extends GenericProps {
     previousButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
     /** Reference to the <button> element corresponding to the current date or the selected date. */
-    todayOrSelectedDateRef?: RefObject<HTMLButtonElement>;
+    todayOrSelectedDateRef?: Ref<HTMLButtonElement>;
     /** Currently selected date. */
     value: Date | undefined;
     /** On change callback. */

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: (
@@ -301,6 +303,9 @@ export const DialogFocusTrap = ({ 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}
@@ -314,6 +319,10 @@ export const DialogFocusTrap = ({ theme }: any) => {
                     />
                 </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>
@@ -335,16 +344,51 @@ export const DialogFocusTrap = ({ 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"

package/src/components/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, ReactElement, ReactNode, RefObject, useMemo, useRef, useState } from 'react';
+import React, { Children, forwardRef, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -42,7 +42,7 @@ export interface DialogProps extends GenericProps {
     /** Reference to the parent element that triggered modal opening (will get back focus on close). */
     parentElement?: RefObject<HTMLElement>;
     /** Reference to the dialog content element. */
-    contentRef?: RefObject<HTMLDivElement>;
+    contentRef?: Ref<HTMLDivElement>;
     /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */
     focusElement?: RefObject<HTMLElement>;
     /** Whether to keep the dialog open on clickaway or escape press. */
@@ -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

@@ -49,6 +49,13 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
     <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"
       >
@@ -80,23 +87,84 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
         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}

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;