@lumx/core 4.3.2-alpha.24 → 4.3.2-alpha.26

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

@@ -169,10 +169,10 @@ export declare function setup({ component, render, decorators: { withCombination
             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 | undefined;
-            "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-            "aria-label"?: string | undefined | 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;

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

@@ -243,10 +243,10 @@ export declare function setup({ component, render, decorators: { withCombination
             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 | undefined;
-            "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-            "aria-label"?: string | undefined | 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;

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

@@ -1,13 +1,12 @@
 import type { SetupStoriesOptions } from '@lumx/core/stories/types';
 import { AspectRatio } from '../../constants';
-import { ThumbnailVariant } from './types';
+import { ThumbnailObjectFit, ThumbnailVariant } from './types';
 /**
  * Setup Thumbnail 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: { withNestedProps }, overrides, }: SetupStoriesOptions<{
-    overrides: 'Simple' | 'FillHeightAndRatio' | 'ObjectFit';
-    decorators: 'withNestedProps';
+export declare function setup({ component, render, decorators: { withNestedProps, withWrapper, withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withNestedProps' | 'withWrapper' | 'withCombinations';
 }>): {
     meta: {
         component: any;
@@ -76,7 +75,7 @@ export declare function setup({ component, render, decorators: { withNestedProps
             imgRef?: import("../../types").CommonRef;
             ref?: import("../../types").CommonRef;
             isLoading?: boolean | undefined;
-            objectFit?: import("./types").ThumbnailObjectFit | undefined;
+            objectFit?: ThumbnailObjectFit | undefined;
             size?: import("./types").ThumbnailSize | undefined;
             loading?: "eager" | "lazy" | undefined;
             loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement> | undefined;
@@ -95,7 +94,10 @@ export declare function setup({ component, render, decorators: { withNestedProps
     };
     /** Simple thumbnail taking the size of the original image */
     Simple: {
-        [x: string]: any;
+        args: {
+            image: string;
+        };
+        decorators: ((story: any, context: any) => any)[];
     };
     /** Loading state */
     IsLoading: {
@@ -151,7 +153,11 @@ export declare function setup({ component, render, decorators: { withNestedProps
     };
     /** Combinations of fillHeight and ratios */
     FillHeightAndRatio: {
-        [x: string]: any;
+        args: {
+            image: string;
+            fillHeight: boolean;
+        };
+        decorators: ((story: any, context: any) => any)[];
     };
     /** Simple thumbnail with svg image */
     WithSvgImages: {
@@ -162,7 +168,11 @@ export declare function setup({ component, render, decorators: { withNestedProps
             'focusPoint.x': number;
         };
     };
+    /** Thumbnail letter-boxing */
     ObjectFit: {
-        [x: string]: any;
+        args: {
+            size: "xl";
+        };
+        decorators: ((story: any, context: any) => any)[];
     };
 };

package/js/types/AriaAttributes.d.ts

@@ -1,2 +1,29 @@
-import type { AriaAttributes } from 'react';
-export type { AriaAttributes };
+/**
+ * ARIA attributes type for components.
+ * All attributes are optional.
+ *
+ * This is a custom interface containing only the ARIA attributes
+ * actually used in the @lumx/core components, avoiding dependency on React types.
+ */
+export interface AriaAttributes {
+    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    'aria-expanded'?: boolean | 'true' | 'false';
+    /** Indicates the availability and type of interactive popup element that can be triggered by the element. */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** Indicates the current "pressed" state of toggle buttons. */
+    'aria-pressed'?: boolean | 'false' | 'mixed' | 'true';
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: string;
+    /** Indicates whether the element is exposed to an accessibility API. */
+    'aria-hidden'?: boolean | 'true' | 'false';
+    /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
+    'aria-disabled'?: boolean | 'true' | 'false';
+    /** Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. */
+    'aria-checked'?: boolean | 'false' | 'mixed' | 'true';
+    /** Indicates whether items in a table or grid are sorted in ascending or descending order. */
+    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+}

package/js/types/index.d.ts

@@ -25,4 +25,5 @@ export type { HasChecked } from './HasChecked';
 export type { HasDisabled } from './HasDisabled';
 export type { AriaAttributes } from './AriaAttributes';
 export type { Selector } from './Selector';
+export type { PropsToOverride } from './jsx/PropsToOverride';
 export type { PartialBy, PartialExcept } from './PartialBy';

package/js/types/jsx/PropsToOverride.d.ts

@@ -0,0 +1,2 @@
+/** list of generic props defined on JSX that need to be redefined for each framework */
+export type PropsToOverride = 'ref' | 'onClick' | 'onChange' | 'onKeyPress';

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.3.2-alpha.24",
+        "@lumx/icons": "^4.3.2-alpha.26",
         "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.24",
+    "version": "4.3.2-alpha.26",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",

package/stories/types.d.ts

@@ -12,11 +12,7 @@ interface StoryDecorators {
     /** manages nested props */
     withNestedProps?: () => Decorator;
     /** Decorator wrapping story in a resizable box */
-    withResizableBox?: (options?: {
-        width?: number | string;
-        height?: number | string;
-        [key: string]: any;
-    }) => Decorator;
+    withResizableBox?: (options?: Record<string, any>) => Decorator;
 }
 /** A partial Storybook story object (args, argTypes, render, decorators, etc.) */
 type StoryOverride = Record<string, any>;