@lumx/react 3.1.1 → 3.1.3-alpha.0

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

@@ -1,75 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

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

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

@@ -1,169 +0,0 @@
-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

@@ -1,171 +0,0 @@
-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',
-    });
-});