@lumx/react 2.1.9-alpha-thumbnail → 2.1.9-alpha-thumbnail5

package/src/components/thumbnail/Thumbnail.tsx

@@ -1,4 +1,5 @@
 import React, {
+    CSSProperties,
     forwardRef,
     ImgHTMLAttributes,
     KeyboardEventHandler,
@@ -88,8 +89,8 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
 
 function getObjectPosition(aspectRatio: AspectRatio, focusPoint?: FocusPoint) {
     if (aspectRatio === AspectRatio.original || (!focusPoint?.y && !focusPoint?.x)) return undefined;
-    const x = (((focusPoint?.x || 0) + 1) / 2) * 100;
-    const y = (((focusPoint?.y || 0) - 1) / 2) * 100;
+    const x = Math.round(Math.abs(((focusPoint?.x || 0) + 1) / 2) * 100);
+    const y = Math.round(Math.abs(((focusPoint?.y || 0) - 1) / 2) * 100);
     return `${x}% ${y}%`;
 }
 
@@ -121,7 +122,6 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         variant,
         linkProps,
         linkAs,
-        showSkeletonLoading = true,
         ...forwardedProps
     } = props;
     const imgRef = useRef<HTMLImageElement>(null);
@@ -131,6 +131,17 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const isLoading = isLoadingProp || loadingState === 'isLoading';
     const hasError = loadingState === 'hasError';
 
+    const hasIconErrorFallback = hasError && typeof fallback === 'string';
+    const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
+    const imageErrorStyle: CSSProperties = {};
+    if (isLoading || hasIconErrorFallback) {
+        // Keep the image layout on icon fallback.
+        imageErrorStyle.visibility = 'hidden';
+    } else if (hasCustomErrorFallback) {
+        // Remove the image on custom fallback.
+        imageErrorStyle.display = 'none';
+    }
+
     const isLink = Boolean(linkProps?.href || linkAs);
     const isButton = !!forwardedProps.onClick;
     const isClickable = isButton || isLink;
@@ -160,7 +171,9 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                     variant,
                     isClickable,
                     hasError,
-                    isLoading: showSkeletonLoading && isLoading,
+                    hasIconErrorFallback,
+                    hasCustomErrorFallback,
+                    isLoading,
                     hasBadge: !!badge,
                 }),
                 fillHeight && `${CLASSNAME}--fill-height`,
@@ -171,10 +184,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                     {...imgProps}
                     style={{
                         ...imgProps?.style,
-                        //
-                        //display: hasError && (!imgProps?.width || !imgProps?.height) ? 'none' : undefined,
-                        // Hide while loading.
-                        visibility: hasError || (hasError && isLoading) ? 'hidden' : undefined,
+                        ...imageErrorStyle,
                         // Focus point.
                         objectPosition: getObjectPosition(aspectRatio, focusPoint),
                     }}
@@ -187,8 +197,8 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                 />
                 {!isLoading && hasError && (
                     <div className={`${CLASSNAME}__fallback`}>
-                        {typeof fallback === 'string' ? (
-                            <Icon icon={fallback} size={Size.xxs} theme={theme} />
+                        {hasIconErrorFallback ? (
+                            <Icon icon={fallback as string} size={Size.xxs} theme={theme} />
                         ) : (
                             fallback
                         )}

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

@@ -2,24 +2,23 @@
 
 exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`] = `
 <button
-  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
+  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]}
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
       alt="Click me"
-      className="lumx-thumbnail__image"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={
+        Object {
+          "objectPosition": undefined,
+          "visibility": "hidden",
+        }
+      }
     />
   </div>
 </button>
@@ -27,24 +26,23 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
 
 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"
+  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"
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
       alt="Click me"
-      className="lumx-thumbnail__image"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={
+        Object {
+          "objectPosition": undefined,
+          "visibility": "hidden",
+        }
+      }
     />
   </div>
 </CustomLinkComponent>
@@ -52,120 +50,46 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCusto
 
 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"
+  className="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"
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
       alt="Click me"
-      className="lumx-thumbnail__image"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
-    />
-  </div>
-</a>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'CustomFallback' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--theme-light"
->
-  <div
-    className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
+      style={
+        Object {
+          "objectPosition": undefined,
+          "visibility": "hidden",
+        }
       }
-    }
-  >
-    <img
-      alt="foo"
-      className="lumx-thumbnail__image"
-      loading="lazy"
-      src="foo"
-      style={Object {}}
     />
   </div>
-</div>
+</a>
 `;
 
 exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] = `
 <div
-  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light"
+  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--theme-light lumx-thumbnail--variant-squared lumx-thumbnail--is-loading"
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
       alt="Image alt text"
-      className="lumx-thumbnail__image"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
-    />
-  </div>
-</div>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'DefaultFallback' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--theme-light"
->
-  <div
-    className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
+      style={
+        Object {
+          "objectPosition": undefined,
+          "visibility": "hidden",
+        }
       }
-    }
-  >
-    <img
-      alt="foo"
-      className="lumx-thumbnail__image"
-      loading="lazy"
-      src="foo"
-      style={Object {}}
-    />
-  </div>
-</div>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'IconFallback' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--theme-light"
->
-  <div
-    className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
-  >
-    <img
-      alt="foo"
-      className="lumx-thumbnail__image"
-      loading="lazy"
-      src="foo"
-      style={Object {}}
     />
   </div>
 </div>
