@lumx/react 3.1.5 → 3.2.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.1.5",
-        "@lumx/icons": "^3.1.5",
+        "@lumx/core": "^3.2.0",
+        "@lumx/icons": "^3.2.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -113,5 +113,5 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.1.5"
+    "version": "3.2.0"
 }

package/src/components/alert-dialog/AlertDialog.stories.tsx

@@ -1,11 +1,27 @@
-import React, { RefObject, useRef, useState } from 'react';
-import { Button, Theme, Link } from '@lumx/react';
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { RefObject, useRef } from 'react';
+import { Button, Link, Kind } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
-import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withChromaticForceScreenSize } from '../../stories/decorators/withChromaticForceScreenSize';
 import { AlertDialog } from './AlertDialog';
+import DialogStories from '../dialog/Dialog.stories';
 
 export default {
     title: 'LumX components/alert-dialog/AlertDialog',
+    component: AlertDialog,
+    args: {
+        ...AlertDialog.defaultProps,
+        'confirmProps.label': 'Ok',
+    },
+    argTypes: {
+        size: DialogStories.argTypes.size,
+        kind: getSelectArgType(Kind),
+        'confirmProps.onClick': { action: true },
+    },
     parameters: {
         // Delay Chromatic snapshot to wait for dialog to open.
         chromatic: {
@@ -13,184 +29,99 @@ export default {
             delay: DIALOG_TRANSITION_DURATION,
         },
     },
-    // Force minimum chromatic screen size to make sure the dialog appears in view.
-    decorators: [chromaticForceScreenSize],
-};
-
-const defaultProps = {
-    id: 'alert-dialog',
-    confirmProps: { onClick: () => alert('confirm'), label: 'OK' },
+    decorators: [
+        // Force minimum chromatic screen size to make sure the dialog appears in view.
+        withChromaticForceScreenSize(),
+        withNestedProps(),
+    ],
+    render(props: any) {
+        const buttonRef = useRef() as RefObject<HTMLButtonElement>;
+        const [isOpen, close, open] = useBooleanState(true);
+        return (
+            <>
+                <Button ref={buttonRef} onClick={open}>
+                    Open dialog
+                </Button>
+                <AlertDialog {...props} isOpen={isOpen} onClose={close} parentElement={buttonRef} />
+            </>
+        );
+    },
 };
 
-function useOpenButton(theme: Theme) {
-    const buttonRef = useRef() as RefObject<HTMLButtonElement>;
-    const [isOpen, setOpen] = useState(true);
-    const openDialog = () => setOpen(true);
-    const closeDialog = () => setOpen(false);
-
-    return {
-        button: (
-            <Button ref={buttonRef} onClick={openDialog} theme={theme}>
-                Open dialog
-            </Button>
-        ),
-        buttonRef,
-        closeDialog,
-        isOpen,
-    };
-}
-
-export const Default = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                isOpen={isOpen}
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                title="Default (info)"
-                confirmProps={{ onClick: () => console.log('confirm'), label: 'Confirm' }}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
+/**
+ * Alert dialog with default kind
+ */
+export const DefaultKind = {
+    args: {
+        title: 'Default (info)',
+        children: loremIpsum('tiny'),
+    },
 };
 
-export const Warning = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                isOpen={isOpen}
-                title="Warning"
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                kind="warning"
-                {...defaultProps}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
+/**
+ * Alert dialog as warning
+ */
+export const Warning = {
+    args: {
+        ...DefaultKind.args,
+        kind: Kind.warning,
+        title: 'Warning',
+    },
 };
 
-export const Success = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                isOpen={isOpen}
-                title="Success"
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                kind="success"
-                {...defaultProps}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
+/**
+ * Alert dialog as success
+ */
+export const Success = {
+    args: {
+        ...DefaultKind.args,
+        kind: Kind.success,
+        title: 'Success',
+    },
 };
 
-export const Error = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                isOpen={isOpen}
-                title="Error"
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                kind="error"
-                {...defaultProps}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
+/**
+ * Alert dialog as error
+ */
+export const Error = {
+    args: {
+        ...DefaultKind.args,
+        kind: Kind.error,
+        title: 'Error',
+    },
 };
 
-export const WithCancel = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                {...defaultProps}
-                title="With Cancel"
-                isOpen={isOpen}
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                cancelProps={{
-                    label: 'Cancel',
-                    onClick: closeDialog,
-                }}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
+/**
+ * Alert dialog with cancel button
+ */
+export const WithCancel = {
+    argTypes: {
+        'cancelProps.onClick': { action: true },
+    },
+    args: {
+        ...DefaultKind.args,
+        title: 'With Cancel',
+        'cancelProps.label': 'Cancel',
+    },
 };
 
-export const RichDescription = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                {...defaultProps}
-                title="With Rich Description"
-                isOpen={isOpen}
-                onClose={closeDialog}
-                parentElement={buttonRef}
-            >
+/**
+ * Alert dialog with rich description
+ */
+export const RichDescription = {
+    argTypes: { children: { control: false } },
+    args: {
+        ...DefaultKind.args,
+        title: 'With Rich Description',
+        children: (
+            <>
                 Amet ut elit dolore irure mollit <strong>sunt culpa esse</strong>.<br />
                 Ea ut Lorem.
                 <br />
                 <Link href="https://example.com" target="_blank">
                     Link
                 </Link>
-            </AlertDialog>
-        </>
-    );
-};
-
-export const WithForwardedProps = ({ theme }: any) => {
-    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
-
-    return (
-        <>
-            {button}
-            <AlertDialog
-                {...defaultProps}
-                title="With Forwarded Props"
-                isOpen={isOpen}
-                onClose={closeDialog}
-                parentElement={buttonRef}
-                cancelProps={{
-                    label: 'Cancel',
-                    onClick: closeDialog,
-                    style: { color: 'blue' },
-                }}
-                confirmProps={{
-                    onClick: () => alert('confirm'),
-                    label: 'OK',
-                    style: { color: 'red' },
-                }}
-            >
-                Consequat deserunt officia aute laborum tempor anim sint est.
-            </AlertDialog>
-        </>
-    );
+            </>
+        ),
+    },
 };

