@lumx/react 3.1.5 → 3.2.0

package/src/components/heading/Heading.stories.tsx

@@ -1,108 +1,70 @@
 import React from 'react';
-import { imageKnob } from '@lumx/react/stories/knobs/image';
-import { Orientation, Size, Typography } from '..';
+import { headingElementArgType, HEADING_ELEMENTS } from '@lumx/react/stories/controls/element';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { ALL_TYPOGRAPHY } from '@lumx/react/stories/controls/typography';
 import { Heading, HeadingLevelProvider } from '.';
-import { FlexBox } from '../flex-box';
-import { GenericBlock } from '../generic-block';
-import { Thumbnail } from '../thumbnail';
+import TextStories from '../text/Text.stories';
 
-export default { title: 'LumX components/heading/Heading' };
-
-export const Default = () => {
-    return (
-        <div>
-            {/* This will render a h1 */}
-            <Heading>First level</Heading>
-            <HeadingLevelProvider>
-                {/* This will render a h2 */}
-                <Heading>Second Level</Heading>
-                <HeadingLevelProvider>
-                    {/* This will render a h3 */}
-                    <Heading>Third Level</Heading>
-                    {/* This will also render a h3 */}
-                    <Heading>Other Third Level</Heading>
-                    <HeadingLevelProvider>
-                        {/* This will render a h4 */}
-                        <Heading>Fourth Level</Heading>
-                        <HeadingLevelProvider>
-                            {/* This will render a h5 */}
-                            <Heading>Fifth Level</Heading>
-                        </HeadingLevelProvider>
-                    </HeadingLevelProvider>
-                </HeadingLevelProvider>
-            </HeadingLevelProvider>
-        </div>
-    );
+export default {
+    title: 'LumX components/heading/Heading',
+    component: Heading,
+    args: Heading.defaultProps,
+    argTypes: {
+        ...TextStories.argTypes,
+        as: headingElementArgType,
+        children: { control: 'text' },
+    },
 };
 
-export const LevelOverride = () => {
-    return (
-        <div>
-            {/* This will render a h1 */}
-            <Heading>First level</Heading>
-            <HeadingLevelProvider>
-                {/* This will render a h2 */}
-                <Heading>Second Level</Heading>
-                <HeadingLevelProvider level={2}>
-                    {/* This will also render a h2 */}
-                    <Heading>Lorem ipsum</Heading>
-                    <Heading>Dolor sit amet</Heading>
-                    <Heading>Reprehenderit et aute</Heading>
-                </HeadingLevelProvider>
-            </HeadingLevelProvider>
-        </div>
-    );
+/**
+ * Default heading with text
+ */
+export const Default = {
+    args: { children: 'Some heading text' },
 };
 
-export const HeadingManualOverride = () => {
-    return (
-        <div>
-            {/* This will render a h1 */}
-            <Heading>First level</Heading>
-            <HeadingLevelProvider>
-                {/* This will render a h2 */}
-                <Heading as="h2">Forced second Level</Heading>
-                <Heading as="h3">Forced third Level</Heading>
-                <Heading as="h4">Forced fourth Level</Heading>
-            </HeadingLevelProvider>
-        </div>
-    );
+/**
+ * All supported heading elements
+ */
+export const AllLevels = {
+    ...Default,
+    argTypes: { as: { control: false } },
+    decorators: [withCombinations({ combinations: { rows: { key: 'as', options: HEADING_ELEMENTS } } })],
 };
 
-const ListWithSubElements = () => {
-    return (
-        <HeadingLevelProvider>
-            <FlexBox orientation={Orientation.vertical} gap={Size.big}>
-                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
-                    <Heading typography={Typography.subtitle2}>First item</Heading>
-                </GenericBlock>
-                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
-                    <Heading typography={Typography.subtitle2}>Second item</Heading>
-                </GenericBlock>
-                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
-                    <Heading typography={Typography.subtitle2}>Third item</Heading>
-                </GenericBlock>
-            </FlexBox>
-        </HeadingLevelProvider>
-    );
+/**
+ * All typography
+ */
+export const AllTypography = {
+    ...Default,
+    argTypes: { typography: { control: false } },
+    decorators: [withCombinations({ combinations: { rows: { key: 'typography', options: ALL_TYPOGRAPHY } } })],
 };
 
-export const TypographyOverride = () => {
-    return (
-        <FlexBox orientation={Orientation.vertical} gap={Size.big}>
-            <Heading>My lists</Heading>
-
-            <FlexBox orientation={Orientation.horizontal} gap={Size.huge}>
-                <ListWithSubElements />
-
-                <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+/**
+ * Nest HeadingLevelProvider to increment heading levels
+ */
+export const NestedHeadingLevelProvider = () => (
+    <>
+        {/* This will render a h1 */}
+        <Heading>First level</Heading>
+        <HeadingLevelProvider>
+            {/* This will render a h2 */}
+            <Heading>Second Level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h3 */}
+                <Heading>Third Level</Heading>
+                {/* This will also render a h3 */}
+                <Heading>Other Third Level</Heading>
+                <HeadingLevelProvider>
+                    {/* This will render a h4 */}
+                    <Heading>Fourth Level</Heading>
                     <HeadingLevelProvider>
-                        <Heading>Sub list</Heading>
-
-                        <ListWithSubElements />
+                        {/* This will render a h5 */}
+                        <Heading>Fifth Level</Heading>
                     </HeadingLevelProvider>
-                </FlexBox>
-            </FlexBox>
-        </FlexBox>
-    );
-};
+                </HeadingLevelProvider>
+            </HeadingLevelProvider>
+        </HeadingLevelProvider>
+    </>
+);

package/src/components/icon/Icon.stories.tsx

@@ -1,76 +1,73 @@
-import React, { Fragment } from 'react';
-
 import { mdiEmail } from '@lumx/icons';
-import { ColorPalette, ColorVariant, FlexBox, Icon, IconSizes, Size } from '@lumx/react';
-import { Orientation } from '..';
-
-export default { title: 'LumX components/icon/Icon', parameters: { hasGreyBackground: true } };
-
-const iconSizes: Array<IconSizes | undefined> = [
-    undefined,
-    Size.xxs,
-    Size.xs,
-    Size.s,
-    Size.m,
-    Size.l,
-    Size.xl,
-    Size.xxl,
-];
-
-const TemplateSizeVariants = ({ hasShape, theme }: any) => (
-    <FlexBox orientation={Orientation.horizontal}>
-        {iconSizes.map((size) => (
-            <FlexBox fillSpace key={`${size}`}>
-                <h2>Size: {size || 'undefined'}</h2>
-                <Icon icon={mdiEmail} size={size} hasShape={hasShape} theme={theme} />
-            </FlexBox>
-        ))}
-    </FlexBox>
-);
+import { ColorPalette, ColorVariant, GridColumn, Icon, IconSizes, Size } from '@lumx/react';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
-export const AllSize = ({ theme }: any) => TemplateSizeVariants({ theme });
+const iconSizes: Array<IconSizes> = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
 
-export const AllSizeWithShape = ({ theme }: any) => TemplateSizeVariants({ theme, hasShape: true });
-
-const TemplateColorVariants = ({ hasShape, theme }: any) => {
-    const withUndefined = (a: any) => [undefined].concat(Object.values(a));
-    return (
-        <FlexBox orientation={Orientation.horizontal}>
-            {withUndefined(ColorPalette).map((color) => (
-                <FlexBox fillSpace key={`${color}`}>
-                    <small key={`${color}`}>Color: {color || 'undefined'}</small>
-                    <br />
-                    {withUndefined(Object.values(ColorVariant).reverse()).map((colorVariant) => (
-                        <Fragment key={`${colorVariant}`}>
-                            {!colorVariant && (
-                                <>
-                                    <small>No theme</small>
-                                    <Icon
-                                        icon={mdiEmail}
-                                        color={color}
-                                        colorVariant={colorVariant}
-                                        size="m"
-                                        hasShape={hasShape}
-                                    />
-                                </>
-                            )}
-                            <small>Variant: {colorVariant || 'undefined'}</small>
-                            <Icon
-                                icon={mdiEmail}
-                                color={color}
-                                colorVariant={colorVariant}
-                                size="m"
-                                theme={theme}
-                                hasShape={hasShape}
-                            />
-                        </Fragment>
-                    ))}
-                </FlexBox>
-            ))}
-        </FlexBox>
-    );
+export default {
+    title: 'LumX components/icon/Icon',
+    component: Icon,
+    args: Icon.defaultProps,
+    argTypes: {
+        icon: iconArgType,
+        hasShape: { control: 'boolean' },
+        color: colorArgType,
+        colorVariant: colorVariantArgType,
+    },
 };
 
-export const AllColors = ({ theme }: any) => TemplateColorVariants({ theme });
+/**
+ * All combinations of size and shape
+ */
+export const SizeAndShape = {
+    args: {
+        icon: mdiEmail,
+    },
+    argTypes: {
+        hasShape: { control: false },
+        size: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                cols: { key: 'size', options: withUndefined(iconSizes) },
+                rows: {
+                    Default: {},
+                    'Has shape': { hasShape: true },
+                },
+            },
+        }),
+    ],
+};
 
-export const AllColorsWithShape = ({ theme }: any) => TemplateColorVariants({ theme, hasShape: true });
+/**
+ * All combinations of size and shape
+ */
+export const AllColors = {
+    args: {
+        size: Size.m,
+        icon: mdiEmail,
+    },
+    argTypes: {
+        hasShape: { control: false },
+        color: { control: false },
+        colorVariant: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'color', options: withUndefined(ColorPalette) },
+                cols: { key: 'colorVariant', options: withUndefined(ColorVariant) },
+                sections: {
+                    Default: {},
+                    'Has shape': { hasShape: true },
+                },
+            },
+        }),
+        withWrapper({ maxColumns: 2, itemMinWidth: 500 }, GridColumn),
+    ],
+};

