@lumx/react 2.1.9-alpha.0 → 2.1.9

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

@@ -3,37 +3,41 @@
 exports[`<UserBlock> Snapshots and structure should render story 'InList' 1`] = `
 Array [
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
+    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"
-      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>
-      }
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
+    >
+      <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>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -53,37 +57,41 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
+    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"
-      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>
-      }
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar2.jpg"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
+    >
+      <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/avatar2.jpg"
+        onClick={[Function]}
+        size="m"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -103,37 +111,41 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
+    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"
-      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>
-      }
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar3.jpg"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
+    >
+      <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>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -158,53 +170,61 @@ Array [
 exports[`<UserBlock> Snapshots and structure should render story 'Sizes' 1`] = `
 Array [
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light lumx-user-block--is-clickable"
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light"
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <Avatar
-      alt="Avatar"
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="s"
-      theme="light"
-    />
+    >
+      <Avatar
+        alt="Avatar"
+        image="/demo-assets/avatar1.jpg"
+        onClick={[Function]}
+        size="s"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
+    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"
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
+    >
+      <Avatar
+        alt="Avatar"
+        image="/demo-assets/avatar1.jpg"
+        onClick={[Function]}
+        size="m"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -224,28 +244,32 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light lumx-user-block--is-clickable"
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light"
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <Avatar
-      alt="Avatar"
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="l"
-      theme="light"
-    />
+    >
+      <Avatar
+        alt="Avatar"
+        image="/demo-assets/avatar1.jpg"
+        onClick={[Function]}
+        size="l"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -273,27 +297,34 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
-  <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>
-    }
+  <div
     className="lumx-user-block__avatar"
-    image="/demo-assets/avatar1.jpg"
-    size="m"
-    theme="light"
-  />
+  >
+    <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>
   <div
     className="lumx-user-block__wrapper"
   >
     <span
       className="lumx-user-block__name"
+      onClick={[Function]}
+      tabIndex={0}
     >
       Emmitt O. Lum
     </span>
@@ -316,133 +347,3 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
   </div>
 </div>
 `;
-
-exports[`<UserBlock> Snapshots and structure should render story 'WithLinks' 1`] = `
-Array [
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light lumx-user-block--is-clickable"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Avatar
-      alt="Avatar"
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      linkProps={
-        Object {
-          "href": "https://www.lumapps.com",
-          "target": "_blank",
-        }
-      }
-      onClick={[Function]}
-      size="s"
-      theme="light"
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <a
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
-        href="https://www.lumapps.com"
-        target="_blank"
-      >
-        Emmitt O. Lum
-      </a>
-    </div>
-  </div>,
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Avatar
-      alt="Avatar"
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      linkProps={
-        Object {
-          "href": "https://www.lumapps.com",
-          "target": "_blank",
-        }
-      }
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <a
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
-        href="https://www.lumapps.com"
-        target="_blank"
-      >
-        Emmitt O. Lum
-      </a>
-      <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>,
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light lumx-user-block--is-clickable"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Avatar
-      alt="Avatar"
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      linkProps={
-        Object {
-          "href": "https://www.lumapps.com",
-          "target": "_blank",
-        }
-      }
-      onClick={[Function]}
-      size="l"
-      theme="light"
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <a
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
-        href="https://www.lumapps.com"
-        target="_blank"
-      >
-        Emmitt O. Lum
-      </a>
-      <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>,
-]
-`;

package/types.d.ts

@@ -440,10 +440,6 @@ export interface AvatarProps extends GenericProps {
 	theme?: Theme;
 	/** Props to pass to the thumbnail (minus those already set by the Avatar props). */
 	thumbnailProps?: Omit<ThumbnailProps, "image" | "alt" | "size" | "theme" | "align" | "fillHeight" | "variant" | "aspectRatio">;
-	/** 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;
 }
 /**
  * Avatar component.
@@ -1249,10 +1245,6 @@ export interface ThumbnailProps extends GenericProps {
 	theme?: Theme;
 	/** Variant of the component. */
 	variant?: ThumbnailVariant;
-	/** 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;
 }
 /**
  * Thumbnail component.
@@ -2529,10 +2521,6 @@ export declare type UserBlockSize = Extract<Size, "s" | "m" | "l">;
 export interface UserBlockProps extends GenericProps {
 	/** Props to pass to the avatar. */
 	avatarProps?: AvatarProps;
-	/** 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;
 	/** Simple action toolbar content. */
 	simpleAction?: ReactNode;
 	/** Multiple action toolbar content. */