@lumx/react 3.1.5 → 3.2.1-alpha.0

package/src/components/badge/Badge.stories.tsx

@@ -1,45 +1,70 @@
 import { mdiHeart } from '@lumx/icons';
 import { AspectRatio, Badge, ColorPalette, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
-import { select, text } from '@storybook/addon-knobs';
-import React, { Fragment } from 'react';
+import React from 'react';
+import { colorArgType } from '@lumx/react/stories/controls/color';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 
-export default { title: 'LumX components/badge/Badge' };
+export default {
+    title: 'LumX components/badge/Badge',
+    component: Badge,
+    argTypes: {
+        color: colorArgType,
+        children: { control: false },
+    },
+};
 
-export const WithText = () => (
-    <Badge color={select('Colors', ColorPalette, ColorPalette.blue)}>
-        <span>{text('Value', '30')}</span>
-    </Badge>
-);
+/**
+ * Using badge with text children
+ */
+export const WithText = {
+    args: { children: <span>30</span> },
+};
 
-export const WithIcon = () => (
-    <Badge color={select('Colors', ColorPalette, ColorPalette.red)}>
-        <Icon icon={mdiHeart} />
-    </Badge>
-);
+/**
+ * Using badge with icon children
+ */
+export const WithIcon = {
+    args: { children: <Icon icon={mdiHeart} /> },
+};
 
-export const WithThumbnail = () => (
-    <Badge color={select('Colors', ColorPalette, ColorPalette.light)}>
-        <Thumbnail
-            alt="Logo"
-            aspectRatio={AspectRatio.square}
-            image="/logo.svg"
-            size={Size.xxs}
-            variant={ThumbnailVariant.rounded}
-        />
-    </Badge>
-);
+/**
+ * Using badge with thumbnail children
+ */
+export const WithThumbnail = {
+    args: {
+        children: (
+            <Thumbnail
+                alt="Logo"
+                aspectRatio={AspectRatio.square}
+                image="/logo.svg"
+                size={Size.xxs}
+                variant={ThumbnailVariant.rounded}
+            />
+        ),
+    },
+};
 
-export const AllColors = () => (
-    <dl>
-        {Object.values(ColorPalette).map((color) => (
-            <Fragment key={color}>
-                <dt>{color}</dt>
-                <dd>
-                    <Badge color={color}>
-                        <Icon icon={mdiHeart} />
-                    </Badge>
-                </dd>
-            </Fragment>
-        ))}
-    </dl>
-);
+/**
+ * All combinations of colors and children types
+ */
+export const AllColors = {
+    argTypes: {
+        color: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                cols: {
+                    key: 'color',
+                    options: withUndefined(ColorPalette),
+                },
+                rows: {
+                    'With text': WithText.args,
+                    'With icon': WithIcon.args,
+                    'With thumbnail': WithThumbnail.args,
+                },
+            },
+        }),
+    ],
+};

package/src/components/button/Button.stories.tsx

