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

package/src/components/chip/Chip.tsx

@@ -0,0 +1,168 @@
+import { MouseEventHandler, ReactNode } from 'react';
+
+import classNames from 'classnames';
+import isFunction from 'lodash/isFunction';
+
+import { ColorPalette, Size, Theme } from '@lumx/react';
+import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
+
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { onEnterPressed } from '@lumx/core/js/utils';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+
+/**
+ * Chip sizes.
+ */
+type ChipSize = Extract<Size, 's' | 'm'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface ChipProps extends GenericProps, HasTheme, HasAriaDisabled {
+    /** A component to be rendered after the content. */
+    after?: ReactNode;
+    /** A component to be rendered before the content. */
+    before?: ReactNode;
+    /** Color variant. */
+    color?: ColorPalette;
+    /** Whether the component is clickable or not. */
+    isClickable?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the chip is currently in a highlighted state or not. */
+    isHighlighted?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+    /** Size variant. */
+    size?: ChipSize;
+    /** On "after" element clicked callback. */
+    onAfterClick?: MouseEventHandler;
+    /** On "before" element clicked callback. */
+    onBeforeClick?: MouseEventHandler;
+    /** Children */
+    children?: React.ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Chip';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<ChipProps> = {
+    size: Size.m,
+};
+
+/**
+ * Chip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+    const {
+        after,
+        before,
+        children,
+        className,
+        color,
+        isClickable: propIsClickable,
+        isHighlighted,
+        isSelected,
+        onAfterClick,
+        onBeforeClick,
+        onClick,
+        size = DEFAULT_PROPS.size,
+        theme = defaultTheme,
+        href,
+        onKeyDown,
+        ...forwardedProps
+    } = otherProps;
+    const hasAfterClick = isFunction(onAfterClick);
+    const hasBeforeClick = isFunction(onBeforeClick);
+    const hasOnClick = isFunction(props.onClick);
+    const isButton = hasOnClick && !href;
+    const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
+
+    // Adapt color to the theme.
+    const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+
+    const handleOnBeforeClick = useStopPropagation(onBeforeClick);
+    const handleOnAfterClick = useStopPropagation(onAfterClick);
+    const handleKeyDown = (evt: React.KeyboardEvent) => {
+        onKeyDown?.(evt);
+        if (hasOnClick) {
+            onEnterPressed(onClick)(evt);
+        }
+    };
+
+    return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <a
+            role={isButton ? 'button' : undefined}
+            tabIndex={isClickable && !disabledStateProps.disabled ? 0 : undefined}
+            {...forwardedProps}
+            href={!disabledStateProps.disabled ? href : undefined}
+            ref={ref}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    clickable: isClickable,
+                    color: chipColor,
+                    isDisabled: isAnyDisabled,
+                    hasAfter: Boolean(after),
+                    hasBefore: Boolean(before),
+                    highlighted: Boolean(isHighlighted),
+                    prefix: CLASSNAME,
+                    selected: Boolean(isSelected),
+                    size,
+                    unselected: Boolean(!isSelected),
+                }),
+            )}
+            aria-disabled={(isClickable && isAnyDisabled) || undefined}
+            onClick={hasOnClick ? onClick : undefined}
+            onKeyDown={handleKeyDown}
+        >
+            {before && (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+                <div
+                    className={classNames(`${CLASSNAME}__before`, {
+                        [`${CLASSNAME}__before--is-clickable`]: hasBeforeClick,
+                    })}
+                    onClick={handleOnBeforeClick}
+                >
+                    {before}
+                </div>
+            )}
+            <div className={`${CLASSNAME}__label`}>{children}</div>
+            {after && (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+                <div
+                    className={classNames(`${CLASSNAME}__after`, {
+                        [`${CLASSNAME}__after--is-clickable`]: hasAfterClick,
+                    })}
+                    onClick={handleOnAfterClick}
+                >
+                    {after}
+                </div>
+            )}
+        </a>
+    );
+});
+Chip.displayName = COMPONENT_NAME;
+Chip.className = CLASSNAME;
+Chip.defaultProps = DEFAULT_PROPS;

package/src/components/chip/ChipGroup.stories.tsx

@@ -0,0 +1,47 @@
+import { Chip, ChipGroup, Size } from '@lumx/react';
+
+export default {
+    title: 'LumX components/chip/ChipGroup',
+    component: ChipGroup,
+    args: ChipGroup.defaultProps,
+    argTypes: {},
+};
+
+const chips = (
+    <>
+        <Chip size={Size.s}>Apricot</Chip>
+        <Chip size={Size.s}>Apple</Chip>
+        <Chip size={Size.s}>Banana</Chip>
+        <Chip size={Size.s}>Blueberry</Chip>
+        <Chip size={Size.s}>Lemon</Chip>
+        <Chip size={Size.s}>Orange</Chip>
+        <Chip size={Size.s}>Peach</Chip>
+        <Chip size={Size.s}>Pear</Chip>
+        <Chip size={Size.s}>Pineapple</Chip>
+        <Chip size={Size.s}>Melon</Chip>
+        <Chip size={Size.s}>Raspberry</Chip>
+        <Chip size={Size.s}>Strawberry</Chip>
+        <Chip size={Size.s}>Watermelon</Chip>
+    </>
+);
+
+/**
+ * Default chip group
+ */
+export const Default = {
+    args: {
+        children: chips,
+    },
+};
+
+/**
+ * Small chip group
+ */
+export const Small = {
+    args: {
+        children: chips,
+        style: {
+            width: '200px',
+        },
+    },
+};

