@lumx/core 4.9.0-next.11 → 4.9.0-next.12

package/js/components/ImageBlock/ImageCaption.d.ts

@@ -0,0 +1,32 @@
+import { HorizontalAlignment } from '../../constants';
+import { GenericProps, HasPolymorphicAs, HasTheme, JSXElement } from '../../types';
+export type As = 'div' | 'figcaption';
+export type ImageCaptionMetadata = {
+    /** Image title to display in the caption. */
+    title?: string;
+    /** Props to pass to the title. */
+    titleProps?: GenericProps;
+    /** Image description. Can be either a string, ReactNode, or sanitized html object. */
+    description?: JSXElement | {
+        __html: string;
+    };
+    /** Props to pass to the title. */
+    descriptionProps?: GenericProps;
+    /** Tag content. */
+    tags?: JSXElement;
+    /** Caption custom CSS style. */
+    captionStyle?: GenericProps;
+    FlexBox: any;
+    Text: any;
+};
+export type ImageCaptionPropsToOverride = 'FlexBox' | 'Text' | 'titleProps' | 'descriptionProps' | 'captionStyle';
+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?: boolean;
+};
+/** Internal component used to render image captions */
+export declare const ImageCaption: <AS extends As>(props: ImageCaptionProps<AS>) => import("react").JSX.Element | null;

package/js/components/ImageBlock/Tests.d.ts

@@ -0,0 +1,11 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    imageBlock: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/ImageBlock/index.d.ts

@@ -0,0 +1,62 @@
+import { HorizontalAlignment, Size } from '../../constants';
+import type { CommonRef, HasClassName, JSXElement, LumxClassName, GenericProps, HasTheme, ValueOf } from '../../types';
+import { ImageCaptionMetadata } from './ImageCaption';
+/**
+ * Image block variants.
+ */
+export declare const ImageBlockCaptionPosition: {
+    readonly below: "below";
+    readonly over: "over";
+};
+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 HasClassName, HasTheme, ImageCaptionMetadata {
+    /** Action toolbar content. */
+    actions?: JSXElement;
+    /** 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?: GenericProps;
+    /** reference to the root element */
+    ref?: CommonRef;
+    /** component for rendering the thumbnail */
+    Thumbnail: any;
+    /** component for rendering the image caption */
+    ImageCaption: any;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "ImageBlock";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ImageBlockProps>;
+/**
+ * ImageBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const ImageBlock: (props: ImageBlockProps) => import("react").JSX.Element;

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.9.0-next.11",
+        "@lumx/icons": "^4.9.0-next.12",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -69,7 +69,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.9.0-next.11",
+    "version": "4.9.0-next.12",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",