@lumx/react 2.2.18 → 2.2.20

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>,
+]
+`;

package/src/components/generic-block/index.ts

@@ -0,0 +1 @@
+export * from './GenericBlock';

package/src/components/lightbox/Lightbox.tsx

@@ -87,7 +87,7 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
 
     // Handle focus trap.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocusTrap(wrapperRef.current, childrenRef.current?.firstChild);
+    useFocusTrap(isOpen && wrapperRef.current, childrenRef.current?.firstChild);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const previousOpen = useRef(isOpen);

package/src/components/link-preview/LinkPreview.test.tsx

@@ -5,7 +5,7 @@ import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils';
-import { Thumbnail } from '@lumx/react';
+import { Link, Thumbnail } from '@lumx/react';
 
 import { Size, Theme } from '..';
 import { LinkPreview, LinkPreviewProps } from './LinkPreview';
@@ -25,81 +25,76 @@ const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
 
     return {
         thumbnail: wrapper.find(Thumbnail),
+        title: wrapper.find(`.${CLASSNAME}__title`),
+        description: wrapper.find(`.${CLASSNAME}__description`),
+        link: wrapper.find(`.${CLASSNAME}__link`).find(Link),
         props,
         wrapper,
     };
 };
 
 describe(`<${LinkPreview.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        // Here is an example of a basic rendering check, with snapshot.
+    it('should render with default props', () => {
+        const { wrapper, thumbnail, title, link, description } = setup();
+        expect(wrapper).toHaveClassName(CLASSNAME);
 
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
+        ['size', 'theme'].forEach((type) => {
+            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type, value: DEFAULT_PROPS[type] }));
         });
+        expect(thumbnail).not.toExist();
+        expect(title).not.toExist();
+        expect(link).toExist();
+        expect(link).toHaveProp('tabIndex', undefined);
+        expect(description).not.toExist();
+    });
 
-        it('should render correctly', () => {
-            const { wrapper } = setup({ size: Size.big });
-            expect(wrapper).toMatchSnapshot();
+    it('should render with only the title', () => {
+        const { title, link } = setup({ title: 'Title' });
 
-            expect(wrapper).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
+        expect(title).toExist();
+        expect(link).toExist();
+        expect(link).toHaveProp('tabIndex', '-1');
     });
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use default props', () => {
-            const { wrapper, thumbnail } = setup();
-            ['size', 'theme'].forEach((prop: string) => {
-                expect(wrapper).toHaveClassName(
-                    getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }),
-                );
-            });
-            expect(thumbnail).not.toExist();
+    it('should render with complete props', () => {
+        const { wrapper, thumbnail, title, link, description, props } = setup({
+            size: Size.big,
+            theme: Theme.dark,
+            thumbnailProps: { image: 'https://example.com/thumbnail.jpg', alt: '' },
+            link: 'https://example.com',
+            linkProps: { 'data-custom-attr': 'true' },
+            title: 'Title',
+            description: 'Description',
         });
 
-        it('should pass className prop to the wrapper', () => {
-            const expectedClassName = 'must-be-set';
-            const { wrapper } = setup({ className: expectedClassName });
-
-            expect(wrapper).toHaveClassName(expectedClassName);
-        });
+        const validateLink = (linkElement: any) => {
+            expect(linkElement).toHaveProp('href', props.link);
+            // Props forwarding
+            expect(linkElement).toHaveProp('data-custom-attr', 'true');
+        };
 
-        it('should set --theme-dark class variant on wrapper if theme = Theme.dark', () => {
-            const { wrapper } = setup({ theme: Theme.dark });
+        expect(wrapper).toExist();
 
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'theme', value: Theme.dark }));
-        });
-    });
+        // Thumbnail
+        expect(thumbnail).toExist();
+        validateLink((thumbnail as any).dive());
 
