@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.12

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

@@ -1,177 +0,0 @@
-import React from 'react';
-
-import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
-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 { Button, ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
-import { mdiEarth, mdiHeart } from '@lumx/icons';
-import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-
-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,
-        whiteSpace: getSelectArgType(WhiteSpace),
-    },
-};
-
-/**
- * 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 line breaks
- */
-export const AllWhiteSpace = {
-    args: {
-        ...Default.args,
-        children: `
-        But ere she from the church-door stepped She smiled and told us why: 'It was a wicked woman's curse,' Quoth she,
-        'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—
-      `,
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: { key: 'whiteSpace', options: Object.values(WhiteSpace) },
-            },
-            tableStyle: { width: 500, tableLayout: 'fixed' },
-            firstColStyle: { width: 100 },
-            cellStyle: { border: '1px solid #000', width: '100%' },
-        }),
-    ],
-};
-
-/**
- * Long text with single line truncate ellipsis
- */
-export const Truncate = {
-    ...LongText,
-    args: {
-        ...LongText.args,
-        truncate: true,
-    },
-};
-
-/**
- * Test the update of the `title` attribute when text overflows
- */
-export const TestUpdateTruncateTitleLabel = {
-    render(args: any) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const [content, setContent] = React.useState<string>('Some text');
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const lengthen = React.useCallback(() => setContent((prevContent) => `${prevContent} ${prevContent}`), []);
-        return (
-            <>
-                <Button onClick={lengthen}>Lengthen text</Button>
-                <Text as="p" truncate style={{ maxWidth: 300 }} {...args}>
-                    {content}
-                </Text>
-            </>
-        );
-    },
-    // Disables Chromatic snapshot (not relevant for this story).
-    parameters: { chromatic: { disable: 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/Text.test.tsx

@@ -1,92 +0,0 @@
-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, queryAllByClassName } 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 render with custom whiteSpace', () => {
-            const { element } = setup({ whiteSpace: 'pre-wrap' });
-            expect(element.tagName).toBe('SPAN');
-            expect(element).toHaveStyle({ '--lumx-text-white-space': 'pre-wrap' });
-        });
-
-        it('should wrap icons with spaces', () => {
-            const { element } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
-            const icons = queryAllByClassName(element, Icon.className as string);
-            expect(icons).toHaveLength(1);
-
-            // Icons are all wrapped with spaces
-            for (const icon of icons) {
-                expect((icon.previousSibling as any).textContent).toEqual(' ');
-                expect((icon.nextSibling as any).textContent).toEqual(' ');
-            }
-        });
-
-        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/src/components/text/Text.tsx

@@ -1,139 +0,0 @@
-import classNames from 'classnames';
-
-import { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
-import { GenericProps, TextElement } from '@lumx/react/utils/type';
-import {
-    fontColorClass,
-    getRootClassName,
-    handleBasicClasses,
-    getTypographyClassName,
-} from '@lumx/core/js/utils/className';
-import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
-import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
-
-/**
- * Defines the props of the component.
- */
-export interface TextProps extends GenericProps {
-    /**
-     * Color variant.
-     */
-    color?: ColorWithVariants;
-    /**
-     * 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;
-    /**
-     * WhiteSpace variant
-     * Ignored when `noWrap` is set to true
-     * Ignored when `truncate` is set to true or lines: 1
-     * */
-    whiteSpace?: WhiteSpace;
-    /**
-     * Children
-     */
-    children?: React.ReactNode;
-}
-
-/**
- * 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 = forwardRef<TextProps>((props, ref) => {
-    const {
-        as: Component,
-        children,
-        className,
-        color,
-        colorVariant,
-        noWrap,
-        typography,
-        truncate,
-        whiteSpace,
-        style,
-        ...forwardedProps
-    } = props;
-
-    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;
-
-    /**
-     * Add custom white-space style if specified
-     * Disabled if noWrap is specified
-     * Disabled if truncated on one-line
-     * */
-    const whiteSpaceStyle = !noWrap &&
-        !(isTruncated && !isTruncatedMultiline) &&
-        whiteSpace && { '--lumx-text-white-space': whiteSpace };
-
-    const { tooltipLabel, labelRef } = useOverflowTooltipLabel(children);
-
-    return (
-        <Component
-            ref={useMergeRefs(ref as React.Ref<any>, labelRef)}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    isTruncated: isTruncated && !isTruncatedMultiline,
-                    isTruncatedMultiline,
-                }),
-                typographyClass,
-                fontColorClass(color, colorVariant),
-                noWrap && `${CLASSNAME}--no-wrap`,
-            )}
-            title={tooltipLabel}
-            style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}
-            {...forwardedProps}
-        >
-            {wrapChildrenIconWithSpaces(children)}
-        </Component>
-    );
-});
-Text.displayName = COMPONENT_NAME;
-Text.className = CLASSNAME;
-Text.defaultProps = DEFAULT_PROPS;

