@lumx/react 3.1.5 → 3.2.1-alpha.0

package/src/components/post-block/PostBlock.test.tsx

@@ -1,28 +1,23 @@
 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 { 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 };
+const setup = (props: Partial<PostBlockProps> = {}) => {
+    render(<PostBlock {...(props as any)} />);
+    const postBlock = queryByClassName(document.body, CLASSNAME);
+    return { props, postBlock };
 };
 
 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 });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'postBlock',
+        forwardAttributes: 'postBlock',
+    });
 });

package/src/components/progress/ProgressCircular.stories.tsx

@@ -1,18 +1,30 @@
-import { ProgressCircular } from '@lumx/react';
-import React, { Fragment } from 'react';
+import { ProgressCircular, ProgressCircularSize, Size } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+
+const sizes: Array<ProgressCircularSize> = [Size.xxs, Size.xs, Size.s, Size.m];
 
 export default {
     title: 'LumX components/progress/ProgressCircular',
+    component: ProgressCircular,
+    args: ProgressCircular.defaultProps,
+    argTypes: {
+        size: getSelectArgType<ProgressCircularSize>(sizes),
+    },
 };
 
-const SIZES = ['xxs', 'xs', 's', 'm', undefined] as const;
-
-export const Default = ({ theme }: any) => <ProgressCircular theme={theme} />;
+/**
+ * Default progress circular
+ */
+export const Default = {};
 
-export const Sizes = ({ theme }: any) =>
-    SIZES.map((size) => (
-        <Fragment key={String(size)}>
-            <span>{String(size)}</span>
-            <ProgressCircular theme={theme} size={size} />
-        </Fragment>
-    ));
+/**
+ * All sizes
+ */
+export const AllSizes = {
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'size', options: sizes } },
+        }),
+    ],
+};

package/src/components/progress/ProgressLinear.stories.tsx

@@ -1,8 +1,12 @@
 import { ProgressLinear } from '@lumx/react';
-import React from 'react';
 
 export default {
     title: 'LumX components/progress/ProgressLinear',
+    component: ProgressLinear,
+    args: ProgressLinear.defaultProps,
 };
 
-export const Default = ({ theme }: any) => <ProgressLinear theme={theme} />;
+/**
+ * Default progress linear
+ */
+export const Default = {};

package/src/components/radio-button/RadioButton.stories.tsx

@@ -1,28 +1,39 @@
 import { RadioButton } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import React from 'react';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 
-export default { title: 'LumX components/radio-button/Radio button' };
+export default {
+    title: 'LumX components/radio-button/Radio button',
+    component: RadioButton,
+    args: {
+        ...RadioButton.defaultProps,
+        name: 'radiobutton-html-name',
+        value: 'radiobutton-html-value',
+    },
+    argTypes: {
+        onChange: { action: true },
+        name: { control: false },
+        value: { control: false },
+    },
+    decorators: [
+        withValueOnChange({
+            valueProp: 'isChecked',
+            valueTransform: (value) => value === 'radiobutton-html-value',
+        }),
+    ],
+};
 
-export const SimpleRadioButton = ({ theme }: any) => (
-    <RadioButton
-        isChecked={false}
-        label={text('Label', 'Radio button')}
-        name="test1"
-        theme={theme}
-        value="lorem"
-        onChange={noop}
-    />
-);
+/**
+ * Default radio button
+ */
+export const Default = {};
 
-export const SimpleCheckedRadioButton = ({ theme }: any) => (
-    <RadioButton
-        isChecked
-        label={text('Label', 'Radio button')}
-        name="test1"
-        theme={theme}
-        value="lorem"
-        onChange={noop}
-    />
-);
+/**
+ * With label and helper
+ */
+export const LabelAndHelper = {
+    args: {
+        label: 'Radio button label',
+        helper: loremIpsum('tiny'),
+    },
+};

package/src/components/select/Select.stories.tsx

@@ -1,13 +1,15 @@
 import { mdiBullhornOutline } from '@lumx/icons/';
 import { List, ListItem, Select, Size, TextField } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import { text } from '@storybook/addon-knobs';
 import noop from 'lodash/noop';
 import range from 'lodash/range';
 import React, { SyntheticEvent, useState } from 'react';
 import { SelectVariant } from './constants';
 
-export default { title: 'LumX components/select/Select' };
+export default {
+    title: 'LumX components/select/Select',
+    component: Select,
+};
 
 const CHOICES = ['First item', 'Second item', 'Third item'];
 
