@lumx/react 3.1.1 → 3.1.3-alpha.0

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

@@ -1,156 +0,0 @@
-import React, { forwardRef, RefObject, useMemo } from 'react';
-
-import isEmpty from 'lodash/isEmpty';
-
-import classNames from 'classnames';
-
-import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/renderLink';
-
-type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-
-/**
- * Defines the props of the component.
- */
-export interface LinkProps extends GenericProps {
-    /** Color variant. */
-    color?: ColorPalette;
-    /** 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). */
-    leftIcon?: string;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    /** Right icon (SVG path). */
-    rightIcon?: string;
-    /** Link target. */
-    target?: HTMLAnchorProps['target'];
-    /** Typography variant. */
-    typography?: Typography;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Link';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-const getIconSize = (typography?: Typography) => {
-    switch (typography) {
-        case Typography.display1:
-            return Size.m;
-
-        case Typography.headline:
-        case Typography.title:
-        case Typography.custom.title1:
-        case Typography.custom.title2:
-        case Typography.custom.title3:
-        case Typography.custom.title4:
-        case Typography.custom.title5:
-        case Typography.custom.title6:
-        case Typography.body2:
-        case Typography.subtitle2:
-            return Size.s;
-
-        case Typography.body1:
-        case Typography.subtitle1:
-            return Size.xs;
-
-        case Typography.caption:
-        case Typography.overline:
-            return Size.xxs;
-
-        default:
-            return Size.s;
-    }
-};
-
-/**
- * Link component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement> = forwardRef((props, ref) => {
-    const {
-        children,
-        className,
-        color,
-        colorVariant,
-        disabled,
-        isDisabled = disabled,
-        href,
-        leftIcon,
-        linkAs,
-        rightIcon,
-        target,
-        typography,
-        ...forwardedProps
-    } = props;
-    const renderedChildren = useMemo(
-        () => (
-            <>
-                {leftIcon && !isEmpty(leftIcon) && (
-                    <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />
-                )}
-
-                {children && (
-                    <span
-                        className={classNames(`${CLASSNAME}__content`, {
-                            [`lumx-typography-${typography}`]: typography,
-                        })}
-                    >
-                        {children}
-                    </span>
-                )}
-
-                {rightIcon && !isEmpty(rightIcon) && (
-                    <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />
-                )}
-            </>
-        ),
-        [leftIcon, typography, children, rightIcon],
-    );
-
-    /**
-     * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.
-     * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.
-     */
-    if ((!linkAs && isEmpty(href)) || isDisabled) {
-        return (
-            <button
-                type="button"
-                {...forwardedProps}
-                ref={ref as RefObject<HTMLButtonElement>}
-                disabled={isDisabled}
-                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }))}
-            >
-                {renderedChildren}
-            </button>
-        );
-    }
-    return renderLink(
-        {
-            linkAs,
-            ...forwardedProps,
-            href,
-            target,
-            className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant })),
-            ref: ref as RefObject<HTMLAnchorElement>,
-        },
-        renderedChildren,
-    );
-});
-Link.displayName = COMPONENT_NAME;
-Link.className = CLASSNAME;