package/src/components/image-block/ImageBlock.stories.tsx

@@ -1,52 +1,108 @@
-import { LANDSCAPE_IMAGES, landscapeImageKnob } from '@lumx/react/stories/knobs/image';
 import React from 'react';
 
-import { Alignment, AspectRatio, Chip, ChipGroup, ImageBlock, Size } from '@lumx/react';
-import { boolean, select, text } from '@storybook/addon-knobs';
-import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
-import { focusKnob } from '@lumx/react/stories/knobs/focusKnob';
-
-export default { title: 'LumX components/image-block/Image Block' };
-
-export const DefaultImageBlock = ({ theme }: any) => {
-    const alt = text('Alternative text', 'Image alt text');
-    const align = select('Alignment', Alignment, Alignment.center) as any;
-    const aspectRatio = select('Aspect ratio', AspectRatio, AspectRatio.square);
-    const title = text('Title', 'Hello world');
-    const description = text('Description', 'My awesome description');
-    const crossOrigin = enumKnob('CORS', [undefined, 'anonymous', 'use-credentials'], undefined);
-    const tags = boolean('Display tags', true) && (
-        <ChipGroup align={Alignment.left}>
-            <Chip size={Size.s} theme={theme}>
-                Tag 1
-            </Chip>
+import {
+    Alignment,
+    AspectRatio,
+    Chip,
+    ChipGroup,
+    HorizontalAlignment,
+    IconButton,
+    ImageBlock,
+    ImageBlockCaptionPosition,
+    ImageBlockSize,
+    Size,
+} from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { imageArgType, PORTRAIT_IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
+import { mdiFileEdit } from '@lumx/icons';
+import { toNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { focusPoint } from '@lumx/react/stories/controls/focusPoint';
+
+export default {
+    title: 'LumX components/image-block/Image Block',
+    argTypes: {
+        size: getSelectArgType<ImageBlockSize>([Size.xl, Size.xxl]),
+        image: imageArgType,
+        captionPosition: getSelectArgType(ImageBlockCaptionPosition),
+        'thumbnailProps.aspectRatio': getSelectArgType(AspectRatio),
+        align: getSelectArgType<HorizontalAlignment>([Alignment.left, Alignment.center, Alignment.right]),
+    },
+    args: { ...ImageBlock.defaultProps, image: LANDSCAPE_IMAGES.landscape1 },
+};
+
+export const Default = (props: any) => {
+    const nestedProps = toNestedProps(props) as any;
+    return <ImageBlock {...nestedProps} />;
+};
+
+export const WithCaptionBelow: any = Default.bind({});
+WithCaptionBelow.args = {
+    captionPosition: ImageBlockCaptionPosition.below,
+    size: Size.xxl,
+    title: 'Image block title',
+    description: 'Image block description',
+};
+
+export const WithCaptionOver: any = Default.bind({});
+WithCaptionOver.args = {
+    captionPosition: ImageBlockCaptionPosition.over,
+    size: Size.xxl,
+    title: 'Image block title',
+    description: 'Image block description',
+};
+
+export const WithAlign: any = Default.bind({});
+WithAlign.args = {
+    ...WithCaptionBelow.args,
+    image: LANDSCAPE_IMAGES.landscape1s200,
+    size: undefined,
+    align: Alignment.center,
+};
 
-            <Chip size={Size.s} theme={theme}>
-                Tag 2
-            </Chip>
+export const WithTags: any = Default.bind({});
+WithTags.argTypes = {
+    tags: { control: false },
+};
+WithTags.args = {
+    size: Size.xxl,
+    tags: (
+        <ChipGroup align={Alignment.left}>
+            <Chip size={Size.s}>Tag 1</Chip>
+            <Chip size={Size.s}>Tag 2</Chip>
         </ChipGroup>
-    );
-    const imageUrl = landscapeImageKnob('Url image', LANDSCAPE_IMAGES.landscape1);
-    const focusPoint = { x: focusKnob('Focus X'), y: focusKnob('Focus Y') };
-    const size = enumKnob('Size', [undefined, Size.xl, Size.xxl] as const, undefined);
-    const onClick = boolean('clickable?', false) && (() => console.log('ok'));
-
-    return (
-        <ImageBlock
-            alt={alt}
-            description={description}
-            image={imageUrl}
-            size={size}
-            tags={tags}
-            title={title}
-            theme={theme}
-            align={align}
-            thumbnailProps={{
-                aspectRatio,
-                crossOrigin,
-                focusPoint,
-                onClick,
-            }}
-        />
-    );
+    ),
+};
+
+export const WithActions: any = Default.bind({});
+WithActions.argTypes = {
+    actions: { control: false },
+};
+WithActions.args = {
+    size: Size.xxl,
+    actions: <IconButton label="Edit" icon={mdiFileEdit} />,
+};
+
+export const WithFocusPointHorizontal: any = Default.bind({});
+WithFocusPointHorizontal.args = {
+    size: Size.xxl,
+    'thumbnailProps.aspectRatio': AspectRatio.vertical,
+    'thumbnailProps.focusPoint.x': 1,
+    'thumbnailProps.focusPoint.y': 0,
+};
+WithFocusPointHorizontal.argTypes = {
+    'thumbnailProps.focusPoint.x': focusPoint,
+    'thumbnailProps.focusPoint.y': focusPoint,
+};
+
+export const WithFocusPointVertical: any = Default.bind({});
+WithFocusPointVertical.args = {
+    size: Size.xxl,
+    image: PORTRAIT_IMAGES.portrait1,
+    'thumbnailProps.aspectRatio': AspectRatio.horizontal,
+    'thumbnailProps.focusPoint.x': 0,
+    'thumbnailProps.focusPoint.y': 1,
+};
+WithFocusPointVertical.argTypes = {
+    'thumbnailProps.focusPoint.x': focusPoint,
+    'thumbnailProps.focusPoint.y': focusPoint,
 };

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

package/src/components/inline-list/InlineList.stories.tsx

@@ -1,40 +1,56 @@
 import React from 'react';
 import { mdiEarth } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Icon, Text, TypographyCustom, TypographyInterface } from '@lumx/react';
-import { withResizableBox } from '@lumx/react/stories/withResizableBox';
+import { Icon, Text } from '@lumx/react';
+import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
+import { allTypographyArgType } from '@lumx/react/stories/controls/typography';
+import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
 import { InlineList } from '.';
 
-const ALL_TYPOGRAPHY = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
-
 export default {
     title: 'LumX components/inline-list/InlineList',
+    component: InlineList,
     argTypes: {
-        typography: { control: 'select', options: ALL_TYPOGRAPHY },
-        color: { control: 'select', options: ColorPalette },
-        colorVariant: { control: 'select', options: ColorVariant },
+        typography: allTypographyArgType,
+        color: colorArgType,
+        colorVariant: colorVariantArgType,
+        children: { control: false },
     },
 };
 
-export const Default = (args: any) => (
-    <InlineList as="p" {...args}>
-        <span>Some text</span>
-        <span>Some other text</span>
-        <span>Some other other text</span>
-    </InlineList>
-);
+/**
+ * Inline list with three simple text elements
+ */
+export const WithElements = {
+    args: {
+        children: [
+            <span key="1">Some text</span>,
+            <span key="2">Some other text</span>,
+            <span key="3">Some other other text</span>,
+        ],
+    },
+};
 
-export const MixedNoWrapAndTruncate = (args: any) => (
-    <InlineList typography="body1" color="dark" colorVariant="L2" {...args} style={{ width: '100%' }}>
-        <Text as="span" truncate>
-            Very very very very very long text
-        </Text>
-        <Text as="span" noWrap>
-            <Icon icon={mdiEarth} />
-            Some text
-        </Text>
-        <Text as="span" truncate>
-            Very very very very very long text
-        </Text>
-    </InlineList>
-);
-MixedNoWrapAndTruncate.decorators = [withResizableBox({ width: 400 })];
+/**
+ * Using color, typography and more complex elements
+ */
+export const MixedNoWrapAndTruncate = {
+    args: {
+        typography: 'body1',
+        color: 'dark',
+        colorVariant: 'L2',
+        style: { width: '100%' },
+        children: [
+            <Text key="1" as="span" truncate>
+                Very very very very very long text
+            </Text>,
+            <Text key="2" as="span" noWrap>
+                <Icon icon={mdiEarth} />
+                Some text
+            </Text>,
+            <Text key="3" as="span" truncate>
+                Very very very very very long text
+            </Text>,
+        ],
+    },
+    decorators: [withResizableBox({ width: 400 })],
+};

package/src/components/input-helper/InputHelper.stories.tsx

@@ -1,29 +1,35 @@
 import { InputHelper, Kind } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
-import React from 'react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 
-export default { title: 'LumX components/input-helper/Input Helper' };
+export default {
+    title: 'LumX components/input-helper/Input Helper',
+    component: InputHelper,
+    argTypes: {
+        kind: getSelectArgType(Kind),
+    },
+    args: {
+        ...InputHelper.defaultProps,
+        children: 'Some helper text',
+    },
+};
 
-export const InformationHelper = ({ theme }: any) => (
-    <InputHelper kind={Kind.info} theme={theme}>
-        {text('Text', 'ex: toto@acme.com')}
-    </InputHelper>
-);
+/**
+ * Default input helper
+ */
+export const Default = {};
 
-export const ErrorHelper = ({ theme }: any) => (
-    <InputHelper kind={Kind.error} theme={theme}>
-        {text('Text', 'You should be bold!')}
-    </InputHelper>
-);
-
-export const ValidHelper = ({ theme }: any) => (
-    <InputHelper kind={Kind.success} theme={theme}>
-        {text('Text', 'Great, you are bold')}
-    </InputHelper>
-);
-
-export const warningHelper = ({ theme }: any) => (
-    <InputHelper kind={Kind.warning} theme={theme}>
-        {text('Text', 'This should be used carefuly')}
-    </InputHelper>
-);
+/**
+ * All `kind` variants
+ */
+export const AllKinds = {
+    argTypes: { kind: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'kind', options: withUndefined(Kind) },
+            },
+        }),
+    ],
+};