@lumx/react 3.1.5 → 3.2.0

package/src/components/slider/Slider.stories.tsx

@@ -1,29 +1,45 @@
 import { Slider } from '@lumx/react';
-import { number, text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import React from 'react';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
 
-export default { title: 'LumX components/slider/Slider' };
+export default {
+    title: 'LumX components/slider/Slider',
+    component: Slider,
+    args: {
+        ...Slider.defaultProps,
+        min: 0,
+        max: 30,
+        value: 15,
+        name: 'slider-html-name',
+    },
+    argTypes: {
+        onChange: { action: true },
+    },
+    decorators: [withValueOnChange({})],
+};
 
-export const DefaultSlider = ({ theme }: any) => (
-    <Slider
-        label={text('label', 'Default')}
-        max={number('max', 10)}
-        min={number('min', 0)}
-        theme={theme}
-        value={5}
-        onChange={noop}
-    />
-);
+/**
+ * Default slider with required props
+ */
+export const Default = {};
 
-export const WithHelperSlider = ({ theme }: any) => (
-    <Slider
-        label={text('label', 'Default')}
-        helper={text('helper', 'This is an helper text')}
-        max={number('max', 10)}
-        min={number('min', 0)}
-        theme={theme}
-        value={5}
-        onChange={noop}
-    />
-);
+/**
+ * With label and helper
+ */
+export const WithLabelAndHelper = {
+    args: { label: 'Slider label', helper: loremIpsum('tiny') },
+};
+
+/**
+ * With steps
+ */
+export const WithSteps = {
+    args: { steps: 5 },
+};
+
+/**
+ * With precision (three digits after the decimal point)
+ */
+export const WithPrecision = {
+    args: { steps: 0, precision: 3 },
+};

package/src/components/slider/Slider.test.tsx

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

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,39 +1,39 @@
 import React from 'react';
 import range from 'lodash/range';
 import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation } from '@lumx/react';