@@ -173,23 +97,22 @@ exports[`<Thumbnail> Snapshots and structure should render story 'IconFallback'
 
 exports[`<Thumbnail> Snapshots and structure should render story 'WithBadge' 1`] = `
 <div
-  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-square lumx-thumbnail--size-l lumx-thumbnail--theme-light lumx-thumbnail--variant-rounded lumx-thumbnail--has-badge"
+  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-square lumx-thumbnail--size-l lumx-thumbnail--theme-light lumx-thumbnail--variant-rounded lumx-thumbnail--is-loading lumx-thumbnail--has-badge"
 >
   <div
     className="lumx-thumbnail__background"
-    style={
-      Object {
-        "display": undefined,
-        "visibility": "hidden",
-      }
-    }
   >
     <img
       alt="Image alt text"
-      className="lumx-thumbnail__image"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={
+        Object {
+          "objectPosition": undefined,
+          "visibility": "hidden",
+        }
+      }
     />
   </div>
   <Badge

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

@@ -6,12 +6,11 @@ import { UserBlock } from './UserBlock';
 
 export default { title: 'LumX components/user-block/UserBlock' };
 
-export const Sizes = ({ theme }: any) => {
+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
-                theme={theme}
                 name="Emmitt O. Lum"
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
@@ -24,34 +23,11 @@ export const Sizes = ({ theme }: any) => {
     ));
 };
 
-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) => {
+export const WithBadge = () => {
     const logAction = (action: string) => () => console.log(action);
     return (
         <div className="demo-grid">
             <UserBlock
-                theme={theme}
                 name="Emmitt O. Lum"
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{
@@ -66,19 +42,19 @@ export const WithBadge = ({ theme }: any) => {
                 size={Size.m}
                 onMouseEnter={logAction('Mouse entered')}
                 onMouseLeave={logAction('Mouse left')}
+                onClick={logAction('UserBlock clicked')}
             />
         </div>
     );
 };
 
-export const InList = ({ theme }: any) => {
+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
-                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{
@@ -98,7 +74,6 @@ export const InList = ({ theme }: any) => {
                 </ListItem>
                 <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
                     <UserBlock
-                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{
@@ -118,7 +93,6 @@ export const InList = ({ theme }: any) => {
                 </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,8 +5,6 @@ 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';
 
 /**
@@ -20,10 +18,6 @@ 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. */
@@ -86,8 +80,6 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
         simpleAction,
         size,
         theme,
-        linkProps,
-        linkAs,
         ...forwardedProps
     } = props;
     let componentSize = size;
@@ -99,29 +91,12 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
 
     const shouldDisplayActions: boolean = orientation === Orientation.vertical;
 
-    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 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 fieldsBlock: ReactNode = fields && componentSize !== Size.s && (
         <div className={`${CLASSNAME}__fields`}>
@@ -139,21 +114,21 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
             {...forwardedProps}
             className={classNames(
                 className,
-                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),
+                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme }),
             )}
             onMouseLeave={onMouseLeave}
             onMouseEnter={onMouseEnter}
         >
             {avatarProps && (
-                <Avatar
-                    linkAs={linkAs}
-                    linkProps={linkProps}
-                    {...avatarProps}
-                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}
-                    size={componentSize}
-                    onClick={onClick}
-                    theme={theme}
-                />
+                <div className={`${CLASSNAME}__avatar`}>
+                    <Avatar
+                        {...avatarProps}
+                        size={componentSize}
+                        onClick={onClick}
+                        tabIndex={onClick ? 0 : -1}
+                        theme={theme}
+                    />
+                </div>
             )}
             {(fields || name) && (
                 <div className={`${CLASSNAME}__wrapper`}>