@lumx/core 4.17.1-alpha.1 → 4.17.1-alpha.3

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

@@ -1,55 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,210 +0,0 @@
-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 components are injected via `components`.
- */
-export declare function setup({ component: IconButton, decorators: { withCombinations, withThemedBackground }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations' | 'withThemedBackground';
-}>): {
-    meta: {
-        component: any;
-        render: (args: any) => import("react").JSX.Element;
-        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;
-            handleClick?: ((event?: any) => void) | undefined;
-            handleKeyPress?: ((event?: any) => void) | undefined;
-            ref?: import("../../types").CommonRef;
-            disabled?: boolean | undefined;
-        };
-    };
-    Default: {};
-    WithImage: {
-        argTypes: {
-            control: {
-                type: "select" | "inline-radio";
-            };
-            options: string[];
-            mapping: Record<string, string> | undefined;
-        };
-        args: {
-            image: string;
-        };
-    };
-    IconStateVariations: {
-        args: {};
-        argTypes: {
-            [k: string]: {
-                table: {
-                    disable: boolean;
-                };
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,15 +0,0 @@
-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;

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

@@ -1,302 +0,0 @@
-import { Emphasis, Theme } from '@lumx/core/js/constants';
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-import { ButtonSize } from './ButtonRoot';
-export declare const excludeCombination: ({ isSelected, emphasis, hasBackground }: any) => boolean;
-/**
- * Setup Button stories for a specific framework (React or Vue).
- * This function creates all the stories with the appropriate decorators.
- * Framework-specific components are injected via `components`.
- */
-export declare function setup({ component: Button, decorators: { withCombinations, withThemedBackground }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations' | 'withThemedBackground';
-}>): {
-    meta: {
-        component: any;
-        render: ({ children, ...args }: any) => import("react").JSX.Element;
-        argTypes: {
-            isSelected: {
-                control: string;
-                if: {
-                    arg: string;
-                    eq: string;
-                };
-            };
-            isDisabled: {
-                control: string;
-            };
-            hasBackground: {
-                control: string;
-                if: {
-                    arg: string;
-                    eq: 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;
-            };
-            rightIcon: {
-                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;
-                };
-            };
-            leftIcon: {
-                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: {
-            children: string;
-            leftIcon?: string | undefined;
-            rightIcon?: string | undefined;
-            fullWidth?: boolean | 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;
-            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?: Theme | undefined;
-            'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
-            handleClick?: ((event?: any) => void) | undefined;
-            handleKeyPress?: ((event?: any) => void) | undefined;
-            ref?: import("../../types").CommonRef;
-            disabled?: boolean | undefined;
-        };
-    };
-    /** Default button */
-    Base: {
-        args: {
-            children: string;
-        };
-    };
-    /** All combinations of size and emphasis */
-    SizeAndEmphasis: {
-        args: {
-            children: string;
-        };
-        argTypes: {
-            [k: string]: {
-                table: {
-                    disable: boolean;
-                };
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** Setting a href to transform the button into a link. */
-    LinkButton: {
-        args: {
-            href: string;
-            children: string;
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    /** Check button style variations (color, states, emphasis, etc.) */
-    StateVariations: {
-        args: {
-            children: string;
-            rightIcon: string;
-        };
-        argTypes: {
-            [k: string]: {
-                table: {
-                    disable: boolean;
-                };
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

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

@@ -1,15 +0,0 @@
-import { SetupOptions } from '../../../testing';
-import { ButtonProps } from './Button';
-type SetupProps = Partial<ButtonProps>;
-/**
- * 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<ButtonProps>) => {
-    props: any;
-    button: HTMLElement;
-    buttonWrapper: HTMLElement | null;
-    icons: HTMLElement[];
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<ButtonProps>) => void;
-export default _default;