@lumx/react 2.2.0 → 2.2.1-alpha.0

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}