@lumx/react 3.18.2-alpha.1 → 3.18.2-alpha.3

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.18.2-alpha.1",
-        "@lumx/icons": "^3.18.2-alpha.1",
+        "@lumx/core": "^3.18.2-alpha.3",
+        "@lumx/icons": "^3.18.2-alpha.3",
         "@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.18.2-alpha.1"
+    "version": "3.18.2-alpha.3"
 }

package/src/components/button/ButtonRoot.tsx

@@ -175,6 +175,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         <button
             {...forwardedProps}
             {...disabledStateProps}
+            aria-disabled={isAnyDisabled}
             aria-label={ariaLabel}
             ref={ref as RefObject<HTMLButtonElement>}
             className={buttonClassName}

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

@@ -1,16 +1,17 @@
 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 { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
 
 const CLASSNAME = Thumbnail.className as string;
 
 const setup = (props: Partial<ThumbnailProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<Thumbnail {...(props as any)} />, { wrapper });
+    const { container } = render(<Thumbnail {...(props as any)} />, { wrapper });
     const thumbnail = queryByClassName(document.body, CLASSNAME);
-    return { props, thumbnail };
+    return { props, thumbnail, container };
 };
 
 describe(`<${Thumbnail.displayName}>`, () => {
@@ -26,4 +27,40 @@ describe(`<${Thumbnail.displayName}>`, () => {
             defaultTheme: 'light',
         },
     });
+
+    describe('disabled state', () => {
+        it('should not be clickable when disabled from context', () => {
+            const onClick = jest.fn();
+            const { thumbnail, container } = setup(
+                { onClick, 'aria-label': 'thumbnail' },
+                {
+                    wrapper: ({ children }) => (
+                        <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+                    ),
+                },
+            );
+
+            // Should render a div instead of a button.
+            expect(container.querySelector('button')).toBe(null);
+            expect(thumbnail?.tagName).toBe('DIV');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should have no href when disabled from context', () => {
+            const { container, thumbnail } = setup(
+                { linkAs: 'a', linkProps: { href: '#' }, 'aria-label': 'thumbnail' },
+                {
+                    wrapper: ({ children }) => (
+                        <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+                    ),
+                },
+            );
+
+            // Should render a div instead of a link.
+            expect(container.querySelector('a')).toBe(null);
+            expect(thumbnail?.tagName).toBe('DIV');
+        });
+    });
 });

package/src/components/thumbnail/Thumbnail.tsx

@@ -21,6 +21,7 @@ import { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPoi
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useDisableStateProps } from '@lumx/react/utils/disabled';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -99,6 +100,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @return React element.
  */
 export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
+    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         align,
@@ -125,7 +127,7 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
         linkProps,
         linkAs,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const [imgElement, setImgElement] = useState<HTMLImageElement>();
 
     // Image loading state.
@@ -150,14 +152,14 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
 
     const isLink = Boolean(linkProps?.href || linkAs);
     const isButton = !!forwardedProps.onClick;
-    const isClickable = isButton || isLink;
+    const isClickable = !isAnyDisabled && (isButton || isLink);
 
     let Wrapper: any = 'div';
     const wrapperProps = { ...forwardedProps };
-    if (isLink) {
+    if (!isAnyDisabled && isLink) {
         Wrapper = linkAs || 'a';
         Object.assign(wrapperProps, linkProps);
-    } else if (isButton) {
+    } else if (!isAnyDisabled && isButton) {
         Wrapper = 'button';
         wrapperProps.type = forwardedProps.type || 'button';
         wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;

package/src/utils/disabled/DisabledStateProvider.stories.tsx

@@ -12,11 +12,13 @@ import {
     RadioButton,
     Switch,
     TextField,
+    Thumbnail,
 } from '@lumx/react';
 import { DisabledStateProvider } from '@lumx/react/utils';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { disableArgTypes } from '@lumx/react/stories/utils/disableArgTypes';
 import { mdiFoodApple } from '@lumx/icons';
+import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 
 export default {
     title: 'LumX components/DisabledStateProvider',
@@ -71,6 +73,7 @@ export const AllComponents = {
             <Checkbox label="Checkbox" />
             <Chip onClick={() => {}}>Chip</Chip>
             <DatePickerField
+                label="Date picker field"
                 nextButtonProps={{ label: 'Next' }}
                 previousButtonProps={{ label: 'Previous' }}
                 value={new Date()}
@@ -82,7 +85,8 @@ export const AllComponents = {
             </List>
             <RadioButton label="Radio button" />
             <Switch>Switch</Switch>
-            <TextField onChange={() => {}} value="" />
+            <TextField label="texfield" onChange={() => {}} value="" />
+            <Thumbnail alt="Thumbnail" image={LANDSCAPE_IMAGES.landscape1s200} onClick={() => {}} />
         </DisabledStateProvider>
     ),
 };

package/src/utils/disabled/useDisableStateProps.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+import { DisabledStateProvider } from './DisabledStateContext';
+import { useDisableStateProps } from './useDisableStateProps';
+
+describe(useDisableStateProps.name, () => {
+    const setup = (props: any, wrapper?: React.ComponentType) => {
+        const testId = 'test-container';
+        const Component = () => {
+            const { disabledStateProps, otherProps } = useDisableStateProps(props);
+            return <div data-testid={testId} {...otherProps} {...disabledStateProps} />;
+        };
+        const renderResult = render(wrapper ? React.createElement(wrapper, undefined, <Component />) : <Component />);
+        return { ...renderResult, element: renderResult.getByTestId(testId) };
+    };
+
+    it('should not be disabled by default', () => {
+        const { element } = setup({});
+        expect(element).not.toHaveAttribute('disabled');
+        expect(element).toHaveAttribute('aria-disabled', 'false');
+    });
+
+    it('should be disabled with `disabled` prop', () => {
+        const { element } = setup({ disabled: true });
+        expect(element).toHaveAttribute('disabled');
+    });
+
+    it('should be disabled with `isDisabled` prop', () => {
+        const { element } = setup({ isDisabled: true });
+        expect(element).toHaveAttribute('disabled');
+    });
+
+    it('should be disabled with `aria-disabled` prop', () => {
+        const { element } = setup({ 'aria-disabled': true });
+        expect(element).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('should be disabled with `aria-disabled` string prop', () => {
+        const { element } = setup({ 'aria-disabled': 'true' });
+        expect(element).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('should be disabled with context', () => {
+        const wrapper = ({ children }: any) => (
+            <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+        );
+        const { element } = setup({}, wrapper);
+        expect(element).toHaveAttribute('disabled');
+    });
+
+    it('should prioritize context', () => {
+        const wrapper = ({ children }: any) => (
+            <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+        );
+        const { element } = setup({ disabled: false }, wrapper);
+        expect(element).toHaveAttribute('disabled');
+        expect(element).toHaveAttribute('aria-disabled', 'false');
+    });
+
+    it('should forward onClick when not disabled', () => {
+        const onClick = jest.fn();
+        const { element } = setup({ onClick });
+        fireEvent.click(element);
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should not forward onClick when disabled', () => {
+        const onClick = jest.fn();
+        const { element } = setup({ disabled: true, onClick });
+        fireEvent.click(element);
+        expect(onClick).not.toHaveBeenCalled();
+    });
+});