@lumx/react 3.1.5 → 3.2.1-alpha.0

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) },
+            },
+        }),
+    ],
+};

package/src/components/text-field/TextField.stories.tsx

@@ -1,169 +1,135 @@
 import React from 'react';
 import { mdiTranslate } from '@lumx/icons/';
-import { Emphasis, IconButton, Size, TextField } from '@lumx/react';
-import { boolean, number, text } from '@storybook/addon-knobs';
-import { buttonSize } from '@lumx/react/stories/knobs/buttonKnob';
-import { emphasis } from '@lumx/react/stories/knobs/emphasisKnob';
+import { Chip, IconButton, TextField } from '@lumx/react';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 
-export default { title: 'LumX components/text-field/TextField' };
+export default {
+    title: 'LumX components/text-field/TextField',
+    component: TextField,
+    args: TextField.defaultProps,
+    argTypes: {
+        clearButtonProps: { control: false },
+        chips: { control: false },
+        afterElement: { control: false },
+    },
+    decorators: [withValueOnChange({})],
+};
+
+/**
+ * Default text field
+ */
+export const Default = {
+    args: {
+        value: '',
+    },
+};
+
+/**
+ * With placeholder
+ */
+export const Placeholder = {
+    args: {
+        value: '',
+        placeholder: 'Texfield placeholder',
+    },
+};
 