-    // 3. Test events.
-    describe('Events', () => {
-        const expectedUrl = 'https://expected.url';
-        const { thumbnail } = setup({
-            link: expectedUrl,
-            thumbnailProps: { image: 'https://expected.url/image.png', alt: 'Alt' },
-        });
-        window.open = jest.fn();
+        // Title
+        expect(title).toHaveText(props.title);
+        validateLink(title.find(Link));
 
-        thumbnail.simulate('click');
+        // Link
+        expect(link).toHaveText(props.link);
+        validateLink(link.find(Link));
 
-        expect(window.open).toHaveBeenCalledWith(expectedUrl, '_blank');
-    });
+        // Description
+        expect(description).toHaveText(props.description);
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Nothing to do here.
-    });
+        // Size prop applied
+        expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'size', value: props.size }));
 
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
+        // Dark theme applied
+        expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'theme', value: Theme.dark }));
     });
 
     // Common tests suite.

package/src/components/link-preview/LinkPreview.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
@@ -14,16 +14,18 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
 export interface LinkPreviewProps extends GenericProps {
-    /** Description (either a string, or sanitized html). */
-    description?: string | { __html: string };
+    /** Description. */
+    description?: string;
     /** Link URL. */
     link: string;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
     /** Props to pass to the link (minus those already set by the LinkPreview props). */
     linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;
     /** Size variant. */
@@ -34,6 +36,8 @@ export interface LinkPreviewProps extends GenericProps {
     thumbnailProps?: ThumbnailProps;
     /** Title. */
     title?: string;
+    /** Customize the title heading tag. */
+    titleHeading?: HeadingElement;
 }
 
 /**
@@ -49,10 +53,11 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<LinkPreviewProps> = {
+const DEFAULT_PROPS = {
     size: Size.regular,
     theme: Theme.light,
-};
+    titleHeading: 'h2',
+} as const;
 
 /**
  * LinkPreview component.
@@ -62,13 +67,24 @@ const DEFAULT_PROPS: Partial<LinkPreviewProps> = {
  * @return React element.
  */
 export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, description, link, linkProps, size, theme, thumbnailProps, title, ...forwardedProps } = props;
-
-    //TODO: a11y
-    const goToUrl = useCallback(() => window.open(link, '_blank'), [link]);
+    const {
+        className,
+        description,
+        link,
+        linkAs,
+        linkProps,
+        size,
+        theme,
+        thumbnailProps,
+        title,
+        titleHeading,
+        ...forwardedProps
+    } = props;
+    // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
+    const TitleHeading = titleHeading as HeadingElement;
 
     return (
-        <div
+        <article
             ref={ref}
             {...forwardedProps}
             className={classNames(
@@ -85,8 +101,14 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
                     <div className={`${CLASSNAME}__thumbnail`}>
                         <Thumbnail
                             {...thumbnailProps}
-                            onClick={goToUrl}
-                            role="link"
+                            linkAs={linkAs}
+                            linkProps={{
+                                ...linkProps,
+                                href: link,
+                                target: '_blank',
+                                // Avoid redundant links in focus order
+                                tabIndex: -1,
+                            }}
                             aspectRatio={AspectRatio.free}
                             fillHeight
                         />
@@ -95,9 +117,10 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
 
                 <div className={`${CLASSNAME}__container`}>
                     {title && (
-                        <div className={`${CLASSNAME}__title`}>
+                        <TitleHeading className={`${CLASSNAME}__title`}>
                             <Link
                                 {...linkProps}
+                                linkAs={linkAs}
                                 target="_blank"
                                 href={link}
                                 color={theme === Theme.light ? ColorPalette.dark : ColorPalette.light}
@@ -105,25 +128,29 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
                             >
                                 {title}
                             </Link>
-                        </div>
+                        </TitleHeading>
                     )}
+
                     {description && <p className={`${CLASSNAME}__description`}>{description}</p>}
 
                     <div className={`${CLASSNAME}__link`}>
                         <Link
                             {...linkProps}
+                            linkAs={linkAs}
                             className={classNames(`${CLASSNAME}__link`, linkProps?.className)}
                             target="_blank"
                             href={link}
                             color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}
                             colorVariant={ColorVariant.N}
+                            // Avoid redundant links in focus order
+                            tabIndex={title ? '-1' : undefined}
                         >
                             {link}
                         </Link>
                     </div>
                 </div>
             </div>
-        </div>
+        </article>
     );
 });
 

package/src/components/popover/Popover.tsx

@@ -1,5 +1,5 @@
 import { detectOverflow } from '@popperjs/core';
