@lumx/react 2.2.20-alpha.xss.datatable → 2.2.21

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

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