npm - @lumx/react - Versions diffs - 3.0.7 → 3.1.0 - Mend

@lumx/react 3.0.7 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (517) hide show

package/dist/src/components/popover/__snapshots__/Popover.test.tsx.snap ADDED Viewed

@@ -0,0 +1,343 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`<Popover> Snapshots and structure should render story 'Alignments' 1`] = `
+[
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-top-start"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+          "zIndex": 9999,
+        }
+      }
+    >
+      <ClickAwayProvider
+        childrenRefs={
+          {
+            "current": [
+              {
+                "current": null,
+              },
+              {
+                "current": null,
+              },
+            ],
+          }
+        }
+      >
+        Popover aligned on start of the top side
+      </ClickAwayProvider>
+    </div>
+  </Portal>,
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-top-end"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+          "zIndex": 9999,
+        }
+      }
+    >
+      <ClickAwayProvider
+        childrenRefs={
+          {
+            "current": [
+              {
+                "current": null,
+              },
+              {
+                "current": null,
+              },
+            ],
+          }
+        }
+      >
+        Popover aligned on start of the top side
+      </ClickAwayProvider>
+    </div>
+  </Portal>,
+]
+`;
+exports[`<Popover> Snapshots and structure should render story 'Auto' 1`] = `
+<Portal
+  containerInfo={<body />}
+>
+  <div
+    className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-auto"
+    style={
+      {
+        "left": "0",
+        "position": "absolute",
+        "top": "0",
+        "zIndex": 9999,
+      }
+    }
+  >
+    <ClickAwayProvider
+      childrenRefs={
+        {
+          "current": [
+            {
+              "current": null,
+            },
+            {
+              "current": null,
+            },
+          ],
+        }
+      }
+    >
+      Popover
+    </ClickAwayProvider>
+  </div>
+</Portal>
+`;
+exports[`<Popover> Snapshots and structure should render story 'Default' 1`] = `
+<Portal
+  containerInfo={<body />}
+>
+  <div
+    className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-bottom"
+    style={
+      {
+        "left": "0",
+        "position": "absolute",
+        "top": "0",
+        "zIndex": 9999,
+      }
+    }
+  >
+    <ClickAwayProvider
+      childrenRefs={
+        {
+          "current": [
+            {
+              "current": null,
+            },
+            {
+              "current": null,
+            },
+          ],
+        }
+      }
+    >
+      Popover
+    </ClickAwayProvider>
+  </div>
+</Portal>
+`;
+exports[`<Popover> Snapshots and structure should render story 'MatchingWidth' 1`] = `
+<Portal
+  containerInfo={<body />}
+>
+  <div
+    className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-bottom-start"
+    style={
+      {
+        "left": "0",
+        "position": "absolute",
+        "top": "0",
+        "zIndex": 9999,
+      }
+    }
+  >
+    <ClickAwayProvider
+      childrenRefs={
+        {
+          "current": [
+            {
+              "current": null,
+            },
+            {
+              "current": null,
+            },
+          ],
+        }
+      }
+    >
+      Popover's width matching anchor's
+    </ClickAwayProvider>
+  </div>
+</Portal>
+`;
+exports[`<Popover> Snapshots and structure should render story 'Offset' 1`] = `
+<Portal
+  containerInfo={<body />}
+>
+  <div
+    className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-right"
+    style={
+      {
+        "left": "0",
+        "position": "absolute",
+        "top": "0",
+        "zIndex": 9999,
+      }
+    }
+  >
+    <ClickAwayProvider
+      childrenRefs={
+        {
+          "current": [
+            {
+              "current": null,
+            },
+            {
+              "current": null,
+            },
+          ],
+        }
+      }
+    >
+      Popover
+    </ClickAwayProvider>
+  </div>
+</Portal>
+`;
+exports[`<Popover> Snapshots and structure should render story 'Positions' 1`] = `
+[
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-left"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+          "zIndex": 9999,
+        }
+      }
+    >
+      <ClickAwayProvider
+        childrenRefs={
+          {
+            "current": [
+              {
+                "current": null,
+              },
+              {
+                "current": null,
+              },
+            ],
+          }
+        }
+      >
+        Popover
+      </ClickAwayProvider>
+    </div>
+  </Portal>,
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-top"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+          "zIndex": 9999,
+        }
+      }
+    >
+      <ClickAwayProvider
+        childrenRefs={
+          {
+            "current": [
+              {
+                "current": null,
+              },
+              {
+                "current": null,
+              },
+            ],
+          }
+        }
+      >
+        Popover
+      </ClickAwayProvider>
+    </div>
+  </Portal>,
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-bottom"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+          "zIndex": 9999,
+        }
+      }
+    >
+      <ClickAwayProvider
+        childrenRefs={
+          {
+            "current": [
+              {
+                "current": null,
+              },
+              {
+                "current": null,
+              },
+            ],
+          }
+        }
+      >
+        Popover
+      </ClickAwayProvider>
+    </div>
+  </Portal>,
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      className="lumx-spacing-padding-huge lumx-popover lumx-popover--elevation-3 lumx-popover--position-right"
+      style={
+        {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+          "zIndex": 9999,
+        }
+      }
+    >
+      <ClickAwayProvider
+        childrenRefs={
+          {
+            "current": [
+              {
+                "current": null,
+              },
+              {
+                "current": null,
+              },
+            ],
+          }
+        }
+      >
+        Popover
+      </ClickAwayProvider>
+    </div>
+  </Portal>,
+]
+`;

