@lumx/react 2.1.0 → 2.1.4

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,7 +12,7 @@ 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';

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

@@ -1,6 +1,6 @@
 import { mdiStar } from '@lumx/icons';
 import { Badge, ColorPalette, Icon, List, ListItem, Size } from '@lumx/react';
-import { AVATAR_IMAGES, avatarImageKnob } from '@lumx/react/stories/knobs';
+import { AVATAR_IMAGES, avatarImageKnob } from '@lumx/react/stories/knobs/image';
 import React from 'react';
 import { UserBlock } from './UserBlock';
 

package/src/stories/generated/Button/Demos.stories.tsx

@@ -6,5 +6,6 @@ export default { title: 'LumX components/button/Demos' };
 export { App as EmphasisHigh } from './emphasis-high';
 export { App as EmphasisLow } from './emphasis-low';
 export { App as EmphasisMedium } from './emphasis-medium';
+export { App as FullWidth } from './full-width';
 export { App as Small } from './small';
 export { App as Toggle } from './toggle';

package/src/stories/knobs/buttonKnob.ts

@@ -0,0 +1,9 @@
+import { Button, ButtonProps, Size } from '@lumx/react';
+import { select } from '@storybook/addon-knobs';
+import { ButtonSize } from '@lumx/react/components/button/ButtonRoot';
+
+export const buttonSize = (
+    name = 'Size',
+    value: ButtonSize = Button.defaultProps?.size as any,
+    groupId: string | undefined = undefined,
+): ButtonProps['size'] => select(name, [Size.m, Size.s], value, groupId);

package/src/stories/knobs/emphasisKnob.ts

@@ -0,0 +1,8 @@
+import { Emphasis } from '@lumx/react';
+import { select } from '@storybook/addon-knobs';
+
+export const emphasis = (
+    name = 'Emphasis',
+    value: Emphasis = Emphasis.high,
+    groupId: string | undefined = undefined,
+): Emphasis => select(name, Emphasis, value, groupId);

package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, useState } from 'react';
+import { Switch } from '@lumx/react/components/switch';
+import { Alignment } from '@lumx/react';
+
+// Global state used to
+const globalState = {
+    isEnabled: false,
+    styleSheet: null as any,
+};
+
+/** Toggle apply the material CSS override. */
+async function toggleMaterialTheme(wasEnabled: boolean) {
+    globalState.isEnabled = !wasEnabled;
+
+    // Inject the material theme CSS file.
+    if (!globalState.styleSheet) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const cssCode = await import('!!raw-loader!@lumx/core/css/material.css');
+
+        // Inject CSS override in a <style> node in <head>
+        const style = document.createElement('style');
+        style.textContent = cssCode.default;
+        document.head.appendChild(style);
+
+        globalState.styleSheet = style.sheet;
+    }
+    // Disable/Enable stylesheet
+    globalState.styleSheet.disabled = !globalState.isEnabled;
+}
+
+export const MaterialThemeSwitcher: React.FC<any> = ({ theme }) => {
+    const [isEnabled, setEnabled] = useState(globalState.isEnabled);
+    const toggleTheme = useCallback(
+        () =>
+            setEnabled((wasEnabled) => {
+                toggleMaterialTheme(wasEnabled);
+                return !wasEnabled;
+            }),
+        [],
+    );
+
+    return (
+        <Switch
+            className="material-theme-switcher"
+            isChecked={isEnabled}
+            onChange={toggleTheme}
+            position={Alignment.right}
+            theme={theme}
+        >
+            Material theme
+        </Switch>
+    );
+};

package/src/utils/MaterialThemeSwitcher/index.ts

@@ -0,0 +1 @@
+export * from './MaterialThemeSwitcher';

package/types.d.ts

@@ -518,6 +518,8 @@ export interface ButtonProps extends BaseButtonProps {
 	leftIcon?: string;
 	/** Right icon (SVG path). */
 	rightIcon?: string;
+	/** When `true`, the button gets as large as possible. */
+	fullWidth?: boolean;
 }
 /**
  * Button component.
@@ -527,12 +529,17 @@ export interface ButtonProps extends BaseButtonProps {
  * @return React element.
  */
 export declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
-/**
- * Defines the props of the component.
- */
 export interface IconButtonProps extends BaseButtonProps {
-	/** Icon (SVG path). */
-	icon: string;
+	/**
+	 * Icon (SVG path).
+	 * If `image` is also set, `image` will be used instead.
+	 */
+	icon?: string;
+	/**
+	 * Image (image url).
+	 * Has priority over `icon`.
+	 */
+	image?: string;
 	/**
 	 * Label text (required for a11y purpose).
 	 * If you really don't want an aria-label, you can set an empty label (this is not recommended).
@@ -1480,6 +1487,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). */
@@ -2369,6 +2378,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). */

package/src/stories/knobs/index.ts

@@ -1,2 +0,0 @@
-export * from './image';
-export * from './lorem';