@lumx/react 3.7.6-alpha.7 → 3.7.6-alpha.8

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.6-alpha.7",
-        "@lumx/icons": "^3.7.6-alpha.7",
+        "@lumx/core": "^3.7.6-alpha.8",
+        "@lumx/icons": "^3.7.6-alpha.8",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.6-alpha.7"
+    "version": "3.7.6-alpha.8"
 }

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

@@ -3,12 +3,12 @@ import React, { forwardRef, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
+
 import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { ThumbnailProps } from '../thumbnail/Thumbnail';
 import { ImageCaption, ImageCaptionMetadata } from './ImageCaption';
-import { CLASSNAME, COMPONENT_NAME } from './constants';
 
 /**
  * Image block variants.
@@ -46,6 +46,16 @@ export interface ImageBlockProps extends GenericProps, HasTheme, ImageCaptionMet
     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.
  */
@@ -107,11 +117,14 @@ export const ImageBlock: Comp<ImageBlockProps, HTMLDivElement> = forwardRef((pro
                 alt={(alt || title) as string}
             />
             <ImageCaption
+                className={`${CLASSNAME}__wrapper`}
+                theme={theme}
                 title={title}
                 description={description}
                 tags={tags}
                 captionStyle={captionStyle}
                 align={align}
+                truncate={captionPosition === 'over'}
             />
             {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
         </figure>

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

@@ -1,8 +1,7 @@
 import React, { CSSProperties, ReactNode } from 'react';
 
 import { FlexBox, HorizontalAlignment, Text } from '@lumx/react';
-import { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
-import { CLASSNAME } from './constants';
+import { HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 
 type As = 'div' | 'figcaption';
 
@@ -18,19 +17,22 @@ export type ImageCaptionMetadata = {
 };
 
 export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &
+    HasClassName &
     HasPolymorphicAs<AS> &
     ImageCaptionMetadata & {
         /** Alignment. */
         align?: HorizontalAlignment;
+        /** Truncate title & description */
+        truncate?: boolean;
     };
 
 /** Internal component used to render image captions */
 export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
-    const { theme, as = 'figcaption', title, description, tags, captionStyle, align } = props;
+    const { className, theme, as = 'figcaption', title, description, tags, captionStyle, align, truncate } = props;
     if (!title && !description && !tags) return null;
 
-    const titleColor = theme === 'dark' ? ({ color: 'light' } as const) : undefined;
-    const descriptionColor = theme === 'dark' ? ({ color: 'light', colorVariant: 'L2' } as const) : undefined;
+    const titleColor = { color: theme === 'dark' ? 'light' : 'dark' } as const;
+    const descriptionColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;
 
     // Display description as string or HTML
     const descriptionContent =
@@ -39,32 +41,25 @@ export const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {
     return (
         <FlexBox
             as={as}
-            className={`${CLASSNAME}__wrapper`}
+            className={className}
             style={captionStyle}
             orientation="horizontal"
             vAlign={align}
+            hAlign={align === 'center' ? align : undefined}
+            gap="regular"
         >
             {(title || description) && (
-                <div className={`${CLASSNAME}__caption`}>
+                <Text as="p" truncate={truncate}>
                     {title && (
-                        <Text as="span" className={`${CLASSNAME}__title`} {...titleColor}>
+                        <Text as="span" typography="subtitle1" {...titleColor}>
                             {title}
                         </Text>
-                    )}
-                    {/* Add an `&nbsp;` when there is description and title. */}
-                    {title && description && '\u00A0'}
-                    {description && (
-                        <Text
-                            as="span"
-                            className={`${CLASSNAME}__description`}
-                            {...descriptionColor}
-                            {...descriptionContent}
-                        />
-                    )}
-                </div>
+                    )}{' '}
+                    {description && <Text as="span" typography="body1" {...descriptionColor} {...descriptionContent} />}
+                </Text>
             )}
             {tags && (
-                <FlexBox orientation="horizontal" vAlign={align} className={`${CLASSNAME}__tags`}>
+                <FlexBox orientation="horizontal" vAlign={align}>
                     {tags}
                 </FlexBox>
             )}

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

@@ -1,11 +0,0 @@
-import { getRootClassName } from '@lumx/react/utils/className';
-
-/**
- * Component display name.
- */
-export const COMPONENT_NAME = 'ImageBlock';
-
-/**
- * Component default class name and class prefix.
- */
-export const CLASSNAME = getRootClassName(COMPONENT_NAME);