@lumx/react 2.1.1 → 2.1.5

package/src/components/list/__snapshots__/ListItem.test.tsx.snap

@@ -1,18 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ListItem> Snapshots and structure should render story 'Default' 1`] = `
+exports[`<ListItem> Snapshots and structure should render story 'Button' 1`] = `
 <li
   className="lumx-list-item lumx-list-item--size-regular"
 >
-  <div
-    className="lumx-list-item__wrapper"
+  <a
+    className="lumx-list-item__link"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex={0}
   >
     <div
       className="lumx-list-item__content"
     >
       Text
     </div>
-  </div>
+  </a>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'ButtonDisabled' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <a
+    aria-disabled={true}
+    className="lumx-list-item__link lumx-list-item__link--is-disabled"
+    onKeyDown={[Function]}
+    role="button"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </a>
 </li>
 `;
 
@@ -23,7 +46,7 @@ exports[`<ListItem> Snapshots and structure should render story 'Highlighted' 1`
   <a
     className="lumx-list-item__link lumx-list-item__link--is-highlighted"
     href="#"
-    tabIndex={0}
+    role="link"
   >
     <div
       className="lumx-list-item__content"
@@ -34,6 +57,58 @@ exports[`<ListItem> Snapshots and structure should render story 'Highlighted' 1`
 </li>
 `;
 
+exports[`<ListItem> Snapshots and structure should render story 'Link' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <a
+    className="lumx-list-item__link"
+    href="#"
+    role="link"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </a>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'LinkDisabled' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <a
+    aria-disabled={true}
+    className="lumx-list-item__link lumx-list-item__link--is-disabled"
+    role="link"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </a>
+</li>
+`;
+
+exports[`<ListItem> Snapshots and structure should render story 'NonClickable' 1`] = `
+<li
+  className="lumx-list-item lumx-list-item--size-regular"
+>
+  <div
+    className="lumx-list-item__wrapper"
+  >
+    <div
+      className="lumx-list-item__content"
+    >
+      Text
+    </div>
+  </div>
+</li>
+`;
+
 exports[`<ListItem> Snapshots and structure should render story 'Selected' 1`] = `
 <li
   className="lumx-list-item lumx-list-item--size-regular"
@@ -41,7 +116,7 @@ exports[`<ListItem> Snapshots and structure should render story 'Selected' 1`] =
   <a
     className="lumx-list-item__link lumx-list-item__link--is-selected"
     href="#"
-    tabIndex={0}
+    role="link"
   >
     <div
       className="lumx-list-item__content"
@@ -72,16 +147,14 @@ exports[`<ListItem> Snapshots and structure should render story 'WithCustomLink'
 <li
   className="lumx-list-item lumx-list-item--size-regular"
 >
-  <CustomLink
-    className="lumx-list-item__link"
-    href="http://google.com"
-    tabIndex={0}
+  <div
+    className="lumx-list-item__wrapper"
   >
     <div
       className="lumx-list-item__content"
     >
       My custom link
     </div>
-  </CustomLink>
+  </div>
 </li>
 `;

package/src/components/list/useInteractiveList.tsx

@@ -75,7 +75,7 @@ function onKeyboardFocus(props: any, handler: (evt: FocusEvent) => void) {
 }
 
 const isNavigableItem = (node: ReactNode): node is ReactElement => {
-    return isComponent('ListItem')(node) && isClickable(node.props);
+    return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;
 };
 
 /**

package/src/components/message/Message.tsx

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

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

@@ -12,7 +12,7 @@ import {
     Thumbnail,
     ColorPalette,
 } from '@lumx/react';
-import { imageKnob } from '@lumx/react/stories/knobs';
+import { imageKnob } from '@lumx/react/stories/knobs/image';
 
 export default { title: 'LumX components/skeleton/Skeleton' };
 

package/src/components/slideshow/useKeyNavigate.ts

@@ -9,9 +9,9 @@ export function useKeyNavigate(element?: HTMLElement | null, onNext?: () => void
         const onKeyNavigate = (evt: KeyboardEvent) => {
             let callback;
             if (evt?.key === 'ArrowRight') {
-                callback = onPrevious;
-            } else if (evt?.key === 'ArrowLeft') {
                 callback = onNext;
+            } else if (evt?.key === 'ArrowLeft') {
+                callback = onPrevious;
             }
             if (!callback) return;
 

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

@@ -1,90 +1,87 @@
-import { TextField } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
 import React from 'react';
+import { mdiTranslate } from '@lumx/icons/';
+import { Emphasis, IconButton, Size, TextField } from '@lumx/react';
+import { boolean, number, text } from '@storybook/addon-knobs';
+import { buttonSize } from '@lumx/react/stories/knobs/buttonKnob';
+import { emphasis } from '@lumx/react/stories/knobs/emphasisKnob';
 
 export default { title: 'LumX components/text-field/TextField' };
 
-/**
- * TextField story
- * @return simple TextField.
- */
-export const SimpleTextField = ({ theme }: any) => (
-    <TextField
-        value={text('Value', 'myvalue')}
-        label={text('Label', 'I am the label')}
-        placeholder={text('Placeholder', 'ex: A value')}
-        theme={theme}
-        onChange={noop}
-    />
-);
+export const TextField_ = ({ theme }: any) => {
+    const [value, onChange] = React.useState('Value');
+    return (
+        <TextField
+            value={value}
+            onChange={onChange}
+            label={text('Label', 'Label')}
+            placeholder={text('Placeholder', 'Placeholder')}
+            theme={theme}
+        />
+    );
+};
 
-export const SimpleTextNumberField = ({ theme }: any) => (
-    <TextField
-        value={text('Value', '2')}
-        label={text('Label', 'I am the label')}
-        placeholder={text('Placeholder', 'ex: A value')}
-        theme={theme}
-        onChange={noop}
-        type="number"
-    />
-);
+export const Clearable = ({ theme }: any) => {
+    const [value, onChange] = React.useState('Value');
+    return (
+        <TextField
+            value={value}
+            onChange={onChange}
+            label={text('Label', 'Label')}
+            clearButtonProps={{ label: 'Clear' }}
+            theme={theme}
+        />
+    );
+};
 
-export const TextFieldWithHelp = ({ theme }: any) => (
-    <TextField
-        value={text('Value', 'myvalue')}
-        label={text('Label', 'I am the label')}
-        placeholder={text('Placeholder', 'ex: A value')}
-        theme={theme}
-        onChange={noop}
-        helper={<span>{text('Helper', 'ex: toto@acme.com')}</span>}
-    />
-);
+export const States = ({ theme }: any) => {
+    const [value1, onChange1] = React.useState('Value');
+    const [value2, onChange2] = React.useState('Value');
+    return (
+        <>
+            <TextField
+                label="Has error"
+                hasError
+                error="Error message"
+                theme={theme}
+                value={value1}
+                onChange={onChange1}
+            />
+            <TextField label="Is valid" isValid theme={theme} value={value2} onChange={onChange2} />
+        </>
+    );
+};
 
-export const TextFieldWithError = ({ theme }: any) => (
-    <TextField
-        value={text('Value', 'myvalue')}
-        label={text('Label', 'I am the label')}
-        placeholder={text('Placeholder', 'ex: A value')}
-        theme={theme}
-        onChange={noop}
-        helper={<span>{text('Helper', 'ex: toto@acme.com')}</span>}
-        hasError
-        error={
-            <span>
-                You must provide <strong>something</strong>
-            </span>
-        }
-    />
-);
+export const NumberField = ({ theme }: any) => {
+    const [value, onChange] = React.useState('0');
+    return <TextField value={value} onChange={onChange} label={text('Label', 'Label')} theme={theme} type="number" />;
+};
 
-export const TextArea = ({ theme }: any) => {
-    const [value, setValue] = React.useState('my value');
+export const WithHelper = ({ theme }: any) => {
+    const [value, onChange] = React.useState('Value');
     return (
         <TextField
             value={value}
-            label={text('Label', 'I am the label')}
-            placeholder={text('Placeholder', 'ex: A value')}
-            multiline
-            minimumRows={1}
+            onChange={onChange}
+            label={text('Label', 'Label')}
+            placeholder={text('Placeholder', 'Placeholder')}
             theme={theme}
-            onChange={setValue}
-            helper={<span>{text('Helper', 'ex: toto@acme.com')}</span>}
+            helper={<span>{text('Helper', 'Helper')}</span>}
         />
     );
 };
-export const TextAreaWith2Lines = ({ theme }: any) => {
-    const [value, setValue] = React.useState('the value');
+
+export const TextArea = ({ theme }: any) => {
+    const [value, setValue] = React.useState('Value');
     return (
         <TextField
             value={value}
-            label={text('Label', 'I am the label')}
-            placeholder={text('Placeholder', 'ex: A value')}
+            label={text('Label', 'Label')}
+            placeholder={text('Placeholder', 'Placeholder')}
             multiline
-            minimumRows={2}
+            minimumRows={number('Minimum number of rows', 1, { min: 0, max: 100 })}
             theme={theme}
             onChange={setValue}
-            helper={<span>{text('Helper', 'ex: toto@acme.com')}</span>}
+            helper={<span>{text('Helper', 'Helper')}</span>}
         />
     );
 };
@@ -99,26 +96,44 @@ text`;
     return (
         <TextField
             value={value}
-            label={text('Label', 'I am the label')}
-            placeholder={text('Placeholder', 'ex: A value')}
+            label={text('Label', 'Label')}
+            placeholder={text('Placeholder', 'Placeholder')}
             multiline
-            minimumRows={2}
+            minimumRows={number('Minimum number of rows', 2, { min: 0, max: 100 })}
             theme={theme}
             onChange={setValue}
-            helper={<span>{text('Helper', 'ex: toto@acme.com')}</span>}
+            helper={<span>{text('Helper', 'Helper')}</span>}
         />
     );
 };
 
-// Even with value set programmatically, the number of rows should be updated
-export const TextAreaWithKnobValue = ({ theme }: any) => (
-    <TextField
-        value={text('Value', 'myvalue')}
-        label={text('Label', 'I am the label')}
-        placeholder={text('Placeholder', 'ex: A value')}
-        multiline
-        minimumRows={1}
-        theme={theme}
-        onChange={noop}
-    />
-);
+export const WithAfterElement = ({ 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}
+            label={text('Label', 'Label')}
+            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

@@ -24,6 +24,8 @@ export interface TextFieldProps extends GenericProps {
     forceFocusStyle?: boolean;
     /** Whether the text field is displayed with error style or not. */
     hasError?: boolean;
+    /** Additional element to put at the end of the text field. */
+    afterElement?: ReactNode;
     /** Helper text. */
     helper?: string | ReactNode;
     /** Icon (SVG path). */
@@ -259,6 +261,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
         theme,
         type,
         value,
+        afterElement,
         ...forwardedProps
     } = props;
     const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
@@ -405,6 +408,8 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                         type="button"
                     />
                 )}
+
+                {afterElement && <div className={`${CLASSNAME}__after-element`}>{afterElement}</div>}
             </div>
 
             {hasError && error && (

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

@@ -12,12 +12,13 @@ import {
     Thumbnail,
     ThumbnailVariant,
 } from '@lumx/react';
-import { imageKnob, IMAGES } from '@lumx/react/stories/knobs';
+import { imageKnob, IMAGES } from '@lumx/react/stories/knobs/image';
 import { htmlDecode } from '@lumx/react/utils/htmlDecode';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
 import { focusKnob } from '@lumx/react/stories/knobs/focusKnob';
 import { sizeKnob } from '@lumx/react/stories/knobs/sizeKnob';
+import classNames from 'classnames';
 
 export default { title: 'LumX components/thumbnail/Thumbnail' };
 
@@ -25,6 +26,26 @@ export const Default = () => <Thumbnail alt="Image alt text" image={imageKnob()}
 
 export const Clickable = () => <Thumbnail alt="Click me" image={imageKnob()} size={Size.xxl} onClick={console.log} />;
 
+export const ClickableLink = () => (
+    <Thumbnail alt="Click me" image={imageKnob()} size={Size.xxl} linkProps={{ href: 'https://google.fr' }} />
+);
+
+const CustomLinkComponent = (props: any) => (
+    <a {...props} className={classNames('custom-link-component', props.className)}>
+        {props.children}
+    </a>
+);
+
+export const ClickableCustomLink = () => (
+    <Thumbnail
+        alt="Click me"
+        image={imageKnob()}
+        size={Size.xxl}
+        linkAs={CustomLinkComponent}
+        linkProps={{ href: 'https://google.fr', className: 'custom-class-name' }}
+    />
+);
+
 export const DefaultFallback = () => <Thumbnail alt="foo" image="foo" />;
 
 export const IconFallback = () => <Thumbnail alt="foo" image="foo" fallback={mdiAbTesting} />;

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

@@ -5,7 +5,16 @@ import 'jest-enzyme';
 import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
-import { Clickable, CustomFallback, Default, DefaultFallback, IconFallback, WithBadge } from './Thumbnail.stories';
+import {
+    Clickable,
+    ClickableCustomLink,
+    ClickableLink,
+    CustomFallback,
+    Default,
+    DefaultFallback,
+    IconFallback,
+    WithBadge,
+} from './Thumbnail.stories';
 
 const CLASSNAME = Thumbnail.className as string;
 
@@ -22,7 +31,16 @@ describe(`<${Thumbnail.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
         itShouldRenderStories(
-            { Default, Clickable, DefaultFallback, CustomFallback, IconFallback, WithBadge },
+            {
+                Default,
+                Clickable,
+                ClickableLink,
+                ClickableCustomLink,
+                DefaultFallback,
+                CustomFallback,
+                IconFallback,
+                WithBadge,
+            },
             Thumbnail,
         );
     });

package/src/components/thumbnail/Thumbnail.tsx

@@ -20,7 +20,6 @@ import { isInternetExplorer } from '@lumx/react/utils/isInternetExplorer';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusPoint } from '@lumx/react/components/thumbnail/useFocusPoint';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
-import { useClickable } from '@lumx/react/components/thumbnail/useClickable';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -63,6 +62,10 @@ export interface ThumbnailProps extends GenericProps {
     theme?: Theme;
     /** Variant of the component. */
     variant?: ThumbnailVariant;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
 }
 
 /**
@@ -109,6 +112,8 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         size,
         theme,
         variant,
+        linkProps,
+        linkAs,
         ...forwardedProps
     } = props;
     const imgRef = useRef<HTMLImageElement>(null);
@@ -119,24 +124,44 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
     const isLoading = loadingState === 'isLoading';
 
     const [wrapper, setWrapper] = useState<HTMLElement>();
-    const wrapperProps: any = {
-        ...forwardedProps,
-        ref: mergeRefs(setWrapper, ref),
-        className: classNames(
-            className,
-            handleBasicClasses({ align, aspectRatio, prefix: CLASSNAME, size, theme, variant, hasBadge: !!badge }),
-            isLoading && wrapper?.getBoundingClientRect()?.height && 'lumx-color-background-dark-L6',
-            fillHeight && `${CLASSNAME}--fill-height`,
-        ),
-        // Handle clickable Thumbnail a11y.
-        ...useClickable(props),
-    };
+
+    const isLink = Boolean(linkProps?.href || linkAs);
+    const isButton = !!forwardedProps.onClick;
+    const isClickable = isButton || isLink;
+
+    let Wrapper: any = 'div';
+    const wrapperProps = { ...forwardedProps };
+    if (isLink) {
+        Wrapper = linkAs || 'a';
+        Object.assign(wrapperProps, linkProps);
+    } else if (isButton) {
+        Wrapper = 'button';
+    }
 
     // Update img style according to focus point and aspect ratio.
     const style = useFocusPoint({ image, focusPoint, aspectRatio, imgRef, loadingState, wrapper });
 
     return (
-        <div {...wrapperProps}>
+        <Wrapper
+            {...wrapperProps}
+            ref={mergeRefs(setWrapper, ref) as any}
+            className={classNames(
+                linkProps?.className,
+                className,
+                handleBasicClasses({
+                    align,
+                    aspectRatio,
+                    prefix: CLASSNAME,
+                    size,
+                    theme,
+                    variant,
+                    isClickable,
+                    hasBadge: !!badge,
+                }),
+                isLoading && wrapper?.getBoundingClientRect()?.height && 'lumx-color-background-dark-L6',
+                fillHeight && `${CLASSNAME}--fill-height`,
+            )}
+        >
             <div
                 className={`${CLASSNAME}__background`}
                 style={{
@@ -169,7 +194,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                 ))}
             {badge &&
                 React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}
-        </div>
+        </Wrapper>
     );
 });
 Thumbnail.displayName = COMPONENT_NAME;

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

@@ -1,12 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light"
+<button
+  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
   onClick={[Function]}
-  onKeyPress={[Function]}
-  role="button"
-  tabIndex={0}
 >
   <div
     className="lumx-thumbnail__background"
@@ -25,7 +22,57 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
       style={Object {}}
     />
   </div>
-</div>
+</button>
+`;
+
+exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCustomLink' 1`] = `
+<CustomLinkComponent
+  className="custom-class-name lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
+  href="https://google.fr"
+>
+  <div
+    className="lumx-thumbnail__background"
+    style={
+      Object {
+        "display": undefined,
+        "visibility": "hidden",
+      }
+    }
+  >
+    <img
+      alt="Click me"
+      className="lumx-thumbnail__image"
+      loading="lazy"
+      src="landscape1.jpg"
+      style={Object {}}
+    />
+  </div>
+</CustomLinkComponent>
+`;
+
+exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink' 1`] = `
+<a
+  className="lumx-thumbnail lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable"
+  href="https://google.fr"
+>
+  <div
+    className="lumx-thumbnail__background"
+    style={
+      Object {
+        "display": undefined,
+        "visibility": "hidden",
+      }
+    }
+  >
+    <img
+      alt="Click me"
+      className="lumx-thumbnail__image"
+      loading="lazy"
+      src="landscape1.jpg"
+      style={Object {}}
+    />
+  </div>
+</a>
 `;
 
 exports[`<Thumbnail> Snapshots and structure should render story 'CustomFallback' 1`] = `