@lumx/react 2.2.0 → 2.2.1-alpha.0

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

@@ -1,43 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<UserBlock> Snapshots and structure should render story 'InList' 1`] = `
+exports[`<UserBlock> Snapshots and structure should render story 'Clickable' 1`] = `
 Array [
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        badge={
-          <Badge
-            color="blue"
-          >
-            <Icon
-              icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-            />
-          </Badge>
-        }
-        image="/demo-assets/avatar1.jpg"
-        onClick={[Function]}
-        size="m"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      onClick={[Function]}
+      size="m"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
-      <span
+      <Link
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
+        color="dark"
       >
         Emmitt O. Lum
-      </span>
+      </Link>
       <div
         className="lumx-user-block__fields"
       >
@@ -57,41 +41,30 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        badge={
-          <Badge
-            color="blue"
-          >
-            <Icon
-              icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-            />
-          </Badge>
+      image="/demo-assets/avatar1.jpg"
+      linkProps={
+        Object {
+          "href": "https://example.com",
         }
-        image="/demo-assets/avatar2.jpg"
-        onClick={[Function]}
-        size="m"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      }
+      size="m"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
-      <span
+      <Link
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
+        color="dark"
+        href="https://example.com"
       >
         Emmitt O. Lum
-      </span>
+      </Link>
       <div
         className="lumx-user-block__fields"
       >
@@ -111,41 +84,26 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        badge={
-          <Badge
-            color="blue"
-          >
-            <Icon
-              icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-            />
-          </Badge>
-        }
-        image="/demo-assets/avatar3.jpg"
-        onClick={[Function]}
-        size="m"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      linkAs={[Function]}
+      size="m"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
-      <span
+      <Link
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
+        color="dark"
+        linkAs={[Function]}
       >
         Emmitt O. Lum
-      </span>
+      </Link>
       <div
         className="lumx-user-block__fields"
       >
@@ -167,6 +125,47 @@ Array [
 ]
 `;
 
+exports[`<UserBlock> Snapshots and structure should render story 'Default' 1`] = `
+<div
+  className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <Avatar
+    alt="Avatar"
+    className="lumx-user-block__avatar"
+    image="/demo-assets/avatar1.jpg"
+    size="m"
+    theme="light"
+  />
+  <div
+    className="lumx-user-block__wrapper"
+  >
+    <span
+      className="lumx-user-block__name"
+    >
+      Emmitt O. Lum
+    </span>
+    <div
+      className="lumx-user-block__fields"
+    >
+      <span
+        className="lumx-user-block__field"
+        key="0"
+      >
+        Creative developer
+      </span>
+      <span
+        className="lumx-user-block__field"
+        key="1"
+      >
+        Denpasar
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<UserBlock> Snapshots and structure should render story 'Sizes' 1`] = `
 Array [
   <div
@@ -174,25 +173,18 @@ Array [
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        image="/demo-assets/avatar1.jpg"
-        onClick={[Function]}
-        size="s"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      size="s"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
       <span
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
       >
         Emmitt O. Lum
       </span>
@@ -203,25 +195,18 @@ Array [
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        image="/demo-assets/avatar1.jpg"
-        onClick={[Function]}
-        size="m"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      size="m"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
       <span
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
       >
         Emmitt O. Lum
       </span>
@@ -248,25 +233,18 @@ Array [
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <div
+    <Avatar
+      alt="Avatar"
       className="lumx-user-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        image="/demo-assets/avatar1.jpg"
-        onClick={[Function]}
-        size="l"
-        tabIndex={0}
-        theme="light"
-      />
-    </div>
+      image="/demo-assets/avatar1.jpg"
+      size="l"
+      theme="light"
+    />
     <div
       className="lumx-user-block__wrapper"
     >
       <span
         className="lumx-user-block__name"
-        onClick={[Function]}
-        tabIndex={0}
       >
         Emmitt O. Lum
       </span>
@@ -294,37 +272,28 @@ Array [
 exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`] = `
 <div
   className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
 >
-  <div
+  <Avatar
+    alt="Avatar"
+    badge={
+      <Badge
+        color="blue"
+      >
+        <Icon
+          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+        />
+      </Badge>
+    }
     className="lumx-user-block__avatar"
-  >
-    <Avatar
-      alt="Avatar"
-      badge={
-        <Badge
-          color="blue"
-        >
-          <Icon
-            icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-          />
-        </Badge>
-      }
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="m"
-      tabIndex={0}
-      theme="light"
-    />
-  </div>
+    image="/demo-assets/avatar1.jpg"
+    size="m"
+    theme="light"
+  />
   <div
     className="lumx-user-block__wrapper"
   >
     <span
       className="lumx-user-block__name"
-      onClick={[Function]}
-      tabIndex={0}
     >
       Emmitt O. Lum
     </span>

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

@@ -4,6 +4,7 @@
 export default { title: 'LumX components/thumbnail/Thumbnail Demos' };
 
 export { App as Combined } from './combined';
+export { App as LoadingError } from './loading-error';
 export { App as Ratios } from './ratios';
 export { App as Sizes } from './sizes';
 export { App as Variants } from './variants';

package/src/stories/utils/CustomLink.tsx

@@ -0,0 +1,7 @@
+/* eslint-disable jsx-a11y/anchor-has-content,jsx-a11y/anchor-is-valid */
+import React from 'react';
+
+/**
+ * Example custom link that can be used in linkAs props.
+ */
+export const CustomLink: any = ({ ...props }) => <a href="#" data-custom-link {...props} />;

package/types.d.ts

@@ -430,6 +430,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. */
@@ -2528,16 +2532,22 @@ export declare type UserBlockSize = Extract<Size, "s" | "m" | "l">;
 export interface UserBlockProps extends GenericProps {
 	/** Props to pass to the avatar. */
 	avatarProps?: AvatarProps;
-	/** Simple action toolbar content. */
-	simpleAction?: ReactNode;
-	/** Multiple action toolbar content. */
-	multipleActions?: ReactNode;
 	/** Additional fields used to describe the user. */
 	fields?: string[];
+	/** Props to pass to the link wrapping the avatar 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;
+	/** Multiple action toolbar content. */
+	multipleActions?: ReactNode;
 	/** User name. */
 	name?: string;
+	/** Props to pass to the name block. */
+	nameProps?: GenericProps;
 	/** Orientation. */
 	orientation?: Orientation;
+	/** Simple action toolbar content. */
+	simpleAction?: ReactNode;
 	/** Size variant. */
 	size?: UserBlockSize;
 	/** Theme adapting the component to light or dark background. */