package/dist/src/components/link/__snapshots__/Link.test.tsx.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Link> Snapshots and structure should render a button if href attribute is missing 1`] = `
-<button
-  className="lumx-link"
-  type="button"
-/>
-`;
-
-exports[`<Link> Snapshots and structure should render color & color variant 1`] = `
-<a
-  className="lumx-link lumx-link--color-primary lumx-link--color-variant-D1"
-  href="https://google.com"
-/>
-`;
-
-exports[`<Link> Snapshots and structure should render correctly 1`] = `
-<a
-  className="lumx-link"
-  href="https://google.com"
-/>
-`;
-
-exports[`<Link> Snapshots and structure should render typography 1`] = `
-<a
-  className="lumx-link"
-  href="https://google.com"
-/>
-`;

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

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

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

@@ -1,88 +0,0 @@
-/* istanbul ignore file */
-import { landscapeImageKnob, portraitImageKnob } from '@lumx/react/stories/knobs/image';
-import { text } from '@storybook/addon-knobs';
-import React from 'react';
-import { Size } from '..';
-import { LinkPreview } from './LinkPreview';
-
-export default { title: 'LumX components/link-preview/Link preview' };
-
-const LONG_LOREM_IPSUM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam sollicitudin, viverra quam eget, pretium tellus. Praesent sit amet augue in odio varius accumsan vitae quis nunc. Aliquam iaculis neque at augue laoreet, eu sagittis dolor tempus. Nullam sit amet bibendum velit, in pharetra lorem. Aliquam semper accumsan placerat. Sed felis risus, efficitur non eros non, rhoncus viverra lectus. Aliquam eget interdum tellus. Praesent non ex ut urna tempus facilisis. Sed tellus tortor, pharetra vel velit sit amet, aliquet condimentum quam. Sed dictum nibh eget nibh ullamcorper dignissim. Vestibulum elementum at mauris sit amet iaculis. Maecenas pretium luctus enim vel commodo. Cras accumsan sagittis eros, vel maximus sem molestie id. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Mauris ultrices pellentesque vestibulum. Etiam vel turpis at eros condimentum feugiat nec sit amet diam. Fusce pellentesque vulputate est sed ultrices. Etiam arcu tellus, dignissim non dui mattis, suscipit pellentesque erat. Aliquam congue magna nec varius suscipit. Sed mattis fringilla viverra. Donec pulvinar ex ac augue feugiat, a vulputate mauris suscipit. Morbi eget lorem purus. In pretium ligula non ex auctor, ornare dignissim orci dictum. Nulla ornare, risus non tincidunt blandit, massa massa mollis velit, id vulputate mi ligula ut metus. Vestibulum mattis tincidunt lorem, ac commodo felis ultricies interdum. Proin fermentum eu nibh a suscipit. Morbi eu pretium sapien. Pellentesque pretium purus eros, eget feugiat nisl dapibus at.`;
-
-/**
- * LinkPreview story
- * @return regular LinkPreview.
- */
-export const RegularLinkPreview = ({ theme }: any) => (
-    <LinkPreview
-        title={text('Title', 'Link title')}
-        description={text('Description', LONG_LOREM_IPSUM)}
-        link={text('URL', 'https://google.com')}
-        theme={theme}
-        thumbnailProps={{ image: portraitImageKnob(), alt: 'Portrait' }}
-    />
-);
-
-/**
- * LinkPreview story
- * @return regular LinkPreview without thumbnail.
- */
-export const NoThumbnail = ({ theme }: any) => (
-    <LinkPreview
-        title={text('Title', 'Link title')}
-        description={text('Description', LONG_LOREM_IPSUM)}
-        link={text('URL', 'https://google.com')}
-        theme={theme}
-    />
-);
-
-/**
- * LinkPreview story
- * @return regular LinkPreview without thumbnail, title and description.
- */
-export const OnlyUrl = ({ theme }: any) => <LinkPreview link={text('URL', 'https://google.com')} theme={theme} />;
-
-/**
- * LinkPreview story
- * @return big LinkPreview.
- */
-export const BigLinkPreview = ({ theme }: any) => (
-    <div style={{ width: 400 }}>
-        <LinkPreview
-            title={text('Title', 'Link title')}
-            description={text('Description', LONG_LOREM_IPSUM)}
-            link={text('URL', 'https://google.com')}
-            theme={theme}
-            thumbnailProps={{ image: landscapeImageKnob(), alt: 'Landscape' }}
-            size={Size.big}
-        />
-    </div>
-);
-
-/**
- * LinkPreview story
- * @return big LinkPreview without thumbnail.
- */
-export const BigWithoutThumbnail = ({ theme }: any) => (
-    <div style={{ width: 400 }}>
-        <LinkPreview
-            title={text('Title', 'Link title')}
-            description={text('Description', LONG_LOREM_IPSUM)}
-            link={text('URL', 'https://google.com')}
-            theme={theme}
-            size={Size.big}
-        />
-    </div>
-);
-
-/**
- * LinkPreview story
- * @return big LinkPreview without thumbnail, title and description.
- */
-export const BigWithOnlyUrl = ({ theme }: any) => (
-    <div style={{ width: 400 }}>
-        <LinkPreview link={text('URL', 'https://google.com')} theme={theme} size={Size.big} />
-    </div>
-);

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

@@ -1,102 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-import { Link, Thumbnail } from '@lumx/react';
-
-import { Size, Theme } from '..';
-import { LinkPreview, LinkPreviewProps } from './LinkPreview';
-
-const DEFAULT_PROPS = LinkPreview.defaultProps as any;
-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 = {}, shallowRendering = true) => {
-    const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<LinkPreview {...props} />);
-
-    return {
-        thumbnail: wrapper.find(Thumbnail),
-        title: wrapper.find(`.${CLASSNAME}__title`),
-        description: wrapper.find(`.${CLASSNAME}__description`),
-        link: wrapper.find(`.${CLASSNAME}__link`).find(Link),
-        props,
-        wrapper,
-    };
-};
-
-describe(`<${LinkPreview.displayName}>`, () => {
-    it('should render with default props', () => {
-        const { wrapper, thumbnail, title, link, description } = setup();
-        expect(wrapper).toHaveClassName(CLASSNAME);
-
-        ['size', 'theme'].forEach((type) => {
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type, value: DEFAULT_PROPS[type] }));
-        });
-        expect(thumbnail).not.toExist();
-        expect(title).not.toExist();
-        expect(link).toExist();
-        expect(link).toHaveProp('tabIndex', undefined);
-        expect(description).not.toExist();
-    });
-
-    it('should render with only the title', () => {
-        const { title, link } = setup({ title: 'Title' });
-
-        expect(title).toExist();
-        expect(link).toExist();
-        expect(link).toHaveProp('tabIndex', '-1');
-    });
-
-    it('should render with complete props', () => {
-        const { wrapper, 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).toHaveProp('href', props.link);
-            // Props forwarding
-            expect(linkElement).toHaveProp('data-custom-attr', 'true');
-        };
-
-        expect(wrapper).toExist();
-
-        // Thumbnail
-        expect(thumbnail).toExist();
-        validateLink((thumbnail as any).dive());
-
-        // Title
-        expect(title).toHaveText(props.title);
-        validateLink(title.find(Link));
-
-        // Link
-        expect(link).toHaveText(props.link);
-        validateLink(link.find(Link));
-
-        // Description
-        expect(description).toHaveText(props.description);
-
-        // Size prop applied
-        expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'size', value: props.size }));
-
-        // Dark theme applied
-        expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'theme', value: Theme.dark }));
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

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

