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

package/src/components/icon/Icon.tsx

@@ -0,0 +1,133 @@
+import classNames from 'classnames';
+
+import { mdiAlertCircle } from '@lumx/icons';
+import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/core/js/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+
+export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface IconProps extends GenericProps, HasTheme {
+    /** Color variant. */
+    color?: ColorWithVariants;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Whether the icon has a shape. */
+    hasShape?: boolean;
+    /**
+     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+     */
+    icon: string;
+    /** Size variant. */
+    size?: IconSizes;
+    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+    alt?: string;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Icon';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<IconProps> = {};
+
+/**
+ * Icon component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
+    const defaultTheme = useTheme();
+    const {
+        className,
+        color: propColor,
+        colorVariant: propColorVariant,
+        hasShape,
+        icon,
+        size,
+        theme = defaultTheme,
+        alt,
+        ...forwardedProps
+    } = props;
+    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
+
+    // Color
+    let iconColor = color;
+    if (!iconColor && (hasShape || theme)) {
+        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+    }
+
+    // Color variant
+    let iconColorVariant = colorVariant;
+    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
+        iconColorVariant = 'L2';
+    }
+
+    // Size
+    let iconSize = size;
+    if (size && hasShape) {
+        if (size === Size.xxs || size === Size.xs) {
+            iconSize = Size.s;
+        } else if (size === Size.xxl) {
+            iconSize = Size.xl;
+        }
+    } else if (hasShape) {
+        iconSize = Size.m;
+    }
+
+    return (
+        <i
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    color: iconColor,
+                    colorVariant: iconColorVariant,
+                    hasShape,
+                    prefix: CLASSNAME,
+                    theme,
+                    size: iconSize,
+                }),
+                !hasShape && `${CLASSNAME}--no-shape`,
+                !hasShape &&
+                    iconColor === ColorPalette.yellow &&
+                    icon === mdiAlertCircle &&
+                    `${CLASSNAME}--has-dark-layer`,
+                `${CLASSNAME}--path`,
+            )}
+        >
+            <svg
+                aria-hidden={alt ? undefined : 'true'}
+                role={alt ? 'img' : undefined}
+                aria-label={alt}
+                height="1em"
+                preserveAspectRatio="xMidYMid meet"
+                style={{ verticalAlign: '-0.125em' }}
+                viewBox="0 0 24 24"
+                width="1em"
+            >
+                <path d={icon} fill="currentColor" />
+            </svg>
+        </i>
+    );
+});
+Icon.displayName = COMPONENT_NAME;
+Icon.className = CLASSNAME;
+Icon.defaultProps = DEFAULT_PROPS;

package/src/components/icon/index.ts

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

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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,115 @@
+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

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