@lumx/react 3.4.0 → 3.5.1-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.4.0",
-        "@lumx/icons": "^3.4.0",
+        "@lumx/core": "^3.5.1-alpha.0",
+        "@lumx/icons": "^3.5.1-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -117,5 +117,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.4.0"
+    "version": "3.5.1-alpha.0"
 }

package/src/components/tabs/Tab.test.tsx

@@ -38,6 +38,11 @@ describe(`<${Tab.displayName}>`, () => {
         expect(icon).toBeInTheDocument();
     });
 
+    it('should render icon with props', () => {
+        const { icon } = setup({ icon: mdiPlay, iconProps: { color: 'green', colorVariant: 'L2', hasShape: true } });
+        expect(icon).toHaveClass('lumx-icon--color-green', 'lumx-icon--color-variant-L2');
+    });
+
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,
         forwardClassName: 'tab',

package/src/components/tabs/Tab.tsx

@@ -15,6 +15,8 @@ export interface TabProps extends GenericProps {
     children?: never;
     /** Icon (SVG path). */
     icon?: IconProps['icon'];
+    /** Icon component properties. */
+    iconProps?: Omit<IconProps, 'icon'>;
     /** Native id property. */
     id?: string;
     /** Whether the tab is active or not. */
@@ -54,6 +56,7 @@ export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) =>
         className,
         disabled,
         icon,
+        iconProps = {},
         id,
         isActive: propIsActive,
         isDisabled = disabled,
@@ -110,7 +113,7 @@ export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) =>
             aria-selected={isActive}
             aria-controls={state?.tabPanelId}
         >
-            {icon && <Icon icon={icon} size={Size.xs} />}
+            {icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}
             {label && <span>{label}</span>}
         </button>
     );

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { mdiAbTesting } from '@lumx/icons';
+import { mdiAbTesting, mdiImageBroken } from '@lumx/icons';
 import { Alignment, AspectRatio, Badge, FlexBox, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 import { IMAGE_SIZES, imageArgType, IMAGES } from '@lumx/react/stories/controls/image';
@@ -44,6 +44,10 @@ export const IsLoading = {
     args: { ...Simple.args, isLoading: true },
 };
 
+export const WithoutSource = {
+    args: { image: IMAGES.emptyImage, size: Size.xxl, aspectRatio: AspectRatio.square },
+};
+
 /** Thumbnail error fallback and size variants */
 export const ErrorFallback = {
     args: { image: 'foo' },
@@ -126,6 +130,18 @@ export const FillHeightAndRatio = {
     ],
 };
 
+/**
+ * Simple thumbnail with svg image
+ * */
+export const WithSvgImages = {
+    args: {
+        image: IMAGES.defaultSvg,
+        size: Size.xxl,
+        fillHeight: true,
+        'focusPoint.x': 1,
+    },
+};
+
 export const Original = () => (
     <>
         <h1>Ratio: Original</h1>

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -74,8 +74,8 @@ export const useFocusPointStyle = (
             setStyle({ visibility: 'hidden' });
             return;
         }
-        if (!containerSize) {
-            // Missing container size abort focus point compute.
+        if (!containerSize || !imageSize.height || !imageSize.width) {
+            // Missing container or image size abort focus point compute.
             setStyle({});
             return;
         }

package/src/components/thumbnail/useImageLoad.ts

@@ -3,8 +3,9 @@ import { useEffect, useState } from 'react';
 export type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';
 
 function getState(img: HTMLImageElement | null | undefined, event?: Event) {
-    // Error event occurred or image loaded empty.
-    if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {
+    // Error event occurred or image has no source.
+    if (event?.type === 'error' || (img?.complete && !img.getAttribute('src'))) {
+        console.log('HAS ERROR');
         return 'hasError';
     }
     // Image is undefined or incomplete.

package/src/stories/controls/image.ts

@@ -14,12 +14,23 @@ const portrait2 = '/demo-assets/portrait2.jpg';
 const portrait3 = '/demo-assets/portrait3.jpg';
 const square1 = '/demo-assets/square1.jpg';
 const square2 = '/demo-assets/square2.jpg';
+const defaultSvg = '/demo-assets/defaultSvg.svg';
+const emptyImage = '';
 
 export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
 export const SQUARE_IMAGES = { square1, square2 };
+export const SVG_IMAGES = { defaultSvg };
+export const EMPTY_IMAGES = { emptyImage };
 export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
 export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
-export const IMAGES = { ...LANDSCAPE_IMAGES, ...PORTRAIT_IMAGES, ...SQUARE_IMAGES, ...AVATAR_IMAGES };
+export const IMAGES = {
+    ...LANDSCAPE_IMAGES,
+    ...PORTRAIT_IMAGES,
+    ...SQUARE_IMAGES,
+    ...AVATAR_IMAGES,
+    ...SVG_IMAGES,
+    ...EMPTY_IMAGES,
+};
 
 export const avatarImageArgType = getSelectArgType(AVATAR_IMAGES);
 export const squareImageArgType = getSelectArgType(SQUARE_IMAGES);
@@ -51,9 +62,17 @@ export const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size> =
     portrait2: { width: 350, height: 500 },
     portrait3: { width: 300, height: 500 },
 };
+export const SVG_IMAGE_SIZES: Record<keyof typeof SVG_IMAGES, Size> = {
+    defaultSvg: { width: 0, height: 0 },
+};
+export const EMPTY_IMAGES_SIZES: Record<keyof typeof EMPTY_IMAGES, Size> = {
+    emptyImage: { width: 0, height: 0 },
+};
 export const IMAGE_SIZES: Record<keyof typeof IMAGES, Size> = {
     ...LANDSCAPE_IMAGE_SIZES,
     ...PORTRAIT_IMAGE_SIZES,
     ...SQUARE_IMAGE_SIZES,
     ...AVATAR_IMAGE_SIZES,
+    ...SVG_IMAGE_SIZES,
+    ...EMPTY_IMAGES_SIZES,
 };