@lumx/react 3.9.4-alpha.3 → 3.9.4

package/package.json

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

package/src/components/badge/BadgeWrapper.stories.tsx

@@ -0,0 +1,76 @@
+import { mdiAccount, mdiBee, mdiHeart } from '@lumx/icons';
+import { Badge, BadgeWrapper, Button, Chip, ColorPalette, FlexBox, Icon, Orientation, Size } from '@lumx/react';
+import React from 'react';
+
+export default {
+    title: 'LumX components/badge/BadgeWrapper',
+    component: BadgeWrapper,
+    argTypes: {
+        children: { control: false },
+    },
+};
+
+/**
+ * Using badge wrapper with icon
+ */
+export const WithIcon = {
+    args: {
+        badge: (
+            <Badge color={ColorPalette.red}>
+                <Icon icon={mdiHeart} />
+            </Badge>
+        ),
+        children: <Icon icon={mdiAccount} size={Size.m} color={ColorPalette.dark} />,
+    },
+};
+
+/**
+ * Using badge wrapper with icon
+ */
+export const WithButton = {
+    args: {
+        badge: (
+            <Badge color={ColorPalette.red}>
+                <Icon icon={mdiHeart} />
+            </Badge>
+        ),
+        children: <Button>Some button</Button>,
+    },
+};
+
+export const WithChip = {
+    args: {
+        badge: (
+            <Badge color={ColorPalette.red}>
+                <Icon icon={mdiHeart} />
+            </Badge>
+        ),
+        children: <Chip>Some chip</Chip>,
+    },
+};
+
+const InFlexbox = ({ orientation }: { orientation: Orientation }) => (
+    <FlexBox orientation={orientation} gap={Size.medium} vAlign="left">
+        <BadgeWrapper
+            badge={
+                <Badge color={ColorPalette.yellow}>
+                    <Icon icon={mdiBee} />
+                </Badge>
+            }
+        >
+            <Chip color={ColorPalette.green}>Some chip</Chip>
+        </BadgeWrapper>
+        <BadgeWrapper
+            badge={
+                <Badge color={ColorPalette.red}>
+                    <Icon icon={mdiHeart} />
+                </Badge>
+            }
+        >
+            <Chip color={ColorPalette.blue}>Some other chip</Chip>
+        </BadgeWrapper>
+    </FlexBox>
+);
+
+export const InVerticalFlexbox = () => <InFlexbox orientation={Orientation.vertical} />;
+export const InHorizontalFlexbox = () => <InFlexbox orientation={Orientation.horizontal} />;

package/src/components/badge/BadgeWrapper.test.tsx

@@ -0,0 +1,49 @@
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import React from 'react';
+
+import omit from 'lodash/omit';
+import last from 'lodash/last';
+
+import { mdiAccount, mdiHeart } from '@lumx/icons/override/generated';
+import { Badge, BadgeWrapper, BadgeWrapperProps, ColorPalette, Icon } from '@lumx/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+
+const CLASSNAME = BadgeWrapper.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: Partial<BadgeWrapperProps> = {}) => {
+    const props = {
+        badge: (
+            <Badge color={ColorPalette.red}>
+                <Icon icon={mdiHeart} />
+            </Badge>
+        ),
+        children: <Icon icon={mdiAccount} />,
+        ...propsOverride,
+    };
+    render(<BadgeWrapper {...omit(props, 'children')}>{props.children}</BadgeWrapper>);
+    const badgeWrapper = getByClassName(document.body, CLASSNAME);
+    return { badgeWrapper, props };
+};
+
+describe(`<${BadgeWrapper.displayName}>`, () => {
+    describe('Props', () => {
+        it('should render badge', () => {
+            const { badgeWrapper } = setup();
+
+            expect(badgeWrapper).toHaveClass('lumx-badge-wrapper');
+            expect(badgeWrapper.children).toHaveLength(2);
+            expect(last(badgeWrapper.children)).toHaveClass('lumx-badge-wrapper__badge');
+        });
+    });
+
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'badgeWrapper',
+        forwardAttributes: 'badgeWrapper',
+        forwardRef: 'badgeWrapper',
+    });
+});

