@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/icon/Icon.tsx

@@ -1,135 +0,0 @@
-import React from 'react';
-
-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

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

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

@@ -1,119 +0,0 @@
-import React from 'react';
-
-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,59 +0,0 @@
-import React from 'react';
-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 React, { 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 React, { 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';