@lumx/core 4.3.2-alpha.3 → 4.3.2-alpha.31

package/js/components/Badge/BadgeWrapper.d.ts

@@ -0,0 +1,13 @@
+import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
+export interface BadgeWrapperProps extends HasClassName {
+    /** Badge element to display */
+    badge?: JSXElement;
+    /** Content to wrap with badge */
+    children?: JSXElement;
+    /** Ref forwarding */
+    ref?: CommonRef;
+}
+export declare const COMPONENT_NAME = "BadgeWrapper";
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const DEFAULT_PROPS: Partial<BadgeWrapperProps>;
+export declare const BadgeWrapper: (props: BadgeWrapperProps) => import("react").JSX.Element;

package/js/components/Badge/BadgeWrapperStories.d.ts

@@ -0,0 +1,29 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+export declare function setup({ component, render, overrides, }: SetupStoriesOptions<{
+    overrides: 'WithIcon' | 'WithButton';
+    decorators?: never;
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            children: {
+                control: boolean;
+            };
+        };
+        args: {
+            badge?: import("react").ReactNode;
+            children?: import("react").ReactNode;
+            ref?: import("../../types").CommonRef;
+            className?: string | undefined;
+        };
+    };
+    /** Using badge wrapper with icon */
+    WithIcon: {
+        [x: string]: any;
+    };
+    /** Using badge wrapper with button */
+    WithButton: {
+        [x: string]: any;
+    };
+};

package/js/components/Badge/BadgeWrapperTests.d.ts

@@ -0,0 +1,9 @@
+import { SetupOptions } from '../../../testing';
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    badgeWrapper: HTMLElement;
+    div: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

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

