@lumx/react 2.1.6-alpha.5 → 2.1.8

package/src/components/flag/Flag.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
-import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 export interface FlagProps extends GenericProps {
@@ -38,7 +38,15 @@ export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) =>
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}
             ref={ref}
         >
-            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
+            {icon && (
+                <Icon
+                    icon={icon}
+                    color={color}
+                    colorVariant={ColorVariant.D2}
+                    size={Size.xxs}
+                    className={`${CLASSNAME}__icon`}
+                />
+            )}
             <span className={`${CLASSNAME}__label`}>{label}</span>
         </div>
     );

package/src/components/flag/__snapshots__/Flag.test.tsx.snap

@@ -19,6 +19,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="blue"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -33,6 +35,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="dark"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -47,6 +51,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="green"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -61,6 +67,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="primary"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -75,6 +83,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="red"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -89,6 +99,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="secondary"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -103,6 +115,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="yellow"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -121,6 +135,7 @@ exports[`<Flag /> Snapshots and structure should render story 'withIcon' 1`] = `
 >
   <Icon
     className="lumx-flag__icon"
+    colorVariant="D2"
     icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
     size="xxs"
   />

package/src/components/image-block/ImageBlock.stories.tsx

@@ -11,8 +11,8 @@ export default { title: 'LumX components/image-block/Image Block' };
 
 export const DefaultImageBlock = ({ theme }: any) => {
     const alt = text('Alternative text', 'Image alt text');
-    const align = select<Alignment>('Alignment', Alignment, Alignment.center) as any;
-    const aspectRatio = select<AspectRatio>('Aspect ratio', AspectRatio, AspectRatio.square);
+    const align = select('Alignment', Alignment, Alignment.center) as any;
+    const aspectRatio = select('Aspect ratio', AspectRatio, AspectRatio.square);
     const title = text('Title', 'Hello world');
     const description = text('Description', 'My awesome description');
     const crossOrigin = enumKnob('CORS', [undefined, 'anonymous', 'use-credentials'], undefined);

package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`<ImageBlock> Snapshots and structure should render story 'DefaultImageB
         "y": 0,
       }
     }
-    image="landscape1.jpg"
+    image="/demo-assets/landscape1.jpg"
     loading="lazy"
     onClick={false}
     theme="light"

package/src/components/lightbox/Lightbox.stories.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+    ImageBlock,
+    Slideshow,
+    SlideshowItem,
+    Toolbar,
+    Divider,
+    Alignment,
+    TextField,
+    Typography,
+    Link,
+    Lightbox,
+    ThumbnailProps,
+} from '@lumx/react';
+import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+
+export default { title: 'LumX components/lightbox/Lightbox' };
+
+interface RowItemProps {
+    image: ThumbnailProps;
+}
+
+const RowItem: React.FC<RowItemProps> = ({ image }) => {
+    const [isOpen, setOpen] = React.useState(false);
+    const { image: url, alt: name } = image;
+    const linkRef = React.useRef(null);
+
+    return (
+        <>
+            <Toolbar
+                label={
+                    <Link ref={linkRef} typography={Typography.subtitle1} onClick={() => setOpen(true)}>
+                        {name}
+                    </Link>
+                }
+            />
+            <Lightbox
+                closeButtonProps={{ label: 'Close' }}
+                isOpen={isOpen}
+                onClose={() => setOpen(false)}
+                parentElement={linkRef}
+            >
+                <Slideshow
+                    activeIndex={0}
+                    fillHeight
+                    slideshowControlsProps={{
+                        nextButtonProps: { label: 'Next' },
+                        previousButtonProps: { label: 'Previous' },
+                    }}
+                >
+                    <SlideshowItem key={name}>
+                        <ImageBlock align={Alignment.center} alt={name} fillHeight image={url} />
+                    </SlideshowItem>
+                </Slideshow>
+            </Lightbox>
+        </>
+    );
+};
+
+export const Focus = () => {
+    const [textFieldValue, setTextFieldValue] = React.useState('');
+    const images: ThumbnailProps[] = thumbnailsKnob(12);
+
+    return (
+        <>
+            <TextField
+                value={textFieldValue}
+                onChange={setTextFieldValue}
+                className="lumx-spacing-margin-vertical-big"
+            />
+            {images.map((image, index) => {
+                const itemPosition = index + 1;
+                return (
+                    <div key={itemPosition}>
+                        <RowItem image={image} />
+                        <Divider />
+                    </div>
+                );
+            })}
+        </>
+    );
+};

package/src/components/lightbox/Lightbox.tsx

@@ -10,7 +10,6 @@ import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
-import { useFocus } from '@lumx/react/hooks/useFocus';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -90,9 +89,18 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocusTrap(wrapperRef.current, childrenRef.current?.firstChild);
 
