@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22

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

@@ -0,0 +1,448 @@
+import React from 'react';
+
+import uniqueId from 'lodash/uniqueId';
+
+import { mdiAbTesting } from '@lumx/icons';
+import {
+    Alignment,
+    AspectRatio,
+    Badge,
+    Button,
+    FlexBox,
+    GridColumn,
+    Icon,
+    Size,
+    Thumbnail,
+    ThumbnailObjectFit,
+    ThumbnailVariant,
+} from '@lumx/react';
+import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
+import { IMAGE_SIZES, imageArgType, IMAGES } from '@lumx/react/stories/controls/image';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+
+const aligns = [Alignment.center, Alignment.left, Alignment.right];
+const variants = [ThumbnailVariant.squared, ThumbnailVariant.rounded];
+
+export default {
+    title: 'LumX components/thumbnail/Thumbnail',
+    component: Thumbnail,
+    args: Thumbnail.defaultProps,
+    argTypes: {
+        image: imageArgType,
+        align: getSelectArgType(aligns),
+        variant: getSelectArgType(variants),
+        aspectRatio: getSelectArgType(AspectRatio),
+        fallback: { control: false },
+        'focusPoint.x': { control: { type: 'range', max: 1, min: -1, step: 0.05 } },
+        'focusPoint.y': { control: { type: 'range', max: 1, min: -1, step: 0.05 } },
+    },
+    decorators: [withNestedProps()],
+};
+
+/** Simple thumbnail taking the size of the original image */
+export const Simple = {
+    args: { image: IMAGES.landscape1s200 },
+    decorators: [
+        withWrapper({
+            style: { border: '1px dashed red', height: 500, width: 500, resize: 'both', overflow: 'hidden' },
+        }),
+    ],
+};
+
+/** Loading state*/
+export const IsLoading = {
+    args: { ...Simple.args, isLoading: true },
+};
+
+export const WithoutSource = {
+    args: { image: IMAGES.emptyImage, size: Size.xxl, aspectRatio: AspectRatio.square },
+};
+
+/** Thumbnail error fallback and size variants */
+export const ErrorFallback = {
+    args: { image: 'foo' },
+    decorators: [
+        withCombinations({
+            combinations: {
+                cols: {
+                    Default: {},
+                    'Icon fallback': { fallback: mdiAbTesting },
+                    'Image fallback': { fallback: <img src="/logo.svg" alt="logo" /> },
+                },
+                rows: {
+                    Default: {},
+                    'Size xl & ratio wide': { size: Size.xl, aspectRatio: AspectRatio.wide },
+                    'Size l & ratio vertical': { size: Size.l, aspectRatio: AspectRatio.vertical },
+                },
+            },
+        }),
+    ],
+};
+
+/** Simple thumbnail with badge */
+export const WithBadge = {
+    ...Simple,
+    args: {
+        ...Simple.args,
+        size: Size.xl,
+        badge: (
+            <Badge color="green">
+                <Icon icon={mdiAbTesting} />
+            </Badge>
+        ),
+    },
+};
+
+/** Demonstrate the focus point X on a vertical thumbnail containing an horizontal image */
+export const FocusPointVertical = {
+    args: {
+        aspectRatio: AspectRatio.vertical,
+        size: Size.xxl,
+        image: IMAGES.landscape1,
+        'focusPoint.x': 1,
+    },
+};
+
+/** Demonstrate the focus point Y on a horizontal thumbnail containing an vertical image */
+export const FocusPointHorizontal = {
+    args: {
+        aspectRatio: AspectRatio.horizontal,
+        size: Size.xxl,
+        image: IMAGES.portrait1,
+        'focusPoint.y': 1,
+    },
+};
+
+/** Setting `onClick` to turn the thumbnail into a button */
+export const AsButton = {
+    args: Simple.args,
+    argTypes: { onClick: { action: true } },
+};
+
+/** Setting `linkProps.href` to turn the thumbnail into a link */
+export const AsLink = {
+    args: { ...Simple.args, linkProps: { href: 'https://example.com' } },
+};
+
+/** Setting `href` to turn the thumbnail into a link */
+export const AsCustomLink = {
+    args: { ...Simple.args, linkAs: CustomLink, linkProps: { href: 'https://example.com' } },
+};
+
+/** Combinations of fillHeight and ratios */
+export const FillHeightAndRatio = {
+    ...Simple,
+    args: { ...Simple.args, fillHeight: true },
+
+    decorators: [
+        ...Simple.decorators,
+        withCombinations({ combinations: { rows: { key: 'aspectRatio', options: withUndefined(AspectRatio) } } }),
+    ],
+};
+
+/**
+ * Simple thumbnail with svg image
+ * */
+export const WithSvgImages = {
+    args: {
+        image: IMAGES.defaultSvg,
+        size: Size.xxl,
+        fillHeight: true,
+        'focusPoint.x': 1,
+    },
+};
+
+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="landscape image" image={IMAGES.landscape1} />
+                </td>
+                <td>
+                    <Thumbnail alt="landscape image" image={IMAGES.landscape1} imgProps={IMAGE_SIZES.landscape1} />
+                </td>
+                <td>
+                    <Thumbnail alt="portrait image" image={IMAGES.portrait1} />
+                </td>
+                <td>
+                    <Thumbnail alt="portrait image" 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>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} />
+        </FlexBox>
+        <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>
+        <small>Unsupported use case (use ratio free with fill height)</small>
+        <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>
+        <small>Unsupported use case (use ratio free with fill height)</small>
+        <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>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} />
+        </FlexBox>
+        <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>
+        <small>Unsupported use case (use ratio free with fill height)</small>
+        <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>
+        <small>Unsupported use case (use ratio free with fill height)</small>
+        <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 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} />
+        </FlexBox>
+        <h2>Constrained parent size</h2>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1} />
+            </div>
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" 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="square" image={IMAGES.landscape1s200} />
+            </div>
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} />
+            </div>
+        </FlexBox>
+        <h2>With size</h2>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1} size="xxl" />
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1} size="xxl" />
+        </FlexBox>
+        <h2>With size & smaller image</h2>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} size="xxl" />
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} size="xxl" />
+        </FlexBox>
+        <h2>With size & smaller image & fill height</h2>
+        <small>Unsupported use case (use ratio free with fill height)</small>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} size="xxl" fillHeight />
+            <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} size="xxl" fillHeight />
+        </FlexBox>
+        <h2>Constrained parent size & smaller image & fill height</h2>
+        <small>Unsupported use case (use ratio free with fill height)</small>
+        <FlexBox orientation="horizontal" vAlign="center" gap="huge">
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} fillHeight />
+            </div>
+            <div className="parent" style={{ width: 220 }}>
+                <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} fillHeight />
+            </div>
+        </FlexBox>
+    </>
+);
+
+export const ObjectFit = {
+    args: { size: Size.xl },
+    decorators: [
+        withCombinations({
+            cellStyle: { border: '1px solid lightgray' },
+            combinations: {
+                cols: {
+                    'Default (cover)': {},
+                    contain: { objectFit: ThumbnailObjectFit.contain },
+                },
+                rows: {
+                    'Ratio square': { aspectRatio: AspectRatio.square },
+                    'Ratio wide': { aspectRatio: AspectRatio.wide },
+                    'Ratio vertical': { aspectRatio: AspectRatio.vertical },
+                },
+                sections: {
+                    'Portrait image': { image: IMAGES.portrait1 },
+                    'Landscape image': { image: IMAGES.landscape1 },
+                },
+            },
+        }),
+        withWrapper({ maxColumns: 3, itemMinWidth: 350 }, GridColumn),
+    ],
+};
+
+/**
+ * Demonstrate loading a small image and then use it as the loading placeholder image when loading a bigger image
+ */
+export const LoadingPlaceholderImage = () => {
+    const [isShown, setShown] = React.useState(false);
+    const imgRef = React.useRef() as React.RefObject<HTMLImageElement>;
+    return (
+        <>
+            <Button onClick={() => setShown((shown) => !shown)}>
+                Display bigger image using the small image as a placeholder
+            </Button>
+            <FlexBox orientation="horizontal">
+                <Thumbnail alt="Small image" imgRef={imgRef} image="https://picsum.photos/id/15/128/85" />
+                {isShown && (
+                    <div style={{ maxHeight: 400 }}>
+                        <Thumbnail
+                            image={`https://picsum.photos/id/15/2500/1667?cacheBust${uniqueId()}`}
+                            alt="Large image"
+                            // Loading placeholder image
+                            loadingPlaceholderImageRef={imgRef}
+                            // Reserve space
+                            imgProps={{ width: 2500, height: 1667 }}
+                        />
+                    </div>
+                )}
+            </FlexBox>
+        </>
+    );
+};
+// Disables Chromatic snapshot (not relevant for this story).
+LoadingPlaceholderImage.parameters = { chromatic: { disable: true } };

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

