@lumx/react 2.1.9-alpha-thumbnail4 → 2.1.9-alpha-thumbnail9

package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap

@@ -39,13 +39,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/landscape2.jpg-1"
+          key="/demo-assets/landscape1-s200.jpg-1"
         >
           <ImageBlock
             align="left"
             alt="Image 2"
             captionPosition="below"
-            image="/demo-assets/landscape2.jpg"
+            image="/demo-assets/landscape1-s200.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -55,13 +55,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/landscape3.jpg-2"
+          key="/demo-assets/landscape2.jpg-2"
         >
           <ImageBlock
             align="left"
             alt="Image 3"
             captionPosition="below"
-            image="/demo-assets/landscape3.jpg"
+            image="/demo-assets/landscape2.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -71,13 +71,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/portrait1.jpg-3"
+          key="/demo-assets/landscape3.jpg-3"
         >
           <ImageBlock
             align="left"
             alt="Image 4"
             captionPosition="below"
-            image="/demo-assets/portrait1.jpg"
+            image="/demo-assets/landscape3.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -87,13 +87,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/portrait2.jpg-4"
+          key="/demo-assets/portrait1.jpg-4"
         >
           <ImageBlock
             align="left"
             alt="Image 5"
             captionPosition="below"
-            image="/demo-assets/portrait2.jpg"
+            image="/demo-assets/portrait1.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -103,13 +103,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="/demo-assets/portrait3.jpg-5"
+          key="/demo-assets/portrait1-s200.jpg-5"
         >
           <ImageBlock
             align="left"
             alt="Image 6"
             captionPosition="below"
-            image="/demo-assets/portrait3.jpg"
+            image="/demo-assets/portrait1-s200.jpg"
             theme="light"
             thumbnailProps={
               Object {

package/src/components/table/__snapshots__/Table.test.tsx.snap

@@ -60,7 +60,7 @@ exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
             alt="Frozen yogurt"
             aspectRatio="square"
             className="lumx-spacing-margin-right-big"
-            fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+            fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
             image="/demo-assets/landscape1.jpg"
             loading="lazy"
             size="m"
@@ -129,7 +129,7 @@ exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
             alt="Ice cream sandwich"
             aspectRatio="square"
             className="lumx-spacing-margin-right-big"
-            fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+            fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
             image="/demo-assets/landscape2.jpg"
             loading="lazy"
             size="m"
@@ -198,7 +198,7 @@ exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
             alt="Eclair"
             aspectRatio="square"
             className="lumx-spacing-margin-right-big"
-            fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
+            fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
             image="/demo-assets/landscape3.jpg"
             loading="lazy"
             size="m"

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

@@ -31,27 +31,28 @@ export const Default = ({ theme }: any) => {
         undefined,
     );
     const aspectRatio = enumKnob('Aspect ratio', [undefined, ...Object.values(AspectRatio)], undefined);
-    const crossOrigin = enumKnob('CORS', [undefined, 'anonymous', 'use-credentials'] as const, undefined);
     const fillHeight = boolean('Fill Height', false);
     const focusPoint = { x: focusKnob('Focus X'), y: focusKnob('Focus Y') };
     const image = imageKnob('Image', IMAGES.landscape1);
     const variant = select('Variant', ThumbnailVariant, ThumbnailVariant.squared);
     const size = sizeKnob('Size', undefined);
     const onClick = boolean('clickable?', false) ? action('onClick') : undefined;
+    const isLoading = boolean('Force loading', false);
+    const forceError = boolean('Force error', false);
 
     return (
         <Thumbnail
             alt={alt}
             align={align}
             aspectRatio={aspectRatio}
-            crossOrigin={crossOrigin}
             fillHeight={fillHeight}
             focusPoint={focusPoint}
-            image={image}
+            image={forceError ? 'foo' : image}
             size={size}
             theme={theme}
             variant={variant}
             onClick={onClick}
+            isLoading={isLoading}
         />
     );
 };
@@ -207,6 +208,7 @@ export const Vertical = () => (
     <>
         <h1>Ratio: vertical</h1>
         <h2>Default</h2>
+        <small>Unsupported use case (thumbnail size is undefined)</small>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1} />
             <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1} />
@@ -260,6 +262,7 @@ export const Wide = () => (
     <>
         <h1>Ratio: wide</h1>
         <h2>Default</h2>
+        <small>Unsupported use case (thumbnail size is undefined)</small>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1} />
             <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1} />
