@lumx/react 3.1.5 → 3.2.1-alpha.0

package/src/components/input-label/InputLabel.stories.tsx

@@ -1,15 +1,38 @@
 import React from 'react';
 
-import { text } from '@storybook/addon-knobs';
-
 import { InputLabel } from './InputLabel';
 
-export default { title: 'LumX components/input-label/Input Label' };
+export default {
+    title: 'LumX components/input-label/Input Label',
+    component: InputLabel,
+    args: {
+        ...InputLabel.defaultProps,
+        children: 'Label text',
+    },
+    argTypes: {
+        isRequired: { control: 'boolean' },
+    },
+    decorators: [
+        /**
+         * Associate label with an input
+         */
+        (Story: any, ctx: any) => (
+            <>
+                <input type="hidden" id="123" />
+                <Story args={{ ...ctx.args, htmlFor: '123' }} />
+            </>
+        ),
+    ],
+};
+
+/**
+ * Default input label
+ */
+export const Default = {};
 
-export const SimpleLabel = ({ theme }: any) => (
-    <div id="123">
-        <InputLabel htmlFor="123" theme={theme}>
-            {text('Label', 'The label')}
-        </InputLabel>
-    </div>
-);
+/**
+ * Required input label
+ */
+export const IsRequired = {
+    args: { isRequired: true },
+};

package/src/components/lightbox/Lightbox.stories.tsx

@@ -1,83 +1,45 @@
+/* eslint-disable react-hooks/rules-of-hooks,react/display-name */
 import React from 'react';
