@lumx/react 2.1.9 → 2.2.1

package/esm/_internal/mosaic.js

@@ -7,12 +7,9 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './constants.js';
 import './mergeRefs.js';
 import './Icon2.js';
 import 'lodash/take';
 export { M as Mosaic } from './Mosaic2.js';
-import './clamp.js';
 import './Thumbnail2.js';
-import 'lodash';
 //# sourceMappingURL=mosaic.js.map

package/esm/_internal/mosaic.js.map

@@ -1 +1 @@
-{"version":3,"file":"mosaic.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"mosaic.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/esm/_internal/post-block.js

@@ -7,13 +7,10 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './constants.js';
 import './mergeRefs.js';
 import './Icon2.js';
 import 'lodash/isObject';
 export { P as PostBlock } from './PostBlock.js';
-import './clamp.js';
 import './Thumbnail2.js';
-import 'lodash';
 import './types.js';
 //# sourceMappingURL=post-block.js.map

package/esm/_internal/post-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"post-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/esm/_internal/slider.js

@@ -9,6 +9,5 @@ import 'lodash/kebabCase';
 import 'lodash/noop';
 import './InputHelper.js';
 import './InputLabel.js';
-export { S as Slider } from './Slider2.js';
-export { c as clamp } from './clamp.js';
+export { S as Slider, c as clamp } from './Slider2.js';
 //# sourceMappingURL=slider.js.map

package/esm/_internal/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/esm/_internal/thumbnail.js

@@ -7,11 +7,8 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './constants.js';
 import './mergeRefs.js';
 import './Icon2.js';
-import './clamp.js';
-export { T as Thumbnail } from './Thumbnail2.js';
-import 'lodash';
+export { T as Thumbnail, u as useFocusPointStyle } from './Thumbnail2.js';
 export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './types.js';
 //# sourceMappingURL=thumbnail.js.map

package/esm/_internal/thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/esm/_internal/types.js

@@ -1,5 +1,6 @@
 import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
 import { AspectRatio } from './components.js';
+import 'react';
 
 /**
  * All available aspect ratios.

package/esm/_internal/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/thumbnail/types.ts"],"sourcesContent":["import React from 'react';\nimport { AspectRatio, Size } from '@lumx/react';\nimport { ValueOf } from '@lumx/react/utils';\n\n/**\n *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).\n */\nexport type FocusPoint = { x?: number; y?: number };\n\n/**\n * Loading attribute is not yet supported in typescript, so we need\n * to add it in order to avoid a ts error.\n * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes\n */\ndeclare module 'react' {\n    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {\n        loading?: 'eager' | 'lazy';\n    }\n}\n\n/**\n * All available aspect ratios.\n * @deprecated\n */\nexport const ThumbnailAspectRatio: Record<string, AspectRatio> = { ...AspectRatio };\n\n/**\n *  Thumbnail sizes.\n */\nexport type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Thumbnail variants.\n */\nexport const ThumbnailVariant = {\n    squared: 'squared',\n    rounded: 'rounded',\n} as const;\nexport type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;\n"],"names":["ThumbnailAspectRatio","AspectRatio","ThumbnailVariant","squared","rounded"],"mappings":";;;AAoBA;;;;IAIaA,oBAAiD,sBAAQC,WAAR;AAE9D;;;;AAKA;;;IAGaC,gBAAgB,GAAG;AAC5BC,EAAAA,OAAO,EAAE,SADmB;AAE5BC,EAAAA,OAAO,EAAE;AAFmB;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/thumbnail/types.ts"],"sourcesContent":["import React from 'react';\nimport { AspectRatio, Size } from '@lumx/react';\nimport { ValueOf } from '@lumx/react/utils';\n\n/**\n *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).\n */\nexport type FocusPoint = { x?: number; y?: number };\n\n/**\n * Loading attribute is not yet supported in typescript, so we need\n * to add it in order to avoid a ts error.\n * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes\n */\ndeclare module 'react' {\n    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {\n        loading?: 'eager' | 'lazy';\n    }\n}\n\n/**\n * All available aspect ratios.\n * @deprecated\n */\nexport const ThumbnailAspectRatio: Record<string, AspectRatio> = { ...AspectRatio };\n\n/**\n *  Thumbnail sizes.\n */\nexport type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Thumbnail variants.\n */\nexport const ThumbnailVariant = {\n    squared: 'squared',\n    rounded: 'rounded',\n} as const;\nexport type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;\n"],"names":["ThumbnailAspectRatio","AspectRatio","ThumbnailVariant","squared","rounded"],"mappings":";;;;AAoBA;;;;IAIaA,oBAAiD,sBAAQC,WAAR;AAE9D;;;;AAKA;;;IAGaC,gBAAgB,GAAG;AAC5BC,EAAAA,OAAO,EAAE,SADmB;AAE5BC,EAAAA,OAAO,EAAE;AAFmB;;;;"}

package/esm/_internal/user-block.js

@@ -7,12 +7,11 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './constants.js';
 import './mergeRefs.js';
 import './Avatar2.js';
+import './renderLink.js';
 import './Icon2.js';
-import './clamp.js';
+import './Link2.js';
 import './Thumbnail2.js';
-import 'lodash';
 export { U as UserBlock } from './UserBlock.js';
 //# sourceMappingURL=user-block.js.map

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/esm/index.js

@@ -74,15 +74,13 @@ export { R as RadioButton, a as RadioGroup } from './_internal/RadioGroup.js';
 export { a as Select, c as SelectMultiple, b as SelectMultipleField, S as SelectVariant } from './_internal/SelectMultiple.js';
 export { S as SideNavigation, a as SideNavigationItem } from './_internal/SideNavigationItem.js';
 export { S as SkeletonCircle, b as SkeletonRectangle, a as SkeletonRectangleVariant, c as SkeletonTypography } from './_internal/SkeletonTypography.js';
-export { S as Slider } from './_internal/Slider2.js';
-export { c as clamp } from './_internal/clamp.js';
+export { S as Slider, c as clamp } from './_internal/Slider2.js';
 export { S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './_internal/SlideshowControls.js';
 export { S as Switch } from './_internal/Switch2.js';
 export { T as Table, a as TableBody, d as TableCell, c as TableCellVariant, e as TableHeader, f as TableRow, b as ThOrder } from './_internal/TableRow.js';
 export { c as Tab, b as TabList, a as TabListLayout, d as TabPanel, T as TabProvider } from './_internal/TabPanel.js';
 export { T as TextField } from './_internal/TextField.js';
-export { T as Thumbnail } from './_internal/Thumbnail2.js';
-import 'lodash';
+export { T as Thumbnail, u as useFocusPointStyle } from './_internal/Thumbnail2.js';
 export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './_internal/types.js';
 export { T as Toolbar } from './_internal/Toolbar2.js';
 export { T as Tooltip } from './_internal/Tooltip2.js';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.9",
-        "@lumx/icons": "^2.1.9",
+        "@lumx/core": "^2.2.1",
+        "@lumx/icons": "^2.2.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.1.9",
-    "gitHead": "fdcfec63e1d0e4e82934a34b6e27c8076f9cba8d"
+    "version": "2.2.1",
+    "gitHead": "bdea2aa23e6d1bea58c6405bca97228f1eefdee7"
 }

package/src/components/avatar/Avatar.stories.tsx

@@ -1,20 +1,22 @@
+import React from 'react';
+import { select } from '@storybook/addon-knobs';
+
 import { mdiDelete, mdiEye, mdiPencil, mdiStar } from '@lumx/icons';
-import { AvatarSize, Badge, ColorPalette, Emphasis, Icon, IconButton, Size } from '@lumx/react';
+import { Badge, ColorPalette, FlexBox, Icon, IconButton, Size } from '@lumx/react';
 import { AVATAR_IMAGES, avatarImageKnob, PORTRAIT_IMAGES } from '@lumx/react/stories/knobs/image';
-import { select } from '@storybook/addon-knobs';
-import React from 'react';
+import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 
 import { Avatar } from './Avatar';
 
 export default { title: 'LumX components/avatar/Avatar' };
 
-const AVATAR_SIZES: AvatarSize[] = [Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
+const AVATAR_SIZES = [Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
 
 /**
  * Avatar stories showing a simple Avatar with different sizes.
  * @return component with different sizes.
  */
-export const AvatarSizes = () =>
+export const Sizes = () =>
     AVATAR_SIZES.map((size) => (
         <Avatar
             key={size}
@@ -29,7 +31,7 @@ export const AvatarSizes = () =>
  * Avatar story showing a simple avatar with different actions.
  * @return component with different actions.
  */
-export const AvatarWithActions = () =>
+export const WithActions = () =>
     AVATAR_SIZES.map((size) => (
         <Avatar
             key={size}
@@ -37,45 +39,16 @@ export const AvatarWithActions = () =>
             alt={size}
             size={size}
             actions={
-                <div style={{ display: 'flex', justifyContent: 'center' }}>
-                    <div className="lumx-spacing-margin-right-regular">
-                        <IconButton
-                            label="Edit"
-                            color="dark"
-                            emphasis={Emphasis.low}
-                            hasBackground
-                            icon={mdiPencil}
-                            size={Size.s}
-                        />
-                    </div>
-
-                    <div className="lumx-spacing-margin-right-regular">
-                        <IconButton
-                            label="See"
-                            color="dark"
-                            emphasis={Emphasis.low}
-                            hasBackground
-                            icon={mdiEye}
-                            size={Size.s}
-                        />
-                    </div>
-
-                    <div>
-                        <IconButton
-                            label="Delete"
-                            color="dark"
-                            emphasis={Emphasis.low}
-                            hasBackground
-                            icon={mdiDelete}
-                            size={Size.s}
-                        />
-                    </div>
-                </div>
+                <FlexBox orientation="horizontal" gap="regular" vAlign="center">
+                    <IconButton label="Edit" emphasis="low" hasBackground icon={mdiPencil} size="s" />
+                    <IconButton label="See" emphasis="low" hasBackground icon={mdiEye} size="s" />
+                    <IconButton label="Delete" emphasis="low" hasBackground icon={mdiDelete} size="s" />
+                </FlexBox>
             }
         />
     ));
 
-export const AvatarWithBadge = () =>
+export const WithBadge = () =>
     AVATAR_SIZES.map((size) => (
         <Avatar
             key={size}
@@ -91,7 +64,7 @@ export const AvatarWithBadge = () =>
         />
     ));
 
-export const AvatarWithRectangularImage = () =>
+export const WithRectangularImage = () =>
     AVATAR_SIZES.map((size) => (
         <Avatar
             key={size}
@@ -102,14 +75,18 @@ export const AvatarWithRectangularImage = () =>
         />
     ));
 
-export const AvatarClickable = () =>
-    AVATAR_SIZES.map((size) => (
-        <Avatar
-            key={size}
-            className="lumx-spacing-margin-bottom"
-            image={AVATAR_IMAGES.avatar2}
-            alt={size}
-            size={size}
-            onClick={() => alert('clicked on avatar')}
-        />
-    ));
+export const Clickable = () => {
+    const baseProps = { size: 'l', image: AVATAR_IMAGES.avatar2, alt: 'avatar2' } as any;
+    return (
+        <>
+            <p>As a button</p>
+            <Avatar {...baseProps} onClick={() => alert('clicked on avatar')} />
+
+            <p>As a link</p>
+            <Avatar {...baseProps} linkProps={{ href: 'https://example.com' }} />
+
+            <p>As a custom link component</p>
+            <Avatar {...baseProps} linkAs={CustomLink} />
+        </>
+    );
+};

package/src/components/avatar/Avatar.tsx

@@ -23,6 +23,10 @@ export interface AvatarProps extends GenericProps {
     badge?: ReactElement;
     /** Image URL. */
     image: string;
+    /** 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;
     /** On click callback. */
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** On key press callback. */
@@ -70,6 +74,8 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
         badge,
         className,
         image,
+        linkProps,
+        linkAs,
         onClick,
         onKeyPress,
         size,
@@ -85,6 +91,8 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}
         >
             <Thumbnail
+                linkProps={linkProps}
+                linkAs={linkAs}
                 className={`${CLASSNAME}__thumbnail`}
                 onClick={onClick}
                 onKeyPress={onKeyPress}
@@ -93,6 +101,7 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
                 size={size}
                 image={image}
                 alt={alt}
+                theme={theme}
             />
             {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
             {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}