@@ -313,6 +316,7 @@ export const Square = () => (
     <>
         <h1>Ratio: square</h1>
         <h2>Default</h2>
+        <small>Unsupported use case (thumbnail size is undefined)</small>
         <FlexBox orientation="horizontal" vAlign="center" gap="huge">
             <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1} />
             <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1} />
@@ -362,27 +366,6 @@ export const Square = () => (
     </>
 );
 
-export const ParentSizeConstraint = () => {
-    const fillHeight = boolean('Fill Height', true);
-    return Object.values(AspectRatio).map((aspectRatio) => (
-        <FlexBox key={aspectRatio} orientation="horizontal" gap="huge">
-            <h1>ratio: {aspectRatio}</h1>
-
-            <div style={{ border: '1px solid red', width: 220, height: 400, resize: 'both', overflow: 'auto' }}>
-                <Thumbnail alt="Grid" image="/demo-assets/grid.jpg" aspectRatio={aspectRatio} fillHeight={fillHeight} />
-            </div>
-
-            <div style={{ border: '1px solid red', width: 300, height: 300, resize: 'both', overflow: 'auto' }}>
-                <Thumbnail alt="Grid" image="/demo-assets/grid.jpg" aspectRatio={aspectRatio} fillHeight={fillHeight} />
-            </div>
-
-            <div style={{ border: '1px solid red', width: 400, height: 200, resize: 'both', overflow: 'auto' }}>
-                <Thumbnail alt="Grid" image="/demo-assets/grid.jpg" aspectRatio={aspectRatio} fillHeight={fillHeight} />
-            </div>
-        </FlexBox>
-    ));
-};
-
 export const IsLoading = ({ theme }: any) => (
     <FlexBox
         orientation="horizontal"
@@ -394,31 +377,23 @@ export const IsLoading = ({ theme }: any) => (
             theme={theme}
             alt="Image alt text"
             image={IMAGES.landscape2}
-            isLoading={boolean('Is loading', true)}
+            isLoading={boolean('Force loading', true)}
             fillHeight={boolean('Fill Height', false)}
             size={sizeKnob('Size', undefined)}
         />
     </FlexBox>
 );
 
-export const ErrorFallback = () => <Thumbnail alt="foo" image="foo" />;
-
-export const ErrorCustomIconFallback = () => <Thumbnail alt="foo" image="foo" fallback={mdiAbTesting} />;
-
-export const ErrorCustomFallback = () => (
-    <Thumbnail alt="foo" image="foo" fallback={<Thumbnail alt="missing image" image="/logo.svg" />} />
-);
-
-export const ErrorFallbackVariants = () => {
-    const isLoading = boolean('is loading', false);
+export const ErrorFallbackVariants = ({ theme }: any) => {
+    const isLoading = boolean('Force loading', false);
     const variant = select('Variant', ThumbnailVariant, undefined);
-    const base = { alt: 'foo', image: 'foo', isLoading, variant } as const;
+    const base = { alt: 'foo', image: 'foo', isLoading, variant, theme } as const;
     const imageFallback = <img src="/logo.svg" alt="logo" />;
     const imgProps = { width: 50, height: 50 };
+
     return (
         <>
             <h2>Default</h2>
-            Default fallback | Custom icon fallback | Custom react node fallback
             <FlexBox orientation="horizontal" gap="big">
                 <Thumbnail {...base} />
                 <Thumbnail {...base} fallback={mdiAbTesting} />
@@ -436,7 +411,7 @@ export const ErrorFallbackVariants = () => {
             <FlexBox orientation="horizontal" gap="big">
                 <Thumbnail {...base} size="xl" />
                 <Thumbnail {...base} size="xl" fallback={mdiAbTesting} />
-                <Thumbnail {...base} size="xl" fallback={imageFallback} imgProps={imgProps} />
+                <Thumbnail {...base} size="xl" fallback={imageFallback} />
             </FlexBox>
             <h2>With size & ratio</h2>
             <FlexBox orientation="horizontal" gap="big">
@@ -447,6 +422,7 @@ export const ErrorFallbackVariants = () => {
             <h2>
                 With original size <small>(50x50)</small> & ratio
             </h2>
+            <small>Unsupported use case (thumbnail size is undefined)</small>
             <FlexBox orientation="horizontal" gap="big">
                 <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" />
                 <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={mdiAbTesting} />

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

@@ -9,10 +9,7 @@ import {
     Clickable,
     ClickableCustomLink,
     ClickableLink,
-    ErrorCustomFallback,
     Default,
-    ErrorFallback,
-    ErrorCustomIconFallback,
     WithBadge,
 } from './Thumbnail.stories';
 
@@ -36,9 +33,6 @@ describe(`<${Thumbnail.displayName}>`, () => {
                 Clickable,
                 ClickableLink,
                 ClickableCustomLink,
-                ErrorFallback,
-                ErrorCustomFallback,
-                ErrorCustomIconFallback,
                 WithBadge,
             },
             Thumbnail,

package/src/components/thumbnail/Thumbnail.tsx

@@ -1,4 +1,5 @@
 import React, {
+    CSSProperties,
     forwardRef,
     ImgHTMLAttributes,
     KeyboardEventHandler,
@@ -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 (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,8 +184,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                     {...imgProps}
                     style={{
                         ...imgProps?.style,
-                        // Hide on error.
-                        visibility: hasError ? 'hidden' : undefined,
+                        ...imageErrorStyle,
                         // Focus point.
                         objectPosition: getObjectPosition(aspectRatio, focusPoint),
                     }}
@@ -185,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

@@ -1,124 +1,91 @@
 // 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--aspect-ratio-original lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable lumx-thumbnail--is-loading"
   onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={0}
 >
   <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>
-</div>
-`;
-
-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,
+        }
       }
-    }
-  >
-    <img
-      alt="foo"
-      className="lumx-thumbnail__image"
-      loading="lazy"
-      src="foo"
-      style={Object {}}
     />
   </div>
-</div>
+</button>
 `;
 
-exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light"
+exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCustomLink' 1`] = `
+<CustomLinkComponent
+  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="Image alt text"
-      className="lumx-thumbnail__image"
+      alt="Click me"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={
+        Object {
+          "objectPosition": undefined,
+        }
+      }
     />
   </div>
-</div>
+</CustomLinkComponent>
 `;
 
-exports[`<Thumbnail> Snapshots and structure should render story 'DefaultFallback' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--theme-light"
+exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink' 1`] = `
+<a
+  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="foo"
-      className="lumx-thumbnail__image"
+      alt="Click me"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
-      src="foo"
-      style={Object {}}
+      src="/demo-assets/landscape1.jpg"
+      style={
+        Object {
+          "objectPosition": undefined,
+        }
+      }
     />
   </div>
-</div>
+</a>
 `;
 
-exports[`<Thumbnail> Snapshots and structure should render story 'IconFallback' 1`] = `
+exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] = `
 <div
-  className="lumx-thumbnail 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="foo"
-      className="lumx-thumbnail__image"
+      alt="Image alt text"
+      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
-      src="foo"
-      style={Object {}}
+      src="/demo-assets/landscape1.jpg"
+      style={
+        Object {
+          "objectPosition": undefined,
+        }
+      }
     />
   </div>
 </div>
@@ -126,23 +93,21 @@ 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,
+        }
+      }
     />
   </div>
   <Badge

package/src/hooks/useOnResize.ts

@@ -23,12 +23,6 @@ export function useOnResize(element: HTMLElement | Falsy, update: RefObject<Call
                     return;
                 }
 
-                // Do not update on first resize.
-                if (previousSize.current && previousSize.current.height <= 1) {
-                    return;
-                }
-
-                // Do not update if size hasn't really changed.
                 const { width, height } = entry.contentRect;
                 if (previousSize.current?.width === width && previousSize.current?.height === height) {
                     return;

package/src/stories/generated/List/Demos.stories.tsx

@@ -4,6 +4,8 @@
 export default { title: 'LumX components/list/List Demos' };
 
 export { App as Big } from './big';
+export { App as Clickable } from './clickable';
 export { App as Huge } from './huge';
+export { App as Paddings } from './paddings';
 export { App as Regular } from './regular';
 export { App as Tiny } from './tiny';

package/src/components/thumbnail/useClickable.ts

@@ -1,26 +0,0 @@
-import { KeyboardEventHandler, MouseEventHandler, useMemo } from 'react';
-
-interface Props {
-    role: 'button';
-    tabIndex: 0;
-    onClick: MouseEventHandler;
-    onKeyPress: KeyboardEventHandler;
-}
-
-export const useClickable = ({ onClick, onKeyPress }: { onClick?: any; onKeyPress?: any }): Props | undefined => {
-    return useMemo(() => {
-        if (!onClick) return undefined;
-
-        return {
-            role: 'button',
-            tabIndex: 0,
-            onClick,
-            onKeyPress(event) {
-                onKeyPress?.(event);
-                if (event.key === 'Enter' || event.key === ' ') {
-                    onClick?.();
-                }
-            },
-        };
-    }, [onClick, onKeyPress]);
-};