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/notification/Notifications.stories.tsx ADDED Viewed

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Button, Notification, Kind } from '@lumx/react';
+import { NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { action } from '@storybook/addon-actions';
+import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
+export default {
+    title: 'LumX components/notification/Notification',
+    parameters: {
+        // Delay Chromatic snapshot to wait for notification to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: NOTIFICATION_TRANSITION_DURATION,
+        },
+    },
+    // Force minimum chromatic screen size to make sure the dialog appears in view.
+    decorators: [chromaticForceScreenSize],
+};
+const properties = {
+    error: {
+        content: 'Error',
+        onClick: action('onClick'),
+        isOpen: true,
+        type: Kind.error,
+    },
+    info: {
+        content: 'Info',
+        onClick: action('onClick'),
+        isOpen: true,
+        type: Kind.info,
+    },
+    infoWithCallback: {
+        onActionClick: action('onClick'),
+        actionLabel: 'Undo',
+        content: 'Info with callback',
+        onClick: action('onClick'),
+        isOpen: true,
+        type: Kind.info,
+    },
+    success: {
+        content: 'Success',
+        onClick: action('onClick'),
+        isOpen: true,
+        type: Kind.success,
+    },
+    warning: {
+        content: 'Warning',
+        onClick: action('onClick'),
+        isOpen: true,
+        type: Kind.warning,
+    },
+};
+export const Error = () => <Notification {...properties.error} />;
+export const Info = () => <Notification {...properties.info} />;
+export const InfoWithCallback = () => <Notification {...properties.infoWithCallback} />;
+export const Success = () => <Notification {...properties.success} />;
+export const Warning = () => <Notification {...properties.warning} />;
+export const OnTrigger = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const onClick = () => setIsOpen(!isOpen);
+    return (
+        <>
+            <Button onClick={onClick}>{!isOpen ? 'Show Notification' : 'Close Notification'}</Button>,
+            <Notification {...properties.error} isOpen={isOpen} />,
+        </>
+    );
+};

package/dist/src/components/notification/__snapshots__/Notification.test.tsx.snap ADDED Viewed

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`<Notification> Snapshots and structure should render defaults 1`] = `
+<Portal
+  containerInfo={<body />}
+>
+  <div
+    className="lumx-notification lumx-notification--color-dark"
+    onClick={[Function]}
+    role="alert"
+    style={
+      {
+        "zIndex": 9999,
+      }
+    }
+  >
+    <div
+      className="lumx-notification__icon"
+    >
+      <Icon
+        icon="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        size="s"
+      />
+    </div>
+    <div
+      className="lumx-notification__content"
+    >
+      Info
+    </div>
+  </div>
+</Portal>
+`;
+exports[`<Notification> Snapshots and structure should render nothing since the notification is closed 1`] = `""`;

package/dist/src/components/notification/constants.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
+/**
+ * Notification delay before hiding.
+ */
+export const HIDE_DELAY = 6000;
+/**
+ * Notification icon and colors according to their type.
+ */
+export const NOTIFICATION_CONFIGURATION = {
+    error: {
+        color: 'red',
+        icon: mdiAlert,
+    },
+    info: {
+        color: 'dark',
+        icon: mdiInformation,
+    },
+    success: {
+        color: 'green',
+        icon: mdiCheckCircle,
+    },
+    warning: {
+        color: 'yellow',
+        icon: mdiAlertCircle,
+    },
+};

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

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

package/dist/src/components/popover/Popover.stories.tsx ADDED Viewed

