@lumx/react 2.1.6-alpha.5 → 2.1.8

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';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/popover/Demos' };
+export default { title: 'LumX components/popover/Popover Demos' };
 
 export { App as Alignments } from './alignments';
 export { App as Auto } from './auto';

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

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

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/progress/Demos' };
+export default { title: 'LumX components/progress/Progress Demos' };
 
 export { App as Circular } from './circular';
 export { App as Linear } from './linear';

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/select/Demos' };
+export default { title: 'LumX components/select/Select Demos' };
 
 export { App as MultiSelectChip } from './multi-select-chip';
 export { App as MultiSelectSearch } from './multi-select-search';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/side-navigation/Demos' };
+export default { title: 'LumX components/side-navigation/SideNavigation Demos' };
 
 export { App as Default } from './default';
 export { App as Emphasis } from './emphasis';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/skeleton/Demos' };
+export default { title: 'LumX components/skeleton/Skeleton Demos' };
 
 export { App as Animation } from './animation';
 export { App as Circle } from './circle';

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/text-field/Demos' };
+export default { title: 'LumX components/text-field/TextField Demos' };
 
 export { App as CharacterCounter } from './character-counter';
 export { App as Clearable } from './clearable';

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/thumbnail/Demos' };
+export default { title: 'LumX components/thumbnail/Thumbnail Demos' };
 
 export { App as Combined } from './combined';
 export { App as Ratios } from './ratios';

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * File generated when storybook is started. Do not edit directly!
  */
-export default { title: 'LumX components/user-block/Demos' };
+export default { title: 'LumX components/user-block/UserBlock Demos' };
 
 export { App as Extended } from './extended';
 export { App as SizeL } from './size-l';

package/src/stories/knobs/enumKnob.ts

@@ -10,5 +10,5 @@ export function enumKnob<T>(
     const values: Record<string, T> = !isArray(enumObj)
         ? enumObj
         : Object.fromEntries(Object.values(enumObj).map((value) => [value, value]));
-    return select<any>(name, values, defaultValue, groupId);
+    return select(name, values, defaultValue, groupId);
 }

package/src/stories/knobs/image.ts

@@ -1,17 +1,17 @@
 import { select } from '@storybook/addon-knobs';
 
-import avatar1 from '../demo-assets/avatar1.jpg';
-import avatar2 from '../demo-assets/avatar2.jpg';
-import avatar3 from '../demo-assets/avatar3.jpg';
-import avatar4 from '../demo-assets/avatar4.jpg';
-import landscape1 from '../demo-assets/landscape1.jpg';
-import landscape2 from '../demo-assets/landscape2.jpg';
-import landscape3 from '../demo-assets/landscape3.jpg';
-import portrait1 from '../demo-assets/portrait1.jpg';
-import portrait2 from '../demo-assets/portrait2.jpg';
-import portrait3 from '../demo-assets/portrait3.jpg';
-import square1 from '../demo-assets/square1.jpg';
-import square2 from '../demo-assets/square2.jpg';
+const avatar1 = '/demo-assets/avatar1.jpg';
+const avatar2 = '/demo-assets/avatar2.jpg';
+const avatar3 = '/demo-assets/avatar3.jpg';
+const avatar4 = '/demo-assets/avatar4.jpg';
+const landscape1 = '/demo-assets/landscape1.jpg';
+const landscape2 = '/demo-assets/landscape2.jpg';
+const landscape3 = '/demo-assets/landscape3.jpg';
+const portrait1 = '/demo-assets/portrait1.jpg';
+const portrait2 = '/demo-assets/portrait2.jpg';
+const portrait3 = '/demo-assets/portrait3.jpg';
+const square1 = '/demo-assets/square1.jpg';
+const square2 = '/demo-assets/square2.jpg';
 
 export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
 

package/src/untypped-modules.d.ts

@@ -3,3 +3,5 @@
  */
 declare module 'test-data-bot';
 declare module '*.jpg';
+declare module '@storybook/addon-knobs';
+declare module '@storybook/addon-actions';