package/src/components/chip/ChipGroup.test.tsx

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { ChipGroup, ChipGroupProps } from './ChipGroup';
+import { Chip } from './Chip';
+
+const CLASSNAME = ChipGroup.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propOverrides: Partial<ChipGroupProps> = {}) => {
+    const props = {
+        children: [<Chip key="1">Chip 1</Chip>, <Chip key="2">Chip 2</Chip>, <Chip key="3">Chip 3</Chip>],
+        ...propOverrides,
+    };
+    render(<ChipGroup {...props} />);
+    const chipGroup = getByClassName(document.body, CLASSNAME);
+
+    return { props, chipGroup };
+};
+
+describe('<ChipGroup />', () => {
+    describe('Props', () => {
+        it('should render default', () => {
+            const { chipGroup } = setup();
+            expect(chipGroup).toBeInTheDocument();
+            expect(chipGroup).toHaveClass(CLASSNAME);
+        });
+    });
+
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'chipGroup',
+        forwardAttributes: 'chipGroup',
+    });
+});

package/src/components/chip/ChipGroup.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { HorizontalAlignment } from '@lumx/core/js/constants';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
+
+/**
+ * Defines the props of the component.
+ */
+export interface ChipGroupProps extends GenericProps {
+    /**
+     * Chip horizontal alignment.
+     * @deprecated
+     */
+    align?: HorizontalAlignment;
+    /** List of Chip. */
+    children: ReactNode;
+}
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<ChipGroupProps> = {};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ChipGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * ChipGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InternalChipGroup = forwardRef<ChipGroupProps, HTMLDivElement>((props, ref) => {
+    const { align, children, className, ...forwardedProps } = props;
+
+    return (
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
+            {children}
+        </div>
+    );
+});
+InternalChipGroup.displayName = COMPONENT_NAME;
+InternalChipGroup.className = CLASSNAME;
+InternalChipGroup.defaultProps = DEFAULT_PROPS;
+
+export const ChipGroup = Object.assign(InternalChipGroup, { useChipGroupNavigation });

package/src/components/chip/index.ts

