@lumx/react 3.1.4 → 3.2.0

package/src/components/list/List.stories.tsx

@@ -1,16 +1,32 @@
 import React, { useRef } from 'react';
 
 import { mdiAccount, mdiOpenInNew } from '@lumx/icons';
-import { Icon, ListDivider, ListSubheader, Size } from '@lumx/react';
-import { action } from '@storybook/addon-actions';
-import { select, text } from '@storybook/addon-knobs';
+import { Icon, ListDivider, ListProps, ListSubheader, Size } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
+import ListItemStories from './ListItem.stories';
 
-export default { title: 'LumX components/list/List' };
+export default {
+    title: 'LumX components/list/List',
+    component: List,
+    args: List.defaultProps,
+    argTypes: {
+        itemPadding: getSelectArgType<ListProps['itemPadding']>([Size.big, Size.huge]),
+        onListItemSelected: { action: true },
+        'children.onItemSelected': { action: true },
+        'children.size': ListItemStories.argTypes.size,
+    },
+};
+
+const CustomListItem = (props: any) => <ListItem {...props}>Custom list item</ListItem>;
 
-export const KeyboardNavigation = () => {
+export const KeyboardNavigation = ({
+    'children.onItemSelected': childrenOnItemSelected,
+    'children.size': childrenSize,
+    ...props
+}: any) => {
     const listRef = useRef<any>();
     const firstItemRef = useRef<any>();
 
@@ -22,10 +38,6 @@ export const KeyboardNavigation = () => {
         return firstItemRef.current?.focus();
     };
 
-    const CustomListItem = () => {
-        return <ListItem onItemSelected={action('onItemSelected custom list item')}>Custom list item</ListItem>;
-    };
-
     return (
         <>
             <button type="button" onClick={focusList}>
@@ -34,27 +46,31 @@ export const KeyboardNavigation = () => {
             <button type="button" onClick={focusFirsItem}>
                 focus first item
             </button>
-            <List onListItemSelected={action('List onListItemSelected')} ref={listRef}>
-                <ListItem linkRef={firstItemRef} onItemSelected={action('onItemSelected: Clickable item 1')}>
+            <List ref={listRef} {...props}>
+                <ListItem size={childrenSize} linkRef={firstItemRef} onItemSelected={childrenOnItemSelected}>
                     Clickable item 1
                 </ListItem>
                 <ListDivider />
-                <ListItem linkProps={{ href: '#' }}>Link item 1</ListItem>
+                <ListItem size={childrenSize} linkProps={{ href: '#' }}>
+                    Link item 1
+                </ListItem>
                 <>
-                    <ListItem>Non clickable (=non navigable) item</ListItem>
+                    <ListItem size={childrenSize}>Non clickable (=non navigable) item</ListItem>
                     <ListSubheader>Header</ListSubheader>
-                    <ListItem linkProps={{ href: '#' }}>Link item 2</ListItem>
+                    <ListItem size={childrenSize} linkProps={{ href: '#' }}>
+                        Link item 2
+                    </ListItem>
                     <ListSubheader>Header</ListSubheader>
                 </>
-                <ListItem linkProps={{ href: '#' }} isDisabled>
+                <ListItem size={childrenSize} linkProps={{ href: '#' }} isDisabled>
                     Disabled link item
                 </ListItem>
-                <ListItem onItemSelected={action('onItemSelected')} isDisabled>
+                <ListItem size={childrenSize} onItemSelected={childrenOnItemSelected} isDisabled>
                     Disabled button item
                 </ListItem>
-                <CustomListItem />
+                <CustomListItem size={childrenSize} onItemSelected={childrenOnItemSelected} />
                 {[
-                    <ListItem key="1" linkProps={{ href: '#' }}>
+                    <ListItem size={childrenSize} key="1" linkProps={{ href: '#' }}>
                         Link item 4
                     </ListItem>,
                 ]}
@@ -68,74 +84,33 @@ export const KeyboardNavigation = () => {
     );
 };
 
-export const WithItemPadding = () => {
-    const listItemSize = select('list item size', [Size.tiny, Size.regular, Size.big, Size.huge], Size.big);
-    const listItem = (
+export const AsLink = () => (
+    <List>
         <ListItem
+            before={<Icon icon={mdiAccount} />}
             className="lumx-color-background-dark-L6"
-            size={listItemSize}
-            linkProps={{ href: text('link href', '#') }}
+            linkProps={{ href: '#' }}
         >
-            <div>Two-line item</div>
-            <div className="lumx-color-font-dark-L2">Secondary text</div>
+            <span>My first link</span>
         </ListItem>
-    );
-    return (
-        <>
-            Default item padding:
-            <List>
-                {listItem}
-                {listItem}
-            </List>
-            Big item padding:
-            <List itemPadding={Size.big}>
-                {listItem}
-                {listItem}
-            </List>
-            Huge item padding:
-            <List itemPadding={Size.huge}>
-                {listItem}
-                {listItem}
-            </List>
-        </>
-    );
-};
-
-export const AsLink = () => {
-    return (
-        <div className="demo-grid">
-            <List>
-                <ListItem
-                    before={<Icon icon={mdiAccount} />}
-                    className="lumx-color-background-dark-L6"
-                    linkProps={{ href: '#' }}
-                >
-                    <span>My first link</span>
-                </ListItem>
-                <ListItem
-                    className="lumx-color-background-dark-L6"
-                    after={<Icon icon={mdiOpenInNew} />}
-                    linkProps={{ href: 'http://www.google.com', target: '_blank' }}
-                >
-                    <span>Google</span>
-                </ListItem>
-            </List>
-        </div>
-    );
-};
-
-export const WithCustomChildren = () => {
-    const CustomListItem = () => {
-        return <ListItem onItemSelected={action('onItemSelected custom list item')}>Custom list item</ListItem>;
-    };
+        <ListItem
+            className="lumx-color-background-dark-L6"
+            after={<Icon icon={mdiOpenInNew} />}
+            linkProps={{ href: 'https://example.com', target: '_blank' }}
+        >
+            <span>Google</span>
+        </ListItem>
+    </List>
+);
 
-    return (
-        <div className="demo-grid">
-            <List>
-                <CustomListItem />
-                <CustomListItem />
-                <CustomListItem />
-            </List>
-        </div>
-    );
-};
+export const WithCustomChildren = ({
+    'children.onItemSelected': childrenOnItemSelected,
+    'children.size': childrenSize,
+    ...props
+}: any) => (
+    <List {...props}>
+        <CustomListItem size={childrenSize} onItemSelected={childrenOnItemSelected} />
+        <CustomListItem size={childrenSize} onItemSelected={childrenOnItemSelected} />
+        <CustomListItem size={childrenSize} onItemSelected={childrenOnItemSelected} />
+    </List>
+);

package/src/components/list/List.test.tsx

@@ -1,29 +1,20 @@
 import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } 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 { List, ListProps } from './List';
-import * as stories from './List.stories';
 
 const CLASSNAME = List.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ListProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<List {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<ListProps> = {}) => {
+    render(<List {...(props as any)} />);
+    const list = queryByClassName(document.body, CLASSNAME);
+    return { props, list };
 };
 
 describe(`<${List.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, List);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'list', forwardAttributes: 'list' });
 });

package/src/components/list/ListDivider.stories.tsx

@@ -1,7 +1,12 @@
-import React from 'react';
-
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { List } from '@lumx/react';
 import { ListDivider } from './ListDivider';
 
-export default { title: 'LumX components/list/ListDivider' };
+export default {
+    title: 'LumX components/list/ListDivider',
+    component: ListDivider,
+    args: ListDivider.defaultProps,
+    decorators: [withWrapper({}, List)],
+};
 
-export const Default = () => <ListDivider />;
+export const Default = {};

package/src/components/list/ListDivider.test.tsx

@@ -1,29 +1,24 @@
 import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } 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 { ListDivider, ListDividerProps } from './ListDivider';
-import * as stories from './ListDivider.stories';
 
 const CLASSNAME = ListDivider.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ListDividerProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<ListDivider {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<ListDividerProps> = {}) => {
+    render(<ListDivider {...(props as any)} />);
+    const listDivider = queryByClassName(document.body, CLASSNAME);
+    return { props, listDivider };
 };
 
 describe(`<${ListDivider.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, ListDivider);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'listDivider',
+        forwardAttributes: 'listDivider',
+    });
 });