-import React, { forwardRef, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 
@@ -13,6 +13,7 @@ import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
 
 /**
  * Different possible placements for the popover.
@@ -90,6 +91,8 @@ export interface PopoverProps extends GenericProps {
     isOpen: boolean;
     /** Offset placement relative to anchor. */
     offset?: Offset;
+    /** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */
+    parentElement?: RefObject<HTMLElement>;
     /** Placement relative to anchor. */
     placement?: Placement;
     /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
@@ -212,6 +215,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
         isOpen,
         offset,
         onClose,
+        parentElement,
         placement,
         style,
         usePortal,
@@ -245,7 +249,8 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     });
 
     /** Action on close */
-    const handleClose = () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const handleClose = useCallback(() => {
         if (!onClose) {
             return;
         }
@@ -256,11 +261,22 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
          * unless specifically requested not to.
          */
         if (isFocusedWithin.current && focusAnchorOnClose) {
-            anchorRef.current?.focus();
+            if (parentElement?.current) {
+                parentElement?.current.focus();
+            }
+
+            const firstFocusable = anchorRef?.current && getFirstAndLastFocusable(anchorRef?.current).first;
+            if (firstFocusable) {
+                // Focus the first focusable element in anchor.
+                firstFocusable.focus();
+            } else {
+                // Fallback on the anchor element.
+                anchorRef?.current?.focus();
+            }
         }
 
         onClose();
-    };
+    }, [anchorRef, focusAnchorOnClose, onClose, parentElement]);
 
     const modifiers: any = [];
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];

package/src/components/select/Select.stories.tsx

@@ -1,3 +1,4 @@
+import { mdiBullhornOutline } from '@lumx/icons/';
 import { List, ListItem, Select, Size, TextField } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { text } from '@storybook/addon-knobs';
@@ -32,6 +33,7 @@ export const SimpleSelect = ({ theme }: any) => {
             theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
+            icon={mdiBullhornOutline}
         >
             <List isClickable>
                 {CHOICES.length > 0

package/src/components/select/Select.tsx

@@ -5,7 +5,7 @@ import lodashIsEmpty from 'lodash/isEmpty';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 
-import { Emphasis, Size } from '@lumx/react/components';
+import { Emphasis, Size, Theme } from '@lumx/react/components';
 import { IconButton } from '@lumx/react/components/button/IconButton';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
@@ -46,6 +46,7 @@ const SelectField: React.FC<SelectProps> = ({
     handleKeyboardNav,
     hasError,
     hasInputClear,
+    icon,
     id,
     isDisabled,
     isEmpty,
@@ -89,6 +90,15 @@ const SelectField: React.FC<SelectProps> = ({
                         aria-disabled={isDisabled || undefined}
                         {...forwardedProps}
                     >
+                        {icon && (
+                            <Icon
+                                className={`${CLASSNAME}__input-icon`}
+                                color={theme === Theme.dark ? 'light' : undefined}
+                                icon={icon}
+                                size={Size.xs}
+                            />
+                        )}
+
                         <div
                             className={classNames([
                                 `${CLASSNAME}__input-native`,

package/src/components/select/SelectMultiple.stories.tsx

@@ -1,4 +1,5 @@
 /* istanbul ignore file */
+import { mdiTram } from '@lumx/icons/';
 import { Chip, List, ListItem, SelectMultiple, Size } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
@@ -40,6 +41,7 @@ export const DefaultSelectMultiple = ({ theme }: any) => {
             theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
+            icon={mdiTram}
         >
             <List isClickable>
                 {CHOICES.length > 0

package/src/components/select/SelectMultiple.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 
-import { Size } from '@lumx/react/components';
+import { Size, Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
@@ -59,6 +59,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
     anchorRef,
     handleKeyboardNav,
     hasError,
+    icon,
     id,
     isDisabled,
     isEmpty,
@@ -102,6 +103,15 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
                     aria-disabled={isDisabled || undefined}
                     {...forwardedProps}
                 >
+                    {icon && (
+                        <Icon
+                            className={`${CLASSNAME}__input-icon`}
+                            color={theme === Theme.dark ? 'light' : undefined}
+                            icon={icon}
+                            size={Size.xs}
+                        />
+                    )}
+
                     <div className={`${CLASSNAME}__chips`}>
                         {!isEmpty &&
                             value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}