@lumx/react 3.7.6-alpha.9 → 3.7.6-test.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.6-alpha.9",
-        "@lumx/icons": "^3.7.6-alpha.9",
+        "@lumx/core": "^3.7.6-test.0",
+        "@lumx/icons": "^3.7.6-test.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.6-alpha.9"
+    "version": "3.7.6-test.0"
 }

package/src/components/heading/Heading.test.tsx

@@ -21,13 +21,15 @@ describe(`<${Heading.displayName}>`, () => {
             const heading = screen.getByRole('heading', { level: 1, name: 'Some text' });
             expect(heading).toBeInTheDocument();
             expect(heading).toHaveClass(CLASSNAME);
+            expect(heading).toHaveClass('lumx-typography-display1');
         });
 
-        it('should render with as', () => {
+        it('should render with as with the correct default typography', () => {
             setup({ children: 'Some text', as: 'h2' });
             const heading = screen.getByRole('heading', { level: 2, name: 'Some text' });
             expect(heading).toBeInTheDocument();
             expect(heading).toHaveClass(CLASSNAME);
+            expect(heading).toHaveClass('lumx-typography-headline');
         });
 
         it('should correctly render levels nested in HeadingLevel', () => {

package/src/components/heading/Heading.tsx

@@ -40,6 +40,7 @@ export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
     const { children, as, className, ...forwardedProps } = props;
     const { headingElement } = useHeadingLevel();
 
+    const computedHeadingElement = as || headingElement;
     return (
         <Text
             ref={ref}
@@ -49,8 +50,8 @@ export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
                     prefix: CLASSNAME,
                 }),
             )}
-            as={as || headingElement}
-            typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[headingElement]}
+            as={computedHeadingElement}
+            typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]}
             {...forwardedProps}
         >
             {children}

package/src/components/image-block/ImageBlock.stories.tsx

