@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

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

@@ -1,117 +0,0 @@
-import {
-    Alignment,
-    AspectRatio,
-    Chip,
-    ChipGroup,
-    HorizontalAlignment,
-    IconButton,
-    ImageBlock,
-    ImageBlockCaptionPosition,
-    ImageBlockSize,
-    Size,
-} from '@lumx/react';
-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 { 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 WithCaptionBelow = {
-    args: {
-        captionPosition: ImageBlockCaptionPosition.below,
-        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 = {
-    args: {
-        ...WithCaptionBelow.args,
-        image: LANDSCAPE_IMAGES.landscape1s200,
-        size: undefined,
-        align: Alignment.center,
-    },
-};
-
-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 = {
-    args: {
-        size: Size.xxl,
-        actions: <IconButton label="Edit" icon={mdiFileEdit} />,
-    },
-};
-
-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 = {
-    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,
-    },
-};
-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.test.tsx

@@ -1,58 +0,0 @@
-import { commonTestsSuiteRTL, SetupRenderOptions } 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 { Thumbnail } from '@lumx/react';
-import { ImageBlock, ImageBlockProps } from './ImageBlock';
-import { FullFeatured } from './ImageBlock.stories';
-
-const CLASSNAME = ImageBlock.className as string;
-
-const setup = (props: Partial<ImageBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<ImageBlock {...(props as any)} />, { wrapper });
-    const imageBlock = queryByClassName(document.body, CLASSNAME);
-    const thumbnail = queryByClassName(imageBlock as any, Thumbnail.className as string);
-    return { props, imageBlock, thumbnail };
-};
-
-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,
-        forwardClassName: 'imageBlock',
-        forwardAttributes: 'imageBlock',
-        applyTheme: {
-            affects: [{ element: 'imageBlock' }, { element: 'thumbnail' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

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

@@ -1,142 +0,0 @@
-import { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
-
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { ThumbnailProps } from '../thumbnail/Thumbnail';
-import { ImageCaption, ImageCaptionMetadata } from './ImageCaption';
-
-/**
- * Image block variants.
- */
-export const ImageBlockCaptionPosition = {
-    below: 'below',
-    over: 'over',
-} as const;
-export type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;
-
-/**
- *  Image block sizes.
- */
-export type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;
-
-/**
- * Defines the props of the component.
- */
-export interface ImageBlockProps extends GenericProps, HasTheme, ImageCaptionMetadata {
-    /** Action toolbar content. */
-    actions?: ReactNode;
-    /** Alignment. */
-    align?: HorizontalAlignment;
-    /** Image alternative text. */
-    alt: string;
-    /** Caption position. */
-    captionPosition?: ImageBlockCaptionPosition;
-    /** Whether the image has to fill its container height or not. */
-    fillHeight?: boolean;
-    /** Image URL. */
-    image: string;
-    /** Size variant. */
-    size?: ImageBlockSize;
-    /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
-    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ImageBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ImageBlockProps> = {
-    captionPosition: ImageBlockCaptionPosition.below,
-    align: Alignment.left,
-};
-
-/**
- * ImageBlock component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ImageBlock = forwardRef<ImageBlockProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        actions,
-        align = DEFAULT_PROPS.align,
-        alt,
-        captionPosition = DEFAULT_PROPS.captionPosition,
-        captionStyle,
-        className,
-        description,
-        descriptionProps,
-        fillHeight,
-        image,
-        size,
-        tags,
-        theme = defaultTheme,
-        thumbnailProps,
-        title,
-        titleProps,
-        ...forwardedProps
-    } = props;
-    return (
-        <figure
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    captionPosition,
-                    align,
-                    size,
-                    theme,
-                }),
-                fillHeight && `${CLASSNAME}--fill-height`,
-            )}
-        >
-            <Thumbnail
-                {...thumbnailProps}
-                className={classNames(`${CLASSNAME}__image`, thumbnailProps?.className)}
-                fillHeight={fillHeight}
-                align={align}
-                image={image}
-                size={size}
-                theme={theme}
-                alt={(alt || title) as string}
-            />
-            <ImageCaption
-                as="figcaption"
-                baseClassName={CLASSNAME}
-                theme={theme}
-                title={title}
-                titleProps={titleProps}
-                description={description}
-                descriptionProps={descriptionProps}
-                tags={tags}
-                captionStyle={captionStyle}
-                align={align}
-                truncate={captionPosition === 'over'}
-            />
-            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
-        </figure>
-    );
-});
-ImageBlock.displayName = COMPONENT_NAME;
-ImageBlock.className = CLASSNAME;
-ImageBlock.defaultProps = DEFAULT_PROPS;

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

@@ -1,115 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-
-import { FlexBox, HorizontalAlignment, Text, TextProps, useTheme } from '@lumx/react';
-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. */
-    captionStyle?: CSSProperties;
-};
-
-export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &
-    HasPolymorphicAs<AS> &
-    ImageCaptionMetadata & {
-        /** Base className for sub elements */
-        baseClassName?: string;
-        /** Alignment. */
-        align?: HorizontalAlignment;
-        /** Truncate text on title & description (no line wrapping). */
-        truncate?: TextProps['truncate'];
-    };
-
-/** Internal component used to render image captions */
-export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
-    const defaultTheme = useTheme();
-    const {
-        baseClassName,
-        theme = defaultTheme,
-        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;
-    const baseColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;
-
-    // Display description as string or HTML
-    const descriptionContent =
-        typeof description === 'string' ? { children: description } : { dangerouslySetInnerHTML: description };
-
-    return (
-        <FlexBox
-            as={as}
-            className={classNames(baseClassName && `${baseClassName}__wrapper`)}
-            style={captionStyle}
-            orientation="vertical"
-            vAlign={align}
-            hAlign={align === 'center' ? align : undefined}
-            gap="regular"
-        >
-            {(title || description) && (
-                <Text
-                    as="p"
-                    className={classNames(baseClassName && `${baseClassName}__caption`)}
-                    truncate={truncate}
-                    {...baseColor}
-                >
-                    {title && (
-                        <Text
-                            {...titleProps}
-                            as="span"
-                            className={classNames(titleProps?.className, baseClassName && `${baseClassName}__title`)}
-                            typography="subtitle1"
-                            {...titleColor}
-                        >
-                            {title}
-                        </Text>
-                    )}{' '}
-                    {description && (
-                        <Text
-                            {...descriptionProps}
-                            as="span"
-                            className={classNames(
-                                descriptionProps?.className,
-                                baseClassName && `${baseClassName}__description`,
-                            )}
-                            typography="body1"
-                            {...descriptionContent}
-                        />
-                    )}
-                </Text>
-            )}
-            {tags && (
-                <FlexBox
-                    className={classNames(baseClassName && `${baseClassName}__tags`)}
-                    orientation="horizontal"
-                    vAlign={align}
-                >
-                    {tags}
-                </FlexBox>
-            )}
-        </FlexBox>
-    );
-};

package/src/components/image-block/index.ts

@@ -1 +0,0 @@
-export * from './ImageBlock';

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

@@ -1,160 +0,0 @@
-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 size="s">Tag 1</Chip>
-                <Chip 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 } },
-};