@@ -112,8 +114,8 @@ export const DisabledSelect = ({ theme }: any) => {
         <Select
             isOpen={false}
             value=""
-            label={text('label', 'My select')}
-            placeholder={text('placeholder', 'Placeholder')}
+            label="My select"
+            placeholder="Placeholder"
             theme={theme}
             onInputClick={noop}
             onDropdownClose={noop}
@@ -204,13 +206,7 @@ export const SelectWithAnotherField = ({ theme }: any) => {
 
     return (
         <>
-            <TextField
-                value={text('Value', 'myvalue')}
-                label={text('Label', 'I am the label')}
-                placeholder={text('Placeholder', 'ex: A value')}
-                theme={theme}
-                onChange={noop}
-            />
+            <TextField value="myvalue" label="I am the label" placeholder="ex: A value" theme={theme} onChange={noop} />
             <Select
                 style={{ width: '100%' }}
                 isOpen={isOpen}
@@ -255,8 +251,8 @@ export const SelectWithNoData = ({ theme }: any) => {
         <Select
             isOpen={isOpen}
             value=""
-            label={text('label', 'My select')}
-            placeholder={text('placeholder', 'Placeholder')}
+            label="My select"
+            placeholder="Placeholder"
             theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
@@ -277,10 +273,10 @@ export const SelectWithHelper = ({ theme }: any) => {
         <Select
             isOpen={isOpen}
             value=""
-            label={text('label', 'Country')}
-            placeholder={text('placeholder', 'Your country')}
+            label="Country"
+            placeholder="Your country"
             theme={theme}
-            helper={text('helper', 'This is used in analytics')}
+            helper="This is used in analytics"
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
         >
@@ -302,14 +298,14 @@ export const SelectWithError = ({ theme }: any) => {
         <Select
             isOpen={isOpen}
             value=""
-            label={text('label', 'Country')}
-            placeholder={text('placeholder', 'Your country')}
+            label="Country"
+            placeholder="Your country"
             theme={theme}
-            helper={text('helper', 'This is used in analytics')}
+            helper="This is used in analytics"
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             hasError
-            error={text('Error', 'Please select something :)')}
+            error="Please select something :)"
         >
             <List theme={theme} isClickable>
                 {CHOICES.map((choice) => (
@@ -329,10 +325,10 @@ export const SelectSuccess = ({ theme }: any) => {
         <Select
             isOpen={isOpen}
             value=""
-            label={text('label', 'Country')}
-            placeholder={text('placeholder', 'Your country')}
+            label="Country"
+            placeholder="Your country"
             theme={theme}
-            helper={text('helper', 'This is used in analytics')}
+            helper="This is used in analytics"
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             isValid

package/src/components/select/SelectMultiple.stories.tsx

@@ -1,9 +1,20 @@
 /* istanbul ignore file */
 import { mdiTram } from '@lumx/icons/';
-import { Chip, List, ListItem, SelectMultiple, Size } from '@lumx/react';
+import {
+    Chip,
+    Dialog,
+    List,
+    ListDivider,
+    ListItem,
+    ListSubheader,
+    SelectMultiple,
+    Size,
+    TextField,
+    Toolbar,
+} from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
-import React, { MouseEventHandler, SyntheticEvent, useState } from 'react';
+import React, { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default { title: 'LumX components/select/Select Multiple' };
@@ -225,3 +236,95 @@ export const ChipsCustomSelectMultiple = ({ theme }: any) => {
         </SelectMultiple>
     );
 };
+
+/**
+ * Test select focus trap (focus is contained inside the dialog then inside the select dropdown)
+ */
+export const SelectWithinADialog = ({ theme }: any) => {
+    const searchFieldRef = useRef(null);
+
+    const [searchText, setSearchText] = useState<string>();
+    const [values, setValues] = useState<string[]>([]);
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, value: string) => {
+        event.stopPropagation();
+        setValues(value ? values.filter((val) => val !== value) : []);
+    };
+
+    const selectItem = (item: string) => () => {
+        if (values.includes(item)) {
+            return;
+        }
+
+        closeSelect();
+        setValues([...values, item]);
+    };
+
+    const filteredChoices =
+        searchText && searchText.length > 0 ? CHOICES.filter((choice) => choice.includes(searchText)) : CHOICES;
+
+    return (
+        <>
+            <Dialog isOpen>
+                <header>
+                    <Toolbar label={<span className="lumx-typography-title">Dialog header</span>} />
+                </header>
+                <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
+                    {/* Testing hidden input do not count in th focus trap*/}
+                    <input hidden type="file" />
+                    <input type="hidden" />
+
+                    <div className="lumx-spacing-margin-bottom-huge">The select should capture the focus on open.</div>
+
+                    <SelectMultiple
+                        isOpen={isOpen}
+                        value={values}
+                        onClear={clearSelected}
+                        clearButtonProps={{ label: 'Clear' }}
+                        label={LABEL}
+                        placeholder={PLACEHOLDER}
+                        theme={theme}
+                        onInputClick={toggleSelect}
+                        onDropdownClose={closeSelect}
+                        icon={mdiTram}
+                        focusElement={searchFieldRef}
+                    >
+                        <List isClickable>
+                            <>
+                                <ListSubheader>
+                                    <TextField
+                                        clearButtonProps={{ label: 'Clear' }}
+                                        placeholder="Search"
+                                        role="searchbox"
+                                        inputRef={searchFieldRef}
+                                        onChange={setSearchText}
+                                        value={searchText}
+                                    />
+                                </ListSubheader>
+                                <ListDivider role="presentation" />
+                            </>
+
+                            {filteredChoices.length > 0
+                                ? filteredChoices.map((choice) => (
+                                      <ListItem
+                                          isSelected={values.includes(choice)}
+                                          key={choice}
+                                          onItemSelected={selectItem(choice)}
+                                          size={Size.tiny}
+                                      >
+                                          {choice}
+                                      </ListItem>
+                                  ))
+                                : [
+                                      <ListItem key={0} size={Size.tiny}>
+                                          No data
+                                      </ListItem>,
+                                  ]}
+                        </List>
+                    </SelectMultiple>
+                </div>
+            </Dialog>
+        </>
+    );
+};

package/src/components/select/WithSelectContext.tsx

@@ -1,15 +1,15 @@
-import React, { Ref, useCallback, useMemo, useRef } from 'react';
-
 import classNames from 'classnames';
+import React, { Ref, useCallback, useMemo, useRef } from 'react';
 import { uid } from 'uid';
 
+import { Placement } from '@lumx/react';
 import { Kind, Theme } from '@lumx/react/components';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
+import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
+import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
-import { Placement } from '@lumx/react';
 
 import { CoreSelectProps, SelectVariant } from './constants';
 
@@ -30,6 +30,7 @@ export const WithSelectContext = (
     {
         children,
         className,
+        focusElement,
         isMultiple,
         closeOnClick = !isMultiple,
         disabled,
@@ -58,6 +59,7 @@ export const WithSelectContext = (
     const selectId = useMemo(() => id || `select-${uid()}`, [id]);
     const anchorRef = useRef<HTMLElement>(null);
     const selectRef = useRef<HTMLDivElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
     const isFocus = useListenFocus(anchorRef);
 
     const handleKeyboardNav = useCallback(
@@ -77,6 +79,9 @@ export const WithSelectContext = (
         anchorRef?.current?.blur();
     };
 
+    // Handle focus trap.
+    useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
+
     return (
         <div
             ref={mergeRefs(ref, selectRef)}
@@ -125,6 +130,7 @@ export const WithSelectContext = (
                 placement={Placement.BOTTOM_START}
                 onClose={onClose}
                 onInfiniteScroll={onInfiniteScroll}
+                ref={dropdownRef}
             >
                 {children}
             </Dropdown>

package/src/components/skeleton/SkeletonCircle.stories.tsx

@@ -1,25 +1,41 @@
-import React from 'react';
+import { Size, SkeletonCircle, SkeletonCircleProps } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { ALL_COLORS, colorArgType } from '@lumx/react/stories/controls/color';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 
-import { FlexBox, Orientation, Size, SkeletonCircle, ColorPalette } from '@lumx/react';
+const sizes: SkeletonCircleProps['size'][] = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
 
-export default { title: 'LumX components/skeleton/Skeleton Circle' };
+export default {
+    title: 'LumX components/skeleton/Skeleton Circle',
+    component: SkeletonCircle,
+    args: SkeletonCircle.defaultProps,
+    argTypes: {
+        size: getSelectArgType(sizes),
+        color: colorArgType,
+    },
+};
 
-const sizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const;
-const colors = Object.values(ColorPalette);
+/**
+ * All sizes
+ */
+export const AllSize = {
+    argTypes: { size: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'size', options: sizes } },
+        }),
+    ],
+};
 
-export const Circle = ({ theme }: any) => (
-    <>
-        Sizes:
-        <FlexBox orientation={Orientation.horizontal}>
-            {sizes.map((size) => (
-                <SkeletonCircle theme={theme} key={size} size={size} className="lumx-spacing-margin" />
-            ))}
-        </FlexBox>
-        Colors:
-        <FlexBox orientation={Orientation.horizontal}>
-            {colors.map((color) => (
-                <SkeletonCircle theme={theme} size={Size.m} key={color} color={color} className="lumx-spacing-margin" />
-            ))}
-        </FlexBox>
-    </>
-);
+/**
+ * All colors
+ */
+export const AllColor = {
+    args: { size: Size.m },
+    argTypes: { color: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'color', options: ALL_COLORS } },
+        }),
+    ],
+};

package/src/components/skeleton/SkeletonCircle.test.tsx

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