package/dist/src/components/popover/index.ts ADDED Viewed

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

package/dist/src/components/popover-dialog/PopoverDialog.stories.tsx ADDED Viewed

@@ -0,0 +1,75 @@
+import { mdiMenu } from '@lumx/icons/index';
+import { mdiSettings } from '@lumx/icons/v4-to-v5-aliases';
+import React, { useRef, useState } from 'react';
+import { PopoverDialog, PopoverDialogProps } from '.';
+import { Emphasis, Orientation, Size, Typography } from '..';
+import { Button, IconButton } from '../button';
+import { FlexBox } from '../flex-box';
+import { Heading } from '../heading';
+import { List, ListItem } from '../list';
+import { Placement } from '../popover/Popover';
+import { Toolbar } from '../toolbar';
+const WithButton = (Story: any, context: any) => {
+    const anchorRef = useRef(null);
+    const [isOpen, setIsOpen] = useState<boolean>(context?.args?.isOpen || false);
+    return (
+        <>
+            <Button ref={anchorRef} onClick={() => setIsOpen((current) => !current)}>
+                Open popover
+            </Button>
+            <Story anchorRef={anchorRef} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+        </>
+    );
+};
+const dialogHeaderId = 'dialog-header';
+const DemoPopoverContent = () => (
+    <FlexBox orientation={Orientation.vertical}>
+        <Toolbar
+            label={
+                <Heading id="dialogHeaderId" typography={Typography.headline}>
+                    Title
+                </Heading>
+            }
+            after={<IconButton label="Settings" icon={mdiSettings} emphasis={Emphasis.low} />}
+        />
+        <List>
+            <ListItem size={Size.huge} after={<IconButton label="Menu" icon={mdiMenu} size={Size.s} />}>
+                List Item With Actions
+            </ListItem>
+            <ListItem
+                size={Size.huge}
+                linkProps={{
+                    href: 'http://google.com',
+                }}
+            >
+                Clickable list item
+            </ListItem>
+        </List>
+    </FlexBox>
+);
+export default {
+    title: 'LumX components/popover-dialog/PopoverDialog',
+    component: PopoverDialog,
+    decorators: [WithButton],
+    args: {
+        children: <DemoPopoverContent />,
+        'aria-labelledby': dialogHeaderId,
+        placement: Placement.BOTTOM,
+    },
+};
+const Template = (args: PopoverDialogProps, context: any) => {
+    const { anchorRef, isOpen, onClose } = context;
+    return (
+        <PopoverDialog {...args} anchorRef={anchorRef} isOpen={isOpen} onClose={onClose}>
+            {args.children}
+        </PopoverDialog>
+    );
+};
+export const Default = Template.bind({});

