@lumx/react 3.19.1-alpha.0 → 3.19.1-alpha.1

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.19.1-alpha.0",
-        "@lumx/icons": "^3.19.1-alpha.0",
+        "@lumx/core": "^3.19.1-alpha.1",
+        "@lumx/icons": "^3.19.1-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -105,5 +105,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.19.1-alpha.0"
+    "version": "3.19.1-alpha.1"
 }

package/src/components/button/ButtonRoot.tsx

@@ -147,7 +147,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
 
     return (
         <RawClickable
-            as={linkAs || forwardedProps.href ? 'a' : 'button'}
+            as={linkAs || (forwardedProps.href ? 'a' : 'button')}
             {...forwardedProps}
             {...disabledStateProps}
             aria-disabled={isAnyDisabled}

package/src/components/link/Link.tsx

@@ -85,7 +85,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
     return (
         <RawClickable
             ref={ref as any}
-            as={linkAs || forwardedProps.href ? 'a' : 'button'}
+            as={linkAs || (forwardedProps.href ? 'a' : 'button')}
             {...forwardedProps}
             {...disabledStateProps}
             className={classNames(

package/src/components/list/ListItem.tsx

@@ -116,7 +116,7 @@ export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) =>
             {isClickable({ linkProps, onItemSelected }) ? (
                 /* Clickable list item */
                 <RawClickable
-                    as={linkAs || linkProps.href ? 'a' : 'button'}
+                    as={linkAs || (linkProps.href ? 'a' : 'button')}
                     {...linkProps}
                     {...disabledStateProps}
                     className={classNames(

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -113,7 +113,7 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
             {shouldSplitActions ? (
                 <div className={`${CLASSNAME}__wrapper`}>
                     <RawClickable
-                        as={linkAs || linkProps?.href ? 'a' : 'button'}
+                        as={linkAs || (linkProps?.href ? 'a' : 'button')}
                         {...(linkProps as any)}
                         className={`${CLASSNAME}__link`}
                         onClick={onClick}
@@ -134,7 +134,7 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
                 </div>
             ) : (
                 <RawClickable
-                    as={linkAs || linkProps?.href ? 'a' : 'button'}
+                    as={linkAs || (linkProps?.href ? 'a' : 'button')}
                     {...linkProps}
                     className={`${CLASSNAME}__link`}
                     onClick={onClick}

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { DisabledStateProvider } from '@lumx/react/utils';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
 
 const CLASSNAME = Thumbnail.className as string;
@@ -28,8 +28,19 @@ describe(`<${Thumbnail.displayName}>`, () => {
         },
     });
 
-    describe('disabled state', () => {
-        it('should not be clickable when disabled from context', () => {
+    describe('clickable button', () => {
+        it('should render clickable button', async () => {
+            const onClick = jest.fn();
+            const { thumbnail } = setup({ onClick, alt: 'Name' });
+            const button = screen.getByRole('button', { name: 'Name' });
+            expect(button).toBe(thumbnail);
+            expect(button).toHaveAttribute('type', 'button');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).toHaveBeenCalled();
+        });
+
+        it('should not render button in disabled context', () => {
             const onClick = jest.fn();
             const { thumbnail, container } = setup(
                 { onClick, 'aria-label': 'thumbnail' },
@@ -47,8 +58,21 @@ describe(`<${Thumbnail.displayName}>`, () => {
             fireEvent.click(thumbnail as HTMLElement);
             expect(onClick).not.toHaveBeenCalled();
         });
+    });
+
+    describe('clickable link', () => {
+        it('should render clickable link', async () => {
+            const onClick = jest.fn((evt) => evt.preventDefault());
+            const { thumbnail } = setup({ linkProps: { href: '#' }, onClick, alt: 'Name' });
+            const link = screen.getByRole('link', { name: 'Name' });
+            expect(link).toBe(thumbnail);
+            expect(link).toHaveAttribute('href', '#');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).toHaveBeenCalled();
+        });
 
-        it('should have no href when disabled from context', () => {
+        it('should not render link in disabled context', () => {
             const { container, thumbnail } = setup(
                 { linkAs: 'a', linkProps: { href: '#' }, 'aria-label': 'thumbnail' },
                 {

package/src/components/thumbnail/Thumbnail.tsx

@@ -151,12 +151,16 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
         imageErrorStyle.display = 'none';
     }
 
-    const isClickable = !isAnyDisabled && (linkProps?.href || linkAs || forwardedProps.onClick);
+    const isLink = linkProps?.href || linkAs;
+    const isClickable = !isAnyDisabled && (isLink || forwardedProps.onClick);
 
     const Wrapper: any = isClickable ? RawClickable : 'div';
     const wrapperProps = { ...forwardedProps };
     if (isClickable) {
-        Object.assign(wrapperProps, linkProps, { as: linkAs || linkProps?.href ? 'a' : 'button' }, disabledStateProps);
+        Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);
+        if (isLink) {
+            Object.assign(wrapperProps, linkProps);
+        }
         wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }