@lumx/react 2.1.9-alpha-thumbnail → 2.1.9

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

@@ -12,66 +12,30 @@ import {
     Thumbnail,
     ThumbnailVariant,
 } from '@lumx/react';
-import { IMAGE_SIZES, imageKnob, IMAGES } from '@lumx/react/stories/knobs/image';
+import { imageKnob, IMAGES } from '@lumx/react/stories/knobs/image';
+import { htmlDecode } from '@lumx/react/utils/htmlDecode';
 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 { action } from '@storybook/addon-actions';
-import classNames from 'classnames';
-
-const knobAspectRatio = () => {
-    const ratiosProps = {
-        Original: {},
-        'Original (with natural size)': { imgNaturalSize: { width: 800, height: 600 } },
-        'Free (with fill height)': { aspectRatio: AspectRatio.free },
-        Horizontal: { aspectRatio: AspectRatio.horizontal },
-        Wide: { aspectRatio: AspectRatio.wide },
-        Vertical: { aspectRatio: AspectRatio.vertical },
-        Square: { aspectRatio: AspectRatio.square },
-    } as const;
-    return select('Aspect ratio', ratiosProps as any, ratiosProps.Original as any);
-};
 
 export default { title: 'LumX components/thumbnail/Thumbnail' };
 
-/** Default thumbnail props (editable via knobs) */
-export const Default = ({ theme }: any) => {
-    const alt = text('Alternative text', 'Image alt text');
-    const align = enumKnob(
-        'Alignment',
-        [undefined, Alignment.center, Alignment.left, Alignment.right] as const,
-        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;
+export const Default = () => <Thumbnail alt="Image alt text" image={imageKnob()} size={Size.xxl} />;
 
-    return (
-        <Thumbnail
-            alt={alt}
-            align={align}
-            aspectRatio={aspectRatio}
-            crossOrigin={crossOrigin}
-            fillHeight={fillHeight}
-            focusPoint={focusPoint}
-            image={image}
-            size={size}
-            theme={theme}
-            variant={variant}
-            onClick={onClick}
-        />
-    );
-};
+export const Clickable = () => <Thumbnail alt="Click me" image={imageKnob()} size={Size.xxl} onClick={console.log} />;
+
+export const DefaultFallback = () => <Thumbnail alt="foo" image="foo" />;
+
+export const IconFallback = () => <Thumbnail alt="foo" image="foo" fallback={mdiAbTesting} />;
+
+export const CustomFallback = () => (
+    <Thumbnail alt="foo" image="foo" fallback={<Thumbnail alt="missing image" image="/logo.svg" />} />
+);
 
 export const WithBadge = () => {
-    const thumbnailSize = sizeKnob('Size', Size.l);
-    const variant = select('Variant', ThumbnailVariant, ThumbnailVariant.rounded);
+    const thumbnailSize = sizeKnob('Thumbnail size', Size.l);
+    const variant = select('Thumbnail variant', ThumbnailVariant, ThumbnailVariant.rounded);
     const badgeColor = select('Badge color', ColorPalette, ColorPalette.primary);
     const activateFallback = boolean('Activate fallback', false);
     const image = imageKnob();
@@ -91,228 +55,13 @@ export const WithBadge = () => {
     );
 };
 
-export const Clickable = () => (
-    <Thumbnail alt="Click me" image={imageKnob()} size={sizeKnob('Size', Size.xxl)} onClick={action('onClick')} />
-);
-
-export const ClickableLink = () => (
-    <Thumbnail
-        alt="Click me"
-        image={imageKnob()}
-        size={sizeKnob('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={sizeKnob('Size', Size.xxl)}
-        linkAs={CustomLinkComponent}
-        linkProps={{ href: 'https://google.fr', className: 'custom-class-name' }}
-    />
-);
-
-export const FillHeight = () => {
-    const parentStyle = { width: 600, height: 240, border: '1px solid red' };
-    return (
-        <>
-            <h2>Default</h2>
-            <div style={parentStyle}>
-                <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight />
-            </div>
-            <h2>Ratio wide</h2>
-            <div style={parentStyle}>
-                <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight aspectRatio="wide" />
-            </div>
-            <h2>Ratio vertical</h2>
-            <div style={parentStyle}>
-                <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight aspectRatio="vertical" />
-            </div>
-            <h2>Ratio free</h2>
-            <div style={parentStyle}>
-                <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight aspectRatio="free" />
-            </div>
-        </>
-    );
-};
-
-export const Original = () => (
-    <>
-        <h1>Ratio: Original</h1>
-        <h2>Default</h2>
-        <table>
-            <tr>
-                <th>Landscape</th>
-                <th>
-                    Landscape <small>(with original size)</small>
-                </th>
-                <th>Portrait</th>
-                <th>
-                    Portrait <small>(with original size)</small>
-                </th>
-            </tr>
-            <tr>
-                <td>
-                    <Thumbnail alt="" image={IMAGES.landscape1} />
-                </td>
-                <td>
-                    <Thumbnail alt="" image={IMAGES.landscape1} imgProps={IMAGE_SIZES.landscape1} />
-                </td>
-                <td>
-                    <Thumbnail alt="" image={IMAGES.portrait1} />
-                </td>
-                <td>
-                    <Thumbnail alt="" image={IMAGES.portrait1} imgProps={IMAGE_SIZES.portrait1} />
-                </td>
-            </tr>
-        </table>
-        <h2>Constrained parent size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" image={IMAGES.landscape1} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" image={IMAGES.portrait1} />
-            </div>
-        </FlexBox>
-        <h2>With size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" image={IMAGES.landscape1} size="xxl" />
-            <Thumbnail alt="" image={IMAGES.portrait1} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" image={IMAGES.landscape1s200} size="xxl" />
-            <Thumbnail alt="" image={IMAGES.portrait1s200} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image & fill height</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" image={IMAGES.landscape1s200} size="xxl" fillHeight />
-            <Thumbnail alt="" image={IMAGES.portrait1s200} size="xxl" fillHeight />
-        </FlexBox>
-        <h2>Constrained parent size & smaller image & fill height</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" image={IMAGES.portrait1s200} fillHeight />
-            </div>
-        </FlexBox>
-    </>
-);
-
-export const Vertical = () => (
-    <>
-        <h1>Ratio: vertical</h1>
-        <h2>Constraint parent size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1} />
-            </div>
-        </FlexBox>
-        <h2>Constraint parent size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} />
-            </div>
-        </FlexBox>
-        <h2>With size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1} size="xxl" />
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} size="xxl" />
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image & fill height</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} size="xxl" fillHeight />
-            <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} size="xxl" fillHeight />
-        </FlexBox>
-        <h2>Constrained parent size & smaller image & fill height</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} fillHeight />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} fillHeight />
-            </div>
-        </FlexBox>
-    </>
-);
-
-export const Wide = () => (
-    <>
-        <h1>Ratio: wide</h1>
-        <h2>Constrained parent size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1} />
-            </div>
-        </FlexBox>
-        <h2>Constrained parent size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} />
-            </div>
-        </FlexBox>
-        <h2>With size</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1} size="xxl" />
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} size="xxl" />
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} size="xxl" />
-        </FlexBox>
-        <h2>With size & smaller image & fill height</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} size="xxl" fillHeight />
-            <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} size="xxl" fillHeight />
-        </FlexBox>
-        <h2>Constrained parent size & smaller image & fill height</h2>
-        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} fillHeight />
-            </div>
-            <div className="parent" style={{ width: 220 }}>
-                <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} fillHeight />
-            </div>
-        </FlexBox>
-    </>
-);
-
 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' }}>
+            <div style={{ border: '1px solid red', width: 200, height: 400, resize: 'both', overflow: 'auto' }}>
                 <Thumbnail alt="Grid" image="/demo-assets/grid.jpg" aspectRatio={aspectRatio} fillHeight={fillHeight} />
             </div>
 
@@ -327,89 +76,35 @@ export const ParentSizeConstraint = () => {
     ));
 };
 
-export const IsLoading = ({ theme }: any) => (
-    <FlexBox
-        orientation="horizontal"
-        vAlign="center"
-        marginAuto={['left', 'right']}
-        style={{ border: '1px solid red', width: 900, height: 700, resize: 'both', overflow: 'auto' }}
-    >
+export const Knobs = ({ theme }: any) => {
+    const alt = text('Alternative text', 'Image alt text');
+    const align = enumKnob(
+        'Alignment',
+        [undefined, Alignment.center, Alignment.left, Alignment.right] as const,
+        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', Size.xxl);
+    const onClick = boolean('clickable?', false) ? () => console.log('ok') : undefined;
+
+    return (
         <Thumbnail
+            alt={alt}
+            align={align}
+            aspectRatio={aspectRatio}
+            crossOrigin={crossOrigin}
+            fillHeight={fillHeight}
+            focusPoint={focusPoint}
+            image={htmlDecode(image)}
+            size={size}
             theme={theme}
-            alt="Image alt text"
-            image={IMAGES.landscape2}
-            isLoading={boolean('Is loading', true)}
-            fillHeight={boolean('Fill Height', false)}
-            size={sizeKnob('Size', undefined)}
+            variant={variant}
+            onClick={onClick}
         />
-    </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);
-    const variant = select('Variant', ThumbnailVariant, undefined);
-    const base = { alt: 'foo', image: 'foo', isLoading, variant } 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} />
-                <Thumbnail {...base} fallback={imageFallback} />
-            </FlexBox>
-            <h2>
-                With original image size <small>(50x50)</small>
-            </h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <Thumbnail {...base} imgProps={imgProps} />
-                <Thumbnail {...base} fallback={mdiAbTesting} imgProps={imgProps} />
-                <Thumbnail {...base} fallback={imageFallback} imgProps={imgProps} />
-            </FlexBox>
-            <h2>With size</h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <Thumbnail {...base} size="xl" />
-                <Thumbnail {...base} size="xl" fallback={mdiAbTesting} />
-                <Thumbnail {...base} size="xl" fallback={imageFallback} imgProps={imgProps} />
-            </FlexBox>
-            <h2>With size & ratio</h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <Thumbnail {...base} size="xl" aspectRatio="wide" />
-                <Thumbnail {...base} size="xl" aspectRatio="wide" fallback={mdiAbTesting} />
-                <Thumbnail {...base} size="xl" aspectRatio="wide" fallback={imageFallback} />
-            </FlexBox>
-            <h2>
-                With original size <small>(50x50)</small> & ratio
-            </h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" />
-                <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={mdiAbTesting} />
-                <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={imageFallback} />
-            </FlexBox>
-            <h2>
-                With original size <small>(50x50)</small> & ratio & constrained parent size
-            </h2>
-            <FlexBox orientation="horizontal" gap="big">
-                <div className="parent" style={{ width: 220 }}>
-                    <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" />
-                </div>
-                <div className="parent" style={{ width: 220 }}>
-                    <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={mdiAbTesting} />
-                </div>
-                <div className="parent" style={{ width: 220 }}>
-                    <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={imageFallback} />
-                </div>
-            </FlexBox>
-        </>
     );
 };

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

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

