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

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

@@ -1,160 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import {
-    AspectRatio,
-    ColorPalette,
-    ColorVariant,
-    Link,
-    LinkProps,
-    Size,
-    Theme,
-    Thumbnail,
-    ThumbnailProps,
-} from '@lumx/react';
-
-import { GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface LinkPreviewProps extends GenericProps, HasTheme {
-    /** Description. */
-    description?: string;
-    /** Link URL. */
-    link: string;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    /** Props to pass to the link (minus those already set by the LinkPreview props). */
-    linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;
-    /** Size variant. */
-    size?: Extract<Size, 'regular' | 'big'>;
-    /** Thumbnail for the link preview. */
-    thumbnailProps?: ThumbnailProps;
-    /** Title. */
-    title?: string;
-    /** Customize the title heading tag. */
-    titleHeading?: HeadingElement;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'LinkPreview';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-    size: Size.regular,
-    titleHeading: 'h2',
-} as const;
-
-/**
- * LinkPreview component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const LinkPreview = forwardRef<LinkPreviewProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        className,
-        description,
-        link,
-        linkAs,
-        linkProps,
-        size = DEFAULT_PROPS.size,
-        theme = defaultTheme,
-        thumbnailProps,
-        title,
-        titleHeading = DEFAULT_PROPS.titleHeading,
-        ...forwardedProps
-    } = props;
-    // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
-    const TitleHeading = titleHeading as HeadingElement;
-
-    return (
-        <article
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
-                    theme,
-                }),
-            )}
-        >
-            <div className={`${CLASSNAME}__wrapper`}>
-                {thumbnailProps && (
-                    <div className={`${CLASSNAME}__thumbnail`}>
-                        <Thumbnail
-                            {...thumbnailProps}
-                            linkAs={linkAs}
-                            linkProps={{
-                                ...linkProps,
-                                href: link,
-                                target: '_blank',
-                                // Avoid redundant links in focus order
-                                tabIndex: -1,
-                            }}
-                            aspectRatio={AspectRatio.free}
-                            fillHeight
-                        />
-                    </div>
-                )}
-
-                <div className={`${CLASSNAME}__container`}>
-                    {title && (
-                        <TitleHeading className={`${CLASSNAME}__title`}>
-                            <Link
-                                {...linkProps}
-                                linkAs={linkAs}
-                                target="_blank"
-                                href={link}
-                                color={theme === Theme.light ? ColorPalette.dark : ColorPalette.light}
-                                colorVariant={ColorVariant.N}
-                            >
-                                {title}
-                            </Link>
-                        </TitleHeading>
-                    )}
-
-                    {description && <p className={`${CLASSNAME}__description`}>{description}</p>}
-
-                    <div className={`${CLASSNAME}__link`}>
-                        <Link
-                            {...linkProps}
-                            linkAs={linkAs}
-                            className={classNames(`${CLASSNAME}__link`, linkProps?.className)}
-                            target="_blank"
-                            href={link}
-                            color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}
-                            colorVariant={ColorVariant.N}
-                            // Avoid redundant links in focus order
-                            tabIndex={title ? '-1' : undefined}
-                        >
-                            {link}
-                        </Link>
-                    </div>
-                </div>
-            </div>
-        </article>
-    );
-});
-
-LinkPreview.displayName = COMPONENT_NAME;
-LinkPreview.className = CLASSNAME;
-LinkPreview.defaultProps = DEFAULT_PROPS;

package/src/components/link-preview/index.ts

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

package/src/components/list/List.stories.tsx

@@ -1,116 +0,0 @@
-import React, { useRef } from 'react';
-
-import { mdiAccount, mdiOpenInNew } from '@lumx/icons';
-import { Icon, ListDivider, ListProps, ListSubheader, Size } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-
-import { List } from './List';
-import { ListItem } from './ListItem';
-import ListItemStories from './ListItem.stories';
-
-export default {
-    title: 'LumX components/list/List',
-    component: List,
-    args: List.defaultProps,
-    argTypes: {
-        itemPadding: getSelectArgType<ListProps['itemPadding']>([Size.big, Size.huge]),
-        onListItemSelected: { action: true },
-        'children.onItemSelected': { action: true },
-        'children.size': ListItemStories.argTypes.size,
-    },
-};
-
-const CustomListItem = (props: any) => <ListItem {...props}>Custom list item</ListItem>;
-
-export const KeyboardNavigation = ({
-    'children.onItemSelected': childrenOnItemSelected,
-    'children.size': childrenSize,
-    ...props
-}: any) => {
-    const listRef = useRef<any>();
-    const firstItemRef = useRef<any>();
-
-    const focusList = () => {
-        return listRef.current?.focus();
-    };
-
-    const focusFirsItem = () => {
-        return firstItemRef.current?.focus();
-    };
-
-    return (
-        <>
-            <button type="button" onClick={focusList}>
-                focus list
-            </button>
-            <button type="button" onClick={focusFirsItem}>
-                focus first item
-            </button>
-            <List ref={listRef} {...props}>
-                <ListItem size={childrenSize} linkRef={firstItemRef} onItemSelected={childrenOnItemSelected}>
-                    Clickable item 1
-                </ListItem>
-                <ListDivider />
-                <ListItem size={childrenSize} linkProps={{ href: '#' }}>
-                    Link item 1
-                </ListItem>
-                <>
-                    <ListItem size={childrenSize}>Non clickable (=non navigable) item</ListItem>
-                    <ListSubheader>Header</ListSubheader>
-                    <ListItem size={childrenSize} linkProps={{ href: '#' }}>
-                        Link item 2
-                    </ListItem>
-                    <ListSubheader>Header</ListSubheader>
-                </>
-                <ListItem size={childrenSize} linkProps={{ href: '#' }} isDisabled>
-                    Disabled link item
-                </ListItem>
-                <ListItem size={childrenSize} onItemSelected={childrenOnItemSelected} isDisabled>
-                    Disabled button item
-                </ListItem>
-                <CustomListItem size={childrenSize} onItemSelected={childrenOnItemSelected} />
-                {[
-                    <ListItem size={childrenSize} key="1" linkProps={{ href: '#' }}>
-                        Link item 4
-                    </ListItem>,
-                ]}
-            </List>
-            <pre>{`
-                When focused:
-                arrow up/down to move focus on list item
-                tab/shift+tab to move focus on list item AND outside the list
-            `}</pre>
-        </>
-    );
-};
-
-export const AsLink = () => (
-    <List>
-        <ListItem
-            before={<Icon icon={mdiAccount} />}
-            className="lumx-color-background-dark-L6"
-            linkProps={{ href: '#' }}
-        >
-            <span>My first link</span>
-        </ListItem>
-        <ListItem
-            className="lumx-color-background-dark-L6"
-            after={<Icon icon={mdiOpenInNew} />}
-            linkProps={{ href: 'https://example.com', target: '_blank' }}
-        >
-            <span>Google</span>
-        </ListItem>
-    </List>
-);
-
-export const WithCustomChildren = ({
-    'children.onItemSelected': childrenOnItemSelected,
-    'children.size': childrenSize,
-    ...props
-}: any) => (
-    <List {...props}>
-        <CustomListItem size={childrenSize} onItemSelected={childrenOnItemSelected} />
-        <CustomListItem size={childrenSize} onItemSelected={childrenOnItemSelected} />
-        <CustomListItem size={childrenSize} onItemSelected={childrenOnItemSelected} />
-    </List>
-);

package/src/components/list/List.test.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
-import { render } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { List, ListProps } from './List';
-
-const CLASSNAME = List.className as string;
-
-const setup = (props: Partial<ListProps> = {}) => {
-    render(<List {...(props as any)} />);
-    const list = queryByClassName(document.body, CLASSNAME);
-    return { props, list };
-};
-
-describe(`<${List.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'list', forwardAttributes: 'list' });
-});

package/src/components/list/List.tsx

@@ -1,104 +0,0 @@
-import React, { Key, ReactNode, SyntheticEvent, useRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Size } from '@lumx/react';
-import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useInteractiveList } from './useInteractiveList';
-
-/**
- * Defines the props of the component.
- */
-export interface ListProps extends GenericProps {
-    /** List content (should be ListItem, ListSubheader or ListDivider). */
-    children: ReactNode;
-    /**
-     * Whether the list items are clickable.
-     * @deprecated not needed anymore.
-     */
-    isClickable?: boolean;
-    /** Item padding size. */
-    itemPadding?: Extract<Size, 'big' | 'huge'>;
-    /** Tab index of the list. Default to -1 */
-    tabIndex?: number;
-    /**
-     * On list item selected callback.
-     *
-     * @param key   React key of the selected item.
-     * @param index Index of the selected item among the sibling items.
-     * @param evt   Source event (either mouse or keyboard event).
-     */
-    onListItemSelected?(key: Key, index: number, evt: SyntheticEvent): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'List';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ListProps> = {
-    tabIndex: -1,
-};
-
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/**
- * List component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const InternalList = forwardRef<ListProps, HTMLUListElement>((props, ref) => {
-    const {
-        children,
-        className,
-        isClickable,
-        itemPadding,
-        onListItemSelected,
-        tabIndex = DEFAULT_PROPS.tabIndex,
-        ...forwardedProps
-    } = props;
-    const listElementRef = useRef<HTMLUListElement>(null);
-
-    const { items, hasClickableItem } = useInteractiveList({
-        items: children,
-        ref: listElementRef,
-        onListItemSelected,
-    });
-    const clickable = hasClickableItem || isClickable;
-
-    return (
-        <ul
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    itemPadding: itemPadding ?? (clickable ? Size.big : undefined),
-                }),
-            )}
-            tabIndex={tabIndex}
-            ref={mergeRefs(ref, listElementRef)}
-        >
-            {items}
-        </ul>
-    );
-});
-InternalList.displayName = COMPONENT_NAME;
-InternalList.className = CLASSNAME;
-InternalList.defaultProps = DEFAULT_PROPS;
-
-export const List = Object.assign(InternalList, { useKeyboardListNavigation });

package/src/components/list/ListDivider.stories.tsx

@@ -1,12 +0,0 @@
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { List } from '@lumx/react';
-import { ListDivider } from './ListDivider';
-
-export default {
-    title: 'LumX components/list/ListDivider',
-    component: ListDivider,
-    args: ListDivider.defaultProps,
-    decorators: [withWrapper({}, List)],
-};
-
-export const Default = {};

package/src/components/list/ListDivider.test.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-import { ListDivider, ListDividerProps } from './ListDivider';
-
-const CLASSNAME = ListDivider.className as string;
-
-const setup = (props: Partial<ListDividerProps> = {}) => {
-    render(<ListDivider {...(props as any)} />);
-    const listDivider = queryByClassName(document.body, CLASSNAME);
-    return { props, listDivider };
-};
-
-describe(`<${ListDivider.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'listDivider',
-        forwardAttributes: 'listDivider',
-    });
-});

package/src/components/list/ListDivider.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export type ListDividerProps = GenericProps;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ListDivider';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * ListDivider component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ListDivider = forwardRef<ListDividerProps, HTMLLIElement>((props, ref) => {
-    const { className, ...forwardedProps } = props;
-
-    return <li ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)} />;
-});
-ListDivider.displayName = COMPONENT_NAME;
-ListDivider.className = CLASSNAME;

package/src/components/list/ListItem.stories.tsx

@@ -1,66 +0,0 @@
-import { List, ListItemSize, Size } from '@lumx/react';
-
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { isEqual } from '@lumx/react/utils/object/isEqual';
-import { ListItem } from './ListItem';
-
-const sizes: ListItemSize[] = [Size.tiny, Size.regular, Size.big];
-
-export default {
-    title: 'LumX components/list/ListItem',
-    component: ListItem,
-    args: ListItem.defaultProps,
-    argTypes: {
-        size: getSelectArgType(sizes),
-    },
-    decorators: [withWrapper({}, List)],
-};
-
-/**
- * Default list item with text
- */
-export const Default = {
-    args: { children: 'List item' },
-};
-
-/**
- * Inject a custom link component
- */
-export const CustomLink_ = {
-    args: {
-        linkAs: CustomLink,
-        children: 'List item custom link',
-    },
-};
-
-/**
- * Combination of all states (size, clickable and non-clickable states)
- */
-export const AllStates = {
-    args: { children: 'List item' },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: { key: 'size', options: sizes },
-                cols: {
-                    Default: {},
-                    Disabled: { isDisabled: true },
-                    'ARIA Disabled': { 'aria-disabled': true },
-                    Selected: { isSelected: true },
-                    Highlighted: { isHighlighted: true },
-                },
-                sections: {
-                    Default: {},
-                    'As button': { onItemSelected: () => {} },
-                    'As link': { linkProps: { href: '#' } },
-                },
-            },
-            // Only keep size variants for non clickable list items
-            excludeCombination: (props) =>
-                !props.onItemSelected && !props.linkProps?.href && !isEqual(Object.keys(props), ['size', 'children']),
-        }),
-    ],
-};