-import { boolean, number } from '@storybook/addon-knobs';
-import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+import { IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 
-export default { title: 'LumX components/slideshow/Slideshow' };
-
-export const Simple = ({ theme }: any) => {
-    const images = thumbnailsKnob(6);
-    const activeIndex = number('Active index', 0);
-    const groupBy = number('Group by', 1);
-    const autoPlay = boolean('Autoplay', false);
-    const interval = number('Autoplay interval (in milliseconds)', 1000);
+export default {
+    title: 'LumX components/slideshow/Slideshow',
+    component: Slideshow,
+    args: Slideshow.defaultProps,
+    argTypes: {
+        activeIndex: { control: 'number' },
+        groupBy: { control: 'number' },
+        autoPlay: { control: 'boolean' },
+        interval: { control: 'number' },
+    },
+};
 
+export const Simple = ({ theme, images = Object.values(LANDSCAPE_IMAGES), ...props }: any) => {
     return (
         <Slideshow
             aria-label="Simple carousel example"
-            activeIndex={activeIndex}
-            autoPlay={autoPlay}
-            interval={interval}
             slideshowControlsProps={{
                 nextButtonProps: { label: 'Next' },
                 previousButtonProps: { label: 'Previous' },
             }}
             theme={theme}
-            groupBy={groupBy}
+            {...props}
             style={{ width: '50%' }}
             slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
         >
-            {images.map(({ image, alt }, index) => (
+            {images.map((image: string, index: number) => (
                 <SlideshowItem key={`${image}-${index}`}>
                     <ImageBlock
                         thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
                         image={image}
-                        alt={alt}
+                        alt=""
                         theme={theme}
                     />
                 </SlideshowItem>
@@ -42,41 +42,8 @@ export const Simple = ({ theme }: any) => {
     );
 };
 
-export const SimpleWithAutoPlay = ({ theme }: any) => {
-    const images = thumbnailsKnob(6);
-    const activeIndex = number('Active index', 0);
-    const groupBy = number('Group by', 1);
-    const interval = number('Autoplay interval (in milliseconds)', 1000);
-
-    return (
-        <Slideshow
-            aria-label="Simple with autoplay example"
-            activeIndex={activeIndex}
-            autoPlay
-            interval={interval}
-            slideshowControlsProps={{
-                nextButtonProps: { label: 'Next' },
-                previousButtonProps: { label: 'Previous' },
-                playButtonProps: { label: 'Play/Pause' },
-            }}
-            theme={theme}
-            groupBy={groupBy}
-            style={{ width: '50%' }}
-            slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
-        >
-            {images.map(({ image, alt }, index) => (
-                <SlideshowItem key={`${image}-${index}`}>
-                    <ImageBlock
-                        thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
-                        image={image}
-                        alt={alt}
-                        theme={theme}
-                    />
-                </SlideshowItem>
-            ))}
-        </Slideshow>
-    );
-};
+export const SimpleWithAutoPlay: any = Simple.bind({});
+SimpleWithAutoPlay.args = { autoPlay: true };
 
 export const ResponsiveSlideShowSwipe = () => {
     const slides = range(5);
@@ -124,7 +91,7 @@ export const ResponsiveSlideShowSwipe = () => {
 const slides = [
     {
         id: 0,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/foyleswarslide__800x600.jpg',
+        src: IMAGES.landscape1,
         alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
         title: 'Foyle’s War Revisited',
         subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
@@ -132,14 +99,14 @@ const slides = [
     },
     {
         id: 1,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/britcomdavidslide__800x600.jpg',
+        src: IMAGES.landscape2,
         alt: 'British flag with WILL-TV host David Thiel.',
         title: 'Great Britain Vote: 7 pm Sat.',
         link: '#',
     },
     {
         id: 2,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/mag800-2__800x600.jpg',
+        src: IMAGES.landscape3,
         alt: 'Mid-American Gardener panelists on the set.',
         title: 'Mid-American Gardener: Thursdays at 7 pm',
         subtitle: 'Watch the latest episode',
@@ -147,7 +114,7 @@ const slides = [
     },
     {
         id: 3,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/foyleswarslide__800x600.jpg',
+        src: IMAGES.portrait1,
         alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
         title: 'Foyle’s War Revisited',
         subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
@@ -155,25 +122,23 @@ const slides = [
     },
     {
         id: 4,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/britcomdavidslide__800x600.jpg',
+        src: IMAGES.portrait2,
         alt: 'British flag with WILL-TV host David Thiel.',
         title: 'Great Britain Vote: 7 pm Sat.',
         link: '#',
     },
     {
         id: 5,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/mag800-2__800x600.jpg',
+        src: IMAGES.portrait3,
         alt: 'Mid-American Gardener panelists on the set.',
         title: 'Mid-American Gardener: Thursdays at 7 pm',
         subtitle: 'Watch the latest episode',
         link: '#',
     },
 ];
-export const WithComplexContent = () => (
+export const WithComplexContent = ({ slideCount, ...props }: any) => (
     <Slideshow
         aria-label="Carousel with complex content"
-        activeIndex={0}
-        groupBy={2}
         slideshowControlsProps={{
             nextButtonProps: { label: 'Next' },
             previousButtonProps: { label: 'Previous' },
@@ -181,8 +146,9 @@ export const WithComplexContent = () => (
             paginationItemProps: (index) => ({ label: `Slide ${index + 1}` }),
         }}
         slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
+        {...props}
     >
-        {range(number('Slides', 6)).map((nb) => {
+        {range(slideCount).map((nb) => {
             const slide = slides[nb % slides.length];
 
             return (
@@ -210,3 +176,7 @@ export const WithComplexContent = () => (
         })}
     </Slideshow>
 );
+WithComplexContent.args = {
+    groupBy: 2,
+    slideCount: 6,
+};

package/src/components/slideshow/Slideshow.test.tsx

@@ -1,17 +1,14 @@
-import React, { ReactElement } from 'react';
-import pick from 'lodash/pick';
+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 { Slideshow, SlideshowProps } from './Slideshow';
-import { SlideshowControls } from './SlideshowControls';
-import * as stories from './Slideshow.stories';
+import { Slides } from './Slides';
 
-const CLASSNAME = Slideshow.className as string;
+const CLASSNAME = Slides.className as string;
 
-const setup = ({ ...propsOverride }: Partial<SlideshowProps> = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<SlideshowProps> = {}) => {
     const props: SlideshowProps = {
         slideshowControlsProps: {
             nextButtonProps: { label: 'Next' },
@@ -19,21 +16,16 @@ const setup = ({ ...propsOverride }: Partial<SlideshowProps> = {}, shallowRender
         },
         ...propsOverride,
     };
-
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Slideshow {...props} />);
-
-    return { props, wrapper };
+    render(<Slideshow {...props} />);
+    const slideShow = queryByClassName(document.body, CLASSNAME);
+    return { props, slideShow };
 };
 
 describe(`<${Slideshow.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(pick(stories, ['default', 'Simple']), {
-            or: [Slideshow, { path: [Slideshow, SlideshowControls] }],
-        });
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'slideShow',
+        forwardAttributes: 'slideShow',
+    });
 });

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { AspectRatio, ImageBlock, Slides, SlideshowControls, SlideshowItem } from '@lumx/react';
-import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
+import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 
 export default { title: 'LumX components/slideshow/Slideshow controls' };
 
@@ -31,9 +31,7 @@ export const Simple = () => {
     );
 };
 
-export const ControllingSlideshow = ({ theme }: any) => {
-    const images = thumbnailsKnob(6);
-
+export const ControllingSlideshow = ({ images = Object.values(LANDSCAPE_IMAGES), theme }: any) => {
     const {
         activeIndex: currentIndex,
         slideshowId,
@@ -97,12 +95,12 @@ export const ControllingSlideshow = ({ theme }: any) => {
                 </div>
             }
         >
-            {images.map(({ image, alt }, index) => (
+            {images.map((image: string, index: number) => (
                 <SlideshowItem key={`${image}-${index}`}>
                     <ImageBlock
                         thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
                         image={image}
-                        alt={alt}
+                        alt=""
                         theme={theme}
                     />
                 </SlideshowItem>

package/src/components/switch/Switch.stories.tsx

@@ -1,36 +1,39 @@
-import { Switch, Alignment } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import React from 'react';
+import { Alignment, Switch, SwitchProps } from '@lumx/react';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 
-export default { title: 'LumX components/switch/Switch' };
+export default {
+    title: 'LumX components/switch/Switch',
+    component: Switch,
+    args: {
+        ...Switch.defaultProps,
+        children: 'Switch label',
+        name: 'switch-html-name',
+        value: 'switch-html-value',
+        isChecked: false,
+    },
+    argTypes: {
+        position: getSelectArgType<SwitchProps['position']>([Alignment.left, Alignment.right]),
+        onChange: { action: true },
+    },
+    decorators: [withValueOnChange({ valueProp: 'isChecked' })],
+};
 
-export const NotCheckedSwitch = ({ theme }: any) => (
-    <Switch isChecked={false} onChange={noop} theme={theme}>
-        {text('text', 'The switch')}
-    </Switch>
-);
+/**
+ * Default switch
+ */
+export const Default = {};
 
-export const CheckedSwitch = ({ theme }: any) => (
-    <Switch isChecked onChange={noop} theme={theme}>
-        {text('text', 'The switch')}
-    </Switch>
-);
+/**
+ * Switch disabled
+ */
+export const Disabled = {
+    args: { isDisabled: true },
+};
 
-export const DisabledCheckedSwitch = ({ theme }: any) => (
-    <Switch isChecked isDisabled onChange={noop} theme={theme}>
-        {text('text', 'The switch')}
-    </Switch>
-);
-
-export const DisabledSwitch = ({ theme }: any) => (
-    <Switch isDisabled onChange={noop} theme={theme}>
-        {text('text', 'The switch')}
-    </Switch>
-);
-
-export const RightPositionSwitch = ({ theme }: any) => (
-    <Switch position={Alignment.right} onChange={noop} theme={theme}>
-        {text('text', 'The switch')}
-    </Switch>
-);
+/**
+ * Switch positioned to the right
+ */
+export const PositionRight = {
+    args: { position: Alignment.right },
+};

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

package/src/components/tabs/Tabs.stories.tsx

@@ -1,5 +1,4 @@
 import { Button, Dialog, Tab, TabList, TabPanel, TabProvider } from '@lumx/react';
-import { number } from '@storybook/addon-knobs';
 import get from 'lodash/get';
 import times from 'lodash/times';
 import React, { useState } from 'react';
@@ -114,8 +113,7 @@ export const SplitTabListAndTabPanels = ({ theme }: any) => {
 };
 
 /* Dynamically generate tabs. */
-export const DynamicTabs = ({ theme }: any) => {
-    const tabCount = number('Tab count', 3);
+export const DynamicTabs = ({ theme, tabCount }: any) => {
     return (
         <TabProvider>
             <TabList theme={theme} aria-label="Tab list">
@@ -132,3 +130,6 @@ export const DynamicTabs = ({ theme }: any) => {
         </TabProvider>
     );
 };
+DynamicTabs.args = {
+    tabCount: 3,
+};

package/src/components/text/Text.stories.tsx

@@ -0,0 +1,130 @@
+import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
+import React from 'react';
+
+import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
+import { textElementArgType } from '@lumx/react/stories/controls/element';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { ColorPalette, ColorVariant, Icon } from '@lumx/react';
+import { mdiEarth, mdiHeart } from '@lumx/icons';
+import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
+
+import { Text } from './Text';
+
+export default {
+    title: 'LumX components/text/Text',
+    component: Text,
+    args: Text.defaultProps,
+    argTypes: {
+        children: { control: false },
+        as: textElementArgType,
+        typography: allTypographyArgType,
+        color: colorArgType,
+        colorVariant: colorVariantArgType,
+    },
+};
+
+/**
+ * Default text component as a paragraph
+ */
+export const Default = {
+    args: {
+        as: 'p',
+        children: 'Some text',
+    },
+};
+
+/**
+ * Text containing icons (should match font size)
+ */
+export const WithIcon = {
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                Some text <Icon icon={mdiHeart} /> with icons <Icon icon={mdiEarth} />
+            </>
+        ),
+    },
+};
+
+/**
+ * Long text should wrap by default
+ */
+export const LongText = {
+    args: {
+        ...Default.args,
+        children: loremIpsum('tiny'),
+    },
+    decorators: [withResizableBox()],
+};
+
+/**
+ * Long text without wrapping
+ */
+export const NoWrap = {
+    ...LongText,
+    args: {
+        ...LongText.args,
+        noWrap: true,
+    },
+};
+
+/**
+ * Long text with single line truncate ellipsis
+ */
+export const Truncate = {
+    ...LongText,
+    args: {
+        ...LongText.args,
+        truncate: true,
+    },
+};
+
+/**
+ * Long text with multi line truncate ellipsis
+ */
+export const TruncateMultiline = {
+    ...LongText,
+    args: {
+        ...LongText.args,
+        truncate: { lines: 2 },
+    },
+};
+
+/**
+ * All typographies
+ */
+export const AllTypography = {
+    ...WithIcon,
+    argTypes: {
+        typography: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'typography', options: withUndefined(ALL_TYPOGRAPHY) },
+            },
+        }),
+    ],
+};
+
+/**
+ * All combinations of color and color variants
+ */
+export const AllColors = {
+    ...WithIcon,
+    argTypes: {
+        color: { control: false },
+        colorVariant: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'color', options: withUndefined(ColorPalette) },
+                cols: { key: 'colorVariant', options: withUndefined(ColorVariant) },
+            },
+        }),
+    ],
+};