package/src/components/thumbnail/Thumbnail.tsx

@@ -7,6 +7,7 @@ import React, {
     ReactNode,
     Ref,
     useRef,
+    useState,
 } from 'react';
 import classNames from 'classnames';
 
@@ -14,9 +15,12 @@ import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
-import { mdiImageBroken } from '@lumx/icons';
+import { mdiImageBrokenVariant } from '@lumx/icons';
+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>;
@@ -47,8 +51,6 @@ export interface ThumbnailProps extends GenericProps {
     imgProps?: ImgHTMLProps;
     /** Reference to the native <img> element. */
     imgRef?: Ref<HTMLImageElement>;
-    /** Set to true to force the display of the loading skeleton. */
-    isLoading?: boolean;
     /** Size variant of the component. */
     size?: ThumbnailSize;
     /** Image loading mode. */
@@ -61,10 +63,6 @@ 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;
 }
 
 /**
@@ -81,18 +79,11 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ThumbnailProps> = {
-    fallback: mdiImageBroken,
+    fallback: mdiImageBrokenVariant,
     loading: 'lazy',
     theme: Theme.light,
 };
 
-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;
-    return `${x}% ${y}%`;
-}
-
 /**
  * Thumbnail component.
  *
@@ -104,7 +95,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const {
         align,
         alt,
-        aspectRatio = AspectRatio.original,
+        aspectRatio,
         badge,
         className,
         crossOrigin,
@@ -114,90 +105,71 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         image,
         imgProps,
         imgRef: propImgRef,
-        isLoading: isLoadingProp,
         loading,
         size,
         theme,
         variant,
-        linkProps,
-        linkAs,
-        showSkeletonLoading = true,
         ...forwardedProps
     } = props;
     const imgRef = useRef<HTMLImageElement>(null);
 
     // Image loading state.
-    const loadingState = useImageLoad(image, imgRef);
-    const isLoading = isLoadingProp || loadingState === 'isLoading';
+    const loadingState = useImageLoad(imgRef);
     const hasError = loadingState === 'hasError';
+    const isLoading = loadingState === 'isLoading';
 
-    const isLink = Boolean(linkProps?.href || linkAs);
-    const isButton = !!forwardedProps.onClick;
-    const isClickable = isButton || isLink;
+    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),
+    };
 
-    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 (
-        <Wrapper
-            {...wrapperProps}
-            ref={ref}
-            className={classNames(
-                linkProps?.className,
-                className,
-                handleBasicClasses({
-                    align,
-                    aspectRatio,
-                    prefix: CLASSNAME,
-                    size,
-                    theme,
-                    variant,
-                    isClickable,
-                    hasError,
-                    isLoading: showSkeletonLoading && isLoading,
-                    hasBadge: !!badge,
-                }),
-                fillHeight && `${CLASSNAME}--fill-height`,
-            )}
-        >
-            <div className={`${CLASSNAME}__background`}>
+        <div {...wrapperProps}>
+            <div
+                className={`${CLASSNAME}__background`}
+                style={{
+                    ...style?.wrapper,
+                    // Remove from layout if image not loaded correctly (use fallback)
+                    display: hasError ? 'none' : undefined,
+                    // Hide while loading.
+                    visibility: isLoading ? 'hidden' : undefined,
+                }}
+            >
                 <img
                     {...imgProps}
                     style={{
                         ...imgProps?.style,
-                        //
-                        //display: hasError && (!imgProps?.width || !imgProps?.height) ? 'none' : undefined,
-                        // Hide while loading.
-                        visibility: hasError || (hasError && isLoading) ? 'hidden' : undefined,
-                        // Focus point.
-                        objectPosition: getObjectPosition(aspectRatio, focusPoint),
+                        ...style?.image,
                     }}
                     ref={mergeRefs(imgRef, propImgRef)}
-                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}
-                    crossOrigin={crossOrigin}
+                    className={style?.image ? `${CLASSNAME}__focused-image` : `${CLASSNAME}__image`}
+                    crossOrigin={crossOrigin && !isInternetExplorer() ? crossOrigin : undefined}
                     src={image}
                     alt={alt}
                     loading={loading}
                 />
-                {!isLoading && hasError && (
-                    <div className={`${CLASSNAME}__fallback`}>
-                        {typeof fallback === 'string' ? (
-                            <Icon icon={fallback} size={Size.xxs} theme={theme} />
-                        ) : (
-                            fallback
-                        )}
-                    </div>
-                )}
             </div>
+            {hasError &&
+                (typeof fallback === 'string' ? (
+                    <Icon className={`${CLASSNAME}__fallback`} icon={fallback} size={size || Size.m} theme={theme} />
+                ) : (
+                    <div className={`${CLASSNAME}__fallback`}>{fallback}</div>
+                ))}
             {badge &&
                 React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}
-        </Wrapper>
+        </div>
     );
 });
 Thumbnail.displayName = COMPONENT_NAME;