package/src/components/list/ListItem.stories.tsx

@@ -1,62 +1,100 @@
-import React from 'react';
-
-import { Size } from '@lumx/react';
-import { select, text } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
+import { List, ListItemSize, Size } from '@lumx/react';
 
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { ListItem } from './ListItem';
 
-export default { title: 'LumX components/list/ListItem' };
-
-export const NonClickable = ({ theme }: any) => <ListItem theme={theme}>{text('text', 'Text')}</ListItem>;
-
-export const Link = ({ theme }: any) => (
-    <ListItem theme={theme} linkProps={{ href: '#' }}>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const Button = ({ theme }: any) => (
-    <ListItem theme={theme} onItemSelected={action('onItemSelected')}>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const LinkDisabled = ({ theme }: any) => (
-    <ListItem theme={theme} linkProps={{ href: '#' }} isDisabled>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const ButtonDisabled = ({ theme }: any) => (
-    <ListItem theme={theme} onItemSelected={action('onItemSelected')} isDisabled>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const Selected = ({ theme }: any) => (
-    <ListItem theme={theme} linkProps={{ href: '#' }} isSelected>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const Highlighted = ({ theme }: any) => (
-    <ListItem theme={theme} linkProps={{ href: '#' }} isHighlighted>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const Sizes = ({ theme }: any) => (
-    <ListItem theme={theme} size={select('size', [Size.tiny, Size.regular, Size.big, Size.huge], Size.tiny)}>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-const CustomLink: React.FC = ({ children, ...props }) =>
-    React.createElement('a', { ...props, style: { color: 'red' }, href: 'http://google.com' }, children);
-
-export const WithCustomLink = ({ theme }: any) => (
-    <ListItem theme={theme} linkAs={CustomLink}>
-        My custom link
-    </ListItem>
-);
+const sizes: ListItemSize[] = [Size.tiny, Size.regular, Size.big];
+
+export default {
+    title: 'LumX components/list/ListItem',
+    component: ListItem,
+    args: ListItem.defaultProps,
+    argTypes: {
+        size: getSelectArgType(sizes),
+    },
+    decorators: [withWrapper({}, List)],
+};
+
+/**
+ * Default list item with text
+ */
+export const NonClickable = {
+    args: { children: 'List item' },
+};
+
+/**
+ * Button list item (onClick)
+ */
+export const Button = {
+    args: {
+        children: 'List item button',
+    },
+    argTypes: {
+        onItemSelected: { action: true },
+    },
+};
+
+/**
+ * Disabled button
+ */
+export const ButtonDisabled = {
+    ...Button,
+    args: {
+        ...Button.args,
+        isDisabled: true,
+    },
+};
+
+/**
+ * Link list item (href)
+ */
+export const Link = {
+    args: {
+        linkProps: { href: '#' },
+        children: 'List item link',
+    },
+};
+
+/**
+ * Disabled link
+ */
+export const LinkDisabled = {
+    args: {
+        ...Link.args,
+        isDisabled: true,
+    },
+};
+
+/**
+ * Inject a custom link component
+ */
+export const CustomLink_ = {
+    args: {
+        linkAs: CustomLink,
+        children: 'List item custom link',
+    },
+};
+
+/**
+ * Combination of size and states
+ */
+export const SizeAndStates = {
+    ...Button,
+    decorators: [
+        withWrapper({}, List),
+        withCombinations({
+            combinations: {
+                rows: { key: 'size', options: sizes },
+                cols: {
+                    Default: {},
+                    Disabled: { isDisabled: true },
+                    Selected: { isSelected: true },
+                    Highlighted: { isHighlighted: true },
+                },
+            },
+        }),
+    ],
+};

package/src/components/list/ListItem.test.tsx

@@ -1,29 +1,24 @@
 import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } 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 { ListItem, ListItemProps } from './ListItem';
-import * as stories from './ListItem.stories';
 
 const CLASSNAME = ListItem.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ListItemProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<ListItem {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<ListItemProps> = {}) => {
+    render(<ListItem {...(props as any)} />);
+    const listItem = queryByClassName(document.body, CLASSNAME);
+    return { props, listItem };
 };
 
 describe(`<${ListItem.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, ListItem);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'listItem',
+        forwardAttributes: 'listItem',
+    });
 });

package/src/components/list/ListSubheader.stories.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
-
 import { ListSubheader } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
 
-export default { title: 'LumX components/list/ListSubheader' };
+export default {
+    title: 'LumX components/list/ListSubheader',
+    component: ListSubheader,
+    args: ListSubheader.defaultProps,
+};
 
-export const Default = () => <ListSubheader>{text('text', 'Text')}</ListSubheader>;
+export const Default = {
+    args: { children: 'List subheader text' },
+};

package/src/components/list/ListSubheader.test.tsx

@@ -1,29 +1,23 @@
 import React from 'react';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
 
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { ListSubheader, ListSubheaderProps } from './ListSubheader';
-import * as stories from './ListSubheader.stories';
 
 const CLASSNAME = ListSubheader.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ListSubheaderProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<ListSubheader {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<ListSubheaderProps> = {}) => {
+    render(<ListSubheader {...(props as any)} />);
+    const listSubheader = queryByClassName(document.body, CLASSNAME);
+    return { props, listSubheader };
 };
 
 describe(`<${ListSubheader.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, ListSubheader);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'listSubheader',
+        forwardAttributes: 'listSubheader',
+    });
 });

package/src/components/message/Message.stories.tsx

@@ -1,27 +1,56 @@
 import { Kind, Message } from '@lumx/react';
-import { boolean, text } from '@storybook/addon-knobs';
-import React from 'react';
-import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
 import { mdiDelete } from '@lumx/icons/';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 
-export default { title: 'LumX components/message/Message' };
+export default {
+    title: 'LumX components/message/Message',
+    component: Message,
+    argTypes: {
+        kind: getSelectArgType(Kind),
+        hasBackground: { control: 'boolean' },
+        icon: iconArgType,
+    },
+    args: { ...Message.defaultProps, children: loremIpsum('tiny') },
+};
 
-export const Default = () => (
-    <Message
-        kind={enumKnob('Kind of message', [undefined, ...Object.values(Kind)], undefined)}
-        hasBackground={boolean('Has background', false)}
-    >
-        {text(
-            'Message',
-            `Message text quisque tincidunt lobortis dui non auctor.Donec porta,
-                ligula volutpat vehicula aliquet, dui sapien tempus felis, sed.`,
-        )}
-    </Message>
-);
+/**
+ * Default message
+ */
+export const Default = {};
 
-export const CustomIcon = () => (
-    <Message icon={mdiDelete} kind="info" hasBackground>
-        Lorem ipsum quisque tincidunt lobortis dui non auctor.Donec porta, ligula volutpat vehicula aliquet, dui sapien
-        tempus felis, sed.
-    </Message>
-);
+/**
+ * All `kind` variants
+ */
+export const AllKinds = {
+    ...Default,
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'kind', options: withUndefined(Kind) },
+            },
+        }),
+    ],
+};
+
+/**
+ * All `kind` variants with `hasBackground`
+ */
+export const AllKindsWithBackground = {
+    ...AllKinds,
+    args: {
+        hasBackground: true,
+    },
+};
+
+/**
+ * With custom icon
+ */
+export const CustomIcon = {
+    args: {
+        icon: mdiDelete,
+    },
+};