@lumx/core 4.14.0-alpha.0 → 4.14.0-alpha.1

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

@@ -0,0 +1,85 @@
+import type { CommonRef, JSXElement, LumxClassName } from '../../types';
+import { GenericBlockGapSize } from './constants';
+import { FlexBoxProps } from '../FlexBox';
+export interface GenericBlockProps extends FlexBoxProps {
+    /**
+     * Component to use as visual element.
+     */
+    figure?: JSXElement;
+    /**
+     * Main content.
+     */
+    content?: JSXElement;
+    /**
+     * Actions to set after the main content.
+     */
+    actions?: JSXElement;
+    /**
+     * Orientation of the 3 sections
+     */
+    orientation?: FlexBoxProps['orientation'];
+    /**
+     * Horizontal alignment.
+     */
+    horizontalAlign?: FlexBoxProps['hAlign'];
+    /**
+     * Vertical alignment.
+     */
+    verticalAlign?: FlexBoxProps['vAlign'];
+    /**
+     * The props to forward to the content.
+     * By default, the content will have the same alignment as wrapper.
+     */
+    contentProps?: Omit<FlexBoxProps, 'children'>;
+    /**
+     * props to forward to the actions element.
+     */
+    actionsProps?: Omit<FlexBoxProps, 'children'>;
+    /**
+     * props to forward to the figure element.
+     */
+    figureProps?: Omit<FlexBoxProps, 'children'>;
+    /**
+     * FlexBox component
+     */
+    FlexBox: (props: FlexBoxProps) => any;
+    /**
+     * Gap space between sections.
+     */
+    gap?: GenericBlockGapSize;
+    /**
+     * reference to the root element
+     */
+    ref?: CommonRef;
+}
+export interface GenericBlockSectionProps extends FlexBoxProps {
+    /**
+     * Gap space between items.
+     */
+    gap?: GenericBlockGapSize;
+}
+export type GenericBlockPropsToOverride = 'FlexBox' | 'content';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "GenericBlock";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<GenericBlockProps>;
+/**
+ * The GenericBlock is a layout component made of 3 sections that can be
+ * displayed either horizontally of vertically with the same gap between each section.
+ *
+ * The sections are:
+ * - `Figure` => A visual element to display before the main content.
+ * - `Content` => The main content displayed
+ * - `Actions` => One or more actions to set after the element.
+ *
+ * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
+ */
+export declare const GenericBlock: (props: GenericBlockProps) => import("react").JSX.Element;

package/js/components/GridColumn/GridColumnStories.d.ts

@@ -0,0 +1,45 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component: GridColumn, }: SetupStoriesOptions<{
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        render: ({ nbItems, ...props }: any) => import("react").JSX.Element;
+        argTypes: {
+            nbItems: {
+                control: string;
+            };
+            gap: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: (import("./GridColumn").GridColumnGapSize | undefined)[];
+                mapping: Record<string, import("./GridColumn").GridColumnGapSize | undefined> | undefined;
+            };
+            itemMinWidth: {
+                control: string;
+            };
+            maxColumns: {
+                control: string;
+            };
+        };
+        args: {
+            nbItems: number;
+            as?: any;
+            children?: import("react").ReactNode;
+            gap?: import("./GridColumn").GridColumnGapSize | undefined;
+            maxColumns?: number | undefined;
+            itemMinWidth?: number | undefined;
+            style?: any;
+            ref?: import("../../types").CommonRef;
+            className?: string | undefined;
+        };
+    };
+    Default: {};
+    Columns: {
+        args: {
+            maxColumns: number;
+            itemMinWidth: number;
+        };
+    };
+};

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