@@ -15,94 +15,105 @@ import {
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { imageArgType, PORTRAIT_IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 import { mdiFileEdit } from '@lumx/icons';
-import { toNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 import { focusPoint } from '@lumx/react/stories/controls/focusPoint';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
 export default {
     title: 'LumX components/image-block/Image Block',
+    component: ImageBlock,
     argTypes: {
         size: getSelectArgType<ImageBlockSize>([Size.xl, Size.xxl]),
         image: imageArgType,
         captionPosition: getSelectArgType(ImageBlockCaptionPosition),
         'thumbnailProps.aspectRatio': getSelectArgType(AspectRatio),
         align: getSelectArgType<HorizontalAlignment>([Alignment.left, Alignment.center, Alignment.right]),
+        tags: { control: false },
+        actions: { control: false },
     },
     args: { ...ImageBlock.defaultProps, image: LANDSCAPE_IMAGES.landscape1 },
+    decorators: [withNestedProps()],
 };
 
-export const Default = (props: any) => {
-    const nestedProps = toNestedProps(props) as any;
-    return <ImageBlock {...nestedProps} />;
-};
-
-export const WithCaptionBelow: any = Default.bind({});
-WithCaptionBelow.args = {
-    captionPosition: ImageBlockCaptionPosition.below,
-    size: Size.xxl,
-    title: 'Image block title',
-    description: 'Image block description',
+export const WithCaptionBelow = {
+    args: {
+        captionPosition: ImageBlockCaptionPosition.below,
+        size: Size.xxl,
+        title: 'Image block title',
+        description: 'Image block description',
+    },
 };
 
-export const WithCaptionOver: any = Default.bind({});
-WithCaptionOver.args = {
-    captionPosition: ImageBlockCaptionPosition.over,
-    size: Size.xxl,
-    title: 'Image block title',
-    description: 'Image block description',
+export const WithCaptionOver = {
+    args: {
+        captionPosition: ImageBlockCaptionPosition.over,
+        size: Size.xxl,
+        title: 'Image block title',
+        description: 'Image block description',
+    },
 };
 
-export const WithAlign: any = Default.bind({});
-WithAlign.args = {
-    ...WithCaptionBelow.args,
-    image: LANDSCAPE_IMAGES.landscape1s200,
-    size: undefined,
-    align: Alignment.center,
+export const WithAlign = {
+    args: {
+        ...WithCaptionBelow.args,
+        image: LANDSCAPE_IMAGES.landscape1s200,
+        size: undefined,
+        align: Alignment.center,
+    },
 };
 
-export const WithTags: any = Default.bind({});
-WithTags.argTypes = {
-    tags: { control: false },
-};
-WithTags.args = {
-    size: Size.xxl,
-    tags: (
-        <ChipGroup align={Alignment.left}>
-            <Chip size={Size.s}>Tag 1</Chip>
-            <Chip size={Size.s}>Tag 2</Chip>
-        </ChipGroup>
-    ),
+export const WithTags = {
+    args: {
+        size: Size.xxl,
+        tags: (
+            <ChipGroup align={Alignment.left}>
+                <Chip size={Size.s}>Tag 1</Chip>
+                <Chip size={Size.s}>Tag 2</Chip>
+            </ChipGroup>
+        ),
+    },
 };
 
-export const WithActions: any = Default.bind({});
-WithActions.argTypes = {
-    actions: { control: false },
-};
-WithActions.args = {
-    size: Size.xxl,
-    actions: <IconButton label="Edit" icon={mdiFileEdit} />,
+export const WithActions = {
+    args: {
+        size: Size.xxl,
+        actions: <IconButton label="Edit" icon={mdiFileEdit} />,
+    },
 };
 
-export const WithFocusPointHorizontal: any = Default.bind({});
-WithFocusPointHorizontal.args = {
-    size: Size.xxl,
-    'thumbnailProps.aspectRatio': AspectRatio.vertical,
-    'thumbnailProps.focusPoint.x': 1,
-    'thumbnailProps.focusPoint.y': 0,
-};
-WithFocusPointHorizontal.argTypes = {
-    'thumbnailProps.focusPoint.x': focusPoint,
-    'thumbnailProps.focusPoint.y': focusPoint,
+export const WithFocusPointHorizontal = {
+    args: {
+        size: Size.xxl,
+        'thumbnailProps.aspectRatio': AspectRatio.vertical,
+        'thumbnailProps.focusPoint.x': 1,
+        'thumbnailProps.focusPoint.y': 0,
+    },
+    argTypes: {
+        'thumbnailProps.focusPoint.x': focusPoint,
+        'thumbnailProps.focusPoint.y': focusPoint,
+    },
 };
 
-export const WithFocusPointVertical: any = Default.bind({});
-WithFocusPointVertical.args = {
-    size: Size.xxl,
-    image: PORTRAIT_IMAGES.portrait1,
-    'thumbnailProps.aspectRatio': AspectRatio.horizontal,
-    'thumbnailProps.focusPoint.x': 0,
-    'thumbnailProps.focusPoint.y': 1,
+export const WithFocusPointVertical = {
+    args: {
+        size: Size.xxl,
+        image: PORTRAIT_IMAGES.portrait1,
+        'thumbnailProps.aspectRatio': AspectRatio.horizontal,
+        'thumbnailProps.focusPoint.x': 0,
+        'thumbnailProps.focusPoint.y': 1,
+    },
+    argTypes: {
+        'thumbnailProps.focusPoint.x': focusPoint,
+        'thumbnailProps.focusPoint.y': focusPoint,
+    },
 };
-WithFocusPointVertical.argTypes = {
-    'thumbnailProps.focusPoint.x': focusPoint,
-    'thumbnailProps.focusPoint.y': focusPoint,
+export const FullFeatured = {
+    args: {
+        ...WithCaptionBelow.args,
+        ...WithTags.args,
+        ...WithActions.args,
+        ...WithFocusPointVertical.args,
+        ...WithAlign.args,
+    },
+    decorators: [withWrapper({ style: { width: 400, height: 300 } })],
 };

package/src/components/image-block/ImageBlock.tsx

@@ -117,6 +117,7 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
                 alt={(alt || title) as string}
             />
             <ImageCaption
+                as="figcaption"
                 className={`${CLASSNAME}__wrapper`}
                 theme={theme}
                 title={title}

package/src/components/image-block/ImageCaption.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode } from 'react';
 
-import { FlexBox, HorizontalAlignment, Text } from '@lumx/react';
+import { FlexBox, HorizontalAlignment, Text, TextProps } from '@lumx/react';
 import { HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 
 type As = 'div' | 'figcaption';
@@ -22,8 +22,8 @@ export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &
     ImageCaptionMetadata & {
         /** Alignment. */
         align?: HorizontalAlignment;
-        /** Truncate title & description */
-        truncate?: boolean;
+        /** Truncate text on title & description (no line wrapping). */
+        truncate?: TextProps['truncate'];
     };
 
 /** Internal component used to render image captions */
@@ -32,7 +32,7 @@ export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
     if (!title && !description && !tags) return null;
 
     const titleColor = { color: theme === 'dark' ? 'light' : 'dark' } as const;
-    const descriptionColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;
+    const baseColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;
 
     // Display description as string or HTML
     const descriptionContent =
@@ -49,13 +49,13 @@ export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
             gap="regular"
         >
             {(title || description) && (
-                <Text as="p" truncate={truncate}>
+                <Text as="p" truncate={truncate} {...baseColor}>
                     {title && (
                         <Text as="span" typography="subtitle1" {...titleColor}>
                             {title}
                         </Text>
                     )}{' '}
-                    {description && <Text as="span" typography="body1" {...descriptionColor} {...descriptionContent} />}
+                    {description && <Text as="span" typography="body1" {...descriptionContent} />}
                 </Text>
             )}
             {tags && (

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

@@ -5,7 +5,6 @@ import {
     Alignment,
     AspectRatio,
     Badge,
-    Button,
     FlexBox,
     GridColumn,
     Icon,
@@ -412,31 +411,3 @@ export const ObjectFit = {
         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 && (
-                    <Thumbnail
-                        loadingPlaceholderImageRef={imgRef}
-                        style={{ maxWidth: 300 }}
-                        alt="Large image"
-                        image="https://picsum.photos/id/15/2500/1667"
-                    />
-                )}
-            </FlexBox>
-        </>
-    );
-};
-// Disables Chromatic snapshot (not relevant for this story).
-LoadingPlaceholderImage.parameters = { chromatic: { disable: true } };

package/src/components/thumbnail/Thumbnail.tsx

@@ -58,8 +58,6 @@ export interface ThumbnailProps extends GenericProps, HasTheme {
     size?: ThumbnailSize;
     /** Image loading mode. */
     loading?: ImgHTMLProps['loading'];
-    /** Ref of an existing placeholder image to display while loading. */
-    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
     /** On click callback. */
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** On key press callback. */
@@ -117,7 +115,6 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         isLoading: isLoadingProp,
         objectFit,
         loading,
-        loadingPlaceholderImageRef,
         size,
         theme,
         variant,
@@ -162,18 +159,6 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
 
-    // If we have a loading placeholder image that is really loaded (complete)
-    const loadingPlaceholderImage =
-        (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||
-        undefined;
-    const loadingStyle = loadingPlaceholderImage
-        ? {
-              backgroundImage: `url(${loadingPlaceholderImage.src})`,
-              minWidth: loadingPlaceholderImage.naturalWidth,
-              minHeight: loadingPlaceholderImage.naturalHeight,
-          }
-        : undefined;
-
     return (
         <Wrapper
             {...wrapperProps}
@@ -206,7 +191,6 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                         ...imgProps?.style,
                         ...imageErrorStyle,
                         ...focusPointStyle,
-                        ...loadingStyle,
                     }}
                     ref={mergeRefs(setImgElement, propImgRef)}
                     className={classNames(

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -1,7 +1,6 @@
 import { CSSProperties, useEffect, useMemo, useState } from 'react';
 import { AspectRatio } from '@lumx/react/components';
 import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
-import { RectSize } from '@lumx/react/utils/type';
 
 // Calculate shift to center the focus point in the container.
 export function shiftPosition({
@@ -25,6 +24,8 @@ export function shiftPosition({
     return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
 
+type Size = { width: number; height: number };
+
 // Compute CSS properties to apply the focus point.
 export const useFocusPointStyle = (
     { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,
@@ -32,7 +33,7 @@ export const useFocusPointStyle = (
     isLoaded: boolean,
 ): CSSProperties => {
     // Get natural image size from imgProps or img element.
-    const imageSize: RectSize | undefined = useMemo(() => {
+    const imageSize: Size | undefined = useMemo(() => {
         // Focus point is not applicable => exit early
         if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;
         if (typeof width === 'number' && typeof height === 'number') return { width, height };
@@ -41,7 +42,7 @@ export const useFocusPointStyle = (
     }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
 
     // Get container size (dependant on imageSize).
-    const [containerSize, setContainerSize] = useState<RectSize | undefined>(undefined);
+    const [containerSize, setContainerSize] = useState<Size | undefined>(undefined);
     useEffect(
         function updateContainerSize() {
             const cWidth = element?.offsetWidth;

package/src/hooks/useOnResize.ts

@@ -0,0 +1,41 @@
+import { Callback, Falsy } from '@lumx/react/utils/type';
+import { MutableRefObject, RefObject, useEffect, useRef } from 'react';
+import { WINDOW } from '@lumx/react/constants';
+import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
+
+const ResizeObserver: typeof Polyfill = (WINDOW as any)?.ResizeObserver || Polyfill;
+
+export function useOnResize(element: HTMLElement | Falsy, update: RefObject<Callback>): void {
+    const observerRef = useRef(null) as MutableRefObject<Polyfill | null>;
+    const previousSize = useRef<{ width: number; height: number }>();
+
+    useEffect(() => {
+        if (!element || !update) {
+            return undefined;
+        }
+
+        previousSize.current = undefined;
+        const observer =
+            observerRef.current ||
+            new ResizeObserver(([entry]) => {
+                const updateFunction = update.current;
+                if (!updateFunction) {
+                    return;
+                }
+
+                const { width, height } = entry.contentRect;
+                if (previousSize.current?.width === width && previousSize.current?.height === height) {
+                    return;
+                }
+
+                window.requestAnimationFrame(() => updateFunction());
+                previousSize.current = entry.contentRect;
+            });
+        if (!observerRef.current) observerRef.current = observer;
+
+        observer.observe(element);
+        return () => {
+            observer.unobserve(element);
+        };
+    }, [element, update]);
+}

package/src/index.ts

@@ -25,7 +25,6 @@ export * from './components/grid';
 export * from './components/grid-column';
 export * from './components/icon';
 export * from './components/image-block';
-export * from './components/image-lightbox';
 export * from './components/inline-list';
 export * from './components/input-helper';
 export * from './components/input-label';

package/src/utils/type.ts

@@ -139,18 +139,3 @@ export type ComponentRef<C> = C extends keyof JSX.IntrinsicElements
       : C extends React.JSXElementConstructor<{ ref?: infer R }>
         ? R
         : never;
-
-/**
- * Rectangle size
- */
-export type RectSize = { width: number; height: number };
-
-/**
- * Maybe a HTMLElement or a React ref of a HTMLElement
- */
-export type MaybeElementOrRef<E extends HTMLElement> = E | React.RefObject<E | null> | null | undefined;
-
-/**
- * A point coordinate in 2D space
- */
-export type Point = { x: number; y: number };

package/src/components/image-lightbox/ImageLightbox.stories.tsx

@@ -1,165 +0,0 @@
-import React from 'react';
-import { IMAGES } from '@lumx/react/stories/controls/image';
-import { Button, Mosaic, ImageLightbox, ImageLightboxProps, Chip, ChipGroup } from '@lumx/react';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-
-const ZOOM_PROPS = {
-    zoomInButtonProps: { label: 'Zoom in' },
-    zoomOutButtonProps: { label: 'Zoom out' },
-};
-
-const SLIDESHOW_PROPS = {
-    slideshowControlsProps: {
-        nextButtonProps: { label: 'Next' },
-        previousButtonProps: { label: 'Previous' },
-        paginationItemProps: (index: number) => ({ label: `Go to slide ${index + 1}` }),
-    },
-};
-
-const MULTIPLE_IMAGES: ImageLightboxProps['images'] = [
-    {
-        image: 'https://picsum.photos/id/237/2000/3000',
-        alt: 'Image 1',
-        title: 'Little puppy',
-        description: 'A black labrador puppy with big brown eyes, looking up with a curious and innocent expression.',
-        tags: (
-            <ChipGroup>
-                <Chip theme="dark" size="s">
-                    Tag 1
-                </Chip>
-                <Chip theme="dark" size="s">
-                    Tag 2
-                </Chip>
-            </ChipGroup>
-        ),
-    },
-    {
-        image: 'https://picsum.photos/id/337/3000/1000',
-        alt: 'Image 2',
-        // Intentionally using the wrong size to see how it renders while loading the image
-        imgProps: { width: '300px', height: '100px' },
-    },
-    {
-        image: 'https://picsum.photos/id/437/2000/2000',
-        alt: 'Image 3',
-    },
-    {
-        image: 'https://picsum.photos/id/537/300/400',
-        alt: 'Image 4',
-    },
-    {
-        image: 'https://picsum.photos/id/637/400/200',
-        alt: 'Image 5',
-    },
-    {
-        image: 'https://picsum.photos/id/737/300/300',
-        alt: 'Image 6',
-    },
-];
-
-export default {
-    title: 'LumX components/image-lightbox/ImageLightbox',
-    component: ImageLightbox,
-    args: {
-        closeButtonProps: { label: 'Close' },
-    },
-    argTypes: {
-        onClose: { action: true },
-    },
-};
-
-/**
- * Display a single image fullscreen in the ImageLightbox
- */
-export const SingleImage = {
-    args: {
-        images: [{ image: IMAGES.portrait1s200, alt: 'Image 1' }],
-        isOpen: true,
-    },
-};
-
-/**
- * Display a single image fullscreen in the ImageLightbox with zoom controls
- */
-export const SingleImageWithZoom = {
-    ...SingleImage,
-    args: { ...SingleImage.args, ...ZOOM_PROPS },
-};
-
-/**
- * Display a single image fullscreen in the ImageLightbox with metadata (title, description, etc.)
- */
-export const SingleImageWithMetadata = {
-    ...SingleImage,
-    args: { ...SingleImage.args, images: [MULTIPLE_IMAGES[0]] },
-};
-
-/**
- * Display a multiple image fullscreen in the ImageLightbox
- */
-export const MultipleImages = {
-    args: {
-        images: MULTIPLE_IMAGES,
-        isOpen: true,
-        ...SLIDESHOW_PROPS,
-    },
-};
-
-/**
- * Display a multiple images fullscreen in the ImageLightbox with zoom controls
- */
-export const MultipleImagesWithZoom = {
-    ...MultipleImages,
-    args: { ...MultipleImages.args, ...ZOOM_PROPS },
-};
-
-/**
- * Open ImageLightbox via buttons
- */
-export const WithButtonTrigger = {
-    decorators: [
-        (Story: any, { args }: any) => {
-            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox({
-                images: [
-                    { image: IMAGES.portrait1s200, alt: 'Image 1' },
-                    { image: IMAGES.landscape1s200, alt: 'Image 2' },
-                ],
-            });
-            return (
-                <>
-                    <Story args={{ ...args, ...imageLightboxProps }} />
-                    <Button {...(getTriggerProps({ activeImageIndex: 0 }) as any)}>Image 1</Button>
-                    <Button {...(getTriggerProps({ activeImageIndex: 1 }) as any)}>Image 2</Button>
-                </>
-            );
-        },
-    ],
-    // Disables Chromatic snapshot (not relevant for this story).
-    parameters: { chromatic: { disable: true } },
-};
-
-/**
- * Open ImageLightbox with zoom and slideshow via clickable thumbnails in a Mosaic
- */
-export const WithMosaicTrigger = {
-    args: { ...SLIDESHOW_PROPS, ...ZOOM_PROPS },
-    decorators: [
-        (Story: any, { args }: any) => {
-            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox({ images: MULTIPLE_IMAGES });
-            return (
-                <>
-                    <Story args={{ ...args, ...imageLightboxProps }} />
-                    <Mosaic
-                        thumbnails={MULTIPLE_IMAGES.map((image, index) => ({
-                            ...image,
-                            ...getTriggerProps({ activeImageIndex: index }),
-                        }))}
-                    />
-                </>
-            );
-        },
-        withWrapper({ style: { width: 300 } }),
-    ],
-    // Disables Chromatic snapshot (not relevant for this story).
-    parameters: { chromatic: { disable: true } },
-};