@@ -0,0 +1,2 @@
+export * from './Chip';
+export * from './ChipGroup';

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable react/jsx-key,react/display-name */
+import { mdiDotsHorizontal, mdiHeart, mdiReply } from '@lumx/icons';
+import { Button, CommentBlock } from '@lumx/react';
+import { IconButton } from '@lumx/react/components/button/IconButton';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { avatarImageArgType, AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+
+export default {
+    title: 'LumX components/comment-block/CommentBlock',
+    component: CommentBlock,
+    decorators: [withNestedProps()],
+    args: {
+        'avatarProps.image': AVATAR_IMAGES.avatar1,
+    },
+    argTypes: {
+        'avatarProps.image': avatarImageArgType,
+        actions: { control: false },
+        headerActions: { control: false },
+        children: { control: false },
+    },
+};
+
+/**
+ * Minimal comment block
+ */
+export const Minimal = {
+    args: {
+        text: loremIpsum('short'),
+    },
+};
+
+/**
+ * Full-featured comment block
+ */
+export const FullFeatured = {
+    args: {
+        name: 'Emmitt O. Lum',
+        text: loremIpsum('short'),
+        date: '5 days ago',
+        fullDate: 'Monday, March 30, 2021 at 4:06 PM',
+        hasActions: true,
+    },
+    render: (props: any) => (
+        <CommentBlock
+            {...props}
+            actions={[
+                <Button emphasis="low" size="s" leftIcon={mdiHeart}>
+                    24 likes
+                </Button>,
+                <Button emphasis="low" size="s" leftIcon={mdiReply}>
+                    Reply
+                </Button>,
+            ]}
+            headerActions={<IconButton label="Actions" icon={mdiDotsHorizontal} emphasis="low" size="s" />}
+        />
+    ),
+};
+
+/**
+ * Marked as relevant
+ */
+export const Relevant = {
+    ...FullFeatured,
+    args: { ...FullFeatured.args, isRelevant: true },
+};
+
+/**
+ * Comment thread
+ */
+export const Thread = {
+    ...FullFeatured,
+    args: {
+        ...FullFeatured.args,
+        isOpen: true,
+        children: [
+            <CommentBlock
+                avatarProps={{ image: AVATAR_IMAGES.avatar2, alt: '' }}
+                name="John Doe"
+                date="5 days ago"
+                text={loremIpsum('tiny')}
+            />,
+            <CommentBlock
+                avatarProps={{ image: AVATAR_IMAGES.avatar4, alt: '' }}
+                name="Jane Doe"
+                date="5 days ago"
+                text={loremIpsum('tiny')}
+            />,
+        ],
+    },
+};

package/src/components/comment-block/CommentBlock.test.tsx

@@ -0,0 +1,28 @@
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { CommentBlock, CommentBlockProps } from './CommentBlock';
+
+const CLASSNAME = CommentBlock.className as string;
+
+const setup = (props: Partial<CommentBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<CommentBlock {...(props as any)} />, { wrapper });
+    const commentBlock = queryByClassName(document.body, CLASSNAME);
+    return { props, commentBlock };
+};
+
+describe(`<${CommentBlock.displayName}>`, () => {
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'commentBlock',
+        forwardAttributes: 'commentBlock',
+        applyTheme: {
+            affects: [{ element: 'commentBlock' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});

package/src/components/comment-block/CommentBlock.tsx

@@ -0,0 +1,172 @@
+import { Children, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { AvatarProps } from '../avatar/Avatar';
+
+/**
+ * Comment block variants.
+ */
+export const CommentBlockVariant = {
+    indented: 'indented',
+    linear: 'linear',
+} as const;
+export type CommentBlockVariant = ValueOf<typeof CommentBlockVariant>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface CommentBlockProps extends GenericProps, HasTheme {
+    /** Action toolbar content. */
+    actions?: ReactNode;
+    /** Props to pass to the avatar. */
+    avatarProps: AvatarProps;
+    /** Comment block replies. */
+    children?: ReactNode;
+    /** Comment date with the minimal timestamp information (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/
+    date?: string;
+    /** Comment date with the full timestamp information (day, month, year, time) */
+    fullDate?: string;
+    /** Whether the component has actions to display or not. */
+    hasActions?: boolean;
+    /** Action toolbar header content. */
+    headerActions?: ReactNode;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Whether the comment is relevant or not. */
+    isRelevant?: boolean;
+    /** Comment author name. */
+    name?: React.ReactNode;
+    /**
+     * On click callback.
+     * @deprecated Use avatarProps instead and/or inject a clickable component in `name`
+     */
+    onClick?(): void;
+    /**
+     * On mouse enter callback.
+     * @deprecated Use avatarProps instead and/or inject a clickable component in `name`
+     */
+    onMouseEnter?(): void;
+    /**
+     * On mouse leave callback.
+     * @deprecated Use avatarProps instead and/or inject a clickable component in `name`
+     */
+    onMouseLeave?(): void;
+    /** Comment content. */
+    text: ReactNode | string;
+    /** Comment variant. */
+    variant?: CommentBlockVariant;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'CommentBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<CommentBlockProps> = {
+    variant: CommentBlockVariant.indented,
+};
+
+/**
+ * CommentBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const CommentBlock = forwardRef<CommentBlockProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        actions,
+        avatarProps,
+        children,
+        className,
+        date,
+        fullDate,
+        hasActions,
+        headerActions,
+        isOpen,
+        isRelevant,
+        name,
+        onClick,
+        onMouseEnter,
+        onMouseLeave,
+        text,
+        theme = defaultTheme,
+        variant = DEFAULT_PROPS.variant,
+        ...forwardedProps
+    } = props;
+    const hasChildren = Children.count(children) > 0;
+
+    return (
+        <div
+            ref={ref}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    hasChildren: hasChildren && isOpen,
+                    hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
+                    hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
+                    isRelevant,
+                    prefix: CLASSNAME,
+                    theme,
+                }),
+            )}
+            {...forwardedProps}
+        >
+            <div className={`${CLASSNAME}__wrapper`}>
+                <div className={`${CLASSNAME}__avatar`}>
+                    <Avatar {...avatarProps} size={Size.m} onClick={onClick} />
+                </div>
+
+                <div className={`${CLASSNAME}__container`}>
+                    <div className={`${CLASSNAME}__content`}>
+                        <div className={`${CLASSNAME}__meta`}>
+                            {name && (
+                                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+                                <span
+                                    className={`${CLASSNAME}__name`}
+                                    onClick={onClick}
+                                    onMouseEnter={onMouseEnter}
+                                    onMouseLeave={onMouseLeave}
+                                >
+                                    {name}
+                                </span>
+                            )}
+                            {headerActions && <span className={`${CLASSNAME}__header-actions`}>{headerActions}</span>}
+                        </div>
+
+                        <div className={`${CLASSNAME}__text`}>{text}</div>
+                        {date &&
+                            (fullDate ? (
+                                <Tooltip label={fullDate} placement="top">
+                                    <span className={`${CLASSNAME}__date`}>{date}</span>
+                                </Tooltip>
+                            ) : (
+                                <span className={`${CLASSNAME}__date`}>{date}</span>
+                            ))}
+                    </div>
+                    {hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
+                </div>
+            </div>
+            {hasChildren && isOpen && <div className={`${CLASSNAME}__children`}>{children}</div>}
+        </div>
+    );
+});
+CommentBlock.displayName = COMPONENT_NAME;
+CommentBlock.className = CLASSNAME;
+CommentBlock.defaultProps = DEFAULT_PROPS;

package/src/components/comment-block/index.ts

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