package/src/components/badge/BadgeWrapper.tsx

@@ -0,0 +1,36 @@
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { DEFAULT_PROPS } from '@lumx/react/components/select/WithSelectContext';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import classNames from 'classnames';
+import React, { forwardRef, ReactElement, ReactNode } from 'react';
+
+export interface BadgeWrapperProps extends GenericProps {
+    /** Badge. */
+    badge: ReactElement;
+    /** Node to display the badge on */
+    children: ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'BadgeWrapper';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { badge, children, className, ...forwardedProps } = props;
+
+    return (
+        <div ref={ref} {...forwardedProps} className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}>
+            {children}
+            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}
+        </div>
+    );
+});
+BadgeWrapper.displayName = 'BadgeWrapper';
+BadgeWrapper.className = CLASSNAME;
+BadgeWrapper.defaultProps = DEFAULT_PROPS;

package/src/components/badge/index.ts

@@ -1 +1,2 @@
 export * from './Badge';
+export * from './BadgeWrapper';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { queryByRole, render } from '@testing-library/react';
+import { queryByRole, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
 import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
@@ -12,12 +12,15 @@ const CLASSNAME = ExpansionPanel.className as string;
 
 jest.mock('@lumx/react/utils/isFocusVisible');
 
+const mockChildrenContent = 'children content';
+
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
 const setup = (propsOverride: Partial<ExpansionPanelProps> = {}) => {
     const props = {
         toggleButtonProps: { label: 'Toggle' },
+        children: mockChildrenContent,
         ...propsOverride,
     };
     const { container } = render(<ExpansionPanel {...props} />);
@@ -28,7 +31,7 @@ const setup = (propsOverride: Partial<ExpansionPanelProps> = {}) => {
         query: {
             toggleButton: () => queryByRole(container, 'button', { name: /Toggle/i }),
             header: () => queryByClassName(container, `${CLASSNAME}__header`),
-            content: () => queryByClassName(container, `${CLASSNAME}__wrapper`),
+            content: () => screen.queryByText(mockChildrenContent),
         },
         props,
     };

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

@@ -12,6 +12,7 @@ import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme
 import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+import { WINDOW } from '@lumx/react/constants';
 
 /**
  * Defines the props of the component.
@@ -80,6 +81,7 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
         ...forwardedProps
     } = props;
 
+    const [isChildrenVisible, setIsChildrenVisible] = useState(isOpen);
     const children: ReactNode[] = Children.toArray(anyChildren);
 
     // Partition children by types.
@@ -94,15 +96,34 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
     );
 
     const toggleOpen = (event: React.MouseEvent) => {
+        const hasReducedMotionEnabled = WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
         const shouldOpen = !isOpen;
+
         if (isFunction(onOpen) && shouldOpen) {
             onOpen(event);
+            // On open, we immediately show children
+            setIsChildrenVisible(true);
         }
         if (isFunction(onClose) && !shouldOpen) {
             onClose(event);
+            /**
+             * On close, we only show children immediately if reduced motion is enabled
+             * When disabled, the children will be hidden via the `onTransitionEnd` prop.
+             */
+            if (hasReducedMotionEnabled) {
+                setIsChildrenVisible(false);
+            }
         }
         if (isFunction(onToggleOpen)) {
             onToggleOpen(shouldOpen, event);
+            /**
+             * On toggle, we forward the show state if
+             * * the toggle will open the expansion panel
+             * * reduced motion is enabled. When disabled, the children will be hidden via the `onTransitionEnd` prop.
+             * */
+            if (shouldOpen || hasReducedMotionEnabled) {
+                setIsChildrenVisible(shouldOpen);
+            }
         }
     };
 