package/src/components/alert-dialog/AlertDialog.test.tsx

@@ -1,11 +1,9 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite, itShouldRenderStories, Wrapper } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
 import { AlertDialog, AlertDialogProps } from './AlertDialog';
-import * as stories from './AlertDialog.stories';
 
 jest.mock('uid', () => ({ uid: () => 'uid' }));
 
@@ -14,30 +12,24 @@ const CLASSNAME = AlertDialog.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: Partial<AlertDialogProps> = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<AlertDialogProps> = {}) => {
     const props: AlertDialogProps = {
         title: 'Alert',
+        isOpen: true,
         description: 'Deserunt et sunt qui consequat sint sit.',
-        // eslint-disable-next-line no-alert
-        confirmProps: { onClick: () => alert('confirm'), label: 'OK' },
+        confirmProps: { onClick: jest.fn(), label: 'OK' },
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<AlertDialog {...props} />);
-
-    return {
-        AlertDialog: wrapper.find(`Dialog`),
-        props,
-        wrapper,
-    };
+    render(<AlertDialog {...props} />);
+    const alertDialog = queryByClassName(document.body, CLASSNAME);
+    return { alertDialog, props };
 };
 
 describe(`<${AlertDialog.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, AlertDialog);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'AlertDialog', prop: 'AlertDialog' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'alertDialog',
+        forwardAttributes: 'alertDialog',
+    });
 });

package/src/components/avatar/Avatar.stories.tsx

@@ -1,43 +1,71 @@
+/* eslint-disable react/display-name */
 import React from 'react';
-import { select } from '@storybook/addon-knobs';
 
 import { mdiDelete, mdiEye, mdiPencil, mdiStar } from '@lumx/icons';
-import { Badge, ColorPalette, FlexBox, Icon, IconButton, Size } from '@lumx/react';
-import { AVATAR_IMAGES, avatarImageKnob, PORTRAIT_IMAGES } from '@lumx/react/stories/knobs/image';
+import { AvatarSize, Badge, ColorPalette, FlexBox, Icon, IconButton, Size } from '@lumx/react';
+import { avatarImageArgType, AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { colorArgType } from '@lumx/react/stories/controls/color';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
 import { Avatar } from './Avatar';
 
-export default { title: 'LumX components/avatar/Avatar' };
-
 const AVATAR_SIZES = [Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
 
+export default {
+    title: 'LumX components/avatar/Avatar',
+    component: Avatar,
+    argTypes: {
+        image: avatarImageArgType,
+        size: getSelectArgType<AvatarSize>(AVATAR_SIZES),
+    },
+    args: { image: AVATAR_IMAGES.avatar1 },
+};
+
 /**
- * Avatar stories showing a simple Avatar with different sizes.
- * @return component with different sizes.
+ * Default avatar
  */
-export const Sizes = () =>
-    AVATAR_SIZES.map((size) => (
-        <Avatar
-            key={size}
-            className="lumx-spacing-margin-bottom"
-            image={avatarImageKnob('Avatar', AVATAR_IMAGES.avatar1)}
-            alt={size}
-            size={size}
-        />
-    ));
+export const Default = {};
+
+/**
+ * Having onClick transforming the avatar into a button
+ */
+export const AvatarButton = {
+    argTypes: {
+        onClick: { action: true },
+    },
+};
+
+/**
+ * Having href transforming the avatar into a link
+ */
+export const AvatarLink = {
+    args: {
+        href: 'https://example.com',
+        target: '_blank',
+    },
+};
+
+/**
+ * Having linkAs transforming the avatar into a custom link
+ */
+export const AvatarCustomLink = {
+    args: {
+        linkAs: CustomLink,
+    },
+};
 
 /**
- * Avatar story showing a simple avatar with different actions.
- * @return component with different actions.
+ * Avatar with actions
  */
-export const WithActions = () =>
-    AVATAR_SIZES.map((size) => (
+export const WithActions = {
+    args: { size: Size.xl },
+    render: (props: any) => (
         <Avatar
-            key={size}
-            image={avatarImageKnob('Avatar', AVATAR_IMAGES.avatar2)}
-            alt={size}
-            size={size}
+            {...props}
             actions={
                 <FlexBox orientation="horizontal" gap="regular" vAlign="center">
                     <IconButton label="Edit" emphasis="low" hasBackground icon={mdiPencil} size="s" />
@@ -46,47 +74,48 @@ export const WithActions = () =>
                 </FlexBox>
             }
         />
-    ));
+    ),
+};
+
+/**
+ * All sizes
+ */
+export const AllSizes = {
+    argTypes: {
+        size: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                cols: { key: 'size', options: AVATAR_SIZES },
+            },
+        }),
+    ],
+};
 
-export const WithBadge = () =>
-    AVATAR_SIZES.map((size) => (
+/**
+ * All sizes with badge
+ */
+export const AllSizesWithBadge = {
+    ...AllSizes,
+    args: {
+        'badge.color': ColorPalette.blue,
+        'badge.icon': mdiStar,
+    },
+    argTypes: {
+        ...AllSizes.argTypes,
+        'badge.color': colorArgType,
+        'badge.icon': iconArgType,
+    },
+    decorators: [...AllSizes.decorators, withNestedProps()],
+    render: ({ badge, ...props }: any) => (
         <Avatar
-            key={size}
-            className="lumx-spacing-margin-bottom"
-            image={avatarImageKnob('Avatar', AVATAR_IMAGES.avatar3)}
-            alt={size}
+            {...(props as any)}
             badge={
-                <Badge color={select('Colors', ColorPalette, ColorPalette.blue)}>
-                    <Icon icon={mdiStar} />
+                <Badge color={badge.color}>
+                    <Icon icon={badge.icon} />
                 </Badge>
             }
-            size={size}
-        />
-    ));
-
-export const WithRectangularImage = () =>
-    AVATAR_SIZES.map((size) => (
-        <Avatar
-            key={size}
-            className="lumx-spacing-margin-bottom"
-            image={PORTRAIT_IMAGES.portrait3}
-            alt={size}
-            size={size}
         />
-    ));
-
-export const Clickable = () => {
-    const baseProps = { size: 'l', image: AVATAR_IMAGES.avatar2, alt: 'avatar2' } as any;
-    return (
-        <>
-            <p>As a button</p>
-            <Avatar {...baseProps} onClick={() => alert('clicked on avatar')} />
-
-            <p>As a link</p>
-            <Avatar {...baseProps} linkProps={{ href: 'https://example.com' }} />
-
-            <p>As a custom link component</p>
-            <Avatar {...baseProps} linkAs={CustomLink} />
-        </>
-    );
+    ),
 };

package/src/components/avatar/Avatar.test.tsx

@@ -1,39 +1,24 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite, itShouldRenderStories, Wrapper } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Avatar, AvatarProps } from './Avatar';
-import * as stories from './Avatar.stories';
 
 const CLASSNAME = Avatar.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = ({ ...propsOverride }: Partial<AvatarProps> = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<AvatarProps> = {}) => {
     const props: AvatarProps = {
         image: 'path/to/avatar/image.png',
         alt: 'Image',
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Avatar {...props} />);
-
-    return {
-        avatar: wrapper.find(`div`),
-        props,
-        wrapper,
-    };
+    render(<Avatar {...props} />);
+    const avatar = queryByClassName(document.body, CLASSNAME);
+    return { avatar, props };
 };
 
 describe(`<${Avatar.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, Avatar);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'avatar', prop: 'avatar' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'avatar', forwardAttributes: 'avatar' });
 });