package/src/components/text/index.ts

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

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

@@ -1,180 +0,0 @@
-import React from 'react';
-import { mdiTranslate } from '@lumx/icons';
-import { Chip, IconButton, TextField, Typography } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-export default {
-    title: 'LumX components/text-field/TextField',
-    component: TextField,
-    args: TextField.defaultProps,
-    argTypes: {
-        clearButtonProps: { control: false },
-        chips: { control: false },
-        afterElement: { control: false },
-        onClear: { action: true },
-    },
-    decorators: [withValueOnChange({})],
-};
-
-/**
- * Default text field
- */
-export const Default = {
-    args: {
-        value: '',
-    },
-};
-
-/**
- * With placeholder
- */
-export const Placeholder = {
-    args: {
-        value: '',
-        placeholder: 'Texfield placeholder',
-    },
-};
-
-/**
- * With label and helper
- */
-export const LabelAndHelper = {
-    args: {
-        ...Default.args,
-        label: 'Textfield label',
-        helper: loremIpsum('tiny'),
-    },
-};
-
-/**
- * With custom label and helper
- */
-export const CustomLabelAndHelper = {
-    args: {
-        ...Default.args,
-        label: 'Textfield label',
-        labelProps: {
-            typography: Typography.subtitle1,
-        },
-        helper: loremIpsum('tiny'),
-    },
-};
-
-/**
- * With clear button
- */
-export const Clearable = () => {
-    const inputRef = React.useRef(null);
-    const [value, setValue] = React.useState('Some value');
-
-    return (
-        <TextField
-            value={value}
-            clearButtonProps={{ label: 'Clear' }}
-            onChange={setValue}
-            inputRef={inputRef}
-            {...TextField.defaultProps}
-        />
-    );
-};
-
-/**
- * As number field
- */
-export const NumberField = {
-    args: {
-        value: '0',
-        type: 'number',
-    },
-};
-
-/**
- * Multiline textarea
- */
-export const TextareaField = {
-    args: {
-        value: loremIpsum('tiny'),
-        multiline: true,
-        minimumRows: 2,
-    },
-};
-
-/**
- * Error state
- */
-export const Error = {
-    args: {
-        ...LabelAndHelper.args,
-        hasError: true,
-        error: 'Error message',
-    },
-};
-
-/**
- * Valid state
- */
-export const Valid = {
-    args: {
-        ...LabelAndHelper.args,
-        isValid: true,
-    },
-};
-
-/**
- * Max length with character counter
- */
-export const MaxLength = {
-    args: {
-        ...LabelAndHelper.args,
-        value: 'Textfield value',
-        maxLength: 195,
-    },
-};
-
-/**
- * Custom element at the end
- */
-export const WithAfterElement = {
-    args: {
-        value: '',
-        afterElement: <IconButton label="translate" emphasis="medium" size="s" icon={mdiTranslate} />,
-    },
-};
-
-/**
- * Chips at the start
- */
-export const WithChips = {
-    args: {
-        value: '',
-        chips: (
-            <>
-                <Chip size="s">Chip 1</Chip>
-                <Chip size="s">Chip 2</Chip>
-            </>
-        ),
-    },
-};
-
-/**
- * Disabled state
- */
-export const Disabled = {
-    args: {
-        value: 'Some value',
-        label: 'Label',
-        helper: 'Helper',
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: {
-                    disabled: { disabled: true },
-                    'aria-disabled': { 'aria-disabled': true },
-                },
-            },
-        }),
-    ],
-};