-import {
-    ImageBlock,
-    Slideshow,
-    SlideshowItem,
-    Toolbar,
-    Divider,
-    Alignment,
-    TextField,
-    Typography,
-    Link,
-    Lightbox,
-    ThumbnailProps,
-} from '@lumx/react';
-import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+import { ImageBlock, Alignment, Lightbox, Button } from '@lumx/react';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 
-export default { title: 'LumX components/lightbox/Lightbox' };
-
-interface RowItemProps {
-    image: ThumbnailProps;
-}
-
-const RowItem: React.FC<RowItemProps> = ({ image }) => {
-    const [isOpen, setOpen] = React.useState(false);
-    const { image: url, alt: name } = image;
-    const linkRef = React.useRef(null);
-
-    return (
-        <>
-            <Toolbar
-                label={
-                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                    <Link ref={linkRef} typography={Typography.subtitle1} onClick={() => setOpen(true)}>
-                        {name}
-                    </Link>
-                }
-            />
-            <Lightbox
-                closeButtonProps={{ label: 'Close' }}
-                isOpen={isOpen}
-                onClose={() => setOpen(false)}
-                parentElement={linkRef}
-            >
-                <Slideshow
-                    activeIndex={0}
-                    fillHeight
-                    slideshowControlsProps={{
-                        nextButtonProps: { label: 'Next' },
-                        previousButtonProps: { label: 'Previous' },
-                    }}
-                >
-                    <SlideshowItem key={name}>
-                        <ImageBlock align={Alignment.center} alt={name} fillHeight image={url} />
-                    </SlideshowItem>
-                </Slideshow>
-            </Lightbox>
-        </>
-    );
+export default {
+    title: 'LumX components/lightbox/Lightbox',
+    component: Lightbox,
+    args: Lightbox.defaultProps,
+    argTypes: {
+        children: { control: false },
+    },
+    render: (props: any) => {
+        const buttonRef = React.useRef<HTMLButtonElement>(null);
+        const [isOpen, close, open] = useBooleanState(true);
+        return (
+            <>
+                <Button ref={buttonRef} onClick={open}>
+                    Open lightbox
+                </Button>
+                <Lightbox {...props} parentElement={buttonRef} isOpen={isOpen} onClose={close} />
+            </>
+        );
+    },
 };
 
-export const Focus = () => {
-    const [textFieldValue, setTextFieldValue] = React.useState('');
-    const images: ThumbnailProps[] = thumbnailsKnob(12);
+/**
+ * Base LightBox with image block
+ */
+export const ImageBlock_ = {
+    args: {
+        children: <ImageBlock align={Alignment.center} alt="" fillHeight image={LANDSCAPE_IMAGES.landscape1} />,
+    },
+};
 
-    return (
-        <>
-            <TextField
-                value={textFieldValue}
-                onChange={setTextFieldValue}
-                className="lumx-spacing-margin-vertical-big"
-            />
-            {images.map((image, index) => {
-                const itemPosition = index + 1;
-                return (
-                    <div key={itemPosition}>
-                        <RowItem image={image} />
-                        <Divider />
-                    </div>
-                );
-            })}
-        </>
-    );
+/**
+ * LightBox with image block and close button
+ */
+export const WithCloseButton = {
+    args: {
+        ...ImageBlock_.args,
+        closeButtonProps: { label: 'Close' },
+    },
 };

package/src/components/lightbox/Lightbox.test.tsx

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

package/src/components/link/Link.stories.tsx

@@ -1,141 +1,111 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import { mdiChevronDown, mdiLink } from '@lumx/icons';
-import {
-    ColorPalette,
-    ColorVariant,
-    Link,
-    Typography,
-    TypographyCustom,
-    TypographyInterface,
-    TypographyTitleCustom,
-} from '@lumx/react';
-import { boolean, select, text } from '@storybook/addon-knobs';
-import React, { Fragment } from 'react';
-
-export default { title: 'LumX components/link/Link' };
-
-const onClick = () => console.log('clicked link');
+import { ColorPalette, ColorVariant, Link, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
+import React from 'react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 
 const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
 
-export const SimpleLink = () => (
-    <>
-        <Link
-            href={text('href', 'https://example.com', 'Link 1')}
-            target={boolean('target: _blank', false, 'Link 1') ? '_blank' : ''}
-            color={select('Color', ColorPalette, ColorPalette.blue, 'Link 1')}
-            colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 1')}
-            typography={select('Typography', linkTypographies, Typography.body2, 'Link 1')}
-        >
-            {text('Value', 'Here is a first link', 'Link 1')}
-        </Link>
-        <br />
-        <Link
-            href={text('href', 'https://google.fr', 'Link 2')}
-            target={boolean('target: _blank', false, 'Link 2') ? '_blank' : ''}
-            color={select('Color', ColorPalette, ColorPalette.blue, 'Link 2')}
-            colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 2')}
-            typography={select('Typography', linkTypographies, Typography.body1, 'Link 2')}
-        >
-            {text('Value', 'Here is a second link', 'Link 2')}
-        </Link>
-        <br />
-        <Link
-            href={text('href', 'https://google.co.jp', 'Link 3')}
-            target={boolean('target: _blank', false, 'Link 3') ? '_blank' : ''}
-            color={select('Color', ColorPalette, ColorPalette.blue, 'Link 3')}
-            colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 3')}
-            typography={select('Typography', linkTypographies, Typography.caption, 'Link 3')}
-        >
-            {text('Value', 'Here is a third link', 'Link 3')}
-        </Link>
-    </>
-);
+export default {
+    title: 'LumX components/link/Link',
+    component: Link,
+    argTypes: {
+        typography: getSelectArgType(linkTypographies),
+        color: colorArgType,
+        colorVariant: colorVariantArgType,
+        rightIcon: iconArgType,
+        leftIcon: iconArgType,
+    },
+    args: { ...Link.defaultProps, children: 'Link' },
+};
 
-export const WithoutHref = () => (
-    // The constrained width should show that the button does not have centered text align.
-    <div style={{ border: '1px solid red', width: 100, height: 100, resize: 'both', overflow: 'auto' }}>
-        <Link onClick={onClick}>Link without href (renders as a button for a11y)</Link>
-    </div>
-);
+/**
+ * Default link
+ */
+export const Default = {
+    args: { href: 'https://example.com', target: '_blank' },
+};
 
-export const WithCustomLink = () => {
-    const CustomLink: React.FC = ({ children, ...props }) =>
-        React.createElement('a', { ...props, style: { color: 'red' } }, children);
+/**
+ * Disabled
+ */
+export const Disabled = {
+    args: { ...Default.args, children: 'Link (disabled)', isDisabled: true },
+};
 
-    return (
-        <Link linkAs={CustomLink} href="https://example.com">
-            Custom link
-        </Link>
-    );
+/**
+ * Using onClick transforms the link into a <button> in DOM
+ */
+export const ButtonLink = {
+    argTypes: { onClick: { action: true } },
+    args: { children: 'Button link' },
 };
 
-export const DisabledLink = () => (
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <Link onClick={onClick} disabled>
-        Disabled link
-    </Link>
-);
+/**
+ * Button link disabled
+ */
+export const ButtonLinkDisabled = {
+    args: { ...ButtonLink.args, children: 'Button link (disabled)', isDisabled: true },
+};
 
-export const WithCustomizableTypography = () => (
-    <>
-        <style>{`
-        :root {
-            --lumx-typography-custom-title1-font-size: 5px;
-        }
-        `}</style>
-        <Link typography={Typography.custom.title1} href="https://example.com">
-            Link with customizable `body` typography
-        </Link>
-    </>
-);
+/**
+ * Use custom component instead of <a> or <button>
+ */
+export const LinkAs = {
+    args: { linkAs: CustomLink },
+};
 
-export const AllTypography = () => {
-    const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
-    return (
-        <table>
-            {typographies.map((typography) => (
-                <tr key={typography}>
-                    <td>{typography}</td>
-                    <td>
-                        <Link
-                            leftIcon={mdiChevronDown}
-                            rightIcon={mdiLink}
-                            typography={typography}
-                            href="https://example.com"
-                        >
-                            Link text
-                        </Link>
-                    </td>
-                </tr>
-            ))}
-        </table>
-    );
+/**
+ * Use a custom typography and customize it via CSS variable
+ */
+export const WithCustomizableTypography = {
+    typography: Typography.custom.title1,
+    // eslint-disable-next-line react/display-name
+    render: (props: any) => (
+        // Injecting CSS variable to customize the font size
+        <>
+            <style>{`
+            :root {
+                --lumx-typography-custom-title1-font-size: 5px;
+            }
+            `}</style>
+            <Link {...props} />
+        </>
+    ),
+};
+/**
+ * Show all typographies
+ */
+export const AllTypography = {
+    argTypes: {
+        typography: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'typography', options: withUndefined(linkTypographies) },
+            },
+        }),
+    ],
 };
 
-export const AllColor = () => {
-    const colorVariants = [undefined, ...Object.values(ColorVariant)];
-    const colors = [undefined, ...Object.values(ColorPalette)];
-    return (
-        <table style={{ borderCollapse: 'separate', borderSpacing: 5 }}>
-            <tr>
-                <td />
-                {colorVariants.map((colorVariant) => (
-                    <td key={colorVariant}>{colorVariant}</td>
-                ))}
-            </tr>
-            {colors.map((color) => (
-                <tr key={color}>
-                    <td>{color}</td>
-                    {colorVariants.map((colorVariant) => (
-                        <td key={colorVariant}>
-                            <Link href="https://example.com" color={color} colorVariant={colorVariant}>
-                                Some text
-                            </Link>
-                        </td>
-                    ))}
-                </tr>
-            ))}
-        </table>
-    );
+/**
+ * Show all color combinations
+ */
+export const AllColors = {
+    argTypes: {
+        color: { control: false },
+        colorVariant: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'color', options: withUndefined(ColorPalette) },
+                cols: { key: 'colorVariant', options: withUndefined(ColorVariant) },
+            },
+        }),
+    ],
 };