package/src/components/list/ListItem.test.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render, screen } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event';
-
-import { ListItem, ListItemProps } from './ListItem';
-
-const CLASSNAME = ListItem.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ListItemProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<ListItem {...(props as any)} />, { wrapper });
-    const listItem = getByClassName(document.body, CLASSNAME);
-    const link = queryByClassName(listItem, `${CLASSNAME}__link`);
-    return { props, listItem, link };
-};
-
-describe(`<${ListItem.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { listItem, link } = setup({ children: 'Label' });
-            expect(listItem).toBeInTheDocument();
-            expect(link).not.toBeInTheDocument();
-            expect(listItem).toHaveTextContent('Label');
-        });
-
-        it('should render as a button', () => {
-            setup({ children: 'Label', onItemSelected: jest.fn() });
-            expect(screen.getByRole('button', { name: 'Label' })).toBeInTheDocument();
-        });
-
-        it('should render as a link', () => {
-            setup({ children: 'Label', linkProps: { href: '#' } });
-            expect(screen.getByRole('link', { name: 'Label' })).toBeInTheDocument();
-        });
-    });
-
-    describe('Disabled state', () => {
-        it('should render disabled list item button', async () => {
-            const onItemSelected = jest.fn();
-            const { link } = setup({ children: 'Label', isDisabled: true, onItemSelected });
-            expect(link).toHaveAttribute('aria-disabled', 'true');
-            // The `renderLink` util removes the onClick handler but `user-event` will also not fire events on disabled elements.
-            if (link) await userEvent.click(link);
-            expect(onItemSelected).not.toHaveBeenCalled();
-        });
-
-        it('should render disabled list item link', async () => {
-            const onItemSelected = jest.fn();
-            const { link } = setup({
-                children: 'Label',
-                isDisabled: true,
-                linkProps: { href: 'https://example.com' },
-                onItemSelected,
-            });
-            expect(link).not.toHaveAttribute('href');
-            expect(link).toHaveAttribute('aria-disabled', 'true');
-            if (link) await userEvent.click(link);
-            expect(onItemSelected).not.toHaveBeenCalled();
-        });
-
-        it('should render aria-disabled list item button', async () => {
-            const onItemSelected = jest.fn();
-            const { link } = setup({ children: 'Label', 'aria-disabled': true, onItemSelected });
-            expect(link).toHaveAttribute('aria-disabled', 'true');
-            if (link) await userEvent.click(link);
-            expect(onItemSelected).not.toHaveBeenCalled();
-        });
-
-        it('should render aria-disabled list item link', async () => {
-            const onItemSelected = jest.fn();
-            const { link } = setup({
-                children: 'Label',
-                'aria-disabled': true,
-                linkProps: { href: 'https://example.com' },
-                onItemSelected,
-            });
-            expect(link).not.toHaveAttribute('href');
-            expect(link).toHaveAttribute('aria-disabled', 'true');
-            if (link) await userEvent.click(link);
-            expect(onItemSelected).not.toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'listItem',
-        forwardAttributes: 'listItem',
-    });
-});