@lumx/react 3.0.5-alpha.1 → 3.0.5

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.5-alpha.1",
-        "@lumx/icons": "^3.0.5-alpha.1",
+        "@lumx/core": "^3.0.5",
+        "@lumx/icons": "^3.0.5",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -114,6 +114,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.5-alpha.1",
-    "gitHead": "e05f8419842b4c8ebdb9b21026e17d18ec6ebbbb"
+    "version": "3.0.5",
+    "gitHead": "83eccabdc29dbf61fd519c88729002a5bb8d4790"
 }

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -1,15 +1,11 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { queryByRole, render } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import userEvent from '@testing-library/user-event';
+import { ExpansionPanel, ExpansionPanelProps } from '.';
 
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-import { Theme } from '@lumx/react';
-import { ExpansionPanel, ExpansionPanelProps } from './ExpansionPanel';
-
-const DEFAULT_PROPS = ExpansionPanel.defaultProps as any;
 const CLASSNAME = ExpansionPanel.className as string;
 
 type SetupProps = Partial<ExpansionPanelProps>;
@@ -17,63 +13,68 @@ type SetupProps = Partial<ExpansionPanelProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+const setup = (propsOverride: SetupProps = {}) => {
     const props: ExpansionPanelProps = {
         toggleButtonProps: { label: 'Toggle' },
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<ExpansionPanel {...props} />);
+    const { container } = render(<ExpansionPanel {...props} />);
 
     return {
-        content: wrapper.find(`.${CLASSNAME}__wrapper`),
-        header: wrapper.find(`.${CLASSNAME}__header`),
-        label: wrapper.find(`.${CLASSNAME}__label`),
+        container,
+        element: getByClassName(container, CLASSNAME),
+        query: {
+            toggleButton: () => queryByRole(container, 'button', { name: /Toggle/i }),
+            header: () => queryByClassName(container, `${CLASSNAME}__header`),
+            content: () => queryByClassName(container, `${CLASSNAME}__wrapper`),
+        },
         props,
-        root: wrapper.find('section'),
-        wrapper,
     };
 };
 
 describe(`<${ExpansionPanel.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        // Here is an example of a basic rendering check, with snapshot.
+    describe('Render', () => {
+        it('should render default', () => {
+            const { element, query } = setup();
+            expect(element).toBeInTheDocument();
+            expect(element).toHaveClass(CLASSNAME);
+            expect(element).toHaveClass(`${CLASSNAME}--is-close`);
+            expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
+
+            // Header is visible
+            expect(query.header()).toBeInTheDocument();
 
-        it('should render correctly', () => {
-            const { root, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
+            // Content is not visible
+            expect(query.content()).not.toBeInTheDocument();
 
-            expect(root).toExist();
-            expect(root).toHaveClassName(CLASSNAME);
+            expect(query.toggleButton()).toHaveAttribute('aria-expanded', 'false');
         });
-    });
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        // Here are some examples of basic props check.
+        it('should render open', () => {
+            const { query } = setup({ isOpen: true });
+
+            // Content is visible
+            expect(query.content()).toBeInTheDocument();
 
-        it('should use default props', () => {
-            const { root } = setup();
+            expect(query.toggleButton()).toHaveAttribute('aria-expanded', 'true');
+        });
+
+        it('should show label', () => {
+            const labelText = 'Label text';
+            const { query } = setup({ label: labelText });
 
-            for (const prop of Object.keys(DEFAULT_PROPS)) {
-                expect(root).toHaveClassName(
-                    getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }),
-                );
-            }
+            expect(query.header()).toHaveTextContent(labelText);
         });
 
-        it('should ignore incorrect theme', () => {
-            const { root } = setup({ theme: 'not_a_valid_theme' as Theme });
+        it('should show header instead of label', () => {
+            const labelText = 'Label text';
+            const headerText = 'Header text';
+            const { query } = setup({ label: labelText, children: <header>{headerText}</header> });
 
-            // Correct classes are applied
-            root.hasClass('lumx-color-background-dark-L6');
-            root.hasClass('lumx-expansion-panel--theme-light');
-            root.hasClass('lumx-color-font-dark-N');
+            expect(query.header()).toHaveTextContent(headerText);
         });
     });
 
-    // 3. Test events.
     describe('Events', () => {
         const onOpen: jest.Mock = jest.fn();
         const onClose: jest.Mock = jest.fn();
@@ -83,63 +84,33 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
         beforeEach(onClose.mockClear);
         beforeEach(onToggleOpen.mockClear);
 
-        it('should trigger `onOpen`', () => {
-            const { header } = setup({ onOpen }, false);
-            header.simulate('click');
-            expect(onOpen).toHaveBeenCalled();
-        });
+        it('should open on click', async () => {
+            const { query } = setup({ isOpen: false, onOpen, onClose, onToggleOpen });
 
-        it('should trigger `onClose`', () => {
-            const { header } = setup({ isOpen: true, onClose }, false);
-            header.simulate('click');
-            expect(onClose).toHaveBeenCalled();
-        });
+            // Content is not visible
+            expect(query.content()).not.toBeInTheDocument();
 
-        it('should trigger `onToggleOpen`', () => {
-            const { header } = setup({ onToggleOpen }, false);
-            header.simulate('click');
-            header.simulate('click');
-            expect(onToggleOpen).toHaveBeenCalledTimes(2);
-        });
-    });
-
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Here is an example of children types check.
-
-        it('should hide content when `isOpen` == false', () => {
-            const { content } = setup({ isOpen: false });
-
-            expect(content.exists()).toBe(false);
+            // Click on toggle button
+            await userEvent.click(query.toggleButton() as any);
+            expect(onOpen).toHaveBeenCalled();
+            expect(onClose).not.toHaveBeenCalled();
+            expect(onToggleOpen).toHaveBeenCalledWith(true);
         });
 
-        it('should show content when `isOpen` == true', () => {
-            const { content } = setup({ isOpen: true });
+        it('should close on click', async () => {
+            const { query } = setup({ isOpen: true, onOpen, onClose, onToggleOpen });
 
-            expect(content.exists()).toBe(true);
-        });
+            // Content is visible
+            expect(query.content()).toBeInTheDocument();
 
-        it('should show label', () => {
-            const labelText = 'Label text';
-            const { header } = setup({ label: labelText });
-
-            expect(header.text()).toContain(labelText);
-        });
-
-        it('should show header instead of label', () => {
-            const labelText = 'Label text';
-            const headerText = 'Header text';
-            const { header } = setup({ label: labelText, children: <header>{headerText}</header> });
-
-            expect(header.text()).toContain(headerText);
+            // Click on header
+            await userEvent.click(query.header() as any);
+            expect(onOpen).not.toHaveBeenCalled();
+            expect(onClose).toHaveBeenCalled();
+            expect(onToggleOpen).toHaveBeenCalledWith(false);
         });
     });
 
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'root', prop: 'root' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
 });

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -148,6 +148,7 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
                         color={color}
                         emphasis={Emphasis.low}
                         icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                        aria-expanded={isOpen || 'false'}
                     />
                 </div>
             </header>

package/src/components/radio-button/RadioButton.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, forwardRef, ReactNode, SyntheticEvent } from 'react';
+import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 import { uid } from 'uid';
@@ -30,6 +30,8 @@ export interface RadioButtonProps extends GenericProps, HasTheme {
     value?: string;
     /** On change callback. */
     onChange?(value?: string, name?: string, event?: SyntheticEvent): void;
+    /** optional props for input */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 
 /**
@@ -71,9 +73,10 @@ export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((p
         onChange,
         theme,
         value,
+        inputProps,
         ...forwardedProps
     } = props;
-    const radioButtonId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);
+    const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (onChange) {
@@ -101,13 +104,15 @@ export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((p
                     ref={inputRef}
                     className={`${CLASSNAME}__input-native`}
                     disabled={isDisabled}
-                    id={radioButtonId}
+                    id={inputId}
                     tabIndex={isDisabled ? -1 : 0}
                     type="radio"
                     name={name}
                     value={value}
                     checked={isChecked}
                     onChange={handleChange}
+                    aria-describedby={helper ? `${inputId}-helper` : undefined}
+                    {...inputProps}
                 />
 
                 <div className={`${CLASSNAME}__input-placeholder`}>
@@ -118,12 +123,12 @@ export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((p
 
             <div className={`${CLASSNAME}__content`}>
                 {label && (
-                    <InputLabel htmlFor={radioButtonId} theme={theme} className={`${CLASSNAME}__label`}>
+                    <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>
                         {label}
                     </InputLabel>
                 )}
                 {helper && (
-                    <InputHelper theme={theme} className={`${CLASSNAME}__helper`}>
+                    <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>
                         {helper}
                     </InputHelper>
                 )}

package/src/components/radio-button/__snapshots__/RadioButton.test.tsx.snap

@@ -72,6 +72,7 @@ exports[`<RadioButton> Snapshots and structure should render label & helper 1`]
     className="lumx-radio-button__input-wrapper"
   >
     <input
+      aria-describedby="fixedId-helper"
       className="lumx-radio-button__input-native"
       id="fixedId"
       onChange={[Function]}
@@ -101,6 +102,7 @@ exports[`<RadioButton> Snapshots and structure should render label & helper 1`]
     </InputLabel>
     <InputHelper
       className="lumx-radio-button__helper"
+      id="fixedId-helper"
       kind="info"
       theme="light"
     >

package/src/components/switch/Switch.tsx

@@ -75,7 +75,7 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
         inputProps = {},
         ...forwardedProps
     } = props;
-    const switchId = useMemo(() => id || `switch-${uid()}`, [id]);
+    const inputId = useMemo(() => id || `switch-${uid()}`, [id]);
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (onChange) {
             onChange(!isChecked, value, name, event);
@@ -103,7 +103,7 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
                 <input
                     type="checkbox"
                     role="switch"
-                    id={switchId}
+                    id={inputId}
                     className={`${CLASSNAME}__input-native`}
                     name={name}
                     value={value}
@@ -111,6 +111,7 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
                     checked={isChecked}
                     aria-checked={Boolean(isChecked)}
                     onChange={handleChange}
+                    aria-describedby={helper ? `${inputId}-helper` : undefined}
                     {...inputProps}
                 />
 
@@ -122,11 +123,11 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
 
             {Children.count(children) > 0 && (
                 <div className={`${CLASSNAME}__content`}>
-                    <InputLabel htmlFor={switchId} theme={theme} className={`${CLASSNAME}__label`}>
+                    <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>
                         {children}
                     </InputLabel>
                     {!isEmpty(helper) && (
-                        <InputHelper theme={theme} className={`${CLASSNAME}__helper`}>
+                        <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>
                             {helper}
                         </InputHelper>
                     )}

package/src/components/switch/__snapshots__/Switch.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`<Switch> Conditions should not display the \`helper\` if no \`label\` i
   >
     <input
       aria-checked={false}
+      aria-describedby="switch-uid-helper"
       className="lumx-switch__input-native"
       id="switch-uid"
       onChange={[Function]}
@@ -68,6 +69,7 @@ exports[`<Switch> Snapshots and structure should render correctly with a \`label
   >
     <input
       aria-checked={false}
+      aria-describedby="switch-uid-helper"
       className="lumx-switch__input-native"
       id="switch-uid"
       onChange={[Function]}
@@ -97,6 +99,7 @@ exports[`<Switch> Snapshots and structure should render correctly with a \`label
     </InputLabel>
     <InputHelper
       className="lumx-switch__helper"
+      id="switch-uid-helper"
       kind="info"
       theme="light"
     >

package/src/hooks/useTransitionVisibility.ts

@@ -1,4 +1,5 @@
 import { RefObject, useEffect, useRef, useState } from 'react';
+import { userHasReducedMotion } from '@lumx/react/utils/userHasReducedMotion';
 
 /**
  * Returns true if the component is visible tracking the opacity transition.
@@ -16,29 +17,22 @@ export const useTransitionVisibility = (
     const [isVisible, setVisible] = useState(isComponentVisible);
     const previousVisibility = useRef(isVisible);
 
+    // On component visibility change.
     useEffect(() => {
         if (isComponentVisible) {
             setVisible(true);
-        } else if (!window.TransitionEvent) {
-            // Transition event is not available so visibility is set to false directly.
-            setVisible(false);
-        }
-    }, [isComponentVisible]);
-
-    useEffect(() => {
-        if (onVisibilityChange && previousVisibility.current !== isVisible) {
-            onVisibilityChange(isVisible);
-            previousVisibility.current = isVisible;
+            return undefined;
         }
-    }, [isVisible, onVisibilityChange]);
-
-    useEffect(() => {
         const { current: element } = ref;
-        if (!element) {
+
+        // Transition event is not supported or the user prefers reduced motion.
+        // => Skip `transitionend` event listening and set visibility to false directly.
+        if (!element || !window.TransitionEvent || userHasReducedMotion()) {
+            setVisible(false);
             return undefined;
         }
 
-        // Listen opacity transition
+        // Update visibility on opacity transition end.
         const onTransitionEnd = (e: TransitionEvent) => {
             if (e.target !== ref.current || e.propertyName !== 'opacity') return;
             setVisible((wasVisible) => !wasVisible);
@@ -47,7 +41,14 @@ export const useTransitionVisibility = (
         return () => {
             element.removeEventListener('transitionend', onTransitionEnd);
         };
-    });
+    }, [isComponentVisible, ref]);
+
+    useEffect(() => {
+        if (onVisibilityChange && previousVisibility.current !== isVisible) {
+            onVisibilityChange(isVisible);
+            previousVisibility.current = isVisible;
+        }
+    }, [isVisible, onVisibilityChange]);
 
     return isVisible || isComponentVisible;
 };

package/src/utils/userHasReducedMotion.ts

@@ -0,0 +1,7 @@
+export const userHasReducedMotion = () => {
+    try {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    } catch (e) {
+        return false;
+    }
+};

package/src/components/expansion-panel/__snapshots__/ExpansionPanel.test.tsx.snap

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ExpansionPanel> Snapshots and structure should render correctly 1`] = `
-<section
-  className="lumx-expansion-panel lumx-expansion-panel--is-close lumx-expansion-panel--theme-light"
->
-  <header
-    className="lumx-expansion-panel__header"
-    onClick={[Function]}
-  >
-    <div
-      className="lumx-expansion-panel__header-content"
-    >
-      <span
-        className="lumx-expansion-panel__label"
-      />
-    </div>
-    <div
-      className="lumx-expansion-panel__header-toggle"
-    >
-      <IconButton
-        color="dark"
-        emphasis="low"
-        icon="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-        label="Toggle"
-        size="m"
-        theme="light"
-      />
-    </div>
-  </header>
-</section>
-`;