@lumx/react 3.8.1-alpha.0 → 3.8.1

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.8.1-alpha.0",
-        "@lumx/icons": "^3.8.1-alpha.0",
+        "@lumx/core": "^3.8.1",
+        "@lumx/icons": "^3.8.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -111,5 +111,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.8.1-alpha.0"
+    "version": "3.8.1"
 }

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

@@ -3,7 +3,10 @@ import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { toNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+
 import { ImageBlock, ImageBlockProps } from './ImageBlock';
+import { FullFeatured } from './ImageBlock.stories';
 
 const CLASSNAME = ImageBlock.className as string;
 
@@ -14,6 +17,31 @@ const setup = (props: Partial<ImageBlockProps> = {}) => {
 };
 
 describe(`<${ImageBlock.displayName}>`, () => {
+    it('should render caption elements', () => {
+        const props = {
+            ...toNestedProps(FullFeatured.args),
+            titleProps: { className: 'custom-title-class' },
+            descriptionProps: { className: 'custom-description-class' },
+        };
+        const { imageBlock } = setup(props);
+        const wrapper = queryByClassName(imageBlock as HTMLElement, 'lumx-image-block__wrapper');
+        expect(wrapper).toBeInTheDocument();
+
+        const caption = queryByClassName(wrapper as HTMLElement, 'lumx-image-block__caption');
+        expect(caption).toBeInTheDocument();
+
+        const title = queryByClassName(caption as HTMLElement, 'lumx-image-block__title');
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveClass(props.titleProps.className);
+
+        const description = queryByClassName(caption as HTMLElement, 'lumx-image-block__description');
+        expect(description).toBeInTheDocument();
+        expect(description).toHaveClass(props.descriptionProps.className);
+
+        const tags = queryByClassName(wrapper as HTMLElement, 'lumx-image-block__tags');
+        expect(tags).toBeInTheDocument();
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

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

@@ -81,6 +81,7 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
         captionStyle,
         className,
         description,
+        descriptionProps,
         fillHeight,
         image,
         size,
@@ -88,6 +89,7 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
         theme,
         thumbnailProps,
         title,
+        titleProps,
         ...forwardedProps
     } = props;
     return (
@@ -118,10 +120,12 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
             />
             <ImageCaption
                 as="figcaption"
-                className={`${CLASSNAME}__wrapper`}
+                baseClassName={CLASSNAME}
                 theme={theme}
                 title={title}
+                titleProps={titleProps}
                 description={description}
+                descriptionProps={descriptionProps}
                 tags={tags}
                 captionStyle={captionStyle}
                 align={align}

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

@@ -1,15 +1,22 @@
 import React, { CSSProperties, ReactNode } from 'react';
 
 import { FlexBox, HorizontalAlignment, Text, TextProps } from '@lumx/react';
-import { HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
+import { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
+import classNames from 'classnames';
 
 type As = 'div' | 'figcaption';
 
+type ForwardedTextProps = Omit<TextProps, 'as' | 'typography' | 'color' | 'colorVariant'>;
+
 export type ImageCaptionMetadata = {
     /** Image title to display in the caption. */
     title?: string;
+    /** Props to pass to the title. */
+    titleProps?: ForwardedTextProps;
     /** Image description. Can be either a string, or sanitized html. */
     description?: string | { __html: string };
+    /** Props to pass to the title. */
+    descriptionProps?: ForwardedTextProps;
     /** Tag content. */
     tags?: ReactNode;
     /** Caption custom CSS style. */
@@ -17,9 +24,10 @@ export type ImageCaptionMetadata = {
 };
 
 export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &
-    HasClassName &
     HasPolymorphicAs<AS> &
     ImageCaptionMetadata & {
+        /** Base className for sub elements */
+        baseClassName?: string;
         /** Alignment. */
         align?: HorizontalAlignment;
         /** Truncate text on title & description (no line wrapping). */
@@ -28,7 +36,19 @@ export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &
 
 /** Internal component used to render image captions */
 export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
-    const { className, theme, as = 'figcaption', title, description, tags, captionStyle, align, truncate } = props;
+    const {
+        baseClassName,
+        theme,
+        as = 'figcaption',
+        title,
+        titleProps,
+        description,
+        descriptionProps,
+        tags,
+        captionStyle,
+        align,
+        truncate,
+    } = props;
     if (!title && !description && !tags) return null;
 
     const titleColor = { color: theme === 'dark' ? 'light' : 'dark' } as const;
@@ -41,7 +61,7 @@ export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
     return (
         <FlexBox
             as={as}
-            className={className}
+            className={classNames(baseClassName && `${baseClassName}__wrapper`)}
             style={captionStyle}
             orientation="vertical"
             vAlign={align}
@@ -49,17 +69,43 @@ export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
             gap="regular"
         >
             {(title || description) && (
-                <Text as="p" truncate={truncate} {...baseColor}>
+                <Text
+                    as="p"
+                    className={classNames(baseClassName && `${baseClassName}__caption`)}
+                    truncate={truncate}
+                    {...baseColor}
+                >
                     {title && (
-                        <Text as="span" typography="subtitle1" {...titleColor}>
+                        <Text
+                            {...titleProps}
+                            as="span"
+                            className={classNames(titleProps?.className, baseClassName && `${baseClassName}__title`)}
+                            typography="subtitle1"
+                            {...titleColor}
+                        >
                             {title}
                         </Text>
                     )}{' '}
-                    {description && <Text as="span" typography="body1" {...descriptionContent} />}
+                    {description && (
+                        <Text
+                            {...descriptionProps}
+                            as="span"
+                            className={classNames(
+                                descriptionProps?.className,
+                                baseClassName && `${baseClassName}__description`,
+                            )}
+                            typography="body1"
+                            {...descriptionContent}
+                        />
+                    )}
                 </Text>
             )}
             {tags && (
-                <FlexBox orientation="horizontal" vAlign={align}>
+                <FlexBox
+                    className={classNames(baseClassName && `${baseClassName}__tags`)}
+                    orientation="horizontal"
+                    vAlign={align}
+                >
                     {tags}
                 </FlexBox>
             )}

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/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 } },
-};