@@ -0,0 +1,52 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { ColorPalette } from '../../constants';
+/**
+ * Setup Badge stories for a specific framework (React or Vue).
+ * This function creates all the stories with the appropriate decorators.
+ */
+export declare function setup({ component, render, decorators: { withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'WithIcon';
+    decorators: 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            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;
+            };
+            children: {
+                control: boolean;
+            };
+        };
+        args: {
+            children?: import("react").ReactNode;
+            color?: ColorPalette | undefined;
+            ref?: import("../../types").CommonRef;
+            className?: string | undefined;
+        };
+    };
+    /** Using badge with text children */
+    WithText: {
+        args: {
+            children: string;
+        };
+    };
+    /** Using badge with icon children - Icon component provided via overrides */
+    WithIcon: {
+        [x: string]: any;
+    };
+    /** All combinations of colors and children types */
+    AllColors: {
+        argTypes: {
+            color: {
+                control: boolean;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

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

@@ -0,0 +1,12 @@
+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;
+    badge: HTMLElement;
+    div: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

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

@@ -0,0 +1,37 @@
+import { ColorPalette } from '../../constants';
+import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface BadgeProps extends HasClassName {
+    /** Badge content. */
+    children?: JSXElement;
+    /** Color variant. */
+    color?: ColorPalette;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Badge";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<BadgeProps>;
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Badge: {
+    (props: BadgeProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-badge";
+    defaultProps: Partial<BadgeProps>;
+};

package/js/components/Button/Button.d.ts

@@ -0,0 +1,48 @@
+import type { JSXElement, LumxClassName } from '../../types';
+import { BaseButtonProps } from './ButtonRoot';
+/**
+ * Button emphasis definition.
+ * @deprecated Use Emphasis instead.
+ */
+export declare const ButtonEmphasis: {
+    readonly low: "low";
+    readonly medium: "medium";
+    readonly high: "high";
+};
+/**
+ * Defines the props of the component.
+ */
+export interface ButtonProps extends BaseButtonProps {
+    /** Left icon (SVG path). */
+    leftIcon?: string;
+    /** Right icon (SVG path). */
+    rightIcon?: string;
+    /** When `true`, the button gets as large as possible. */
+    fullWidth?: boolean;
+    /** Children */
+    children?: JSXElement;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Button";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ButtonProps>;
+/**
+ * Button component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const Button: {
+    (props: ButtonProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-button";
+    defaultProps: Partial<ButtonProps>;
+};

package/js/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,36 @@
+import type { LumxClassName, HasClassName, JSXElement, CommonRef } from '../../types';
+/**
+ * Defines the props of the component
+ */
+export interface ButtonGroupProps extends HasClassName {
+    /**
+     * Children
+     */
+    children?: JSXElement;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "ButtonGroup";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ButtonGroupProps>;
+/**
+ * ButtonGroup component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const ButtonGroup: {
+    (props: ButtonGroupProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-button-group";
+    defaultProps: Partial<ButtonGroupProps>;
+};

package/js/components/Button/ButtonGroupStories.d.ts

@@ -0,0 +1,37 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/** Names of all ButtonGroup stories */
+export type ButtonGroupStoryName = 'Variants' | 'OneButton' | 'ManyButtons';
+/** Options for setting up ButtonGroup stories */
+export type SetupButtonGroupStoriesOptions = SetupStoriesOptions<{
+    overrides: ButtonGroupStoryName;
+    decorators: 'withCombinations';
+}>;
+/**
+ * Setup ButtonGroup 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 }, overrides, }: SetupButtonGroupStoriesOptions): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            children: {
+                control: boolean;
+            };
+        };
+        args: Partial<import("./ButtonGroup").ButtonGroupProps>;
+    };
+    /** Size & emphasis variants */
+    Variants: {
+        decorators: ((story: any, context: any) => any)[];
+    };
+    /** ButtonGroup with a single button */
+    OneButton: {
+        [x: string]: any;
+    };
+    /** ButtonGroup with many buttons */
+    ManyButtons: {
+        [x: string]: any;
+    };
+};

package/js/components/Button/ButtonRoot.d.ts

@@ -0,0 +1,55 @@
+import { ColorPalette, Emphasis, Size } from '../../constants';
+import { HasTheme, HasAriaDisabled, AriaAttributes, HasClassName } from '../../types';
+import { BaseClickableProps } from '../RawClickable';
+/**
+ * Button size definition.
+ */
+export type ButtonSize = Extract<Size, 's' | 'm'>;
+export interface BaseButtonProps extends Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>, HasClassName, HasTheme, HasAriaDisabled, BaseClickableProps {
+    /** Color variant. */
+    color?: ColorPalette;
+    /** Emphasis variant. */
+    emphasis?: Emphasis;
+    /** Whether or not the button has a background color in low emphasis. */
+    hasBackground?: boolean;
+    /** Native anchor href property. It determines whether the Button will be a <button> or an <a>. */
+    href?: string;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is selected or not (unsupported in `high` emphasis). */
+    isSelected?: boolean;
+    /** Native button name property. */
+    name?: string;
+    /** Size variant. */
+    size?: ButtonSize;
+    /** Native anchor target property. */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Native button type. */
+    type?: 'submit' | 'reset' | 'button' | undefined;
+    /** Custom component for the link (can be used to inject router Link). */
+    linkAs?: 'a' | any;
+    /** whether the button is dispalyed in full width or not */
+    fullWidth?: boolean;
+    /** whether the button is currently active or not */
+    isActive?: boolean;
+    /** whether the button is currently focused or not */
+    isFocused?: boolean;
+    /** whether the button is currently focused or not */
+    isHovered?: boolean;
+}
+export interface ButtonRootProps extends BaseButtonProps {
+    variant: 'button' | 'icon';
+}
+export declare const BUTTON_WRAPPER_CLASSNAME = "lumx-button-wrapper";
+export declare const BUTTON_CLASSNAME = "lumx-button";
+/**
+ * ButtonRoot component.
+ *
+ * @param  props Component props.
+ * @return JSX Element.
+ */
+export declare const ButtonRoot: {
+    (props: ButtonRootProps): import("react").JSX.Element;
+    displayName: string;
+    defaultProps: {};
+};

package/js/components/Button/ButtonRootTests.d.ts

@@ -0,0 +1,12 @@
+import { SetupOptions } from '@lumx/core/testing';
+import { ButtonRootProps } from './ButtonRoot';
+type SetupProps = Partial<ButtonRootProps>;
+/**
+ * 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<ButtonRootProps>) => {
+    props: any;
+    button: HTMLElement;
+};
+declare const _default: (renderOptions: SetupOptions<ButtonRootProps>) => void;
+export default _default;

package/js/components/Button/IconButton.d.ts

@@ -0,0 +1,45 @@
+import { BaseButtonProps } from './ButtonRoot';
+import type { LumxClassName } from '../../types';
+export interface IconButtonProps extends BaseButtonProps {
+    /**
+     * Icon (SVG path).
+     * If `image` is also set, `image` will be used instead.
+     */
+    icon?: string;
+    /**
+     * Image (image url).
+     * Has priority over `icon`.
+     */
+    image?: string;
+    /**
+     * Label text (required for a11y purpose).
+     * If you really don't want an aria-label, you can set an empty label (this is not recommended).
+     */
+    label: string;
+    /** text to be displayed on hover */
+    title?: string;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "IconButton";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<IconButtonProps>;
+/**
+ * IconButton component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+export declare const IconButton: {
+    (props: IconButtonProps): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-icon-button";
+    defaultProps: Partial<IconButtonProps>;
+};

package/js/components/Button/IconButtonStories.d.ts

@@ -0,0 +1,211 @@
+import { Emphasis } from '@lumx/core/js/constants';
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+import { ButtonSize } from './ButtonRoot';
+/**
+ * Setup IconButton 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, withThemedBackground }, }: SetupStoriesOptions<{
+    decorators: 'withCombinations' | 'withThemedBackground';
+}>): {
+    meta: {
+        component: any;
+        render: any;
+        argTypes: {
+            isSelected: {
+                control: string;
+            };
+            isDisabled: {
+                control: string;
+            };
+            hasBackground: {
+                control: string;
+            };
+            emphasis: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ("medium" | "low" | "high")[];
+                mapping: Record<string, "medium" | "low" | "high"> | undefined;
+            };
+            size: {
+                control: {
+                    type: "select" | "inline-radio";
+                };
+                options: ButtonSize[];
+                mapping: Record<string, ButtonSize> | undefined;
+            };
+            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;
+                };
+            };
+            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;
+            };
+            ref: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            onClick: {
+                action: boolean;
+                table: {
+                    disable: boolean;
+                };
+            };
+            linkAs: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            className: {
+                table: {
+                    disable: boolean;
+                };
+            };
+            target: {
+                if: {
+                    arg: string;
+                    exists: boolean;
+                };
+                control: {
+                    type: string;
+                };
+            };
+            type: {
+                if: {
+                    arg: string;
+                    exists: boolean;
+                };
+                control: {
+                    type: string;
+                };
+            };
+        };
+        args: {
+            label: string;
+            icon: string;
+            image?: string | undefined;
+            title?: string | undefined;
+            color?: import("@lumx/core/js/constants").ColorPalette | undefined;
+            emphasis?: Emphasis | undefined;
+            hasBackground?: boolean | undefined;
+            href?: string | undefined;
+            isDisabled?: boolean | undefined;
+            isSelected?: boolean | undefined;
+            name?: string | undefined;
+            size?: ButtonSize | undefined;
+            target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+            type?: "submit" | "reset" | "button" | undefined | undefined;
+            linkAs?: "a" | any;
+            fullWidth?: boolean | undefined;
+            isActive?: boolean | undefined;
+            isFocused?: boolean | undefined;
+            isHovered?: boolean | undefined;
+            'aria-expanded'?: boolean | "true" | "false" | undefined;
+            'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+            'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined;
+            'aria-label'?: string | undefined;
+            className?: string | undefined;
+            theme?: import("@lumx/core/js/constants").Theme | undefined;
+            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
+            children?: import("react").ReactNode;
+            onClick?: ((event?: any) => void) | undefined;
+            ref?: import("../../types").CommonRef;
+            disabled?: boolean | undefined;
+        };
+    };
+    Default: {};
+    /** IconButton using an image */
+    WithImage: {
+        argTypes: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: string[];
+            mapping: Record<string, string> | undefined;
+        };
+        args: {
+            image: string;
+        };
+    };
+    /** Check icon button style variations (color, states, emphasis, etc.) */
+    IconStateVariations: {
+        args: {};
+        argTypes: {
+            [k: string]: {
+                table: {
+                    disable: boolean;
+                };
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/Button/IconButtonTests.d.ts

@@ -0,0 +1,15 @@
+import { SetupOptions } from '@lumx/core/testing';
+import { IconButtonProps } from './IconButton';
+type SetupProps = Partial<IconButtonProps>;
+/**
+ * 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<IconButtonProps>) => {
+    props: any;
+    iconButton: HTMLElement;
+    icon: HTMLElement | null;
+    img: HTMLElement | null;
+    wrapper: Partial<import("@lumx/core/testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<IconButtonProps>) => void;
+export default _default;