@lumx/react 3.20.1-alpha.2 → 3.20.1-alpha.20

package/src/components/link/Link.stories.tsx

@@ -1,196 +0,0 @@
-import {
-    ColorPalette,
-    ColorVariant,
-    FlexBox,
-    Icon,
-    Text,
-    Link,
-    Typography,
-    TypographyInterface,
-    TypographyTitleCustom,
-    GenericBlock,
-} from '@lumx/react';
-import React from 'react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
-import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-
-const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
-
-export default {
-    title: 'LumX components/link/Link',
-    component: Link,
-    argTypes: {
-        typography: getSelectArgType(linkTypographies),
-        color: colorArgType,
-        colorVariant: colorVariantArgType,
-        rightIcon: iconArgType,
-        leftIcon: iconArgType,
-    },
-    args: { ...Link.defaultProps, children: 'Link' },
-};
-
-/**
- * Default link
- */
-export const Default = {
-    args: { href: 'https://example.com', target: '_blank' },
-};
-
-/**
- * Use custom component instead of <a> or <button>
- */
-export const LinkAs = {
-    args: { linkAs: CustomLink },
-};
-
-/**
- * Use a custom typography and customize it via CSS variable
- */
-export const WithCustomizableTypography = {
-    typography: Typography.custom.title1,
-    // eslint-disable-next-line react/display-name
-    render: (props: any) => (
-        // Injecting CSS variable to customize the font size
-        <>
-            <style>{`
-            :root {
-                --lumx-typography-custom-title1-font-size: 5px;
-            }
-            `}</style>
-            <Link {...props} />
-        </>
-    ),
-};
-
-/**
- * Show state combinations
- */
-export const AllStates = {
-    argTypes: {
-        isDisabled: { control: false },
-        onClick: { action: true },
-    },
-    decorators: [
-        withThemedBackground(),
-        withCombinations({
-            combinations: {
-                sections: {
-                    Default: { href: '#' },
-                    'As button': {},
-                    'with icon': {
-                        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
-                    },
-                },
-                cols: {
-                    Default: {},
-                    Disabled: { isDisabled: true },
-                    Focused: { 'data-focus-visible-added': true },
-                    'ARIA Disabled': { 'aria-disabled': true },
-                    Hovered: { 'data-lumx-hover': true },
-                },
-                rows: {
-                    Default: {},
-                    'color=red': { color: 'red' },
-                    'theme=dark': { theme: 'dark' },
-                    'theme=dark & color=red': { theme: 'dark', color: 'red' },
-                },
-            },
-        }),
-        withWrapper({ orientation: 'horizontal', vAlign: 'space-evenly', wrap: true, gap: 'huge' }, FlexBox),
-    ],
-};
-
-/**
- * Show all typographies
- */
-export const AllTypography = {
-    args: {
-        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
-        rightIcon: mdiPencil,
-        leftIcon: mdiFoodApple,
-    },
-    argTypes: {
-        typography: { control: false },
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: { key: 'typography', options: withUndefined(linkTypographies) },
-            },
-        }),
-    ],
-};
-
-/**
- * Show all color combinations
- */
-export const AllColors = {
-    argTypes: {
-        color: { control: false },
-        colorVariant: { control: false },
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: { key: 'color', options: withUndefined(ColorPalette) },
-                cols: { key: 'colorVariant', options: withUndefined(ColorVariant) },
-            },
-        }),
-    ],
-};
-
-/**
- * Check how link inherit parent typography & color.
- * Typography should be inherited.
- * Color should not.
- */
-export const ParentTypographyAndColor = {
-    args: {
-        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
-        'parent.typography': undefined,
-        'parent.color': undefined,
-    },
-    render: ({ parent: { typography, color }, ...args }: any) => (
-        <Text as="p" color={color} typography={typography}>
-            <Link {...args} />
-        </Text>
-    ),
-    decorators: [
-        withNestedProps(),
-        withCombinations({
-            combinations: {
-                sections: { Button: {}, Link: { href: '#' } },
-                rows: {
-                    Default: {},
-                    'Parent typography=title': { 'parent.typography': 'title' },
-                    'Parent color=red': { 'parent.color': 'red' },
-                },
-            },
-        }),
-        withWrapper({ orientation: 'horizontal', vAlign: 'space-evenly', wrap: true, gap: 'huge' }, FlexBox),
-    ],
-};
-
-/** Check wrapping a block with a Link */
-export const WrappingBlock = {
-    render() {
-        return (
-            // eslint-disable-next-line jsx-a11y/anchor-is-valid
-            <Link href="#" color="dark">
-                <GenericBlock figure={<Icon icon={mdiEarth} hasShape color="red" />} hAlign="center">
-                    <Text as="p" typography="subtitle1">
-                        Hello Earth
-                    </Text>
-                </GenericBlock>
-            </Link>
-        );
-    },
-};