package/dist/src/components/popover-dialog/PopoverDialog.test.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import React, { useRef, useState } from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { PopoverDialog } from './PopoverDialog';
+const DialogWithButton = (forwardedProps: any) => {
+    const anchorRef = useRef(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    return (
+        <>
+            <button type="button" ref={anchorRef} onClick={() => setIsOpen((current) => !current)}>
+                Open popover
+            </button>
+            <PopoverDialog {...forwardedProps} anchorRef={anchorRef} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                <button type="button">Button 1</button>
+                <button type="button">Button 2</button>
+            </PopoverDialog>
+            {/* This should never have focus while popover is opened */}
+            <button type="button">External button</button>
+        </>
+    );
+};
+describe(`<${PopoverDialog.displayName}>`, () => {
+    it('should behave like a dialog', async () => {
+        const label = 'Test Label';
+        render(<DialogWithButton label={label} />);
+        /** Open the popover */
+        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
+        await userEvent.click(triggerElement);
+        const dialog = await screen.findByRole('dialog', { name: label });
+        const withinDialog = within(dialog);
+        /** Get buttons within dialog */
+        const dialogButtons = withinDialog.getAllByRole('button');
+        // First button should have focus by default on opening
+        expect(dialogButtons[0]).toHaveFocus();
+        // Tab to next button
+        await userEvent.tab();
+        // Second button should have focus
+        expect(dialogButtons[1]).toHaveFocus();
+        // Tab to next button
+        await userEvent.tab();
+        // As there is no more button, focus should loop back to first button.
+        expect(dialogButtons[0]).toHaveFocus();
+        // Close the popover
+        await userEvent.keyboard('{escape}');
+        expect(screen.queryByRole('dialog', { name: label })).not.toBeInTheDocument();
+        /** Anchor should retrieve the focus */
+        expect(triggerElement).toHaveFocus();
+    });
+});

package/dist/src/components/popover-dialog/PopoverDialog.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { Comp, HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { Popover, PopoverProps } from '../popover/Popover';
+/**
+ * PopoverDialog props.
+ * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ */
+export type PopoverDialogProps = PopoverProps & HasAriaLabelOrLabelledBy;
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'PopoverDialog';
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<PopoverDialogProps> = {};
+/**
+ * PopoverDialog component.
+ * Defines a popover that acts like a dialog
+ * * Has a dialog aria role
+ * * Sets a focus trap within the popover
+ * * Closes on click away and escape.
+ */
+export const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { children, isOpen, focusElement, label, className, ...forwardedProps } = props;
+    return (
+        <Popover
+            {...forwardedProps}
+            ref={ref}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+            role="dialog"
+            aria-modal="true"
+            /**
+             * If a label is set, set as aria-label.
+             * If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props
+             */
+            aria-label={label}
+            isOpen={isOpen}
+            focusElement={focusElement}
+            closeOnClickAway
+            closeOnEscape
+            withFocusTrap
+        >
+            {children}
+        </Popover>
+    );
+});
+PopoverDialog.displayName = COMPONENT_NAME;
+PopoverDialog.className = CLASSNAME;
+PopoverDialog.defaultProps = DEFAULT_PROPS;

package/dist/src/components/popover-dialog/index.tsx ADDED Viewed

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

package/dist/src/components/post-block/PostBlock.test.tsx ADDED Viewed

@@ -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 { PostBlock, PostBlockProps } from './PostBlock';
+import * as stories from '../../stories/generated/PostBlock/Demos.stories';
+const CLASSNAME = PostBlock.className as string;
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<PostBlockProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<PostBlock {...(props as any)} />);
+    return { props, wrapper };
+};
+describe(`<${PostBlock.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, PostBlock);
+    });
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/post-block/PostBlock.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+import React, { forwardRef, ReactNode } from 'react';
+import classNames from 'classnames';
+import isObject from 'lodash/isObject';
+import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+/**
+ * Defines the props of the component.
+ */
+export interface PostBlockProps extends GenericProps, HasTheme {
+    /** Action toolbar content. */
+    actions?: ReactNode;
+    /** Attachment content. */
+    attachments?: ReactNode;
+    /** Author content. */
+    author?: ReactNode;
+    /** Metadata content. */
+    meta?: ReactNode;
+    /** Orientation. */
+    orientation?: Orientation;
+    /** Tag content. */
+    tags?: ReactNode;
+    /** Content (string, or sanitized html). */
+    text?: string | { __html: string };
+    /** Thumbnail. */
+    thumbnailProps?: ThumbnailProps;
+    /** Title. */
+    title: string;
+    /** On click callback. */
+    onClick?(): void;
+}
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'PostBlock';
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<PostBlockProps> = {
+    orientation: Orientation.horizontal,
+    theme: Theme.light,
+};
+/**
+ * PostBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const PostBlock: Comp<PostBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        actions,
+        attachments,
+        author,
+        className,
+        meta,
+        onClick,
+        orientation,
+        tags,
+        text,
+        theme,
+        thumbnailProps,
+        title,
+        ...forwardedProps
+    } = props;
+    return (
+        <div
+            ref={ref}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, orientation, theme }))}
+            {...forwardedProps}
+        >
+            {thumbnailProps && (
+                <div className={`${CLASSNAME}__thumbnail`}>
+                    <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />
+                </div>
+            )}
+            <div className={`${CLASSNAME}__wrapper`}>
+                {author && <div className={`${CLASSNAME}__author`}>{author}</div>}
+                {title && (
+                    <button type="button" className={`${CLASSNAME}__title`} onClick={onClick}>
+                        {title}
+                    </button>
+                )}
+                {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}
+                {isObject(text) && text.__html ? (
+                    // eslint-disable-next-line react/no-danger
+                    <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />
+                ) : (
+                    <p className={`${CLASSNAME}__text`}>{text}</p>
+                )}
+                {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}
+                {(tags || actions) && (
+                    <div className={`${CLASSNAME}__toolbar`}>
+                        {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}
+                        {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});
+PostBlock.displayName = COMPONENT_NAME;
+PostBlock.className = CLASSNAME;
+PostBlock.defaultProps = DEFAULT_PROPS;