@lumx/react 3.8.0 → 3.8.1

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.8.0",
-        "@lumx/icons": "^3.8.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.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>
             )}