@lumx/core 4.3.2-alpha.4 → 4.3.2-alpha.40

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

@@ -0,0 +1,94 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup Switch 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 }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            onChange: {
+                action: boolean;
+            };
+            name: {
+                control: boolean;
+            };
+            value: {
+                control: boolean;
+            };
+            position: {
+                control: string;
+                options: string[];
+            };
+        };
+        args: {
+            isChecked: boolean;
+            name: string;
+            value: string;
+            helper?: string | undefined;
+            id?: string | undefined;
+            label?: import("react").ReactNode;
+            inputProps?: Record<string, any> | undefined;
+            inputRef?: import("../../types").CommonRef;
+            inputId?: string | undefined;
+            handleChange?: ((isChecked: boolean, value?: string, name?: string, event?: any) => void) | undefined;
+            position?: "left" | "right" | undefined;
+            ref?: import("../../types").CommonRef;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
+            isDisabled?: boolean | undefined;
+            disabled?: boolean | undefined;
+            checked?: boolean | undefined;
+        };
+    };
+    /** Default switch */
+    Default: {};
+    /** With label and helper */
+    LabelAndHelper: {
+        argTypes: {
+            label: {
+                control: string;
+            };
+            helper: {
+                control: string;
+            };
+        };
+        args: {
+            label: string;
+            helper: string;
+        };
+    };
+    /** With position right */
+    PositionRight: {
+        argTypes: {
+            position: {
+                control: boolean;
+            };
+        };
+        args: {
+            label: string;
+            position: string;
+        };
+    };
+    /** Disabled */
+    Disabled: {
+        argTypes: {
+            isDisabled: {
+                control: boolean;
+            };
+            'aria-disabled': {
+                control: boolean;
+            };
+        };
+        args: {
+            label: string;
+            helper: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,15 @@
+import { SetupOptions } from '../../../testing';
+import { SwitchProps } from '.';
+type SetupProps = Partial<SwitchProps>;
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<SwitchProps>) => {
+    switchWrapper: HTMLElement;
+    helper: HTMLElement | null;
+    label: HTMLElement | null;
+    input: HTMLElement;
+    props: SwitchProps;
+};
+declare const _default: (renderOptions: SetupOptions<SwitchProps>) => void;
+export default _default;

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

@@ -0,0 +1,47 @@
+import type { JSXElement, LumxClassName, HasTheme, HasAriaDisabled, HasDisabled, HasClassName, HasChecked, CommonRef } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface SwitchProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked {
+    /** Helper text. */
+    helper?: string;
+    /** Native input id property. */
+    id?: string;
+    /** Label text. */
+    label?: JSXElement;
+    /** Native input name property. */
+    name?: string;
+    /** Native input value property. */
+    value?: string;
+    /** optional props for input */
+    inputProps?: Record<string, any>;
+    /** Native input ref. */
+    inputRef?: CommonRef;
+    /** Native input id. */
+    inputId: string;
+    /** On change callback. */
+    handleChange?(isChecked: boolean, value?: string, name?: string, event?: any): void;
+    /** Position of the switch relative to the label. */
+    position?: 'left' | 'right';
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Switch";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<SwitchProps>;
+/**
+ * Switch component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Switch: (props: SwitchProps) => import("react").JSX.Element;

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

@@ -0,0 +1,25 @@
+import type { SetupStoriesOptions } from '../../../stories/types';
+export declare function setup({ component, overrides, }: SetupStoriesOptions<{
+    overrides: 'Default' | 'WithHeader';
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        args: {
+            hasBefore: boolean;
+            hasDividers: boolean;
+            children?: import("react").ReactNode;
+            ref?: import("../../types").CommonRef;
+            theme?: import("../../constants").Theme | undefined;
+            className?: string | undefined;
+        };
+    };
+    /** Simple table */
+    Default: {
+        [x: string]: any;
+    };
+    /** Table with header */
+    WithHeader: {
+        [x: string]: any;
+    };
+};

package/js/components/Table/TableCell.d.ts

@@ -0,0 +1,55 @@
+import type { JSXElement, HasClassName, CommonRef, ValueOf } from '../../types';
+/**
+ * Table head cell sort order.
+ */
+export declare const ThOrder: {
+    readonly asc: "asc";
+    readonly desc: "desc";
+};
+export type ThOrder = ValueOf<typeof ThOrder>;
+/**
+ * Table cell variants.
+ */
+export declare const TableCellVariant: {
+    readonly body: "body";
+    readonly head: "head";
+};
+export type TableCellVariant = ValueOf<typeof TableCellVariant>;
+/**
+ * Defines the props of the component.
+ */
+export interface TableCellProps extends HasClassName {
+    /** Icon (SVG path).(thead only). */
+    icon?: string;
+    /** Whether the column is sortable or not (thead only). */
+    isSortable?: boolean;
+    /** Sort order displayed as icon (sortable thead only). */
+    sortOrder?: ThOrder;
+    /** Variant. */
+    variant?: TableCellVariant;
+    /** On header cell click callback. */
+    handleClick?(): void;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "TableCell";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: string;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<TableCellProps>;
+/**
+ * TableCell component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+export declare const TableCell: (props: TableCellProps) => import("react").JSX.Element;

package/js/components/Table/TableCellStories.d.ts

@@ -0,0 +1,44 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component, decorators: { withCombinations }, icon, overrides, }: SetupStoriesOptions<{
+    overrides: 'Default' | 'Header' | 'AllHeaderStates';
+    decorators: 'withCombinations';
+}> & {
+    icon: string;
+}): {
+    meta: {
+        component: any;
+        argTypes: {
+            variant: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("body" | "head")[];
+                mapping: Record<string, "body" | "head"> | undefined;
+            };
+            onHeaderClick: {
+                action: boolean;
+            };
+        };
+    };
+    /** Simple body cell */
+    Default: {
+        args: {
+            children: string;
+        };
+    };
+    /** Header cell */
+    Header: {
+        args: {
+            variant: string;
+            children: string;
+        };
+    };
+    /** Combination of all header cell states */
+    AllHeaderStates: {
+        args: {
+            variant: string;
+            children: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/Table/TableCellTests.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;
+    tableCell: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/Table/TableRowStories.d.ts

@@ -0,0 +1,23 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component, render, decorators: { withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'Default' | 'AllStates';
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            children: {
+                control: boolean;
+            };
+        };
+    };
+    /** Simple table row */
+    Default: {
+        [x: string]: any;
+    };
+    /** Combination of all states */
+    AllStates: {
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/Table/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;
+    table: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/Table/constants.d.ts

@@ -0,0 +1,9 @@
+import type { LumxClassName } from '../../types';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Table";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;

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

@@ -0,0 +1,27 @@
+import type { JSXElement, HasTheme, HasClassName, CommonRef } from '../../types';
+import { CLASSNAME, COMPONENT_NAME } from './constants';
+/**
+ * Defines the props of the component.
+ */
+export interface TableProps extends HasTheme, HasClassName {
+    /** Whether the table has checkbox or thumbnail on first cell or not. */
+    hasBefore?: boolean;
+    /** Whether the table has dividers or not. */
+    hasDividers?: boolean;
+    /** Children */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<TableProps>;
+/**
+ * Table component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+export declare const Table: (props: TableProps) => import("react").JSX.Element;
+export { CLASSNAME, COMPONENT_NAME };

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;