package/src/components/link/Link.test.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-
-import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { mdiCheck, mdiPlus } from '@lumx/icons';
-import { Link, LinkProps } from './Link';
-
-const CLASSNAME = Link.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: LinkProps = {}) => {
-    render(<Link {...props} />);
-    const link = getByClassName(document.body, CLASSNAME);
-    const rightIcon = queryByClassName(link, `${CLASSNAME}__right-icon`);
-    const leftIcon = queryByClassName(link, `${CLASSNAME}__left-icon`);
-    return { props, link, rightIcon, leftIcon };
-};
-
-describe(`<${Link.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render link', () => {
-            const name = 'Link';
-            const { props, link, rightIcon, leftIcon } = setup({ href: 'https://example.com', children: name });
-
-            expect(link).toBe(screen.queryByRole('link', { name }));
-            expect(link).toHaveAttribute('href', props.href);
-            expect(link.className).toMatchInlineSnapshot('"lumx-link"');
-
-            expect(rightIcon).not.toBeInTheDocument();
-            expect(leftIcon).not.toBeInTheDocument();
-        });
-
-        it('should render color & color variant', () => {
-            const { link } = setup({
-                href: 'https://google.com',
-                color: ColorPalette.primary,
-                colorVariant: ColorVariant.D1,
-            });
-            expect(link.className).toBe('lumx-link lumx-link--color-primary lumx-link--color-variant-D1');
-        });
-
-        it('should render typography', () => {
-            const { link } = setup({ href: 'https://google.com', typography: Typography.title });
-            expect(link.className).toBe('lumx-link lumx-link--has-typography lumx-typography-title');
-        });
-
-        it('should render a button', () => {
-            const name = 'Link';
-            const onClick = jest.fn();
-            const { link } = setup({ onClick, children: name });
-            expect(link).toBe(screen.queryByRole('button', { name }));
-        });
-
-        it('should render with icons', () => {
-            const { link } = setup({
-                leftIcon: mdiCheck,
-                children: ['Link', <Icon key="icon" icon={mdiCheck} />, 'with icons'],
-                rightIcon: mdiPlus,
-            });
-            const icons = queryAllByClassName(link, Icon.className as string);
-            expect(icons).toHaveLength(3);
-
-            // 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(' ');
-            }
-        });
-    });
-
-    describe('Disabled state', () => {
-        it('should render disabled button', async () => {
-            const onClick = jest.fn();
-            const { link } = setup({ children: 'Label', isDisabled: true, onClick });
-            expect(link).toHaveAttribute('disabled');
-            await userEvent.click(link);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should render disabled link', async () => {
-            const onClick = jest.fn();
-            const { link } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
-            expect(link).toHaveAttribute('disabled');
-            await userEvent.click(link);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should render aria-disabled button', async () => {
-            const onClick = jest.fn();
-            const { link } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(link).toHaveAttribute('aria-disabled');
-            await userEvent.click(link);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-
-        it('should render aria-disabled link', async () => {
-            const onClick = jest.fn();
-            const { link } = setup({
-                children: 'Label',
-                'aria-disabled': true,
-                href: 'https://example.com',
-                onClick,
-            });
-            expect(link).toHaveAccessibleName('Label');
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
-            expect(link).toHaveAttribute('aria-disabled', 'true');
-            await userEvent.click(link);
-            expect(onClick).not.toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardAttributes: 'link',
-        forwardClassName: 'link',
-        forwardRef: 'link',
-    });
-});

package/src/components/link/Link.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { ColorVariant, ColorWithVariants, Icon, Typography } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import {
-    getRootClassName,
-    getTypographyClassName,
-    handleBasicClasses,
-    resolveColorWithVariants,
-} from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-
-type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-
-/**
- * Defines the props of the component.
- */
-export interface LinkProps extends GenericProps, HasAriaDisabled {
-    /** Color variant. */
-    color?: ColorWithVariants;
-    /** Lightened or darkened variant of the selected icon color. */
-    colorVariant?: ColorVariant;
-    /** Link href. */
-    href?: HTMLAnchorProps['href'];
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /**
-     * Left icon (SVG path).
-     * @deprecated Instead, simply nest `<Icon />` in the children
-     */
-    leftIcon?: string;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    /**
-     * Right icon (SVG path).
-     * @deprecated Instead, simply nest `<Icon />` in the children
-     */
-    rightIcon?: string;
-    /** Link target. */
-    target?: HTMLAnchorProps['target'];
-    /** Typography variant. */
-    typography?: Typography;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Link';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Link component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
-    const {
-        children,
-        className,
-        color: propColor,
-        colorVariant: propColorVariant,
-        href,
-        leftIcon,
-        linkAs,
-        rightIcon,
-        target,
-        typography,
-        ...forwardedProps
-    } = otherProps;
-    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
-
-    const isLink = linkAs || href;
-    const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
-    const baseProps: React.ComponentProps<typeof Component> = {};
-    if (Component === 'button') {
-        baseProps.type = 'button';
-        Object.assign(baseProps, disabledStateProps);
-    } else if (isLink) {
-        baseProps.href = href;
-        baseProps.target = target;
-    }
-
-    return (
-        <Component
-            ref={ref}
-            {...forwardedProps}
-            {...baseProps}
-            className={classNames(
-                className,
-                handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),
-                typography && getTypographyClassName(typography),
-            )}
-        >
-            {wrapChildrenIconWithSpaces(
-                <>
-                    {leftIcon && <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} />}
-                    {children && <span className={`${CLASSNAME}__content`}>{children}</span>}
-                    {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
-                </>,
-            )}
-        </Component>
-    );
-});
-Link.displayName = COMPONENT_NAME;
-Link.className = CLASSNAME;

package/src/components/link/index.ts

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

package/src/components/link-preview/LinkPreview.stories.tsx

@@ -1,61 +0,0 @@
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { headingElementArgType } from '@lumx/react/stories/controls/element';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-
-import { Size } from '@lumx/core/js/constants';
-import { LinkPreview, LinkPreviewProps } from './LinkPreview';
-
-export default {
-    title: 'LumX components/link-preview/Link preview',
-    component: LinkPreview,
-    decorators: [withNestedProps()],
-    args: {
-        ...LinkPreview.defaultProps,
-        title: '',
-        description: '',
-        link: 'https://example.com',
-    },
-    argTypes: {
-        size: getSelectArgType<LinkPreviewProps['size']>([Size.regular, Size.big]),
-        titleHeading: { if: { arg: 'title' }, ...headingElementArgType },
-    },
-};
-
-/**
- * Default link preview with only the required props (link)
- */
-export const Default = {};
-
-/**
- * Link preview with title and description
- */
-export const TitleAndDescription = {
-    args: {
-        title: 'Link title',
-        description: loremIpsum('short'),
-    },
-};
-
-/**
- * Link preview with title, description and thumbnail
- */
-export const AllFields = {
-    args: {
-        ...TitleAndDescription.args,
-        'thumbnailProps.image': LANDSCAPE_IMAGES.landscape1,
-    },
-};
-
-/**
- * Big link preview with title, description and thumbnail
- */
-export const Big = {
-    decorators: [withWrapper({ style: { width: '400px' } })],
-    args: {
-        ...AllFields.args,
-        size: Size.big,
-    },
-};

package/src/components/link-preview/LinkPreview.test.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { Size, Theme } from '@lumx/core/js/constants';
-import { Thumbnail } from '@lumx/react';
-import { render, screen, within } from '@testing-library/react';
-import { getByClassName, queryByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
-
-import { LinkPreview, LinkPreviewProps } from './LinkPreview';
-
-const CLASSNAME = LinkPreview.className as string;
-
-type SetupProps = Partial<LinkPreviewProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: any = { ...propsOverride };
-
-    render(<LinkPreview {...props} />, { wrapper });
-    const linkPreview = getByClassName(document.body, CLASSNAME);
-    const thumbnail = queryByClassName(linkPreview, Thumbnail.className as string);
-    const title = queryByClassName(linkPreview, `${CLASSNAME}__title`);
-    const description = queryByClassName(linkPreview, `${CLASSNAME}__description`);
-    const link = queryAllByClassName(linkPreview, `${CLASSNAME}__link`)?.[1];
-
-    return { props, linkPreview, thumbnail, title, description, link };
-};
-
-describe(`<${LinkPreview.displayName}>`, () => {
-    it('should render with default props', () => {
-        const { linkPreview, thumbnail, title, link, description } = setup();
-        expect(linkPreview).toHaveClass(CLASSNAME);
-        expect(linkPreview).toHaveClass(`${CLASSNAME}--size-regular`);
-        expect(linkPreview).toHaveClass(`${CLASSNAME}--theme-light`);
-
-        expect(thumbnail).not.toBeInTheDocument();
-        expect(title).not.toBeInTheDocument();
-        expect(link).toBeInTheDocument();
-        expect(link).not.toHaveAttribute('tabindex');
-        expect(description).not.toBeInTheDocument();
-    });
-
-    it('should render with only the title', () => {
-        const { props, title, link } = setup({ title: 'Title', link: 'https://example.com' });
-
-        expect(title).toBe(screen.queryByRole('heading', { name: props.title }));
-        const titleLink = within(title as any).queryByRole('link');
-        expect(titleLink).toBeInTheDocument();
-        expect(titleLink).toHaveAttribute('href', props.link);
-
-        expect(link).toBeInTheDocument();
-        expect(link).toHaveAttribute('tabindex', '-1');
-    });
-
-    it('should render with complete props', () => {
-        const { linkPreview, thumbnail, title, link, description, props } = setup({
-            size: Size.big,
-            theme: Theme.dark,
-            thumbnailProps: { image: 'https://example.com/thumbnail.jpg', alt: '' },
-            link: 'https://example.com',
-            linkProps: { 'data-custom-attr': 'true' },
-            title: 'Title',
-            description: 'Description',
-        });
-
-        const validateLink = (linkElement: any) => {
-            expect(linkElement).toHaveAttribute('href', props.link);
-            // Props forwarding
-            expect(linkElement).toHaveAttribute('data-custom-attr', 'true');
-        };
-
-        expect(linkPreview).toBeInTheDocument();
-        expect(linkPreview).toHaveClass(`${CLASSNAME}--size-big`);
-        expect(linkPreview).toHaveClass(`${CLASSNAME}--theme-dark`);
-
-        // Thumbnail
-        expect(thumbnail).toBeInTheDocument();
-        validateLink(thumbnail);
-
-        // Title
-        expect(title).toHaveTextContent(props.title);
-        validateLink(within(title as any).queryByRole('link'));
-
-        // Link
-        expect(link).toHaveTextContent(props.link);
-        validateLink(link);
-
-        // Description
-        expect(description).toHaveTextContent(props.description);
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'linkPreview',
-        forwardAttributes: 'linkPreview',
-        forwardRef: 'linkPreview',
-        applyTheme: {
-            affects: [{ element: 'linkPreview' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});