@lumx/react 2.1.6-alpha.4 → 2.1.8-alpha.0

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`}>

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

@@ -56,7 +56,7 @@ export const CustomFallback = () => (
 
 export const WithBadge = () => {
     const thumbnailSize = sizeKnob('Thumbnail size', Size.l);
-    const variant = select<ThumbnailVariant>('Thumbnail variant', ThumbnailVariant, ThumbnailVariant.rounded);
+    const variant = select('Thumbnail variant', ThumbnailVariant, ThumbnailVariant.rounded);
     const badgeColor = select('Badge color', ColorPalette, ColorPalette.primary);
     const activateFallback = boolean('Activate fallback', false);
     const image = imageKnob();
@@ -109,7 +109,7 @@ export const Knobs = ({ theme }: any) => {
     const fillHeight = boolean('Fill Height', false);
     const focusPoint = { x: focusKnob('Focus X'), y: focusKnob('Focus Y') };
     const image = imageKnob('Image', IMAGES.landscape1);
-    const variant = select<ThumbnailVariant>('Variant', ThumbnailVariant, ThumbnailVariant.squared);
+    const variant = select('Variant', ThumbnailVariant, ThumbnailVariant.squared);
     const size = sizeKnob('Size', Size.xxl);
     const onClick = boolean('clickable?', false) ? () => console.log('ok') : undefined;
 

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

@@ -18,7 +18,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
       alt="Click me"
       className="lumx-thumbnail__image"
       loading="lazy"
-      src="landscape1.jpg"
+      src="/demo-assets/landscape1.jpg"
       style={Object {}}
     />
   </div>
@@ -43,7 +43,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCusto
       alt="Click me"
       className="lumx-thumbnail__image"
       loading="lazy"
-      src="landscape1.jpg"
+      src="/demo-assets/landscape1.jpg"
       style={Object {}}
     />
   </div>
@@ -68,7 +68,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink'
       alt="Click me"
       className="lumx-thumbnail__image"
       loading="lazy"
-      src="landscape1.jpg"
+      src="/demo-assets/landscape1.jpg"
       style={Object {}}
     />
   </div>
@@ -116,7 +116,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] =
       alt="Image alt text"
       className="lumx-thumbnail__image"
       loading="lazy"
-      src="landscape1.jpg"
+      src="/demo-assets/landscape1.jpg"
       style={Object {}}
     />
   </div>
@@ -188,7 +188,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'WithBadge' 1`]
       alt="Image alt text"
       className="lumx-thumbnail__image"
       loading="lazy"
-      src="landscape1.jpg"
+      src="/demo-assets/landscape1.jpg"
       style={Object {}}
     />
   </div>

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