@@ -1,156 +1,164 @@
-import React, { Fragment } from 'react';
-import { mdiSend } from '@lumx/icons';
-import { Button, ColorPalette, IconButton, Text } from '@lumx/react';
-import { squareImageKnob } from '@lumx/react/stories/knobs/image';
-import { buttonSize } from '@lumx/react/stories/knobs/buttonKnob';
-import { emphasis } from '@lumx/react/stories/knobs/emphasisKnob';
-import { boolean, select, text } from '@storybook/addon-knobs';
-
-export default { title: 'LumX components/button/Button' };
-
-const DEFAULT_PROPS = Button.defaultProps as any;
-
-export const SimpleButton = ({ theme }: any) => {
-    return (
-        <Button
-            aria-pressed={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
-            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
-            theme={theme}
-            rightIcon={select('Right icon', { none: undefined, mdiSend }, undefined)}
-            leftIcon={select('Left icon', { none: undefined, mdiSend }, undefined)}
-            size={buttonSize()}
-            isSelected={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
-            isDisabled={boolean('isDisabled', Boolean(DEFAULT_PROPS.isDisabled))}
-            color={select('color', ColorPalette, DEFAULT_PROPS.color)}
-            href={text('Button link', '')}
-            hasBackground={boolean('hasBackground', Boolean(DEFAULT_PROPS.hasBackground))}
-        >
-            {text('Button content', 'Simple button')}
-        </Button>
-    );
+import React from 'react';
+import { Button, ButtonSize, Emphasis, Size, Text } from '@lumx/react';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { colorArgType } from '@lumx/react/stories/controls/color';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { mdiAccountBox } from '@lumx/icons';
+
+const buttonSizes = [Size.m, Size.s];
+const buttonEmphasis = [Emphasis.low, Emphasis.medium, Emphasis.high];
+
+export default {
+    title: 'LumX components/button/Button',
+    component: Button,
+    argTypes: {
+        isSelected: { control: 'boolean' },
+        isDisabled: { control: 'boolean' },
+        hasBackground: { control: 'boolean' },
+        emphasis: getSelectArgType(buttonEmphasis),
+        size: getSelectArgType<ButtonSize>(buttonSizes),
+        rightIcon: iconArgType,
+        leftIcon: iconArgType,
+        color: colorArgType,
+        onClick: { action: true },
+    },
+    args: Button.defaultProps,
 };
 
-export const SimpleButtonWithTruncatedText = ({ theme }: any) => {
-    const buttonText =
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Potenti nullam ac tortor vitae. Lorem ipsum dolor sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Ultrices tincidunt arcu non sodales neque sodales.';
-    return (
-        <Button
-            aria-pressed={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
-            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
-            theme={theme}
-            rightIcon={select('Right icon', { none: undefined, mdiSend }, undefined)}
-            leftIcon={select('Left icon', { none: undefined, mdiSend }, undefined)}
-            size={buttonSize()}
-            isSelected={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
-            isDisabled={boolean('isDisabled', Boolean(DEFAULT_PROPS.isDisabled))}
-            color={select('color', ColorPalette, DEFAULT_PROPS.color)}
-            href={text('Button link', '')}
-            hasBackground={boolean('hasBackground', Boolean(DEFAULT_PROPS.hasBackground))}
-            fullWidth
-            title={buttonText}
-        >
-            <Text as="span" truncate>
-                {text('Button content', buttonText)}
-            </Text>
-        </Button>
-    );
+/**
+ * Default button
+ */
+export const Default = {
+    args: {
+        children: 'Default button',
+    },
 };
 
-export const WithHref = () => <Button href="https://google.com">Button with redirection</Button>;
-
-export const Disabled = () => <Button isDisabled>Disabled button</Button>;
-
-export const DisabledWithHref = () => (
-    <Button href="https://google.com" isDisabled>
-        Disabled button with redirection
-    </Button>
-);
-
-export const IconButtonWithImage = ({ theme }: any) => (
-    <div>
-        <IconButton
-            theme={theme}
-            label="Image label"
-            image={squareImageKnob()}
-            size={buttonSize()}
-            hasBackground={boolean('Has background', false)}
-            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
-            color={select('color', ColorPalette, DEFAULT_PROPS.color)}
-        />
-    </div>
-);
-
-export const FullWidthButton = () => <Button fullWidth>Full width button</Button>;
-
 /**
- * Template story to generate all variants for button and icon button.
+ * Disabled button
  */
-const AllVariantTemplate = (Component: any, props: any) => () => {
-    // Major variants.
-    const variants = {
-        'Default (emphasis high)': {},
-        'Full width': { fullWidth: true },
-        'Emphasis medium': { emphasis: 'medium' },
-        'Emphasis low': { emphasis: 'low' },
-        'Has background (emphasis low)': { emphasis: 'low', hasBackground: true },
-        'Has background + Full width': { emphasis: 'low', hasBackground: true, fullWidth: true },
-    } as const;
+export const Disabled = {
+    args: {
+        isDisabled: true,
+        children: 'Default button (disabled)',
+    },
+};
 
-    // Color modifiers.
-    const colorModifiers = {
-        Default: {},
-        'Color: light': { color: 'light' },
-        'Color: dark': { color: 'dark' },
-        'Color: red': { color: 'red' },
-        'Theme: dark': { theme: 'dark' },
-    } as const;
+/**
+ * All combinations of size, emphasis and hasBackground
+ */
+export const SizeEmphasisAndBackground = {
+    args: {
+        children: 'Button',
+    },
+    decorators: [
+        withCombinations({
+            tableStyle: { background: 'lightgray' },
+            cellStyle: { padding: '10px' },
+            combinations: {
+                rows: { medium: { size: Size.m }, small: { size: Size.s } },
+                cols: { key: 'emphasis', options: buttonEmphasis },
+                sections: {
+                    'hasBackground: false': { hasBackground: false },
+                    'hasBackground: true': { hasBackground: true },
+                },
+            },
+        }),
+    ],
+};
 
-    // State modifiers.
-    const stateModifiers = {
-        'Default state': {},
-        Selected: { isSelected: true },
-        Hovered: { isHovered: true },
-        Focused: { isFocused: true },
-        Active: { isActive: true },
-        Disabled: { isDisabled: true },
-    };
+/**
+ * Setting a href to transform the button into a link.
+ */
+export const LinkButton = {
+    args: {
+        href: 'https://example.com',
+        children: 'Link button',
+    },
+};
 
-    return (
-        <div style={{ background: 'lightgray' }}>
-            {Object.entries(stateModifiers).map(([stateKey, state]) => (
-                <Fragment key={stateKey}>
-                    <h2>{stateKey}</h2>
-                    <table style={{ width: '100%' }}>
-                        <tr>
-                            <td style={{ whiteSpace: 'nowrap', width: 200 }} />
-                            {Object.keys(colorModifiers).map((colorKey) => (
-                                <td key={colorKey}>{colorKey}</td>
-                            ))}
-                        </tr>
+/**
+ * Setting a href to transform the button into a link.
+ */
+export const LinkButtonDisabled = {
+    args: {
+        href: 'https://example.com',
+        children: 'Link button (disabled)',
+        isDisabled: true,
+    },
+};
 
-                        {Object.entries(variants).map(([variantKey, variant]: any) => (
-                            <tr key={variantKey}>
-                                <td>{variantKey}</td>
-                                {Object.entries(colorModifiers).map(([colorKey, color]) => (
-                                    <td key={colorKey}>
-                                        <Component {...props} {...variant} {...color} {...state} />
-                                    </td>
-                                ))}
-                            </tr>
-                        ))}
-                    </table>
-                </Fragment>
-            ))}
-        </div>
-    );
+/**
+ * Full width button
+ */
+export const FullWidth = {
+    args: {
+        fullWidth: true,
+        children: 'Full width button',
+    },
 };
 
 /**
- * Check button style variations (color, states, emphasis, etc.)
+ * Full width button with long text truncated
  */
-export const ButtonVariations = AllVariantTemplate(Button, { children: 'Button' });
+export const FullWidthTruncated = {
+    argTypes: {
+        children: { control: false },
+    },
+    args: {
+        fullWidth: true,
+        children: (
+            <Text as="span" truncate>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Potenti nullam ac tortor vitae. Lorem ipsum dolor sit amet. Diam sollicitudin
+                tempor id eu nisl nunc mi ipsum. Elementum facilisis leo vel fringilla est ullamcorper eget nulla.
+                Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Ultrices tincidunt arcu non sodales neque
+                sodales.
+            </Text>
+        ),
+    },
+};
 
 /**
- * Check icon button style variations (color, states, emphasis, etc.)
+ * Check button style variations (color, states, emphasis, etc.)
  */
-export const IconButtonVariations = AllVariantTemplate(IconButton, { label: 'Send', icon: mdiSend });
+export const ButtonVariations = {
+    args: {
+        children: 'Button',
+        rightIcon: mdiAccountBox,
+    },
+    decorators: [
+        withCombinations({
+            tableStyle: { background: 'lightgray', width: '100%' },
+            firstColStyle: { whiteSpace: 'nowrap', width: '1%' },
+            combinations: {
+                // Colors
+                rows: {
+                    Default: {},
+                    'Color: red': { color: 'red' },
+                    'Theme: dark': { theme: 'dark' },
+                    'Theme: dark & color: green': { theme: 'dark', color: 'green' },
+                },
+                // States
+                cols: {
+                    'Default state': {},
+                    Selected: { isSelected: true },
+                    Hovered: { isHovered: true },
+                    Focused: { isFocused: true },
+                    Active: { isActive: true },
+                    Disabled: { isDisabled: true },
+                },
+                // Emphasis/Background
+                sections: {
+                    'Default (emphasis high)': {},
+                    'Emphasis medium': { emphasis: 'medium' },
+                    'Emphasis low': { emphasis: 'low' },
+                    'Full width': { fullWidth: true },
+                    'Has background (emphasis low)': { emphasis: 'low', hasBackground: true },
+                    'Has background + Full width': { emphasis: 'low', hasBackground: true, fullWidth: true },
+                },
+            },
+        }),
+    ],
+};

package/src/components/button/IconButton.stories.tsx

@@ -0,0 +1,45 @@
+import { mdiSend } from '@lumx/icons';
+import { ButtonSize, Emphasis, IconButton, Size } from '@lumx/react';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { colorArgType } from '@lumx/react/stories/controls/color';
+import { SQUARE_IMAGES, squareImageArgType } from '@lumx/react/stories/controls/image';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { ButtonVariations } from './Button.stories';
+
+export default {
+    title: 'LumX components/button/IconButton',
+    component: IconButton,
+    argTypes: {
+        isSelected: { control: 'boolean' },
+        isDisabled: { control: 'boolean' },
+        hasBackground: { control: 'boolean' },
+        emphasis: getSelectArgType(Emphasis),
+        size: getSelectArgType<ButtonSize>([Size.s, Size.m]),
+        icon: iconArgType,
+        color: colorArgType,
+    },
+    args: IconButton.defaultProps,
+};
+
+/**
+ * Default IconButton
+ */
+export const Default = {
+    args: { icon: mdiSend },
+};
+
+/**
+ * IconButton using an image
+ */
+export const WithImage = {
+    argTypes: squareImageArgType,
+    args: { image: SQUARE_IMAGES.square1 },
+};
+
+/**
+ * Check icon button style variations (color, states, emphasis, etc.)
+ */
+export const IconButtonVariations = {
+    ...Default,
+    decorators: ButtonVariations.decorators,
+};

package/src/components/checkbox/Checkbox.stories.tsx

@@ -1,37 +1,44 @@
 import { Checkbox } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import React, { useState } from 'react';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 
-export default { title: 'LumX components/checkbox/Checkbox' };
-
-export const SimpleSelect = ({ theme }: any) => {
-    const [value, setValue] = useState(false);
-    return <Checkbox isChecked={value} label={text('Label', 'My label')} theme={theme} onChange={setValue} />;
+export default {
+    title: 'LumX components/checkbox/Checkbox',
+    component: Checkbox,
+    decorators: [withValueOnChange({ valueProp: 'isChecked' })],
+    args: {
+        isChecked: false,
+        name: 'checkbox-html-name',
+        value: 'checkbox-html-value',
+    },
+    argTypes: {
+        onChange: { action: true },
+        name: { control: false },
+        value: { control: false },
+    },
 };
 
-export const DisabledSelect = ({ theme }: any) => {
-    return (
-        <Checkbox
-            isChecked={false}
-            label={text('Label', 'My label')}
-            helper={text('Helper', 'You will receive our newsletter each month')}
-            theme={theme}
-            onChange={noop}
-            isDisabled
-        />
-    );
+/**
+ * Default checkbox
+ */
+export const Default = {};
+
+/**
+ * With label and helper
+ */
+export const LabelAndHelper = {
+    args: {
+        label: 'Checkbox label',
+        helper: loremIpsum('tiny'),
+    },
 };
 
-export const WithHelperSelect = ({ theme }: any) => {
-    const [value, setValue] = useState(false);
-    return (
-        <Checkbox
-            isChecked={value}
-            label={text('Label', 'My label')}
-            helper={text('Helper', 'You will receive our newsletter each month')}
-            theme={theme}
-            onChange={setValue}
-        />
-    );
+/**
+ * Disabled
+ */
+export const Disabled = {
+    args: {
+        ...LabelAndHelper.args,
+        isDisabled: true,
+    },
 };

package/src/components/chip/Chip.stories.tsx

@@ -1,21 +1,83 @@
 import React from 'react';
 
 import { mdiClose, mdiViewList } from '@lumx/icons';
-import { Chip, Icon } from '@lumx/react';
+import { Chip, ChipProps, ColorPalette, GridColumn, Icon, Size } from '@lumx/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';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
-export default { title: 'LumX components/chip/Chip' };
+const chipSizes = [Size.m, Size.s];
+export default {
+    title: 'LumX components/chip/Chip',
+    component: Chip,
+    args: Chip.defaultProps,
+    argTypes: {
+        size: getSelectArgType<ChipProps['size']>(chipSizes),
+        before: { control: false },
+        after: { control: false },
+    },
+};
 
-export const Simple = ({ theme }: any) => <Chip theme={theme}>The chip</Chip>;
+/**
+ * Default chip with label
+ */
+export const Default = {
+    args: { children: 'Chip label' },
+};
 
-export const WithAfterAndBefore = ({ theme }: any) => (
-    <Chip
-        theme={theme}
-        after={<Icon icon={mdiClose} />}
-        onAfterClick={() => alert('clicked on close')}
-        before={<Icon icon={mdiViewList} />}
-        onClick={() => alert('clicked on chip')}
-        isClickable
-    >
-        content
-    </Chip>
-);
+/**
+ * Clickable chip
+ */
+export const ChipButton = {
+    args: { children: 'Chip label' },
+    argTypes: { onClick: { action: true } },
+};
+
+/**
+ * Link chip
+ */
+export const ChipLink = {
+    args: {
+        children: 'Chip link',
+        href: 'https://example.com',
+        target: '_blank',
+    },
+};
+
+/**
+ * With custom elements at the start and end of the chip
+ */
+export const WithAfterAndBefore = {
+    argTypes: {
+        onBeforeClick: { action: true },
+        onClick: { action: true },
+        onAfterClick: { action: true },
+    },
+    args: {
+        before: <Icon icon={mdiViewList} />,
+        children: 'Chip label',
+        after: <Icon icon={mdiClose} />,
+    },
+};
+
+/**
+ * All combinations of color, size and states.
+ */
+export const Variants = {
+    ...WithAfterAndBefore,
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'color', options: withUndefined(ColorPalette) },
+                cols: { key: 'size', options: chipSizes },
+                sections: {
+                    Default: {},
+                    Disabled: { isDisabled: true },
+                    Highlighted: { isHighlighted: true },
+                },
+            },
+        }),
+        withWrapper({ maxColumns: 3, itemMinWidth: 350 }, GridColumn),
+    ],
+};