@@ -0,0 +1,386 @@
+import React, { RefObject, useEffect, useRef, useState } from 'react';
+import { mdiAccount, mdiBell } from '@lumx/icons';
+import {
+    Alignment,
+    Chip,
+    Button,
+    Emphasis,
+    FlexBox,
+    Icon,
+    IconButton,
+    List,
+    ListItem,
+    Orientation,
+    Placement,
+    Popover,
+    Size,
+} from '@lumx/react';
+import { boolean, select } from '@storybook/addon-knobs';
+import range from 'lodash/range';
+import startCase from 'lodash/startCase';
+export default { title: 'LumX components/popover/Popover' };
+const DEFAULT_PROPS = Popover.defaultProps as any;
+export const Positions = ({ theme }: any) => {
+    const popovers: Array<[Placement, RefObject<any>]> = [
+        [Placement.LEFT, useRef(null)],
+        [Placement.TOP, useRef(null)],
+        [Placement.BOTTOM, useRef(null)],
+        [Placement.RIGHT, useRef(null)],
+    ];
+    const hasArrow = boolean('Has arrow', DEFAULT_PROPS.hasArrow as any);
+    const elevation: any = select('Elevation', [5, 4, 3, 2, 1], DEFAULT_PROPS.elevation);
+    const alignOptions = { middle: '', start: '-start', end: '-end' };
+    const align = select('Placement variant', alignOptions, alignOptions.middle);
+    return (
+        <FlexBox style={{ padding: 80 }} orientation={Orientation.horizontal}>
+            {popovers.map(([placement, ref]) => {
+                const placementVariant = (placement + align) as any;
+                return (
+                    <FlexBox key={placement} fillSpace vAlign={Alignment.center} hAlign={Alignment.center}>
+                        <Chip ref={ref} theme={theme} size={Size.s}>
+                            {startCase(placementVariant).toUpperCase()}
+                        </Chip>
+                        <Popover
+                            isOpen
+                            theme={theme}
+                            anchorRef={ref}
+                            placement={placementVariant}
+                            elevation={elevation}
+                            hasArrow={hasArrow}
+                        >
+                            <div className="lumx-spacing-margin-huge">Popover</div>
+                        </Popover>
+                    </FlexBox>
+                );
+            })}
+        </FlexBox>
+    );
+};
+export const Auto = ({ theme }: any) => {
+    const demoPopperStyle = {
+        alignItems: 'center',
+        display: 'flex',
+        height: 100,
+        justifyContent: 'center',
+        width: 200,
+    };
+    const container = {
+        width: '200%',
+        height: '2000px',
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+    };
+    const anchorRef = useRef(null);
+    return (
+        <div style={container}>
+            <div>
+                <Chip ref={anchorRef} theme={theme} size={Size.s}>
+                    Anchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={anchorRef} placement={Placement.AUTO} isOpen>
+                <div style={demoPopperStyle}>Popover</div>
+            </Popover>
+        </div>
+    );
+};
+export const Top = ({ theme }: any) => {
+    const demoPopperStyle = {
+        alignItems: 'center',
+        display: 'flex',
+        height: 100,
+        justifyContent: 'center',
+        width: 200,
+    };
+    const container = {
+        width: '200%',
+        height: '2000px',
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+    };
+    const anchorRef = useRef(null);
+    return (
+        <div style={container}>
+            <div>
+                <Chip ref={anchorRef} theme={theme} size={Size.s}>
+                    Anchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={anchorRef} placement={Placement.TOP} isOpen>
+                <div style={demoPopperStyle}>Popover</div>
+            </Popover>
+        </div>
+    );
+};
+export const WithUpdatingChildren = ({ theme }: any) => {
+    const anchorRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleOpen = () => setIsOpen(!isOpen);
+    const [text, setText] = useState('Long loading text with useless words');
+    useEffect(() => {
+        if (isOpen) {
+            const timer = setTimeout(() => {
+                setText('Text');
+            }, 1000);
+            return () => clearTimeout(timer);
+        }
+        setText('Long loading text with useless words');
+        return undefined;
+    }, [isOpen]);
+    return (
+        <div style={{ float: 'right' }} className="lumx-spacing-margin-right-huge">
+            <IconButton
+                label="Notifications"
+                className="lumx-spacing-margin-right-huge"
+                ref={anchorRef}
+                emphasis={Emphasis.low}
+                icon={mdiBell}
+                size={Size.m}
+                onClick={toggleOpen}
+            />
+            <Popover
+                closeOnClickAway
+                closeOnEscape
+                theme={theme}
+                isOpen={isOpen}
+                anchorRef={anchorRef}
+                placement={Placement.BOTTOM_END}
+                onClose={toggleOpen}
+                fitWithinViewportHeight
+            >
+                <List>
+                    <ListItem before={<Icon icon={mdiAccount} />} className="lumx-spacing-margin-right-huge">
+                        <span>{text}</span>
+                    </ListItem>
+                </List>
+            </Popover>
+        </div>
+    );
+};
+export const WithScrollingPopover = ({ theme }: any) => {
+    const anchorRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleOpen = () => setIsOpen(!isOpen);
+    return (
+        <div style={{ float: 'right' }} className="lumx-spacing-margin-right-huge">
+            <IconButton
+                label="Notifications"
+                className="lumx-spacing-margin-right-huge"
+                ref={anchorRef}
+                emphasis={Emphasis.low}
+                icon={mdiBell}
+                size={Size.m}
+                onClick={toggleOpen}
+            />
+            <Popover
+                closeOnClickAway
+                closeOnEscape
+                theme={theme}
+                isOpen={isOpen}
+                anchorRef={anchorRef}
+                placement={Placement.BOTTOM}
+                onClose={toggleOpen}
+                fitWithinViewportHeight
+            >
+                <List style={{ overflowY: 'auto' }}>
+                    {range(100).map((n: number) => {
+                        return (
+                            <ListItem
+                                key={`key-${n}`}
+                                before={<Icon icon={mdiAccount} />}
+                                className="lumx-spacing-margin-right-huge"
+                            >
+                                <span>{`List item ${n} and some text`}</span>
+                            </ListItem>
+                        );
+                    })}
+                </List>
+            </Popover>
+        </div>
+    );
+};
+export const WithoutPortal = ({ theme }: any) => {
+    const popovers: Array<[Placement, RefObject<any>]> = [
+        [Placement.LEFT, useRef(null)],
+        [Placement.TOP, useRef(null)],
+        [Placement.BOTTOM, useRef(null)],
+        [Placement.RIGHT, useRef(null)],
+    ];
+    const hasArrow = boolean('Has arrow', DEFAULT_PROPS.hasArrow as any);
+    const elevation: any = select('Elevation', [5, 4, 3, 2, 1], DEFAULT_PROPS.elevation);
+    const alignOptions = { middle: '', start: '-start', end: '-end' };
+    const align = select('Placement variant', alignOptions, alignOptions.middle);
+    return (
+        <FlexBox style={{ padding: 80 }} orientation={Orientation.horizontal}>
+            {popovers.map(([placement, ref]) => {
+                const placementVariant = (placement + align) as any;
+                return (
+                    <FlexBox key={placement} fillSpace vAlign={Alignment.center} hAlign={Alignment.center}>
+                        <Chip ref={ref} theme={theme} size={Size.s}>
+                            {startCase(placementVariant).toUpperCase()}
+                        </Chip>
+                        <Popover
+                            isOpen
+                            theme={theme}
+                            anchorRef={ref}
+                            placement={placementVariant}
+                            elevation={elevation}
+                            hasArrow={hasArrow}
+                            usePortal={false}
+                        >
+                            <div className="lumx-spacing-margin-huge">Popover</div>
+                        </Popover>
+                    </FlexBox>
+                );
+            })}
+        </FlexBox>
+    );
+};
+export const NestedWithoutPortal = () => {
+    const boundaryRef = React.useRef(document.querySelector('body'));
+    const Entry = ({ children, placement = Placement.RIGHT_START }: any) => {
+        const rootButtonRef = React.useRef(null);
+        const [rootOpen, setRootOpen] = React.useState(false);
+        return (
+            <>
+                <li ref={rootButtonRef}>
+                    <Button onClick={() => setRootOpen(!rootOpen)}>Click</Button>
+                </li>
+                {children && (
+                    <Popover
+                        boundaryRef={boundaryRef}
+                        fitWithinViewportHeight
+                        //offset={{ along: -16 }}
+                        placement={placement}
+                        isOpen={rootOpen}
+                        anchorRef={rootButtonRef}
+                        usePortal={false}
+                    >
+                        <div className="lumx-spacing-margin-huge" style={{ overflowY: 'auto' }}>
+                            <List style={{ minWidth: '150px' }}>{children}</List>
+                        </div>
+                    </Popover>
+                )}
+            </>
+        );
+    };
+    return (
+        <div style={{ height: '100vh', width: '50px' }}>
+            <List>
+                <Entry placement={Placement.BOTTOM_START}>
+                    <Entry />
+                    <Entry />
+                    <Entry>
+                        <Entry />
+                        <Entry />
+                        <Entry>
+                            <Entry>
+                                <Entry />
+                            </Entry>
+                        </Entry>
+                    </Entry>
+                </Entry>
+            </List>
+        </div>
+    );
+};
+export const FitToAnchorWidth = ({ theme }: any) => {
+    const demoPopperStyle = {
+        alignItems: 'center',
+        display: 'flex',
+        height: 100,
+        justifyContent: 'center',
+        width: 200,
+    };
+    const container = {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        gap: 150,
+        marginTop: 150,
+    } as const;
+    const maxWidthAnchorRef = useRef(null);
+    const widthSmallAnchorRef = useRef(null);
+    const widthLargeAnchorRef = useRef(null);
+    const minWidthAnchorRef = useRef(null);
+    const defaultWidthAnchorRef = useRef(null);
+    return (
+        <div style={container}>
+            <div>
+                <Chip ref={maxWidthAnchorRef} theme={theme} size={Size.s}>
+                    Anchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={maxWidthAnchorRef} fitToAnchorWidth="maxWidth" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover maxWidth</div>
+            </Popover>
+            <div>
+                <Chip ref={widthSmallAnchorRef} theme={theme} size={Size.s}>
+                    Anchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={widthSmallAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover width small anchor</div>
+            </Popover>
+            <div>
+                <Chip ref={widthLargeAnchorRef} theme={theme} size={Size.s}>
+                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={widthLargeAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover width large anchor</div>
+            </Popover>
+            <div>
+                <Chip ref={minWidthAnchorRef} theme={theme} size={Size.s}>
+                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={minWidthAnchorRef} fitToAnchorWidth="minWidth" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover minWidth</div>
+            </Popover>
+            <div>
+                <Chip ref={defaultWidthAnchorRef} theme={theme} size={Size.s}>
+                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={defaultWidthAnchorRef} isOpen placement="top">
+                <div style={demoPopperStyle}>Popover default</div>
+            </Popover>
+        </div>
+    );
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+import { Popover, PopoverProps } from './Popover';
+import * as stories from '../../stories/generated/Popover/Demos.stories';
+const CLASSNAME = Popover.className as string;
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<PopoverProps> = {}, shallowRendering = true) => {
+    const propsOverride = { anchorRef: { current: null }, children: null, isOpen: true, ...props } as any;
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<Popover {...propsOverride} />);
+    const popover = wrapper.find(`.${CLASSNAME}`);
+    return { props, wrapper, popover };
+};
+describe(`<${Popover.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, Popover);
+    });
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'popover', prop: 'popover' }, { className: CLASSNAME });
+});