@lumx/react 2.2.0 → 2.2.2

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -19,6 +19,7 @@ import { focusKnob } from '@lumx/react/stories/knobs/focusKnob';
 import { sizeKnob } from '@lumx/react/stories/knobs/sizeKnob';
 import { action } from '@storybook/addon-actions';
 import classNames from 'classnames';
+import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 
 export default { title: 'LumX components/thumbnail/Thumbnail' };
 
@@ -130,18 +131,12 @@ export const ClickableLink = () => (
     />
 );
 
-const CustomLinkComponent = (props: any) => (
-    <a {...props} className={classNames('custom-link-component', props.className)}>
-        {props.children}
-    </a>
-);
-
 export const ClickableCustomLink = () => (
     <Thumbnail
         alt="Click me"
         image={imageKnob()}
         size={sizeKnob('Size', Size.xxl)}
-        linkAs={CustomLinkComponent}
+        linkAs={CustomLink}
         linkProps={{ href: 'https://google.fr', className: 'custom-class-name' }}
     />
 );
@@ -280,11 +275,13 @@ export const Vertical = () => (
             <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} size="xxl" />
         </FlexBox>
         <h2>With size & smaller image & fill height</h2>
+        <small>Unsupported use case (use ratio free with fill height)</small>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} size="xxl" fillHeight />
             <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} size="xxl" fillHeight />
         </FlexBox>
         <h2>Constrained parent size & smaller image & fill height</h2>
+        <small>Unsupported use case (use ratio free with fill height)</small>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <div className="parent" style={{ width: 220 }}>
                 <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} fillHeight />
@@ -334,11 +331,13 @@ export const Wide = () => (
             <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} size="xxl" />
         </FlexBox>
         <h2>With size & smaller image & fill height</h2>
+        <small>Unsupported use case (use ratio free with fill height)</small>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} size="xxl" fillHeight />
             <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} size="xxl" fillHeight />
         </FlexBox>
         <h2>Constrained parent size & smaller image & fill height</h2>
+        <small>Unsupported use case (use ratio free with fill height)</small>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <div className="parent" style={{ width: 220 }}>
                 <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} fillHeight />
@@ -388,11 +387,13 @@ export const Square = () => (
             <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} size="xxl" />
         </FlexBox>
         <h2>With size & smaller image & fill height</h2>
+        <small>Unsupported use case (use ratio free with fill height)</small>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} size="xxl" fillHeight />
             <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} size="xxl" fillHeight />
         </FlexBox>
         <h2>Constrained parent size & smaller image & fill height</h2>
+        <small>Unsupported use case (use ratio free with fill height)</small>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <div className="parent" style={{ width: 220 }}>
                 <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} fillHeight />

package/src/components/thumbnail/Thumbnail.test.tsx

@@ -5,13 +5,7 @@ import 'jest-enzyme';
 import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
-import {
-    Clickable,
-    ClickableCustomLink,
-    ClickableLink,
-    Default,
-    WithBadge,
-} from './Thumbnail.stories';
+import { Clickable, ClickableCustomLink, ClickableLink, Default, WithBadge } from './Thumbnail.stories';
 
 const CLASSNAME = Thumbnail.className as string;
 

package/src/components/thumbnail/Thumbnail.tsx