-export const TextField_ = ({ theme }: any) => {
-    const [value, onChange] = React.useState('Value');
-    return (
-        <TextField
-            value={value}
-            onChange={onChange}
-            label={text('Label', 'Label')}
-            placeholder={text('Placeholder', 'Placeholder')}
-            theme={theme}
-        />
-    );
+/**
+ * With label and helper
+ */
+export const LabelAndHelper = {
+    args: {
+        ...Default.args,
+        label: 'Textfield label',
+        helper: loremIpsum('tiny'),
+    },
 };
 
-export const Clearable = ({ theme }: any) => {
-    const [value, onChange] = React.useState('Value');
-    return (
-        <TextField
-            value={value}
-            onChange={onChange}
-            label={text('Label', 'Label')}
-            clearButtonProps={{ label: 'Clear' }}
-            theme={theme}
-        />
-    );
+/**
+ * With clear button
+ */
+export const Clearable = {
+    args: {
+        value: 'Some value',
+        clearButtonProps: { label: 'Clear' },
+    },
 };
 
-export const States = ({ theme }: any) => {
-    const [value1, onChange1] = React.useState('Value');
-    const [value2, onChange2] = React.useState('Value');
-    return (
-        <>
-            <TextField
-                label="Has error"
-                hasError
-                error="Error message"
-                theme={theme}
-                value={value1}
-                onChange={onChange1}
-            />
-            <TextField label="Is valid" isValid theme={theme} value={value2} onChange={onChange2} />
-        </>
-    );
+/**
+ * As number field
+ */
+export const NumberField = {
+    args: {
+        value: '0',
+        type: 'number',
+    },
 };
 
-export const NumberField = ({ theme }: any) => {
-    const [value, onChange] = React.useState('0');
-    return <TextField value={value} onChange={onChange} label={text('Label', 'Label')} theme={theme} type="number" />;
+/**
+ * Multiline textarea
+ */
+export const TextareaField = {
+    args: {
+        value: loremIpsum('tiny'),
+        multiline: true,
+        minimumRows: 2,
+    },
 };
 
-export const WithHelper = ({ theme }: any) => {
-    const [value, onChange] = React.useState('Value');
-    return (
-        <TextField
-            value={value}
-            onChange={onChange}
-            label={text('Label', 'Label')}
-            placeholder={text('Placeholder', 'Placeholder')}
-            theme={theme}
-            helper={<span>{text('Helper', 'Helper')}</span>}
-        />
-    );
+/**
+ * Error state
+ */
+export const Error = {
+    args: {
+        ...LabelAndHelper.args,
+        hasError: true,
+        error: 'Error message',
+    },
 };
 
-export const TextArea = ({ theme }: any) => {
-    const [value, setValue] = React.useState('Value');
-    return (
-        <TextField
-            value={value}
-            label={text('Label', 'Label')}
-            placeholder={text('Placeholder', 'Placeholder')}
-            multiline
-            minimumRows={number('Minimum number of rows', 1, { min: 0, max: 100 })}
-            theme={theme}
-            onChange={setValue}
-            helper={<span>{text('Helper', 'Helper')}</span>}
-        />
-    );
+/**
+ * Valid state
+ */
+export const Valid = {
+    args: {
+        ...LabelAndHelper.args,
+        isValid: true,
+    },
 };
 
-export const TextAreaWithManyLines = ({ theme }: any) => {
-    const myvalue = `I
-am
-a
-multiline
-text`;
-    const [value, setValue] = React.useState(myvalue);
-    return (
-        <TextField
-            value={value}
-            label={text('Label', 'Label')}
-            placeholder={text('Placeholder', 'Placeholder')}
-            multiline
-            minimumRows={number('Minimum number of rows', 2, { min: 0, max: 100 })}
-            theme={theme}
-            onChange={setValue}
-            helper={<span>{text('Helper', 'Helper')}</span>}
-        />
-    );
+/**
+ * Max length with character counter
+ */
+export const MaxLength = {
+    args: {
+        ...LabelAndHelper.args,
+        value: 'Textfield value',
+        maxLength: 195,
+    },
 };
 
-export const WithAfterElement = ({ theme }: any) => {
-    const [value, onChange] = React.useState('Value');
-    const multiline = boolean('Multiline', true);
-    const minimumRows = number('Minimum number of rows', 2, { min: 0, max: 100 });
-    const isClearable = boolean('Clearable', true);
-    const hasError = boolean('Has error', true);
-    return (
-        <TextField
-            value={value}
-            label={text('Label', 'Label')}
-            placeholder={text('Placeholder', 'Placeholder')}
-            theme={theme}
-            onChange={onChange}
-            multiline={multiline}
-            minimumRows={minimumRows}
-            hasError={hasError}
-            maxLength={200}
-            clearButtonProps={isClearable ? { label: 'Clear' } : undefined}
-            helper={<span>{text('Helper', 'Helper')}</span>}
-            afterElement={
-                <IconButton
-                    label="foo"
-                    emphasis={emphasis('Button emphasis', Emphasis.medium, 'After element')}
-                    size={buttonSize('Button size', Size.s, 'After element')}
-                    icon={mdiTranslate}
-                />
-            }
-        />
-    );
+/**
+ * Custom element at the end
+ */
+export const WithAfterElement = {
+    args: {
+        value: '',
+        afterElement: <IconButton label="translate" emphasis="medium" size="s" icon={mdiTranslate} />,
+    },
 };
 
-export const WithMaxLengthNoLabel = ({ theme }: any) => {
-    const [value, onChange] = React.useState('Value');
-    const multiline = boolean('Multiline', true);
-    const minimumRows = number('Minimum number of rows', 2, { min: 0, max: 100 });
-    const isClearable = boolean('Clearable', true);
-    const hasError = boolean('Has error', true);
-    return (
-        <TextField
-            value={value}
-            placeholder={text('Placeholder', 'Placeholder')}
-            theme={theme}
-            onChange={onChange}
-            multiline={multiline}
-            minimumRows={minimumRows}
-            hasError={hasError}
-            maxLength={200}
-            clearButtonProps={isClearable ? { label: 'Clear' } : undefined}
-            helper={<span>{text('Helper', 'Helper')}</span>}
-            afterElement={
-                <IconButton
-                    label="foo"
-                    emphasis={emphasis('Button emphasis', Emphasis.medium, 'After element')}
-                    size={buttonSize('Button size', Size.s, 'After element')}
-                    icon={mdiTranslate}
-                />
-            }
-        />
-    );
+/**
+ * Chips at the start
+ */
+export const WithChips = {
+    args: {
+        value: '',
+        chips: (
+            <>
+                <Chip size="s">Chip 1</Chip>
+                <Chip size="s">Chip 2</Chip>
+            </>
+        ),
+    },
 };