@lumx/react 2.1.2 → 2.1.6-alpha.0

package/src/components/list/ListItem.stories.tsx

@@ -2,12 +2,37 @@ import React from 'react';
 
 import { Size } from '@lumx/react';
 import { select, text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
 
 import { ListItem } from './ListItem';
 
 export default { title: 'LumX components/list/ListItem' };
 
-export const Default = ({ theme }: any) => <ListItem theme={theme}>{text('text', 'Text')}</ListItem>;
+export const NonClickable = ({ theme }: any) => <ListItem theme={theme}>{text('text', 'Text')}</ListItem>;
+
+export const Link = ({ theme }: any) => (
+    <ListItem theme={theme} linkProps={{ href: '#' }}>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const Button = ({ theme }: any) => (
+    <ListItem theme={theme} onItemSelected={action('onItemSelected')}>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const LinkDisabled = ({ theme }: any) => (
+    <ListItem theme={theme} linkProps={{ href: '#' }} isDisabled>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const ButtonDisabled = ({ theme }: any) => (
+    <ListItem theme={theme} onItemSelected={action('onItemSelected')} isDisabled>
+        {text('text', 'Text')}
+    </ListItem>
+);
 
 export const Selected = ({ theme }: any) => (
     <ListItem theme={theme} linkProps={{ href: '#' }} isSelected>
@@ -28,10 +53,10 @@ export const Sizes = ({ theme }: any) => (
 );
 
 const CustomLink: React.FC = ({ children, ...props }) =>
-    React.createElement('a', { ...props, style: { color: 'red' } }, children);
+    React.createElement('a', { ...props, style: { color: 'red' }, href: 'http://google.com' }, children);
 
 export const WithCustomLink = ({ theme }: any) => (
-    <ListItem theme={theme} linkAs={CustomLink} linkProps={{ href: 'http://google.com' }}>
+    <ListItem theme={theme} linkAs={CustomLink}>
         My custom link
     </ListItem>
 );

package/src/components/list/ListItem.tsx

@@ -4,7 +4,14 @@ import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, onEnterPressed } from '@lumx/react/utils';
+import {
+    Comp,
+    GenericProps,
+    getRootClassName,
+    handleBasicClasses,
+    onEnterPressed,
+    onButtonPressed,
+} from '@lumx/react/utils';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -23,6 +30,8 @@ export interface ListItemProps extends GenericProps {
     isHighlighted?: boolean;
     /** Whether the component is selected or not. */
     isSelected?: boolean;
+    /** Whether link/button is disabled or not. */
+    isDisabled?: boolean;
     /** Reference to the <li> element. */
     listItemRef?: Ref<HTMLLIElement>;
     /** Custom react component for the link (can be used to inject react router Link). */
@@ -33,6 +42,7 @@ export interface ListItemProps extends GenericProps {
     linkRef?: Ref<HTMLAnchorElement>;
     /** Size variant. */
     size?: ListItemSize;
+
     /** On selected callback. */
     onItemSelected?(evt: SyntheticEvent): void;
 }
@@ -77,6 +87,7 @@ export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, r
         className,
         isHighlighted,
         isSelected,
+        isDisabled,
         linkAs,
         linkProps = {},
         linkRef,
@@ -84,9 +95,13 @@ export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, r
         size,
         ...forwardedProps
     } = props;
-    const onKeyDown = useMemo(() => (onItemSelected ? onEnterPressed(onItemSelected as any) : undefined), [
-        onItemSelected,
-    ]);
+
+    const role = linkAs || linkProps.href ? 'link' : 'button';
+    const onKeyDown = useMemo(() => {
+        if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected as any);
+        if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected as any);
+        return undefined;
+    }, [role, onItemSelected]);
 
     const content = (
         <>
@@ -113,17 +128,20 @@ export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, r
                 renderLink(
                     {
                         linkAs,
-                        tabIndex: 0,
-                        role: onItemSelected ? 'button' : undefined,
+                        tabIndex: !isDisabled && role === 'button' ? 0 : undefined,
+                        role,
+                        'aria-disabled': isDisabled,
                         ...linkProps,
+                        href: isDisabled ? undefined : linkProps.href,
                         className: classNames(
                             handleBasicClasses({
                                 prefix: `${CLASSNAME}__link`,
                                 isHighlighted,
                                 isSelected,
+                                isDisabled,
                             }),
                         ),
-                        onClick: onItemSelected,
+                        onClick: isDisabled ? undefined : onItemSelected,
                         onKeyDown,
                         ref: linkRef,
                     },

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

@@ -129,12 +129,32 @@ exports[`<List> Snapshots and structure should render story 'KeyboardNavigation'
   >
     Header
   </ListSubheader>
-  <CustomListItem
+  <ListItem
+    isDisabled={true}
     key=".4"
+    linkProps={
+      Object {
+        "href": "#",
+      }
+    }
+    size="regular"
+  >
+    Disabled link item
+  </ListItem>
+  <ListItem
+    isDisabled={true}
+    key=".5"
+    onItemSelected={[Function]}
+    size="regular"
+  >
+    Disabled button item
+  </ListItem>
+  <CustomListItem
+    key=".6"
   />
   <ListItem
     isHighlighted={false}
-    key=".5:$1"
+    key=".7:$1"
     linkProps={
       Object {
         "href": "#",
@@ -147,7 +167,7 @@ exports[`<List> Snapshots and structure should render story 'KeyboardNavigation'
     onMouseUp={[Function]}
     size="regular"
   >
-    Link item 3
+    Link item 4
   </ListItem>
 </ul>
 `;

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/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/thumbnail/Thumbnail.stories.tsx

@@ -18,6 +18,7 @@ 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`] = `

package/src/components/user-block/UserBlock.stories.tsx

@@ -6,11 +6,12 @@ import { UserBlock } from './UserBlock';
 
 export default { title: 'LumX components/user-block/UserBlock' };
 
-export const Sizes = () => {
+export const Sizes = ({ theme }: any) => {
     const logAction = (action: string) => () => console.log(action);
     return [Size.s, Size.m, Size.l].map((size: any) => (
         <div className="demo-grid" key={size}>
             <UserBlock
+                theme={theme}
                 name="Emmitt O. Lum"
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
@@ -23,11 +24,31 @@ export const Sizes = () => {
     ));
 };
 
-export const WithBadge = () => {
+export const WithLinks = ({ theme }: any) => {
+    const logAction = (action: string) => () => console.log(action);
+    return [Size.s, Size.m, Size.l].map((size: any) => (
+        <div className="demo-grid" key={size}>
+            <UserBlock
+                theme={theme}
+                name="Emmitt O. Lum"
+                linkProps={{ href: 'https://www.lumapps.com', target: '_blank' }}
+                fields={['Creative developer', 'Denpasar']}
+                avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
+                size={size}
+                onMouseEnter={logAction('Mouse entered')}
+                onMouseLeave={logAction('Mouse left')}
+                onClick={logAction('UserBlock clicked')}
+            />
+        </div>
+    ));
+};
+
+export const WithBadge = ({ theme }: any) => {
     const logAction = (action: string) => () => console.log(action);
     return (
         <div className="demo-grid">
             <UserBlock
+                theme={theme}
                 name="Emmitt O. Lum"
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{
@@ -42,19 +63,19 @@ export const WithBadge = () => {
                 size={Size.m}
                 onMouseEnter={logAction('Mouse entered')}
                 onMouseLeave={logAction('Mouse left')}
-                onClick={logAction('UserBlock clicked')}
             />
         </div>
     );
 };
 
-export const InList = () => {
+export const InList = ({ theme }: any) => {
     const logAction = (action: string) => () => console.log(action);
     return (
         <div className="demo-grid">
             <List itemPadding={Size.big}>
                 <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
                     <UserBlock
+                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{
@@ -74,6 +95,7 @@ export const InList = () => {
                 </ListItem>
                 <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
                     <UserBlock
+                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{
@@ -93,6 +115,7 @@ export const InList = () => {
                 </ListItem>
                 <ListItem className="lumx-color-background-dark-L6" size={Size.big}>
                     <UserBlock
+                        theme={theme}
                         name="Emmitt O. Lum"
                         fields={['Creative developer', 'Denpasar']}
                         avatarProps={{