@@ -151,6 +151,8 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         Object.assign(wrapperProps, linkProps);
     } else if (isButton) {
         Wrapper = 'button';
+        wrapperProps.type = forwardedProps.type || 'button';
+        wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
 
     return (

package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap

@@ -2,8 +2,10 @@
 
 exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`] = `
 <button
+  aria-label="Click me"
   className="lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable lumx-thumbnail--is-loading"
   onClick={[Function]}
+  type="button"
 >
   <div
     className="lumx-thumbnail__background"
@@ -20,7 +22,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
 `;
 
 exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCustomLink' 1`] = `
-<CustomLinkComponent
+<CustomLink
   className="custom-class-name lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable lumx-thumbnail--is-loading"
   href="https://google.fr"
 >
@@ -35,7 +37,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCusto
       style={Object {}}
     />
   </div>
-</CustomLinkComponent>
+</CustomLink>
 `;
 
 exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink' 1`] = `

package/src/components/tooltip/Tooltip.stories.tsx

@@ -76,13 +76,16 @@ export const EmptyTooltip = () => (
 );
 
 export const TooltipWithDropdown = () => {
-    const buttonRef = useRef(null);
+    const [button, setButton] = useState<HTMLElement | null>(null);
+    const [isOpen, setOpen] = useState(false);
     return (
         <>
-            <Tooltip label="Tooltip">
-                <Button ref={buttonRef}>Anchor</Button>
+            <Tooltip label={!isOpen && 'Tooltip'} placement="top">
+                <Button ref={setButton} onClick={() => setOpen((o) => !o)}>
+                    Anchor
+                </Button>
             </Tooltip>
-            <Dropdown anchorRef={buttonRef} isOpen>
+            <Dropdown anchorRef={{ current: button }} isOpen={isOpen}>
                 Dropdown
             </Dropdown>
         </>

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -28,9 +28,7 @@ export const useInjectTooltipRef = (
             get(children, 'props.isDisabled') !== true
         ) {
             const element = children as any;
-            if (element.ref) {
-                setAnchorElement(element.ref.current);
-            }
+
             return cloneElement(element, {
                 ...element.props,
                 ...ariaProps,

package/src/components/user-block/UserBlock.stories.tsx

@@ -1,116 +1,76 @@
-import { mdiStar } from '@lumx/icons';
-import { Badge, ColorPalette, Icon, List, ListItem, Size } from '@lumx/react';
-import { AVATAR_IMAGES, avatarImageKnob } from '@lumx/react/stories/knobs/image';
 import React from 'react';
+
+import { mdiStar } from '@lumx/icons';
+import { Badge, ColorPalette, Icon, Size } from '@lumx/react';
+import { avatarImageKnob } from '@lumx/react/stories/knobs/image';
+import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
+
 import { UserBlock } from './UserBlock';
 
 export default { title: 'LumX components/user-block/UserBlock' };
 
-export const Sizes = () => {
-    const logAction = (action: string) => () => console.log(action);
-    return [Size.s, Size.m, Size.l].map((size: any) => (
-        <div className="demo-grid" key={size}>
-            <UserBlock
-                name="Emmitt O. Lum"
-                fields={['Creative developer', 'Denpasar']}
-                avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
-                size={size}
-                onMouseEnter={logAction('Mouse entered')}
-                onMouseLeave={logAction('Mouse left')}
-                onClick={logAction('UserBlock clicked')}
-            />
-        </div>
+const logAction = (action: string) => () => console.log(action);
+const sizes = [Size.s, Size.m, Size.l];
+
+export const Default = ({ theme }: any) => (
+    <UserBlock
+        theme={theme}
+        name="Emmitt O. Lum"
+        fields={['Creative developer', 'Denpasar']}
+        avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
+        onMouseEnter={logAction('Mouse entered')}
+        onMouseLeave={logAction('Mouse left')}
+    />
+);
+
+export const Sizes = ({ theme }: any) =>
+    sizes.map((size) => (
+        <UserBlock
+            key={size}
+            theme={theme}
+            name="Emmitt O. Lum"
+            fields={['Creative developer', 'Denpasar']}
+            avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
+            size={size}
+            onMouseEnter={logAction('Mouse entered')}
+            onMouseLeave={logAction('Mouse left')}
+        />
     ));
-};
 
-export const WithBadge = () => {
-    const logAction = (action: string) => () => console.log(action);
+export const Clickable = ({ theme }: any) => {
+    const baseProps = {
+        theme,
+        name: 'Emmitt O. Lum',
+        fields: ['Creative developer', 'Denpasar'],
+        avatarProps: { image: avatarImageKnob(), alt: 'Avatar' },
+    } as any;
     return (
-        <div className="demo-grid">
-            <UserBlock
-                name="Emmitt O. Lum"
-                fields={['Creative developer', 'Denpasar']}
-                avatarProps={{
-                    image: avatarImageKnob(),
-                    alt: 'Avatar',
-                    badge: (
-                        <Badge color={ColorPalette.blue}>
-                            <Icon icon={mdiStar} />
-                        </Badge>
-                    ),
-                }}
-                size={Size.m}
-                onMouseEnter={logAction('Mouse entered')}
-                onMouseLeave={logAction('Mouse left')}
-                onClick={logAction('UserBlock clicked')}
-            />
-        </div>
-    );
-};
+        <>
+            <p>As a button</p>
+            <UserBlock {...baseProps} onClick={logAction('UserBlock clicked')} />
 
-export const InList = () => {
-    const logAction = (action: string) => () => console.log(action);
-    return (
-        <div className="demo-grid">
-            <List itemPadding={Size.big}>
-                <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
-                    <UserBlock
-                        name="Emmitt O. Lum"
-                        fields={['Creative developer', 'Denpasar']}
-                        avatarProps={{
-                            image: avatarImageKnob('Avatar 1', AVATAR_IMAGES.avatar1),
-                            alt: 'Avatar',
-                            badge: (
-                                <Badge color={ColorPalette.blue}>
-                                    <Icon icon={mdiStar} />
-                                </Badge>
-                            ),
-                        }}
-                        size={Size.m}
-                        onMouseEnter={logAction('Mouse entered')}
-                        onMouseLeave={logAction('Mouse left')}
-                        onClick={logAction('UserBlock clicked')}
-                    />
-                </ListItem>
-                <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
-                    <UserBlock
-                        name="Emmitt O. Lum"
-                        fields={['Creative developer', 'Denpasar']}
-                        avatarProps={{
-                            image: avatarImageKnob('Avatar 2', AVATAR_IMAGES.avatar2),
-                            alt: 'Avatar',
-                            badge: (
-                                <Badge color={ColorPalette.blue}>
-                                    <Icon icon={mdiStar} />
-                                </Badge>
-                            ),
-                        }}
-                        size={Size.m}
-                        onMouseEnter={logAction('Mouse entered')}
-                        onMouseLeave={logAction('Mouse left')}
-                        onClick={logAction('UserBlock clicked')}
-                    />
-                </ListItem>
-                <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
-                    <UserBlock
-                        name="Emmitt O. Lum"
-                        fields={['Creative developer', 'Denpasar']}
-                        avatarProps={{
-                            image: avatarImageKnob('Avatar 3', AVATAR_IMAGES.avatar3),
-                            alt: 'Avatar',
-                            badge: (
-                                <Badge color={ColorPalette.blue}>
-                                    <Icon icon={mdiStar} />
-                                </Badge>
-                            ),
-                        }}
-                        size={Size.m}
-                        onMouseEnter={logAction('Mouse entered')}
-                        onMouseLeave={logAction('Mouse left')}
-                        onClick={logAction('UserBlock clicked')}
-                    />
-                </ListItem>
-            </List>
-        </div>
+            <p>As a link</p>
+            <UserBlock {...baseProps} linkProps={{ href: 'https://example.com' }} />
+
+            <p>As a custom link component</p>
+            <UserBlock {...baseProps} linkAs={CustomLink} />
+        </>
     );
 };
+
+export const WithBadge = ({ theme }: any) => (
+    <UserBlock
+        theme={theme}
+        name="Emmitt O. Lum"
+        fields={['Creative developer', 'Denpasar']}
+        avatarProps={{
+            image: avatarImageKnob(),
+            alt: 'Avatar',
+            badge: (
+                <Badge color={ColorPalette.blue}>
+                    <Icon icon={mdiStar} />
+                </Badge>
+            ),
+        }}
+    />
+);

package/src/components/user-block/UserBlock.test.tsx

@@ -25,6 +25,12 @@ describe(`<${UserBlock.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
         itShouldRenderStories(stories, UserBlock);
+
+        it('should forward name props', () => {
+            const { wrapper } = setup({ name: 'John Doe', nameProps: { 'data-custom-attribute': true } });
+
+            expect(wrapper.find('.lumx-user-block__name[data-custom-attribute]')).toHaveLength(1);
+        });
     });
 
     // Common tests suite.

package/src/components/user-block/UserBlock.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef, ReactNode } from 'react';
-
+import isEmpty from 'lodash/isEmpty';
 import classNames from 'classnames';
 
-import { Avatar, Orientation, Size, Theme } from '@lumx/react';
-
+import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+
 import { AvatarProps } from '../avatar/Avatar';
 
 /**
@@ -18,16 +18,22 @@ export type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;
 export interface UserBlockProps extends GenericProps {
     /** Props to pass to the avatar. */
     avatarProps?: AvatarProps;
-    /** Simple action toolbar content. */
-    simpleAction?: ReactNode;
-    /** Multiple action toolbar content. */
-    multipleActions?: ReactNode;
     /** Additional fields used to describe the user. */
     fields?: string[];
+    /** Props to pass to the link wrapping the avatar thumbnail. */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** Multiple action toolbar content. */
+    multipleActions?: ReactNode;
     /** User name. */
     name?: string;
+    /** Props to pass to the name block. */
+    nameProps?: GenericProps;
     /** Orientation. */
     orientation?: Orientation;
+    /** Simple action toolbar content. */
+    simpleAction?: ReactNode;
     /** Size variant. */
     size?: UserBlockSize;
     /** Theme adapting the component to light or dark background. */
@@ -71,8 +77,11 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
         avatarProps,
         className,
         fields,
+        linkProps,
+        linkAs,
         multipleActions,
         name,
+        nameProps,
         onClick,
         onMouseEnter,
         onMouseLeave,
@@ -91,18 +100,35 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
 
     const shouldDisplayActions: boolean = orientation === Orientation.vertical;
 
-    const nameBlock: ReactNode = name && (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions
-        <span className={`${CLASSNAME}__name`} onClick={onClick} tabIndex={onClick ? 0 : -1}>
-            {name}
-        </span>
-    );
+    const isLink = Boolean(linkProps?.href || linkAs);
+    const isClickable = !!onClick || isLink;
+
+    const nameBlock: ReactNode = React.useMemo(() => {
+        if (isEmpty(name)) {
+            return null;
+        }
+        let NameComponent: any = 'span';
+        const nProps: any = {
+            ...nameProps,
+            className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),
+        };
+        if (isClickable) {
+            NameComponent = Link;
+            Object.assign(nProps, {
+                ...linkProps,
+                onClick,
+                linkAs,
+                color: ColorPalette.dark,
+            });
+        }
+        return <NameComponent {...nProps}>{name}</NameComponent>;
+    }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
 
     const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (
         <div className={`${CLASSNAME}__fields`}>
-            {fields.map((aField: string, idx: number) => (
+            {fields.map((field: string, idx: number) => (
                 <span key={idx} className={`${CLASSNAME}__field`}>
-                    {aField}
+                    {field}
                 </span>
             ))}
         </div>
@@ -114,21 +140,21 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
             {...forwardedProps}
             className={classNames(
                 className,
-                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme }),
+                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),
             )}
             onMouseLeave={onMouseLeave}
             onMouseEnter={onMouseEnter}
         >
             {avatarProps && (
-                <div className={`${CLASSNAME}__avatar`}>
-                    <Avatar
-                        {...avatarProps}
-                        size={componentSize}
-                        onClick={onClick}
-                        tabIndex={onClick ? 0 : -1}
-                        theme={theme}
-                    />
-                </div>
+                <Avatar
+                    linkAs={linkAs}
+                    linkProps={linkProps}
+                    {...avatarProps}
+                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}
+                    size={componentSize}
+                    onClick={onClick}
+                    theme={theme}
+                />
             )}
             {(fields || name) && (
                 <div className={`${CLASSNAME}__wrapper`}>