@@ -0,0 +1,88 @@
+import { DisabledStateProvider } from '@lumx/react/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Thumbnail, ThumbnailProps } from './Thumbnail';
+
+const CLASSNAME = Thumbnail.className as string;
+
+const setup = (props: Partial<ThumbnailProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const { container } = render(<Thumbnail {...(props as any)} />, { wrapper });
+    const thumbnail = queryByClassName(document.body, CLASSNAME);
+    return { props, thumbnail, container };
+};
+
+describe(`<${Thumbnail.displayName}>`, () => {
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'thumbnail',
+        forwardAttributes: 'thumbnail',
+        applyTheme: {
+            affects: [{ element: 'thumbnail' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+
+    describe('clickable button', () => {
+        it('should render clickable button', async () => {
+            const onClick = vi.fn();
+            const { thumbnail } = setup({ onClick, alt: 'Name' });
+            const button = screen.getByRole('button', { name: 'Name' });
+            expect(button).toBe(thumbnail);
+            expect(button).toHaveAttribute('type', 'button');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).toHaveBeenCalled();
+        });
+
+        it('should not render button in disabled context', () => {
+            const onClick = vi.fn();
+            const { thumbnail, container } = setup(
+                { onClick, 'aria-label': 'thumbnail' },
+                {
+                    wrapper: ({ children }) => (
+                        <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+                    ),
+                },
+            );
+
+            // Should render a div instead of a button.
+            expect(container.querySelector('button')).toBe(null);
+            expect(thumbnail?.tagName).toBe('DIV');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('clickable link', () => {
+        it('should render clickable link', async () => {
+            const onClick = vi.fn((evt: any) => evt.preventDefault());
+            const { thumbnail } = setup({ linkProps: { href: '#' }, onClick, alt: 'Name' });
+            const link = screen.getByRole('link');
+            expect(link).toBe(thumbnail);
+            expect(link).toHaveAttribute('href', '#');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).toHaveBeenCalled();
+        });
+
+        it('should not render link in disabled context', () => {
+            const { container, thumbnail } = setup(
+                { linkAs: 'a', linkProps: { href: '#' }, 'aria-label': 'thumbnail' },
+                {
+                    wrapper: ({ children }) => (
+                        <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+                    ),
+                },
+            );
+
+            // Should render a div instead of a link.
+            expect(container.querySelector('a')).toBe(null);
+            expect(thumbnail?.tagName).toBe('DIV');
+        });
+    });
+});