@lumx/react 2.1.9 → 2.2.1

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,34 @@ 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,
+                linkAs,
+                color: ColorPalette.dark,
+            });
+        }
+        return <NameComponent {...nProps}>{name}</NameComponent>;
+    }, [isClickable, linkAs, linkProps, name, nameProps]);
 
     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 +139,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`}>

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

@@ -1,43 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<UserBlock> Snapshots and structure should render story 'InList' 1`] = `
+exports[`<UserBlock> Snapshots and structure should render story 'Clickable' 1`] = `
 Array [
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        badge={
-          <Badge
-            color="blue"
-          >
-            <Icon
-              icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-            />
-          </Badge>
-        }
-        image="/demo-assets/avatar1.jpg"
-        onClick={[Function]}
-        size="m"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      onClick={[Function]}
+      size="m"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
-      <span
+      <Link
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
+        color="dark"
       >
         Emmitt O. Lum
-      </span>
+      </Link>
       <div
         className="lumx-user-block__fields"
       >
@@ -57,41 +41,30 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        badge={
-          <Badge
-            color="blue"
-          >
-            <Icon
-              icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-            />
-          </Badge>
+      image="/demo-assets/avatar1.jpg"
+      linkProps={
+        Object {
+          "href": "https://example.com",
         }
-        image="/demo-assets/avatar2.jpg"
-        onClick={[Function]}
-        size="m"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      }
+      size="m"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
-      <span
+      <Link
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
+        color="dark"
+        href="https://example.com"
       >
         Emmitt O. Lum
-      </span>
+      </Link>
       <div
         className="lumx-user-block__fields"
       >
@@ -111,41 +84,26 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        badge={
-          <Badge
-            color="blue"
-          >
-            <Icon
-              icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-            />
-          </Badge>
-        }
-        image="/demo-assets/avatar3.jpg"
-        onClick={[Function]}
-        size="m"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      linkAs={[Function]}
+      size="m"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
-      <span
+      <Link
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
+        color="dark"
+        linkAs={[Function]}
       >
         Emmitt O. Lum
-      </span>
+      </Link>
       <div
         className="lumx-user-block__fields"
       >
@@ -167,6 +125,47 @@ Array [
 ]
 `;
 
+exports[`<UserBlock> Snapshots and structure should render story 'Default' 1`] = `
+<div
+  className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <Avatar
+    alt="Avatar"
+    className="lumx-user-block__avatar"
+    image="/demo-assets/avatar1.jpg"
+    size="m"
+    theme="light"
+  />
+  <div
+    className="lumx-user-block__wrapper"
+  >
+    <span
+      className="lumx-user-block__name"
+    >
+      Emmitt O. Lum
+    </span>
+    <div
+      className="lumx-user-block__fields"
+    >
+      <span
+        className="lumx-user-block__field"
+        key="0"
+      >
+        Creative developer
+      </span>
+      <span
+        className="lumx-user-block__field"
+        key="1"
+      >
+        Denpasar
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<UserBlock> Snapshots and structure should render story 'Sizes' 1`] = `
 Array [
   <div
@@ -174,25 +173,18 @@ Array [
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        image="/demo-assets/avatar1.jpg"
-        onClick={[Function]}
-        size="s"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      size="s"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
       <span
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
       >
         Emmitt O. Lum
       </span>
@@ -203,25 +195,18 @@ Array [
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        image="/demo-assets/avatar1.jpg"
-        onClick={[Function]}
-        size="m"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      size="m"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
       <span
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
       >
         Emmitt O. Lum
       </span>
@@ -248,25 +233,18 @@ Array [
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        image="/demo-assets/avatar1.jpg"
-        onClick={[Function]}
-        size="l"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      size="l"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
       <span
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
       >
         Emmitt O. Lum
       </span>
@@ -294,37 +272,28 @@ Array [
 exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`] = `
 <div
   className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
 >
-  <div
+  <Avatar
+    alt="Avatar"
+    badge={
+      <Badge
+        color="blue"
+      >
+        <Icon
+          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+        />
+      </Badge>
+    }
     className="lumx-user-block__avatar"
-  >
-    <Avatar
-      alt="Avatar"
-      badge={
-        <Badge
-          color="blue"
-        >
-          <Icon
-            icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-          />
-        </Badge>
-      }
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="m"
-      tabIndex={0}
-      theme="light"
-    />
-  </div>
+    image="/demo-assets/avatar1.jpg"
+    size="m"
+    theme="light"
+  />
   <div
     className="lumx-user-block__wrapper"
   >
     <span
       className="lumx-user-block__name"
-      onClick={[Function]}
-      tabIndex={0}
     >
       Emmitt O. Lum
     </span>