-    // Focus the parent element on close.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocus(parentElement?.current, !isOpen);
+    const previousOpen = React.useRef(isOpen);
+
+    React.useEffect(() => {
+        if (isOpen !== previousOpen.current) {
+            previousOpen.current = isOpen;
+
+            // Focus the parent element on close.
+            if (!isOpen && parentElement && parentElement.current) {
+                parentElement.current.focus();
+            }
+        }
+    }, [isOpen, parentElement]);
 
     // Close lightbox on escape key pressed.
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/src/components/message/Message.tsx

@@ -62,8 +62,8 @@ export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, re
             )}
             {...forwardedProps}
         >
-            {(customIcon || icon) && <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} />}
-            <div className={`${CLASSNAME}__text`}>{children}</div>
+            {(customIcon || icon) && <Icon className="lumx-message__icon" icon={customIcon || icon} size={Size.xs} />}
+            <div className="lumx-message__text">{children}</div>
         </div>
     );
 });

package/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -32,7 +32,7 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />
@@ -47,7 +47,7 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape3.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         theme="light"
       />
@@ -62,7 +62,7 @@ exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="portrait1.jpg"
+        image="/demo-assets/portrait1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -96,7 +96,7 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -111,7 +111,7 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />
@@ -126,7 +126,7 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape3.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         theme="light"
       />
@@ -141,7 +141,7 @@ exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="portrait1.jpg"
+        image="/demo-assets/portrait1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -167,7 +167,7 @@ exports[`<Mosaic> Snapshots and structure should render story OneThumbnail 1`] =
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -193,7 +193,7 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -209,7 +209,7 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -225,7 +225,7 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape3.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -241,7 +241,7 @@ exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="portrait1.jpg"
+        image="/demo-assets/portrait1.jpg"
         loading="lazy"
         onClick={[Function]}
         theme="light"
@@ -276,7 +276,7 @@ exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 1`
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -291,7 +291,7 @@ exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 1`
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />
@@ -306,7 +306,7 @@ exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 1`
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape3.jpg"
+        image="/demo-assets/landscape3.jpg"
         loading="lazy"
         theme="light"
       />
@@ -332,7 +332,7 @@ exports[`<Mosaic> Snapshots and structure should render story TwoThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape1.jpg"
+        image="/demo-assets/landscape1.jpg"
         loading="lazy"
         theme="light"
       />
@@ -347,7 +347,7 @@ exports[`<Mosaic> Snapshots and structure should render story TwoThumbnails 1`]
         aspectRatio="free"
         fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
         fillHeight={true}
-        image="landscape2.jpg"
+        image="/demo-assets/landscape2.jpg"
         loading="lazy"
         theme="light"
       />

package/src/components/notification/Notifications.stories.tsx

@@ -1,48 +1,54 @@
 import React, { useState } from 'react';
 
 import { Button, Notification, Kind } from '@lumx/react';
