@lumx/core 4.3.2-alpha.2 → 4.3.2-alpha.20

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

@@ -0,0 +1,167 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/** Shared argTypes for Text (also reused by Heading) */
+export declare const TEXT_ARG_TYPES: {
+    as: {
+        control: {
+            type: "select" | "inline-radio";
+        };
+        options: import("../../types").TextElement[];
+        mapping: Record<string, import("../../types").TextElement> | undefined;
+    };
+    typography: {
+        control: {
+            type: "select" | "inline-radio";
+        };
+        options: ("overline" | "caption" | "body1" | "body2" | "subtitle1" | "subtitle2" | "title" | "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, "overline" | "caption" | "body1" | "body2" | "subtitle1" | "subtitle2" | "title" | "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;
+    };
+};
+/**
+ * Setup Text stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ * Framework-specific render functions or args can be injected via `overrides`.
+ */
+export declare function setup({ component, render, decorators: { withCombinations, withResizableBox }, overrides, }: SetupStoriesOptions<{
+    overrides: 'TestUpdateTruncateTitleLabel' | 'WithIcon';
+    decorators: 'withCombinations' | 'withResizableBox';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        args: {
+            as: string;
+            children: string;
+        };
+        argTypes: {
+            as: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: import("../../types").TextElement[];
+                mapping: Record<string, import("../../types").TextElement> | undefined;
+            };
+            typography: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("overline" | "caption" | "body1" | "body2" | "subtitle1" | "subtitle2" | "title" | "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, "overline" | "caption" | "body1" | "body2" | "subtitle1" | "subtitle2" | "title" | "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 text component as a paragraph */
+    Base: {};
+    /** Long text should wrap by default */
+    LongText: {
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Long text without wrapping */
+    NoWrap: {
+        args: {
+            children: string;
+            noWrap: boolean;
+        };
+    };
+    /** Long text with line breaks */
+    AllWhiteSpace: {
+        args: {
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Long text with single line truncate ellipsis */
+    Truncate: {
+        args: {
+            children: string;
+            truncate: boolean;
+        };
+    };
+    /** Long text with multi line truncate ellipsis */
+    TruncateMultiline: {
+        args: {
+            children: string;
+            truncate: {
+                lines: number;
+            };
+        };
+    };
+    /** Text containing icons (should match font size) */
+    WithIcon: {
+        [x: string]: any;
+    };
+    /** All typographies */
+    AllTypography: {
+        argTypes: {
+            typography: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** All combinations of color and color variants */
+    AllColors: {
+        argTypes: {
+            color: {
+                control: boolean;
+            };
+            colorVariant: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** Test the update of the `title` attribute when text overflows */
+    TestUpdateTruncateTitleLabel: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+        tags: string[];
+    };
+};

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

@@ -0,0 +1,10 @@
+import { SetupOptions } from '@lumx/core/testing';
+import { TextProps } from '.';
+type SetupProps = Partial<TextProps>;
+export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<TextProps>) => {
+    props: TextProps;
+    container: any;
+    element: HTMLElement;
+};
+declare const _default: (renderOptions: SetupOptions<TextProps>) => void;
+export default _default;