@lumx/core 4.3.2-alpha.44 → 4.3.2-alpha.46

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

@@ -1,40 +1,41 @@
 import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-import { ColorVariant } from '@lumx/core/js/constants';
-/**
- * Setup Link 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<{
+import { ColorVariant } from '../../constants';
+export declare function setup({ component, render, decorators: { withCombinations }, overrides, }: SetupStoriesOptions<{
+    overrides: 'AllStates';
     decorators: 'withCombinations';
 }>): {
     meta: {
         component: any;
         render: any;
         argTypes: {
-            onClick: {
-                action: boolean;
+            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;
             };
-            typography: {
-                control: string;
+            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;
             };
         };
         args: {
-            label: string;
-            color?: import("@lumx/core/js/constants").ColorWithVariants | undefined;
+            children: string;
+            color?: import("../../constants").ColorWithVariants | undefined;
             colorVariant?: ColorVariant | undefined;
             href?: string | undefined;
-            leftIcon?: string | undefined;
-            as?: string | any;
-            rightIcon?: string | undefined;
-            target?: string | undefined;
-            typography?: string | undefined;
+            isDisabled?: boolean | undefined;
+            linkAs?: string | any;
             handleClick?: ((event: any) => void) | undefined;
+            target?: string | undefined;
+            typography?: import("../../constants").Typography | undefined;
             ref?: import("../../types").CommonRef;
-            theme?: import("@lumx/core/js/constants").Theme | undefined;
             className?: string | undefined;
             'aria-disabled'?: import("../../types/Booleanish").Booleanish | undefined;
-            isDisabled?: boolean | undefined;
             disabled?: boolean | undefined;
         };
     };
@@ -45,49 +46,20 @@ export declare function setup({ component, render, decorators: { withCombination
             target: string;
         };
     };
-    /** Link as button */
-    AsButton: {
-        args: {
-            label: string;
-        };
-    };
-    /** With typography */
-    WithTypography: {
-        args: {
-            href: string;
-            typography: string;
-        };
-    };
-    /** With color */
-    WithColor: {
-        args: {
-            href: string;
-            color: "primary";
-            colorVariant: "D1";
-        };
-    };
-    /** Disabled states */
-    Disabled: {
+    /** Show all color combinations */
+    AllColors: {
         argTypes: {
-            isDisabled: {
+            color: {
                 control: boolean;
             };
-            'aria-disabled': {
+            colorVariant: {
                 control: boolean;
             };
         };
-        args: {
-            label: string;
-        };
         decorators: ((story: any, context: any) => any)[];
     };
-    /** All states */
+    /** Show state combinations */
     AllStates: {
-        argTypes: {
-            isDisabled: {
-                control: boolean;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
+        [x: string]: any;
     };
 };

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

@@ -1,15 +1,8 @@
 import { SetupOptions } from '../../../testing';
-import { LinkProps } from '.';
-type SetupProps = Partial<LinkProps>;
-/**
- * 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<LinkProps>) => {
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
     link: HTMLElement;
-    rightIcon: HTMLElement | null;
-    leftIcon: HTMLElement | null;
-    content: HTMLElement | null;
-    props: LinkProps;
+    wrapper: Partial<import("../../../testing").SetupResult>;
 };
-declare const _default: (renderOptions: SetupOptions<LinkProps>) => void;
+declare const _default: (renderOptions: SetupOptions<any>) => void;
 export default _default;

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

@@ -1,36 +1,29 @@
-import { ColorVariant, ColorWithVariants } from '@lumx/core/js/constants';
-import type { JSXElement, LumxClassName, HasTheme, HasClassName, CommonRef, HasAriaDisabled, HasDisabled } from '../../types';
+import type { CommonRef, HasDisabled, JSXElement, LumxClassName } from '../../types';
+import { HasAriaDisabled, HasClassName } from '../../types';
+import { ColorVariant, ColorWithVariants, Typography } from '../../constants';
 /**
  * Defines the props of the component.
  */
-export interface LinkProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled {
-    /** Link label content. */
-    label?: JSXElement;
+export interface LinkProps extends HasClassName, HasAriaDisabled, HasDisabled {
+    /** Children content */
+    children?: JSXElement;
     /** Color variant. */
     color?: ColorWithVariants;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Link href. */
     href?: string;
-    /**
-     * Left icon (SVG path).
-     * @deprecated Instead, simply nest `<Icon />` in the label
-     */
-    leftIcon?: string;
-    /** Element type or custom component for the link. */
-    as?: string | any;
-    /**
-     * Right icon (SVG path).
-     * @deprecated Instead, simply nest `<Icon />` in the label
-     */
-    rightIcon?: string;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Custom element/component for the link. */
+    linkAs?: string | any;
+    /** Click handler (framework wrappers convert onClick to handleClick). */
+    handleClick?: (event: any) => void;
     /** Link target. */
     target?: string;
     /** Typography variant. */
-    typography?: string;
-    /** Click handler. */
-    handleClick?: (event: any) => void;
-    /** Reference to the root element. */
+    typography?: Typography;
+    /** Element ref. */
     ref?: CommonRef;
 }
 /**
@@ -46,7 +39,7 @@ export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
  */
 export declare const DEFAULT_PROPS: Partial<LinkProps>;
 /**
- * Link component (Core UI).
+ * Link component.
  *
  * @param  props Component props.
  * @return JSX element.

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.3.2-alpha.44",
+        "@lumx/icons": "^4.3.2-alpha.46",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -66,7 +66,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.3.2-alpha.44",
+    "version": "4.3.2-alpha.46",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",