@lumx/react 2.1.4 → 2.1.5

package/esm/_internal/UserBlock.js

@@ -1,8 +1,10 @@
-import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
 import { Size, Orientation, Theme } from './components.js';
 import React, { forwardRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
 import { A as Avatar } from './Avatar2.js';
+import { r as renderLink } from './renderLink.js';
+import { isEmpty } from 'lodash';
 
 /**
  * Component display name.
@@ -43,7 +45,9 @@ var UserBlock = forwardRef(function (props, ref) {
       simpleAction = props.simpleAction,
       size = props.size,
       theme = props.theme,
-      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "multipleActions", "name", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"]);
+      linkProps = props.linkProps,
+      linkAs = props.linkAs,
+      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "multipleActions", "name", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme", "linkProps", "linkAs"]);
 
   var componentSize = size; // Special case - When using vertical orientation force the size to be Sizes.l.
 
@@ -52,12 +56,37 @@ var UserBlock = forwardRef(function (props, ref) {
   }
 
   var shouldDisplayActions = orientation === Orientation.vertical;
-  var nameBlock = name && // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions
-  React.createElement("span", {
-    className: "".concat(CLASSNAME, "__name"),
-    onClick: onClick,
-    tabIndex: onClick ? 0 : -1
-  }, name);
+  var isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
+  var isClickable = !!onClick || isLink;
+  var nameBlock = React.useMemo(function () {
+    if (isEmpty(name)) {
+      return null;
+    }
+
+    var nameClassName = classnames(handleBasicClasses({
+      prefix: "".concat(CLASSNAME, "__name"),
+      isClickable: isClickable
+    }), isLink && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.className));
+
+    if (isLink) {
+      return renderLink(_objectSpread2({}, linkProps, {
+        linkAs: linkAs,
+        className: nameClassName
+      }), name);
+    }
+
+    if (onClick) {
+      return React.createElement("button", {
+        onClick: onClick,
+        type: "button",
+        className: nameClassName
+      }, name);
+    }
+
+    return React.createElement("span", {
+      className: nameClassName
+    }, name);
+  }, [isClickable, isLink, linkAs, linkProps, name, onClick]);
   var fieldsBlock = fields && componentSize !== Size.s && React.createElement("div", {
     className: "".concat(CLASSNAME, "__fields")
   }, fields.map(function (aField, idx) {
@@ -73,18 +102,19 @@ var UserBlock = forwardRef(function (props, ref) {
       prefix: CLASSNAME,
       orientation: orientation,
       size: componentSize,
-      theme: theme
+      theme: theme,
+      isClickable: isClickable
     })),
     onMouseLeave: onMouseLeave,
     onMouseEnter: onMouseEnter
-  }), avatarProps && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__avatar")
-  }, React.createElement(Avatar, _extends({}, avatarProps, {
+  }), avatarProps && React.createElement(Avatar, _extends({
+    linkProps: linkProps
+  }, avatarProps, {
+    className: classnames("".concat(CLASSNAME, "__avatar"), avatarProps.className),
     size: componentSize,
     onClick: onClick,
-    tabIndex: onClick ? 0 : -1,
     theme: theme
-  }))), (fields || name) && React.createElement("div", {
+  })), (fields || name) && React.createElement("div", {
     className: "".concat(CLASSNAME, "__wrapper")
   }, nameBlock, fieldsBlock), shouldDisplayActions && simpleAction && React.createElement("div", {
     className: "".concat(CLASSNAME, "__action")

package/esm/_internal/UserBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Orientation, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** User name. */\n    name?: string;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        multipleActions,\n        name,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const nameBlock: ReactNode = name && (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions\n        <span className={`${CLASSNAME}__name`} onClick={onClick} tabIndex={onClick ? 0 : -1}>\n            {name}\n        </span>\n    );\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((aField: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {aField}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <div className={`${CLASSNAME}__avatar`}>\n                    <Avatar\n                        {...avatarProps}\n                        size={componentSize}\n                        onClick={onClick}\n                        tabIndex={onClick ? 0 : -1}\n                        theme={theme}\n                    />\n                </div>\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","multipleActions","name","onClick","onMouseEnter","onMouseLeave","simpleAction","forwardedProps","componentSize","vertical","l","shouldDisplayActions","nameBlock","fieldsBlock","s","map","aField","idx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Orientation, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { isEmpty } from 'lodash';\nimport { renderLink } from '@lumx/react/utils/renderLink';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Props to pass to the link wrapping the avatar thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** User name. */\n    name?: string;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        multipleActions,\n        name,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !!onClick || isLink;\n\n    const nameBlock: ReactNode = React.useMemo(() => {\n        if (isEmpty(name)) {\n            return null;\n        }\n        const nameClassName = classNames(\n            handleBasicClasses({ prefix: `${CLASSNAME}__name`, isClickable }),\n            isLink && linkProps?.className,\n        );\n        if (isLink) {\n            return renderLink({ ...linkProps, linkAs, className: nameClassName }, name);\n        }\n        if (onClick) {\n            return (\n                <button onClick={onClick} type=\"button\" className={nameClassName}>\n                    {name}\n                </button>\n            );\n        }\n        return <span className={nameClassName}>{name}</span>;\n    }, [isClickable, isLink, linkAs, linkProps, name, onClick]);\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((aField: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {aField}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <Avatar\n                    linkProps={linkProps}\n                    {...avatarProps}\n                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n                    size={componentSize}\n                    onClick={onClick}\n                    theme={theme}\n                />\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","multipleActions","name","onClick","onMouseEnter","onMouseLeave","simpleAction","linkProps","linkAs","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","nameClassName","classNames","handleBasicClasses","prefix","renderLink","fieldsBlock","s","map","aField","idx","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/user-block.js

@@ -10,6 +10,7 @@ import 'lodash/noop';
 import './constants.js';
 import './mergeRefs.js';
 import './Avatar2.js';
+import './renderLink.js';
 import './Icon2.js';
 import './clamp.js';
 import './Thumbnail2.js';

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.4",
-        "@lumx/icons": "^2.1.4",
+        "@lumx/core": "^2.1.5",
+        "@lumx/icons": "^2.1.5",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -78,7 +78,6 @@
         "ts-jest": "^26.2.0",
         "tsconfig-paths-webpack-plugin": "^3.2.0",
         "typescript": "^4.1.2",
-        "version-changelog": "^3.1.1",
         "yargs": "^15.4.1",
         "yarn": "^1.19.1"
     },
@@ -123,9 +122,6 @@
         "storybook": "start-storybook -s ../site-demo/static/ -p 9000"
     },
     "sideEffects": false,
-    "version": "2.1.4",
-    "resolutions": {
-        "**/style-loader": "^1.0.0"
-    },
-    "gitHead": "de78ddf378468c55a56149bcb4568e66a9a88f32"
+    "version": "2.1.5",
+    "gitHead": "ad5125402db165c2a7d37fb72327153b80193759"
 }

package/src/components/avatar/Avatar.tsx

@@ -36,6 +36,10 @@ export interface AvatarProps extends GenericProps {
         ThumbnailProps,
         'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'
     >;
+    /** Props to pass to the link wrapping the 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;
 }
 
 /**
@@ -75,6 +79,8 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
         size,
         theme,
         thumbnailProps,
+        linkProps,
+        linkAs,
         ...forwardedProps
     } = props;
 
@@ -85,6 +91,8 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}
         >
             <Thumbnail
+                linkProps={linkProps}
+                linkAs={linkAs}
                 className={`${CLASSNAME}__thumbnail`}
                 onClick={onClick}
                 onKeyPress={onKeyPress}

package/src/components/drag-handle/DragHandle.tsx

@@ -40,7 +40,11 @@ export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((pro
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
         >
-            <Icon icon={mdiDragVertical} color={theme === Theme.dark ? ColorPalette.light : undefined} size={Size.xs} />
+            <Icon
+                icon={mdiDragVertical}
+                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}
+                size={Size.xs}
+            />
         </div>
     );
 });

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

@@ -18,6 +18,7 @@ import { boolean, select, text } from '@storybook/addon-knobs';
 import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
 import { focusKnob } from '@lumx/react/stories/knobs/focusKnob';
 import { sizeKnob } from '@lumx/react/stories/knobs/sizeKnob';
+import classNames from 'classnames';
 
 export default { title: 'LumX components/thumbnail/Thumbnail' };
 
@@ -25,6 +26,26 @@ export const Default = () => <Thumbnail alt="Image alt text" image={imageKnob()}
 
 export const Clickable = () => <Thumbnail alt="Click me" image={imageKnob()} size={Size.xxl} onClick={console.log} />;
 
+export const ClickableLink = () => (
+    <Thumbnail alt="Click me" image={imageKnob()} size={Size.xxl} linkProps={{ href: 'https://google.fr' }} />
+);
+
+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={Size.xxl}
+        linkAs={CustomLinkComponent}
+        linkProps={{ href: 'https://google.fr', className: 'custom-class-name' }}
+    />
+);
+
 export const DefaultFallback = () => <Thumbnail alt="foo" image="foo" />;
 
 export const IconFallback = () => <Thumbnail alt="foo" image="foo" fallback={mdiAbTesting} />;

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

@@ -5,7 +5,16 @@ import 'jest-enzyme';
 import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
-import { Clickable, CustomFallback, Default, DefaultFallback, IconFallback, WithBadge } from './Thumbnail.stories';
+import {
+    Clickable,
+    ClickableCustomLink,
+    ClickableLink,
+    CustomFallback,
+    Default,
+    DefaultFallback,
+    IconFallback,
+    WithBadge,
+} from './Thumbnail.stories';
 
 const CLASSNAME = Thumbnail.className as string;
 
@@ -22,7 +31,16 @@ describe(`<${Thumbnail.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
         itShouldRenderStories(
-            { Default, Clickable, DefaultFallback, CustomFallback, IconFallback, WithBadge },
+            {
+                Default,
+                Clickable,
+                ClickableLink,
+                ClickableCustomLink,
+                DefaultFallback,
+                CustomFallback,
+                IconFallback,
+                WithBadge,
+            },
             Thumbnail,
         );
     });

package/src/components/thumbnail/Thumbnail.tsx

@@ -20,7 +20,6 @@ import { isInternetExplorer } from '@lumx/react/utils/isInternetExplorer';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusPoint } from '@lumx/react/components/thumbnail/useFocusPoint';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
-import { useClickable } from '@lumx/react/components/thumbnail/useClickable';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -63,6 +62,10 @@ export interface ThumbnailProps extends GenericProps {
     theme?: Theme;
     /** Variant of the component. */
     variant?: ThumbnailVariant;
+    /** Props to pass to the link wrapping the 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;
 }
 
 /**
@@ -109,6 +112,8 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         size,
         theme,
         variant,
+        linkProps,
+        linkAs,
         ...forwardedProps
     } = props;
     const imgRef = useRef<HTMLImageElement>(null);
@@ -119,24 +124,44 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const isLoading = loadingState === 'isLoading';
 
     const [wrapper, setWrapper] = useState<HTMLElement>();
-    const wrapperProps: any = {
-        ...forwardedProps,
-        ref: mergeRefs(setWrapper, ref),
-        className: classNames(
-            className,
-            handleBasicClasses({ align, aspectRatio, prefix: CLASSNAME, size, theme, variant, hasBadge: !!badge }),
-            isLoading && wrapper?.getBoundingClientRect()?.height && 'lumx-color-background-dark-L6',
-            fillHeight && `${CLASSNAME}--fill-height`,
-        ),
-        // Handle clickable Thumbnail a11y.
-        ...useClickable(props),
-    };
+
+    const isLink = Boolean(linkProps?.href || linkAs);
+    const isButton = !!forwardedProps.onClick;
+    const isClickable = isButton || isLink;
+
+    let Wrapper: any = 'div';
+    const wrapperProps = { ...forwardedProps };
+    if (isLink) {
+        Wrapper = linkAs || 'a';
+        Object.assign(wrapperProps, linkProps);
+    } else if (isButton) {
+        Wrapper = 'button';
+    }
 
     // Update img style according to focus point and aspect ratio.
     const style = useFocusPoint({ image, focusPoint, aspectRatio, imgRef, loadingState, wrapper });
 
     return (
-        <div {...wrapperProps}>
+        <Wrapper
+            {...wrapperProps}
+            ref={mergeRefs(setWrapper, ref) as any}
+            className={classNames(
+                linkProps?.className,
+                className,
+                handleBasicClasses({
+                    align,
+                    aspectRatio,
+                    prefix: CLASSNAME,
+                    size,
+                    theme,
+                    variant,
+                    isClickable,
+                    hasBadge: !!badge,
+                }),
+                isLoading && wrapper?.getBoundingClientRect()?.height && 'lumx-color-background-dark-L6',
+                fillHeight && `${CLASSNAME}--fill-height`,
+            )}
+        >
             <div
                 className={`${CLASSNAME}__background`}
                 style={{
@@ -169,7 +194,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                 ))}
             {badge &&
                 React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}
-        </div>
+        </Wrapper>
     );
 });
 Thumbnail.displayName = COMPONENT_NAME;

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

@@ -1,12 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light"
+<button
+  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
   onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={0}
 >
   <div
     className="lumx-thumbnail__background"
@@ -25,7 +22,57 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
       style={Object {}}
     />
   </div>
-</div>
+</button>
+`;
+
+exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCustomLink' 1`] = `
+<CustomLinkComponent
+  className="custom-class-name lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
+  href="https://google.fr"
+>
+  <div
+    className="lumx-thumbnail__background"
+    style={
+      Object {
+        "display": undefined,
+        "visibility": "hidden",
+      }
+    }
+  >
+    <img
+      alt="Click me"
+      className="lumx-thumbnail__image"
+      loading="lazy"
+      src="landscape1.jpg"
+      style={Object {}}
+    />
+  </div>
+</CustomLinkComponent>
+`;
+
+exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink' 1`] = `
+<a
+  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
+  href="https://google.fr"
+>
+  <div
+    className="lumx-thumbnail__background"
+    style={
+      Object {
+        "display": undefined,
+        "visibility": "hidden",
+      }
+    }
+  >
+    <img
+      alt="Click me"
+      className="lumx-thumbnail__image"
+      loading="lazy"
+      src="landscape1.jpg"
+      style={Object {}}
+    />
+  </div>
+</a>
 `;
 
 exports[`<Thumbnail> Snapshots and structure should render story 'CustomFallback' 1`] = `

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

@@ -6,11 +6,12 @@ import { UserBlock } from './UserBlock';
 
 export default { title: 'LumX components/user-block/UserBlock' };
 
-export const Sizes = () => {
+export const Sizes = ({ theme }: any) => {
     const logAction = (action: string) => () => console.log(action);
     return [Size.s, Size.m, Size.l].map((size: any) => (
         <div className="demo-grid" key={size}>
             <UserBlock
+                theme={theme}
                 name="Emmitt O. Lum"
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
@@ -23,11 +24,31 @@ export const Sizes = () => {
     ));
 };
 
-export const WithBadge = () => {
+export const WithLinks = ({ theme }: any) => {
+    const logAction = (action: string) => () => console.log(action);
+    return [Size.s, Size.m, Size.l].map((size: any) => (
+        <div className="demo-grid" key={size}>
+            <UserBlock
+                theme={theme}
+                name="Emmitt O. Lum"
+                linkProps={{ href: 'https://www.lumapps.com', target: '_blank' }}
+                fields={['Creative developer', 'Denpasar']}
+                avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
+                size={size}
+                onMouseEnter={logAction('Mouse entered')}
+                onMouseLeave={logAction('Mouse left')}
+                onClick={logAction('UserBlock clicked')}
+            />
+        </div>
+    ));
+};
+
+export const WithBadge = ({ theme }: any) => {
     const logAction = (action: string) => () => console.log(action);
     return (
         <div className="demo-grid">
             <UserBlock
+                theme={theme}
                 name="Emmitt O. Lum"
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{
@@ -42,19 +63,19 @@ export const WithBadge = () => {
                 size={Size.m}
                 onMouseEnter={logAction('Mouse entered')}
                 onMouseLeave={logAction('Mouse left')}
-                onClick={logAction('UserBlock clicked')}
             />
         </div>
     );
 };
 
-export const InList = () => {
+export const InList = ({ theme }: any) => {
     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
+                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{
@@ -74,6 +95,7 @@ export const InList = () => {
                 </ListItem>
                 <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
                     <UserBlock
+                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{
@@ -93,6 +115,7 @@ export const InList = () => {
                 </ListItem>
                 <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
                     <UserBlock
+                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{

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

@@ -5,6 +5,8 @@ import classNames from 'classnames';
 import { Avatar, Orientation, Size, Theme } from '@lumx/react';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { isEmpty } from 'lodash';
+import { renderLink } from '@lumx/react/utils/renderLink';
 import { AvatarProps } from '../avatar/Avatar';
 
 /**
@@ -18,6 +20,10 @@ export type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;
 export interface UserBlockProps extends GenericProps {
     /** Props to pass to the avatar. */
     avatarProps?: AvatarProps;
+    /** 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;
     /** Simple action toolbar content. */
     simpleAction?: ReactNode;
     /** Multiple action toolbar content. */
@@ -80,6 +86,8 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
         simpleAction,
         size,
         theme,
+        linkProps,
+        linkAs,
         ...forwardedProps
     } = props;
     let componentSize = size;
@@ -91,12 +99,29 @@ 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;
+        }
+        const nameClassName = classNames(
+            handleBasicClasses({ prefix: `${CLASSNAME}__name`, isClickable }),
+            isLink && linkProps?.className,
+        );
+        if (isLink) {
+            return renderLink({ ...linkProps, linkAs, className: nameClassName }, name);
+        }
+        if (onClick) {
+            return (
+                <button onClick={onClick} type="button" className={nameClassName}>
+                    {name}
+                </button>
+            );
+        }
+        return <span className={nameClassName}>{name}</span>;
+    }, [isClickable, isLink, linkAs, linkProps, name, onClick]);
 
     const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (
         <div className={`${CLASSNAME}__fields`}>
@@ -114,21 +139,20 @@ 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
+                    linkProps={linkProps}
+                    {...avatarProps}
+                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}
+                    size={componentSize}
+                    onClick={onClick}
+                    theme={theme}
+                />
             )}
             {(fields || name) && (
                 <div className={`${CLASSNAME}__wrapper`}>