-
-import noop from 'lodash/noop';
+import { NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { action } from '@storybook/addon-actions';
+import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
 
 export default {
     title: 'LumX components/notification/Notification',
     parameters: {
-        // Notifies Chromatic to pause the animations when they finish for the specific story.
-        chromatic: { pauseAnimationAtEnd: true },
+        // Delay Chromatic snapshot to wait for notification to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: NOTIFICATION_TRANSITION_DURATION,
+        },
     },
+    // Force minimum chromatic screen size to make sure the dialog appears in view.
+    decorators: [chromaticForceScreenSize],
 };
 
 const properties = {
     error: {
         content: 'Error',
-        onClick: noop,
+        onClick: action('onClick'),
         isOpen: true,
         type: Kind.error,
     },
     info: {
         content: 'Info',
-        onClick: noop,
+        onClick: action('onClick'),
         isOpen: true,
         type: Kind.info,
     },
     infoWithCallback: {
-        onActionClick: noop,
+        onActionClick: action('onClick'),
         actionLabel: 'Undo',
         content: 'Info with callback',
-        onClick: noop,
+        onClick: action('onClick'),
         isOpen: true,
         type: Kind.info,
     },
     success: {
         content: 'Success',
-        onClick: noop,
+        onClick: action('onClick'),
         isOpen: true,
         type: Kind.success,
     },
 
     warning: {
         content: 'Warning',
-        onClick: noop,
+        onClick: action('onClick'),
         isOpen: true,
         type: Kind.warning,
     },

package/src/components/skeleton/SkeletonCircle.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { FlexBox, Orientation, Size, SkeletonCircle, ColorPalette } from '@lumx/react';
 
-export default { title: 'LumX components/skeleton/Skeleton' };
+export default { title: 'LumX components/skeleton/Skeleton Circle' };
 
 const sizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const;
 const colors = Object.values(ColorPalette);

package/src/components/skeleton/SkeletonRectangle.stories.tsx

@@ -14,7 +14,7 @@ import {
 } from '@lumx/react';
 import { imageKnob } from '@lumx/react/stories/knobs/image';
 
-export default { title: 'LumX components/skeleton/Skeleton' };
+export default { title: 'LumX components/skeleton/Skeleton Rectangle' };
 
 const variants = [
     SkeletonRectangleVariant.squared,

package/src/components/skeleton/SkeletonTypography.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { SkeletonTypography, Typography, ColorPalette } from '@lumx/react';
 
-export default { title: 'LumX components/skeleton/Skeleton' };
+export default { title: 'LumX components/skeleton/Skeleton Typography' };
 
 const colors = Object.values(ColorPalette);
 

package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap

@@ -23,13 +23,13 @@ Array [
         }
       >
         <SlideshowItem
-          key="landscape1.jpg-0"
+          key="/demo-assets/landscape1.jpg-0"
         >
           <ImageBlock
             align="left"
             alt="Image 1"
             captionPosition="below"
-            image="landscape1.jpg"
+            image="/demo-assets/landscape1.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -39,13 +39,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="landscape2.jpg-1"
+          key="/demo-assets/landscape2.jpg-1"
         >
           <ImageBlock
             align="left"
             alt="Image 2"
             captionPosition="below"
-            image="landscape2.jpg"
+            image="/demo-assets/landscape2.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -55,13 +55,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="landscape3.jpg-2"
+          key="/demo-assets/landscape3.jpg-2"
         >
           <ImageBlock
             align="left"
             alt="Image 3"
             captionPosition="below"
-            image="landscape3.jpg"
+            image="/demo-assets/landscape3.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -71,13 +71,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="portrait1.jpg-3"
+          key="/demo-assets/portrait1.jpg-3"
         >
           <ImageBlock
             align="left"
             alt="Image 4"
             captionPosition="below"
-            image="portrait1.jpg"
+            image="/demo-assets/portrait1.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -87,13 +87,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="portrait2.jpg-4"
+          key="/demo-assets/portrait2.jpg-4"
         >
           <ImageBlock
             align="left"
             alt="Image 5"
             captionPosition="below"
-            image="portrait2.jpg"
+            image="/demo-assets/portrait2.jpg"
             theme="light"
             thumbnailProps={
               Object {
@@ -103,13 +103,13 @@ Array [
           />
         </SlideshowItem>
         <SlideshowItem
-          key="portrait3.jpg-5"
+          key="/demo-assets/portrait3.jpg-5"
         >
           <ImageBlock
             align="left"
             alt="Image 6"
             captionPosition="below"
-            image="portrait3.jpg"
+            image="/demo-assets/portrait3.jpg"
             theme="light"
             thumbnailProps={
               Object {

package/src/components/text-field/TextField.stories.tsx

@@ -137,3 +137,33 @@ export const WithAfterElement = ({ theme }: any) => {
         />
     );
 };
+
+export const WithMaxLengthNoLabel = ({ theme }: any) => {
+    const [value, onChange] = React.useState('Value');
+    const multiline = boolean('Multiline', true);
+    const minimumRows = number('Minimum number of rows', 2, { min: 0, max: 100 });
+    const isClearable = boolean('Clearable', true);
+    const hasError = boolean('Has error', true);
+    return (
+        <TextField
+            value={value}
+            placeholder={text('Placeholder', 'Placeholder')}
+            theme={theme}
+            onChange={onChange}
+            multiline={multiline}
+            minimumRows={minimumRows}
+            hasError={hasError}
+            maxLength={200}
+            clearButtonProps={isClearable ? { label: 'Clear' } : undefined}
+            helper={<span>{text('Helper', 'Helper')}</span>}
+            afterElement={
+                <IconButton
+                    label="foo"
+                    emphasis={emphasis('Button emphasis', Emphasis.medium, 'After element')}
+                    size={buttonSize('Button size', Size.s, 'After element')}
+                    icon={mdiTranslate}
+                />
+            }
+        />
+    );
+};

package/src/components/text-field/TextField.tsx

@@ -307,16 +307,18 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                 }),
             )}
         >
-            {label && (
+            {(label || maxLength) && (
                 <div className={`${CLASSNAME}__header`}>
-                    <InputLabel
-                        htmlFor={textFieldId}
-                        className={`${CLASSNAME}__label`}
-                        isRequired={isRequired}
-                        theme={theme}
-                    >
-                        {label}
-                    </InputLabel>
+                    {label && (
+                        <InputLabel
+                            htmlFor={textFieldId}
+                            className={`${CLASSNAME}__label`}
+                            isRequired={isRequired}
+                            theme={theme}
+                        >
+                            {label}
+                        </InputLabel>
+                    )}
 
                     {maxLength && (
                         <div className={`${CLASSNAME}__char-counter`}>