@@ -31,7 +31,10 @@ export const WithLinks = ({ theme }: any) => {
             <UserBlock
                 theme={theme}
                 name="Emmitt O. Lum"
-                linkProps={{ href: 'https://www.lumapps.com', target: '_blank' }}
+                linkProps={{
+                    href: 'https://www.lumapps.com',
+                    target: '_blank',
+                }}
                 fields={['Creative developer', 'Denpasar']}
                 avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
                 size={size}

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

@@ -146,6 +146,7 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
         >
             {avatarProps && (
                 <Avatar
+                    linkAs={linkAs}
                     linkProps={linkProps}
                     {...avatarProps}
                     className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}

package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap

@@ -19,7 +19,7 @@ Array [
         </Badge>
       }
       className="lumx-user-block__avatar"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       onClick={[Function]}
       size="m"
       theme="light"
@@ -69,7 +69,7 @@ Array [
         </Badge>
       }
       className="lumx-user-block__avatar"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       onClick={[Function]}
       size="m"
       theme="light"
@@ -119,7 +119,7 @@ Array [
         </Badge>
       }
       className="lumx-user-block__avatar"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       onClick={[Function]}
       size="m"
       theme="light"
@@ -165,7 +165,7 @@ Array [
     <Avatar
       alt="Avatar"
       className="lumx-user-block__avatar"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       onClick={[Function]}
       size="s"
       theme="light"
@@ -190,7 +190,7 @@ Array [
     <Avatar
       alt="Avatar"
       className="lumx-user-block__avatar"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       onClick={[Function]}
       size="m"
       theme="light"
@@ -231,7 +231,7 @@ Array [
     <Avatar
       alt="Avatar"
       className="lumx-user-block__avatar"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       onClick={[Function]}
       size="l"
       theme="light"
@@ -285,7 +285,7 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
       </Badge>
     }
     className="lumx-user-block__avatar"
-    image="avatar1.jpg"
+    image="/demo-assets/avatar1.jpg"
     size="m"
     theme="light"
   />
@@ -327,7 +327,7 @@ Array [
     <Avatar
       alt="Avatar"
       className="lumx-user-block__avatar"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       linkProps={
         Object {
           "href": "https://www.lumapps.com",
@@ -358,7 +358,7 @@ Array [
     <Avatar
       alt="Avatar"
       className="lumx-user-block__avatar"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       linkProps={
         Object {
           "href": "https://www.lumapps.com",
@@ -405,7 +405,7 @@ Array [
     <Avatar
       alt="Avatar"
       className="lumx-user-block__avatar"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       linkProps={
         Object {
           "href": "https://www.lumapps.com",

package/src/stories/chromaticForceScreenSize.tsx

@@ -0,0 +1,7 @@
+/* eslint-disable */
+import React from 'react';
+import isChromatic from 'chromatic/isChromatic';
+
+/** Story decorator used to force a minimum screen size when running in chromatic */
+export const chromaticForceScreenSize = (story: any) =>
+    isChromatic() ? <div style={{ minWidth: 1200, minHeight: 800 }}>{story()}</div> : story();

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/autocomplete/Demos' };
+export default { title: 'LumX components/autocomplete/Autocomplete Demos' };
 
 export { App as Default } from './default';
 export { App as Multiple } from './multiple';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/avatar/Demos' };
+export default { title: 'LumX components/avatar/Avatar Demos' };
 
 export { App as Actions } from './actions';
 export { App as Default } from './default';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/badge/Demos' };
+export default { title: 'LumX components/badge/Badge Demos' };
 
 export { App as Icon } from './icon';
 export { App as Label } from './label';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/button/Demos' };
+export default { title: 'LumX components/button/Button Demos' };
 
 export { App as EmphasisHigh } from './emphasis-high';
 export { App as EmphasisLow } from './emphasis-low';

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

@@ -1,6 +1,6 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/checkbox/Demos' };
+export default { title: 'LumX components/checkbox/Checkbox Demos' };
 
 export { App as Default } from './default';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/chip/Demos' };
+export default { title: 'LumX components/chip/Chip Demos' };
 
 export { App as Choice } from './choice';
 export { App as Default } from './default';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/comment-block/Demos' };
+export default { title: 'LumX components/comment-block/CommentBlock Demos' };
 
 export { App as Default } from './default';
 export { App as Relevant } from './relevant';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/date-picker/Demos' };
+export default { title: 'LumX components/date-picker/DatePicker Demos' };
 
 export { App as Default } from './default';
 export { App as Input } from './input';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/dialog/Demos' };
+export default { title: 'LumX components/dialog/Dialog Demos' };
 
 export { App as Alert } from './alert';
 export { App as Confirm } from './confirm';

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

@@ -1,6 +1,6 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/divider/Demos' };
+export default { title: 'LumX components/divider/Divider Demos' };
 
 export { App as Default } from './default';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/dropdown/Demos' };
+export default { title: 'LumX components/dropdown/Dropdown Demos' };
 
 export { App as Default } from './default';
 export { App as Target } from './target';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/expansion-panel/Demos' };
+export default { title: 'LumX components/expansion-panel/ExpansionPanel Demos' };
 
 export { App as Default } from './default';
 export { App as DragHandle } from './drag-handle';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/icon/Demos' };
+export default { title: 'LumX components/icon/Icon Demos' };
 
 export { App as Colors } from './colors';
 export { App as Shape } from './shape';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/image-block/Demos' };
+export default { title: 'LumX components/image-block/ImageBlock Demos' };
 
 export { App as Default } from './default';
 export { App as ImageBlockAbove } from './image-block-above';

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

@@ -1,6 +1,6 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/lightbox/Demos' };
+export default { title: 'LumX components/lightbox/Lightbox Demos' };
 
 export { App as Default } from './default';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/link/Demos' };
+export default { title: 'LumX components/link/Link Demos' };
 
 export { App as Default } from './default';
 export { App as Implicit } from './implicit';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/link-preview/Demos' };
+export default { title: 'LumX components/link-preview/LinkPreview Demos' };
 
 export { App as Big } from './big';
 export { App as Default } from './default';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/list/Demos' };
+export default { title: 'LumX components/list/List Demos' };
 
 export { App as Big } from './big';
 export { App as Huge } from './huge';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/message/Demos' };
+export default { title: 'LumX components/message/Message Demos' };
 
 export { App as Error } from './error';
 export { App as Info } from './info';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/mosaic/Demos' };
+export default { title: 'LumX components/mosaic/Mosaic Demos' };
 
 export { App as FourImages } from './four-images';
 export { App as MoreImages } from './more-images';

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

@@ -1,6 +1,6 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/notification/Demos' };
+export default { title: 'LumX components/notification/Notification Demos' };
 
 export { App as Default } from './default';