@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/text/Text.stories.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { ColorPalette, ColorVariant, Icon, TypographyCustom, TypographyInterface } from '@lumx/react';
+import { mdiEarth, mdiHeart } from '@lumx/icons';
+import { withResizableBox } from '@lumx/react/stories/withResizableBox';
+import { Text } from './Text';
+
+export default { title: 'LumX components/text/Text' };
+
+export const Default = () => <Text as="p">Some text</Text>;
+
+export const WithIcon = (args) => (
+    <Text as="p" {...args}>
+        Some text <Icon icon={mdiHeart} /> with icons <Icon icon={mdiEarth} />
+    </Text>
+);
+
+export const LongText = (args) => (
+    <Text as="p" {...args}>
+        Some very very very very very very very very very long text
+    </Text>
+);
+LongText.decorators = [withResizableBox()];
+
+export const NoWrap = LongText.bind({});
+NoWrap.args = { noWrap: true };
+NoWrap.decorators = [withResizableBox()];
+
+export const Truncate = LongText.bind({});
+Truncate.args = { truncate: true };
+Truncate.decorators = [withResizableBox()];
+
+export const TruncateMultiline = LongText.bind({});
+TruncateMultiline.args = { truncate: { lines: 2 } };
+TruncateMultiline.decorators = [withResizableBox()];
+
+export const AllTypography = () => {
+    const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
+    return (
+        <table>
+            {typographies.map((typography) => (
+                <tr key={typography}>
+                    <td>{typography}</td>
+                    <td>
+                        <WithIcon typography={typography} />
+                    </td>
+                </tr>
+            ))}
+        </table>
+    );
+};
+
+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}>
+                            <WithIcon color={color} colorVariant={colorVariant} />
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </table>
+    );
+};

