@lumx/react 3.0.7 → 3.1.0

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { List, ListProps } from './List';
+import * as stories from './List.stories';
+
+const CLASSNAME = List.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<ListProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<List {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${List.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, List);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

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

@@ -0,0 +1,94 @@
+import { Size } from '@lumx/react';
+
+import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+
+import classNames from 'classnames';
+import React, { forwardRef, Key, ReactNode, SyntheticEvent, useRef } from 'react';
+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: Comp<ListProps, HTMLUListElement> = forwardRef((props, ref) => {
+    const { children, className, isClickable, itemPadding, onListItemSelected, 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/dist/src/components/list/ListDivider.stories.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { ListDivider } from './ListDivider';
+
+export default { title: 'LumX components/list/ListDivider' };
+
+export const Default = () => <ListDivider />;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { ListDivider, ListDividerProps } from './ListDivider';
+import * as stories from './ListDivider.stories';
+
+const CLASSNAME = ListDivider.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<ListDividerProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<ListDivider {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${ListDivider.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, ListDivider);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

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

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * 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: Comp<ListDividerProps, HTMLLIElement> = forwardRef((props, ref) => {
+    const { className, ...forwardedProps } = props;
+
+    return (
+        <li
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+        />
+    );
+});
+ListDivider.displayName = COMPONENT_NAME;
+ListDivider.className = CLASSNAME;

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { Size } from '@lumx/react';
+import { select, text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+import { ListItem } from './ListItem';
+
+export default { title: 'LumX components/list/ListItem' };
+
+export const NonClickable = ({ theme }: any) => <ListItem theme={theme}>{text('text', 'Text')}</ListItem>;
+
+export const Link = ({ theme }: any) => (
+    <ListItem theme={theme} linkProps={{ href: '#' }}>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const Button = ({ theme }: any) => (
+    <ListItem theme={theme} onItemSelected={action('onItemSelected')}>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const LinkDisabled = ({ theme }: any) => (
+    <ListItem theme={theme} linkProps={{ href: '#' }} isDisabled>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const ButtonDisabled = ({ theme }: any) => (
+    <ListItem theme={theme} onItemSelected={action('onItemSelected')} isDisabled>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const Selected = ({ theme }: any) => (
+    <ListItem theme={theme} linkProps={{ href: '#' }} isSelected>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const Highlighted = ({ theme }: any) => (
+    <ListItem theme={theme} linkProps={{ href: '#' }} isHighlighted>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const Sizes = ({ theme }: any) => (
+    <ListItem theme={theme} size={select('size', [Size.tiny, Size.regular, Size.big, Size.huge], Size.tiny)}>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+const CustomLink: React.FC = ({ children, ...props }) =>
+    React.createElement('a', { ...props, style: { color: 'red' }, href: 'http://google.com' }, children);
+
+export const WithCustomLink = ({ theme }: any) => (
+    <ListItem theme={theme} linkAs={CustomLink}>
+        My custom link
+    </ListItem>
+);

package/{src/components/progress/Progress.test.tsx → dist/src/components/list/ListItem.test.tsx}

@@ -1,26 +1,27 @@
 import React from 'react';
+
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
-import { Progress, ProgressProps } from './Progress';
-import * as stories from '../../stories/generated/Progress/Demos.stories';
+import { ListItem, ListItemProps } from './ListItem';
+import * as stories from './ListItem.stories';
 
-const CLASSNAME = Progress.className as string;
+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<ProgressProps> = {}, shallowRendering = true) => {
+const setup = (props: Partial<ListItemProps> = {}, shallowRendering = true) => {
     const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<Progress {...(props as any)} />);
+    const wrapper: any = renderer(<ListItem {...(props as any)} />);
     return { props, wrapper };
 };
 
-describe(`<${Progress.displayName}>`, () => {
+describe(`<${ListItem.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, Progress);
+        itShouldRenderStories(stories, ListItem);
     });
 
     // Common tests suite.

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

@@ -0,0 +1,154 @@
+import React, { forwardRef, ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
+
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+
+import { ListProps, Size } from '@lumx/react';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/event';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { renderLink } from '@lumx/react/utils/renderLink';
+
+export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface ListItemProps extends GenericProps {
+    /** A component to be rendered after the content. */
+    after?: ReactNode;
+    /** A component to be rendered before the content. */
+    before?: ReactNode;
+    /** Content. */
+    children: string | ReactNode;
+    /** Whether the list item should be highlighted or not. */
+    isHighlighted?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+    /** Whether link/button is disabled or not. */
+    isDisabled?: boolean;
+    /** Reference to the <li> element. */
+    listItemRef?: Ref<HTMLLIElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** Props that will be passed on to the Link */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Reference to the link element. */
+    linkRef?: Ref<HTMLAnchorElement>;
+    /** Size variant. */
+    size?: ListItemSize;
+
+    /** On selected callback. */
+    onItemSelected?(evt: SyntheticEvent): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ListItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<ListProps> = {
+    size: Size.regular,
+};
+
+/**
+ * Check if the list item is clickable.
+ * @return `true` if the list item is clickable; `false` otherwise.
+ */
+export function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps>): boolean {
+    return !isEmpty(linkProps?.href) || !!onItemSelected;
+}
+
+/**
+ * ListItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, ref) => {
+    const {
+        after,
+        before,
+        children,
+        className,
+        isHighlighted,
+        isSelected,
+        isDisabled,
+        linkAs,
+        linkProps = {},
+        linkRef,
+        onItemSelected,
+        size,
+        ...forwardedProps
+    } = props;
+
+    const role = linkAs || linkProps.href ? 'link' : 'button';
+    const onKeyDown = useMemo(() => {
+        if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected as any);
+        if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected as any);
+        return undefined;
+    }, [role, onItemSelected]);
+
+    const content = (
+        <>
+            {before && <div className={`${CLASSNAME}__before`}>{before}</div>}
+            <div className={`${CLASSNAME}__content`}>{children}</div>
+            {after && <div className={`${CLASSNAME}__after`}>{after}</div>}
+        </>
+    );
+
+    return (
+        <li
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                    size,
+                }),
+            )}
+        >
+            {isClickable({ linkProps, onItemSelected }) ? (
+                /* Clickable list item */
+                renderLink(
+                    {
+                        linkAs,
+                        tabIndex: !isDisabled && role === 'button' ? 0 : undefined,
+                        role,
+                        'aria-disabled': isDisabled,
+                        ...linkProps,
+                        href: isDisabled ? undefined : linkProps.href,
+                        className: classNames(
+                            handleBasicClasses({
+                                prefix: `${CLASSNAME}__link`,
+                                isHighlighted,
+                                isSelected,
+                                isDisabled,
+                            }),
+                        ),
+                        onClick: isDisabled ? undefined : onItemSelected,
+                        onKeyDown,
+                        ref: linkRef,
+                    },
+                    content,
+                )
+            ) : (
+                /* Non clickable list item */
+                <div className={`${CLASSNAME}__wrapper`}>{content}</div>
+            )}
+        </li>
+    );
+});
+ListItem.displayName = COMPONENT_NAME;
+ListItem.className = CLASSNAME;
+ListItem.defaultProps = DEFAULT_PROPS;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { ListSubheader } from '@lumx/react';
+import { text } from '@storybook/addon-knobs';
+
+export default { title: 'LumX components/list/ListSubheader' };
+
+export const Default = () => <ListSubheader>{text('text', 'Text')}</ListSubheader>;

package/dist/src/components/list/ListSubheader.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { ListSubheader, ListSubheaderProps } from './ListSubheader';
+import * as stories from './ListSubheader.stories';
+
+const CLASSNAME = ListSubheader.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<ListSubheaderProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<ListSubheader {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${ListSubheader.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, ListSubheader);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/list/ListSubheader.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface ListSubheaderProps extends GenericProps {
+    /** Content. */
+    children: string | ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ListSubheader';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * ListSubheader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const ListSubheader: Comp<ListSubheaderProps, HTMLLIElement> = forwardRef((props, ref) => {
+    const { children, className, ...forwardedProps } = props;
+
+    return (
+        <li ref={ref} {...forwardedProps} className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}>
+            {children}
+        </li>
+    );
+});
+ListSubheader.displayName = COMPONENT_NAME;
+ListSubheader.className = CLASSNAME;