@@ -123,7 +144,6 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
     );
 
     const wrapperRef = useRef<HTMLDivElement>(null);
-    const isContentVisible = (): boolean => get(wrapperRef.current, 'clientHeight', 0) > 0;
 
     // Switch max height on/off to activate the CSS transition (updates when children changes).
     const [maxHeight, setMaxHeight] = useState('0');
@@ -153,8 +173,17 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
                 </div>
             </header>
 
-            {(isOpen || isContentVisible()) && (
-                <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }}>
+            {(isOpen || isChildrenVisible) && (
+                <div
+                    className={`${CLASSNAME}__wrapper`}
+                    style={{ maxHeight }}
+                    // At the end of the closing transition, remove the children from the DOM
+                    onTransitionEnd={() => {
+                        if (!isOpen) {
+                            setIsChildrenVisible(false);
+                        }
+                    }}
+                >
                     <div className={`${CLASSNAME}__container`} ref={wrapperRef}>
                         <div className={`${CLASSNAME}__content`}>{content}</div>
 

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -31,7 +31,6 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
         activeIndex,
         slideshowId,
         setSlideshow,
-        slideshow,
         slideshowSlidesId,
         slidesCount,
         onNextClick,
@@ -62,7 +61,6 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
                 onNextClick={onNextClick}
                 onPreviousClick={onPreviousClick}
                 onPaginationClick={onPaginationClick}
-                parentRef={slideshow}
                 {...slideshowControlsProps}
                 paginationItemProps={(index: number) => {
                     const props = slideshowControlsProps?.paginationItemProps?.(index) || {};

package/src/components/image-lightbox/internal/usePointerZoom.ts

@@ -74,7 +74,7 @@ export function usePointerZoom(
             const pointers = Object.values(activePointers);
 
             // Make sure we run computation on one of the pointer in the group
-            if (pointers[0].pointerId !== event.pointerId) {
+            if (pointers[0]?.pointerId !== event.pointerId) {
                 return;
             }
 

package/src/components/slideshow/Slides.tsx

@@ -3,11 +3,9 @@ import chunk from 'lodash/chunk';
 
 import classNames from 'classnames';
 
-import { FULL_WIDTH_PERCENT, NEXT_SLIDE_EVENT, PREV_SLIDE_EVENT } from '@lumx/react/components/slideshow/constants';
+import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useKeyNavigate } from '@lumx/react/components/slideshow/useKeyNavigate';
 import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
 export interface SlidesProps extends GenericProps, HasTheme {
@@ -34,7 +32,7 @@ export interface SlidesProps extends GenericProps, HasTheme {
     /**
      * Accessible label to set on a slide group.
      * Receives the group position starting from 1 and the total number of groups.
-     */
+     * */
     slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;
 }
 
@@ -72,6 +70,7 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
         slideGroupLabel,
         ...forwardedProps
     } = props;
+    const wrapperRef = React.useRef<HTMLDivElement>(null);
     const startIndexVisible = activeIndex;
     const endIndexVisible = startIndexVisible + 1;
 
@@ -83,17 +82,10 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
         return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
     }, [children, groupBy]);
 
-    const slidesRef = React.useRef<HTMLDivElement>(null);
-
-    const slide = slidesRef.current;
-    const onNextSlide = React.useCallback(() => slide?.dispatchEvent(new CustomEvent(NEXT_SLIDE_EVENT)), [slide]);
-    const onPrevSlide = React.useCallback(() => slide?.dispatchEvent(new CustomEvent(PREV_SLIDE_EVENT)), [slide]);
-    useKeyNavigate(slide, onNextSlide, onPrevSlide);
-
     return (
         <section
             id={id}
-            ref={useMergeRefs(slidesRef, ref)}
+            ref={ref}
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
                 [`${CLASSNAME}--fill-height`]: fillHeight,
@@ -108,14 +100,14 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
                 onMouseLeave={toggleAutoPlay}
                 aria-live={isAutoPlaying ? 'off' : 'polite'}
             >
-                <div className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
+                <div ref={wrapperRef} className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
                     {groups.map((group, index) => (
                         <SlideshowItemGroup
                             key={index}
                             id={slidesId && buildSlideShowGroupId(slidesId, index)}
-                            label={slideGroupLabel?.(index + 1, groups.length)}
+                            role={hasControls ? 'tabpanel' : 'group'}
+                            label={slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined}
                             isDisplayed={index >= startIndexVisible && index < endIndexVisible}
-                            slidesRef={slidesRef}
                         >
                             {group}
                         </SlideshowItemGroup>

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 import range from 'lodash/range';
-import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation, Link } from '@lumx/react';
+import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation } from '@lumx/react';
 import { IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 
 export default {
@@ -66,16 +65,6 @@ export const ResponsiveSlideShowSwipe = () => {
                     }}
                     slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
                 >
-                    <SlideshowItem>
-                        <FlexBox
-                            style={{ border: '1px solid grey', maxWidth: 300, height: 300 }}
-                            hAlign="center"
-                            vAlign="center"
-                        >
-                            <Link href="#">A link</Link>
-                            <Button>A button</Button>
-                        </FlexBox>
-                    </SlideshowItem>
                     {slides.map((slide) => (
                         <SlideshowItem key={`${slide}`}>
                             <FlexBox

package/src/components/slideshow/Slideshow.tsx

@@ -1,10 +1,11 @@
 import React, { forwardRef } from 'react';
 
 import { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';
+import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { DEFAULT_OPTIONS } from './useSlideshowControls';
+import { buildSlideShowGroupId } from './SlideshowItemGroup';
 
 /**
  * Defines the props of the component.
@@ -13,7 +14,7 @@ export interface SlideshowProps
     extends GenericProps,
         Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {
     /** current slide active */
-    activeIndex?: number;
+    activeIndex?: SlidesProps['activeIndex'];
     /** Interval between each slide when automatic rotation is enabled. */
     interval?: number;
     /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */
@@ -133,14 +134,27 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
                             parentRef={slideshow}
                             theme={theme}
                             isAutoPlaying={isAutoPlaying}
+                            nextButtonProps={{
+                                'aria-controls': slideshowSlidesId,
+                                ...slideshowControlsProps.nextButtonProps,
+                            }}
+                            previousButtonProps={{
+                                'aria-controls': slideshowSlidesId,
+                                ...slideshowControlsProps.previousButtonProps,
+                            }}
                             playButtonProps={
                                 autoPlay
                                     ? {
+                                          'aria-controls': slideshowSlidesId,
                                           onClick: toggleForcePause,
                                           ...slideshowControlsProps.playButtonProps,
                                       }
                                     : undefined
                             }
+                            paginationItemProps={(index) => ({
+                                'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),
+                                ...slideshowControlsProps.paginationItemProps?.(index),
+                            })}
                         />
                     </div>
                 ) : undefined

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -78,10 +78,11 @@ export const ControllingSlideshow = ({ images = Object.values(LANDSCAPE_IMAGES),
                         parentRef={slideshow}
                         theme={theme}
                         isAutoPlaying={isAutoPlaying}
-                        nextButtonProps={{ label: 'Next' }}
-                        previousButtonProps={{ label: 'Previous' }}
+                        nextButtonProps={{ label: 'Next', 'aria-controls': slideshowSlidesId }}
+                        previousButtonProps={{ label: 'Previous', 'aria-controls': slideshowSlidesId }}
                         playButtonProps={{
                             label: 'Play/Pause',
+                            'aria-controls': slideshowSlidesId,
                             onClick: toggleForcePause,
                         }}
                         paginationItemLabel={(index) => `Slide ${index}`}