package/dist/src/components/text/Text.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { mdiEarth } from '@lumx/icons';
+import { Icon } from '@lumx/react';
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { Text, TextProps } from '.';
+
+const setup = (props: Partial<TextProps> = {}) => {
+    const { container } = render(<Text as="span" {...props} />);
+    const element = getByClassName(container, Text.className as string);
+    return { props, container, element };
+};
+
+describe(`<${Text.displayName}>`, () => {
+    describe('Render', () => {
+        it('should render default', () => {
+            const { element } = setup({ children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+        });
+
+        it('should render with as', () => {
+            const { element } = setup({ children: 'Some text', as: 'p' });
+            expect(element.tagName).toBe('P');
+        });
+
+        it('should render with typography', () => {
+            const { element } = setup({ typography: 'body2', children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-typography-body2');
+        });
+
+        it('should render with color', () => {
+            const { element } = setup({ color: 'blue', children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-color-font-blue-N');
+        });
+
+        it('should render with color and variant', () => {
+            const { element } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-color-font-blue-D2');
+        });
+
+        it('should render truncated', () => {
+            const { element } = setup({ truncate: true });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-text--is-truncated');
+        });
+
+        it('should render truncated multiline', () => {
+            const { element } = setup({ truncate: { lines: 2 } });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-text--is-truncated-multiline');
+        });
+
+        it('should render noWrap', () => {
+            const { element } = setup({ noWrap: true });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-text--no-wrap');
+        });
+
+        it('should wrap icons with spaces', () => {
+            const { element } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
+            // Spaces have been inserted around the icon.
+            expect(element).toMatchInlineSnapshot(`
+                <span
+                  class="lumx-text"
+                >
+                  Some text
+                   
+                  <i
+                    class="lumx-icon lumx-icon--no-shape lumx-icon--path"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      height="1em"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </i>
+                   
+                  with icon
+                </span>
+            `);
+        });
+
+        it('should render dangerouslySetInnerHTML', () => {
+            const { element } = setup({ dangerouslySetInnerHTML: { __html: '<strong>HTML text</strong>' } });
+            expect(element).toHaveTextContent('HTML text');
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: Text.className as string,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+    });
+});

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

@@ -0,0 +1,121 @@
+import React, { Children, Fragment, forwardRef } from 'react';
+
+import { Icon, ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { Comp, GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
+import {
+    getFontColorClassName,
+    getRootClassName,
+    handleBasicClasses,
+    getTypographyClassName,
+} from '@lumx/react/utils/className';
+import classNames from 'classnames';
+
+/**
+ * Defines the props of the component.
+ */
+export interface TextProps extends GenericProps {
+    /**
+     * Color variant.
+     */
+    color?: ColorPalette;
+    /**
+     * Lightened or darkened variant of the selected color.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * Typography variant.
+     */
+    typography?: Typography;
+    /**
+     * Custom component to render the text.
+     */
+    as: TextElement;
+    /**
+     * Control whether the text should truncate or not.
+     * Setting as `true` will make the text truncate on a single line.
+     * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
+     */
+    truncate?: boolean | { lines: number };
+    /**
+     * Prevents text to wrap on multiple lines
+     * (automatically activated when single line text truncate is activated).
+     */
+    noWrap?: boolean;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Text';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {} as const;
+
+/**
+ * Text component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Text: Comp<TextProps> = forwardRef((props, ref) => {
+    const {
+        as: Component,
+        children,
+        className,
+        color,
+        colorVariant,
+        noWrap,
+        typography,
+        truncate,
+        style,
+        ...forwardedProps
+    } = props;
+
+    const colorClass = color && getFontColorClassName(color, colorVariant);
+    const typographyClass = typography && getTypographyClassName(typography);
+
+    // Truncate mode
+    const truncateLinesStyle = typeof truncate === 'object' &&
+        truncate.lines > 1 && { '--lumx-text-truncate-lines': truncate.lines };
+    const isTruncatedMultiline = !!truncateLinesStyle;
+    const isTruncated = !!truncate;
+
+    return (
+        <Component
+            ref={ref as React.Ref<any>}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                    isTruncated: isTruncated && !isTruncatedMultiline,
+                    isTruncatedMultiline,
+                }),
+                typographyClass,
+                colorClass,
+                noWrap && `${CLASSNAME}--no-wrap`,
+            )}
+            style={{ ...truncateLinesStyle, ...style }}
+            {...forwardedProps}
+        >
+            {children &&
+                Children.toArray(children).map((child, index) => {
+                    // Force wrap spaces around icons to make sure they are never stuck against text.
+                    if (isComponent(Icon)(child)) {
+                        return <Fragment key={child.key || index}> {child} </Fragment>;
+                    }
+                    return child;
+                })}
+        </Component>
+    );
+});
+Text.displayName = COMPONENT_NAME;
+Text.className = CLASSNAME;
+Text.defaultProps = DEFAULT_PROPS;

package/dist/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './Text';

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

@@ -0,0 +1,169 @@
+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';
+
+export default { title: 'LumX components/text-field/TextField' };
+
+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}
+        />
+    );
+};
+
+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}
+        />
+    );
+};
+
+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} />
+        </>
+    );
+};
+
+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" />;
+};
+
+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>}
+        />
+    );
+};
+
+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>}
+        />
+    );
+};
+
+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>}
+        />
+    );
+};
+
+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}
+                />
+            }
+        />
+    );
+};
+
+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}
+                />
+            }
+        />
+    );
+};

package/dist/src/components/text-field/TextField.test.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+
+import camelCase from 'lodash/camelCase';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
+
+import { render } from '@testing-library/react';
+import { getByClassName, getByTagName, queryAllByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
+import partition from 'lodash/partition';
+import userEvent from '@testing-library/user-event';
+
+import { TextField, TextFieldProps } from './TextField';
+
+const CLASSNAME = TextField.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: Partial<TextFieldProps> = {}) => {
+    const props: any = { ...propsOverride };
+    const { container } = render(<TextField {...props} />);
+
+    const element = getByClassName(container, CLASSNAME);
+    const inputNative = (queryByTagName(container, 'textarea') || getByTagName(container, 'input')) as
+        | HTMLTextAreaElement
+        | HTMLInputElement;
+    const helpers = queryAllByClassName(container, 'lumx-text-field__helper');
+    const [[helper], [error]] = partition(helpers, (h) => !h.className.includes('lumx-input-helper--color-red'));
+
+    return {
+        props,
+        container,
+        element,
+        inputNative,
+        error,
+        helper,
+    };
+};
+
+describe(`<${TextField.displayName}>`, () => {
+    describe('Render', () => {
+        it('should render defaults', () => {
+            const { element, inputNative } = setup({ id: 'fixedId' });
+            expect(element).toBeInTheDocument();
+            expect(element).toMatchSnapshot();
+            expect(element).not.toHaveClass(`${CLASSNAME}--is-valid`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--has-error`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--has-label`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--is-disabled`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--has-placeholder`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--is-focus`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--has-icon`);
+
+            expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
+            expect(inputNative.tagName).toBe('INPUT');
+        });
+
+        it('should render textarea', () => {
+            const { element, inputNative } = setup({ id: 'fixedId', multiline: true });
+            expect(element).toBeInTheDocument();
+            expect(element).toMatchSnapshot();
+            expect(inputNative.tagName).toBe('TEXTAREA');
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should add all class names (except has-error)', () => {
+            const modifiedProps = {
+                icon: 'icon',
+                isDisabled: true,
+                isValid: true,
+                label: 'test',
+                placeholder: 'test',
+            };
+            const hasProps = ['icon', 'label', 'placeholder'];
+            const { element } = setup(modifiedProps);
+
+            for (const [prop, value] of Object.entries(modifiedProps)) {
+                const propType = hasProps.includes(prop) ? camelCase(`has-${prop}`) : prop;
+                const propValue = hasProps.includes(prop) ? true : value;
+                expect(element).toHaveClass(getBasicClass({ prefix: CLASSNAME, type: propType, value: propValue }));
+            }
+        });
+
+        it('should add "has-error" class name', () => {
+            const modifiedProps = { hasError: true };
+            const { element } = setup(modifiedProps);
+
+            for (const [prop, value] of Object.entries(modifiedProps)) {
+                expect(element).toHaveClass(getBasicClass({ prefix: CLASSNAME, type: prop, value }));
+            }
+        });
+
+        it('should have text as value', () => {
+            const value = 'test';
+            const { inputNative } = setup({ value });
+            expect(inputNative.value).toEqual(value);
+        });
+
+        it('should have no value', () => {
+            const value = undefined;
+            const { inputNative } = setup({ value });
+            expect(inputNative.value).toEqual('');
+        });
+
+        it('should have helper text', () => {
+            const { helper } = setup({
+                helper: 'helper',
+                label: 'test',
+                placeholder: 'test',
+            });
+            expect(helper).toHaveTextContent('helper');
+        });
+
+        it('should have error text', () => {
+            const { error } = setup({
+                error: 'error',
+                hasError: true,
+                label: 'test',
+                placeholder: 'test',
+            });
+            expect(error).toHaveTextContent('error');
+        });
+
+        it('should not have error text', () => {
+            const { error } = setup({
+                error: 'error',
+                hasError: false,
+                label: 'test',
+                placeholder: 'test',
+            });
+            expect(error).not.toBeDefined();
+        });
+
+        it('should have error and helper text', () => {
+            const { error, helper } = setup({
+                error: 'error',
+                hasError: true,
+                helper: 'helper',
+                label: 'test',
+                placeholder: 'test',
+            });
+            expect(error).toHaveTextContent('error');
+            expect(helper).toHaveTextContent('helper');
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        it('should trigger `onChange` when text field is changed', async () => {
+            const onChange = jest.fn();
+            const { inputNative } = setup({ value: '', name: 'name', onChange });
+
+            await userEvent.tab();
+            expect(inputNative).toHaveFocus();
+
+            await userEvent.keyboard('a');
+
+            expect(onChange).toHaveBeenCalledWith('a', 'name', expect.objectContaining({}));
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'inputNative',
+    });
+});