@@ -0,0 +1,2 @@
+export { GridColumn, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from './GridColumn';
+export type { GridColumnProps, GridColumnGapSize } from './GridColumn';

package/js/components/Heading/Stories.d.ts

@@ -0,0 +1,90 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Heading stories for a specific framework (React or Vue).
+ * Framework-specific components (HeadingLevelProvider) are injected via `components`.
+ */
+export declare function setup({ component: Heading, components: { HeadingLevelProvider }, decorators: { withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+    components: {
+        HeadingLevelProvider: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        argTypes: {
+            as: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: import("../../types").HeadingElement[];
+                mapping: Record<string, import("../../types").HeadingElement> | undefined;
+            };
+            children: {
+                control: string;
+            };
+            typography: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button")[];
+                mapping: Record<string, "caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button"> | undefined;
+            };
+            color: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
+                mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
+            };
+            colorVariant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+                mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | undefined;
+            };
+            whiteSpace: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: string[];
+                mapping: Record<string, string> | undefined;
+            };
+        };
+    };
+    /** Default heading with text */
+    Default: {
+        args: {
+            children: string;
+        };
+    };
+    /** All supported heading elements */
+    AllLevels: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            as: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All typography */
+    AllTypography: {
+        args: {
+            children: string;
+        };
+        argTypes: {
+            typography: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Nest HeadingLevelProvider to increment heading levels */
+    NestedHeadingLevelProvider: {
+        render: () => import("react").JSX.Element;
+    };
+};

package/js/components/Icon/Stories.d.ts

@@ -0,0 +1,156 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Icon stories for a specific framework (React or Vue).
+ * Framework-specific components (Text) are injected via `components`.
+ */
+export declare function setup({ component: Icon, components: { Text, GridColumn }, decorators: { withCombinations, withWrapper }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withWrapper';
+    components: {
+        Text: any;
+        GridColumn: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            icon: {
+                control: {
+                    type: string;
+                };
+                options: {
+                    undefined: undefined;
+                    mdiAbTesting: string;
+                    mdiAbjadArabic: string;
+                    mdiAccount: string;
+                    mdiAccountBox: string;
+                    mdiAlert: string;
+                    mdiAlertCircle: string;
+                    mdiArrowDown: string;
+                    mdiArrowUp: string;
+                    mdiAtom: string;
+                    mdiBee: string;
+                    mdiBell: string;
+                    mdiBullhornOutline: string;
+                    mdiCheck: string;
+                    mdiCheckCircle: string;
+                    mdiChevronDown: string;
+                    mdiChevronLeft: string;
+                    mdiChevronRight: string;
+                    mdiChevronUp: string;
+                    mdiClose: string;
+                    mdiCloseCircle: string;
+                    mdiDelete: string;
+                    mdiDotsHorizontal: string;
+                    mdiDragVertical: string;
+                    mdiEarth: string;
+                    mdiEmail: string;
+                    mdiEye: string;
+                    mdiFileEdit: string;
+                    mdiFlag: string;
+                    mdiFolder: string;
+                    mdiFolderGoogleDrive: string;
+                    mdiFoodApple: string;
+                    mdiGoogleCirclesExtended: string;
+                    mdiHeart: string;
+                    mdiHome: string;
+                    mdiImageBroken: string;
+                    mdiInformation: string;
+                    mdiLink: string;
+                    mdiMagnifyMinusOutline: string;
+                    mdiMagnifyPlusOutline: string;
+                    mdiMenuDown: string;
+                    mdiMessageTextOutline: string;
+                    mdiMinus: string;
+                    mdiOpenInNew: string;
+                    mdiPauseCircleOutline: string;
+                    mdiPencil: string;
+                    mdiPlay: string;
+                    mdiPlayCircleOutline: string;
+                    mdiPlus: string;
+                    mdiRadioboxBlank: string;
+                    mdiRadioboxMarked: string;
+                    mdiReply: string;
+                    mdiSend: string;
+                    mdiStar: string;
+                    mdiTextBox: string;
+                    mdiTextBoxPlus: string;
+                    mdiTram: string;
+                    mdiTranslate: string;
+                    mdiViewList: string;
+                };
+            };
+            hasShape: {
+                control: string;
+            };
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("s" | "xxs" | "xs" | "m" | "l" | "xl" | "xxl")[];
+                mapping: Record<string, "s" | "xxs" | "xs" | "m" | "l" | "xl" | "xxl"> | undefined;
+            };
+            color: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
+                mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
+            };
+            colorVariant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+                mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | undefined;
+            };
+        };
+    };
+    /** All combinations of size and shape */
+    SizeAndShape: {
+        args: {
+            icon: string;
+        };
+        argTypes: {
+            hasShape: {
+                control: boolean;
+            };
+            size: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All combinations of color and color variants */
+    AllColors: {
+        args: {
+            size: "m";
+            icon: string;
+        };
+        argTypes: {
+            hasShape: {
+                control: boolean;
+            };
+            color: {
+                control: boolean;
+            };
+            colorVariant: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Icon inside a text component (renders as inline instead of block and can adapt to the verticalAlign) */
+    InsideText: {
+        args: {
+            icon: string;
+            size: string;
+        };
+        argTypes: {
+            verticalAlign: {
+                control: string;
+                options: (string | undefined)[];
+            };
+        };
+        render: (args: any) => import("react").JSX.Element;
+    };
+};

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

@@ -0,0 +1,187 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { ImageBlockCaptionPosition } from '.';
+export declare function setup({ component: ImageBlock, components: { Chip, ChipGroup, IconButton }, decorators: { withNestedProps, withWrapper }, }: SetupStoriesOptions<{
+    decorators: 'withNestedProps' | 'withWrapper';
+    components: {
+        Chip: any;
+        ChipGroup: any;
+        IconButton: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("xl" | "xxl")[];
+                mapping: Record<string, "xl" | "xxl"> | undefined;
+            };
+            image: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: string[];
+                mapping: Record<string, string> | undefined;
+            };
+            captionPosition: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("below" | "over")[];
+                mapping: Record<string, "below" | "over"> | undefined;
+            };
+            'thumbnailProps.aspectRatio': {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free")[];
+                mapping: Record<string, "vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free"> | undefined;
+            };
+            align: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("center" | "right" | "left")[];
+                mapping: Record<string, "center" | "right" | "left"> | undefined;
+            };
+            tags: {
+                control: boolean;
+            };
+            actions: {
+                control: boolean;
+            };
+        };
+        args: {
+            image: string;
+            actions?: import("react").ReactNode;
+            align?: import("../../constants").HorizontalAlignment | undefined;
+            alt?: string | undefined;
+            captionPosition?: ImageBlockCaptionPosition | undefined;
+            fillHeight?: boolean | undefined;
+            size?: import(".").ImageBlockSize | undefined;
+            thumbnailProps?: import("../../types").GenericProps | undefined;
+            ref?: import("../../types").CommonRef;
+            Thumbnail?: any;
+            ImageCaption?: any;
+            className?: string | undefined;
+            theme?: import("../../constants").Theme | undefined;
+            title?: string | undefined;
+            description?: import("react").ReactNode | {
+                __html: string;
+            };
+            titleProps?: import("../../types").GenericProps | undefined;
+            descriptionProps?: import("../../types").GenericProps | undefined;
+            tags?: import("react").ReactNode;
+            captionStyle?: import("../../types").GenericProps | undefined;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    WithCaptionBelow: {
+        args: {
+            captionPosition: "below";
+            size: "xxl";
+            title: string;
+            description: string;
+        };
+    };
+    WithCaptionOver: {
+        args: {
+            captionPosition: "over";
+            size: "xxl";
+            title: string;
+            description: string;
+        };
+    };
+    WithAlign: {
+        args: {
+            image: string;
+            size: undefined;
+            align: "center";
+            captionPosition: "below";
+            title: string;
+            description: string;
+        };
+    };
+    WithTags: {
+        render: ({ tags, ...args }: any) => import("react").JSX.Element;
+        args: {
+            size: "xxl";
+        };
+    };
+    WithActions: {
+        render: ({ actions, ...args }: any) => import("react").JSX.Element;
+        args: {
+            size: "xxl";
+        };
+    };
+    WithFocusPointHorizontal: {
+        args: {
+            size: "xxl";
+            'thumbnailProps.aspectRatio': "vertical";
+            'thumbnailProps.focusPoint.x': number;
+            'thumbnailProps.focusPoint.y': number;
+        };
+        argTypes: {
+            'thumbnailProps.focusPoint.x': {
+                control: {
+                    type: string;
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+            };
+            'thumbnailProps.focusPoint.y': {
+                control: {
+                    type: string;
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+            };
+        };
+    };
+    WithFocusPointVertical: {
+        args: {
+            size: "xxl";
+            image: string;
+            'thumbnailProps.aspectRatio': "horizontal";
+            'thumbnailProps.focusPoint.x': number;
+            'thumbnailProps.focusPoint.y': number;
+        };
+        argTypes: {
+            'thumbnailProps.focusPoint.x': {
+                control: {
+                    type: string;
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+            };
+            'thumbnailProps.focusPoint.y': {
+                control: {
+                    type: string;
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+            };
+        };
+    };
+    FullFeatured: {
+        render: ({ tags, actions, ...args }: any) => import("react").JSX.Element;
+        args: {
+            image: string;
+            size: undefined;
+            align: "center";
+            captionPosition: "below";
+            title: string;
+            description: string;
+            'thumbnailProps.aspectRatio': "horizontal";
+            'thumbnailProps.focusPoint.x': number;
+            'thumbnailProps.focusPoint.y': number;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/InlineList/Stories.d.ts

@@ -0,0 +1,64 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup InlineList stories for a specific framework (React or Vue).
+ * Framework-specific components (Text, Icon) are injected via `components`.
+ */
+export declare function setup({ component: InlineList, components: { Text, Icon }, decorators: { withResizableBox }, }: SetupStoriesOptions<{
+    decorators: 'withResizableBox';
+    components: {
+        Text: any;
+        Icon: any;
+    };
+}>): {
+    meta: {
+        component: any;
+        argTypes: {
+            typography: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button")[];
+                mapping: Record<string, "caption" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "headline" | "display1" | "custom-title1" | "custom-title2" | "custom-title3" | "custom-title4" | "custom-title5" | "custom-title6" | "custom-intro" | "custom-body-large" | "custom-body" | "custom-quote" | "custom-publish-info" | "custom-button"> | undefined;
+            };
+            color: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
+                mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
+            };
+            colorVariant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+                mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | undefined;
+            };
+            children: {
+                control: boolean;
+            };
+        };
+    };
+    WithElements: {
+        render: (args: any) => import("react").JSX.Element;
+    };
+    MixedNoWrapAndTruncate: {
+        args: {
+            typography: string;
+            color: string;
+            colorVariant: string;
+            style: {
+                width: string;
+            };
+        };
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Wrap: {
+        args: {
+            wrap: boolean;
+        };
+        render: ({ children, ...args }: any) => import("react").JSX.Element;
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,53 @@
+import type { ColorVariant, ColorWithVariants, Typography } from '../../constants';
+import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface InlineListProps extends HasClassName {
+    /**
+     * List items to render.
+     */
+    items?: JSXElement[];
+    /**
+     * Text color.
+     */
+    color?: ColorWithVariants;
+    /**
+     * Lightened or darkened variant of the selected color.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * Typography variant.
+     */
+    typography?: Typography;
+    /**
+     * Activate line wrap on overflow.
+     */
+    wrap?: boolean;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "InlineList";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<InlineListProps>;
+/**
+ * InlineList component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const InlineList: {
+    (props: InlineListProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-inline-list";
+    defaultProps: Partial<InlineListProps>;
+};