@@ -1,158 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import {
-    AspectRatio,
-    ColorPalette,
-    ColorVariant,
-    Link,
-    LinkProps,
-    Size,
-    Theme,
-    Thumbnail,
-    ThumbnailProps,
-} from '@lumx/react';
-
-import { Comp, GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * 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,
-    theme: Theme.light,
-    titleHeading: 'h2',
-} as const;
-
-/**
- * LinkPreview component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        className,
-        description,
-        link,
-        linkAs,
-        linkProps,
-        size,
-        theme,
-        thumbnailProps,
-        title,
-        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/dist/src/components/link-preview/index.ts

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

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

@@ -1,141 +0,0 @@
-import React, { useRef } from 'react';
-
-import { mdiAccount, mdiOpenInNew } from '@lumx/icons';
-import { Icon, ListDivider, ListSubheader, Size } from '@lumx/react';
-import { action } from '@storybook/addon-actions';
-import { select, text } from '@storybook/addon-knobs';
-
-import { List } from './List';
-import { ListItem } from './ListItem';
-
-export default { title: 'LumX components/list/List' };
-
-export const KeyboardNavigation = () => {
-    const listRef = useRef<any>();
-    const firstItemRef = useRef<any>();
-
-    const focusList = () => {
-        return listRef.current?.focus();
-    };
-
-    const focusFirsItem = () => {
-        return firstItemRef.current?.focus();
-    };
-
-    const CustomListItem = () => {
-        return <ListItem onItemSelected={action('onItemSelected custom list item')}>Custom list item</ListItem>;
-    };
-
-    return (
-        <>
-            <button type="button" onClick={focusList}>
-                focus list
-            </button>
-            <button type="button" onClick={focusFirsItem}>
-                focus first item
-            </button>
-            <List onListItemSelected={action('List onListItemSelected')} ref={listRef}>
-                <ListItem linkRef={firstItemRef} onItemSelected={action('onItemSelected: Clickable item 1')}>
-                    Clickable item 1
-                </ListItem>
-                <ListDivider />
-                <ListItem linkProps={{ href: '#' }}>Link item 1</ListItem>
-                <>
-                    <ListItem>Non clickable (=non navigable) item</ListItem>
-                    <ListSubheader>Header</ListSubheader>
-                    <ListItem linkProps={{ href: '#' }}>Link item 2</ListItem>
-                    <ListSubheader>Header</ListSubheader>
-                </>
-                <ListItem linkProps={{ href: '#' }} isDisabled>
-                    Disabled link item
-                </ListItem>
-                <ListItem onItemSelected={action('onItemSelected')} isDisabled>
-                    Disabled button item
-                </ListItem>
-                <CustomListItem />
-                {[
-                    <ListItem 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 WithItemPadding = () => {
-    const listItemSize = select('list item size', [Size.tiny, Size.regular, Size.big, Size.huge], Size.big);
-    const listItem = (
-        <ListItem
-            className="lumx-color-background-dark-L6"
-            size={listItemSize}
-            linkProps={{ href: text('link href', '#') }}
-        >
-            <div>Two-line item</div>
-            <div className="lumx-color-font-dark-L2">Secondary text</div>
-        </ListItem>
-    );
-    return (
-        <>
-            Default item padding:
-            <List>
-                {listItem}
-                {listItem}
-            </List>
-            Big item padding:
-            <List itemPadding={Size.big}>
-                {listItem}
-                {listItem}
-            </List>
-            Huge item padding:
-            <List itemPadding={Size.huge}>
-                {listItem}
-                {listItem}
-            </List>
-        </>
-    );
-};
-
-export const AsLink = () => {
-    return (
-        <div className="demo-grid">
-            <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: 'http://www.google.com', target: '_blank' }}
-                >
-                    <span>Google</span>
-                </ListItem>
-            </List>
-        </div>
-    );
-};
-
-export const WithCustomChildren = () => {
-    const CustomListItem = () => {
-        return <ListItem onItemSelected={action('onItemSelected custom list item')}>Custom list item</ListItem>;
-    };
-
-    return (
-        <div className="demo-grid">
-            <List>
-                <CustomListItem />
-                <CustomListItem />
-                <CustomListItem />
-            </List>
-        </div>
-    );
-};