package/src/components/link-preview/LinkPreview.stories.tsx

@@ -1,88 +1,61 @@
-/* istanbul ignore file */
-import { landscapeImageKnob, portraitImageKnob } from '@lumx/react/stories/knobs/image';
-import { text } from '@storybook/addon-knobs';
-import React from 'react';
-import { Size } from '..';
-import { LinkPreview } from './LinkPreview';
-
-export default { title: 'LumX components/link-preview/Link preview' };
-
-const LONG_LOREM_IPSUM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam sollicitudin, viverra quam eget, pretium tellus. Praesent sit amet augue in odio varius accumsan vitae quis nunc. Aliquam iaculis neque at augue laoreet, eu sagittis dolor tempus. Nullam sit amet bibendum velit, in pharetra lorem. Aliquam semper accumsan placerat. Sed felis risus, efficitur non eros non, rhoncus viverra lectus. Aliquam eget interdum tellus. Praesent non ex ut urna tempus facilisis. Sed tellus tortor, pharetra vel velit sit amet, aliquet condimentum quam. Sed dictum nibh eget nibh ullamcorper dignissim. Vestibulum elementum at mauris sit amet iaculis. Maecenas pretium luctus enim vel commodo. Cras accumsan sagittis eros, vel maximus sem molestie id. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Mauris ultrices pellentesque vestibulum. Etiam vel turpis at eros condimentum feugiat nec sit amet diam. Fusce pellentesque vulputate est sed ultrices. Etiam arcu tellus, dignissim non dui mattis, suscipit pellentesque erat. Aliquam congue magna nec varius suscipit. Sed mattis fringilla viverra. Donec pulvinar ex ac augue feugiat, a vulputate mauris suscipit. Morbi eget lorem purus. In pretium ligula non ex auctor, ornare dignissim orci dictum. Nulla ornare, risus non tincidunt blandit, massa massa mollis velit, id vulputate mi ligula ut metus. Vestibulum mattis tincidunt lorem, ac commodo felis ultricies interdum. Proin fermentum eu nibh a suscipit. Morbi eu pretium sapien. Pellentesque pretium purus eros, eget feugiat nisl dapibus at.`;
-
-/**
- * LinkPreview story
- * @return regular LinkPreview.
- */
-export const RegularLinkPreview = ({ theme }: any) => (
-    <LinkPreview
-        title={text('Title', 'Link title')}
-        description={text('Description', LONG_LOREM_IPSUM)}
-        link={text('URL', 'https://google.com')}
-        theme={theme}
-        thumbnailProps={{ image: portraitImageKnob(), alt: 'Portrait' }}
-    />
-);
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { headingElementArgType } from '@lumx/react/stories/controls/element';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
-/**
- * LinkPreview story
- * @return regular LinkPreview without thumbnail.
- */
-export const NoThumbnail = ({ theme }: any) => (
-    <LinkPreview
-        title={text('Title', 'Link title')}
-        description={text('Description', LONG_LOREM_IPSUM)}
-        link={text('URL', 'https://google.com')}
-        theme={theme}
-    />
-);
+import { Size } from '..';
+import { LinkPreview, LinkPreviewProps } from './LinkPreview';
+
+export default {
+    title: 'LumX components/link-preview/Link preview',
+    component: LinkPreview,
+    decorators: [withNestedProps()],
+    args: {
+        ...LinkPreview.defaultProps,
+        title: '',
+        description: '',
+        link: 'https://example.com',
+    },
+    argTypes: {
+        size: getSelectArgType<LinkPreviewProps['size']>([Size.regular, Size.big]),
+        titleHeading: { if: { arg: 'title' }, ...headingElementArgType },
+    },
+};
 
 /**
- * LinkPreview story
- * @return regular LinkPreview without thumbnail, title and description.
+ * Default link preview with only the required props (link)
  */
-export const OnlyUrl = ({ theme }: any) => <LinkPreview link={text('URL', 'https://google.com')} theme={theme} />;
+export const Default = {};
 
 /**
- * LinkPreview story
- * @return big LinkPreview.
+ * Link preview with title and description
  */
-export const BigLinkPreview = ({ theme }: any) => (
-    <div style={{ width: 400 }}>
-        <LinkPreview
-            title={text('Title', 'Link title')}
-            description={text('Description', LONG_LOREM_IPSUM)}
-            link={text('URL', 'https://google.com')}
-            theme={theme}
-            thumbnailProps={{ image: landscapeImageKnob(), alt: 'Landscape' }}
-            size={Size.big}
-        />
-    </div>
-);
+export const TitleAndDescription = {
+    args: {
+        title: 'Link title',
+        description: loremIpsum('short'),
+    },
+};
 
 /**
- * LinkPreview story
- * @return big LinkPreview without thumbnail.
+ * Link preview with title, description and thumbnail
  */
-export const BigWithoutThumbnail = ({ theme }: any) => (
-    <div style={{ width: 400 }}>
-        <LinkPreview
-            title={text('Title', 'Link title')}
-            description={text('Description', LONG_LOREM_IPSUM)}
-            link={text('URL', 'https://google.com')}
-            theme={theme}
-            size={Size.big}
-        />
-    </div>
-);
+export const AllFields = {
+    args: {
+        ...TitleAndDescription.args,
+        'thumbnailProps.image': LANDSCAPE_IMAGES.landscape1,
+    },
+};
 
 /**
- * LinkPreview story
- * @return big LinkPreview without thumbnail, title and description.
+ * Big link preview with title, description and thumbnail
  */
-export const BigWithOnlyUrl = ({ theme }: any) => (
-    <div style={{ width: 400 }}>
-        <LinkPreview link={text('URL', 'https://google.com')} theme={theme} size={Size.big} />
-    </div>
-);
+export const Big = {
+    decorators: [withWrapper({ style: { width: '400px' } })],
+    args: {
+        ...AllFields.args,
+        size: Size.big,
+    },
+};