Introducting native <Avatar/>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+catalog/catalog.module.css

@@ -140,3 +140,8 @@
   background-color: var(--blue);
   --color-active: white;
 }
+
+.catalogAvatar {
+  font-size: 1.45ch;
+  border-radius: 2px;
+}

src/renderer/components/+catalog/catalog.tsx

@@ -41,10 +41,10 @@ import { createStorage, prevDefault } from "../../utils";
 import { CatalogEntityDetails } from "./catalog-entity-details";
 import { browseCatalogTab, catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
-import { HotbarIcon } from "../hotbar/hotbar-icon";
 import { RenderDelay } from "../render-delay/render-delay";
 import { Icon } from "../icon";
 import { HotbarToggleMenuItem } from "./hotbar-toggle-menu-item";
+import { Avatar } from "../avatar/avatar";
 
 export const previousActiveTab = createStorage("catalog-previous-active-tab", browseCatalogTab);
 
@@ -213,15 +213,17 @@ export class Catalog extends React.Component<Props> {
 
     return (
       <>
-        <HotbarIcon
+        <Avatar
-          uid={`catalog-icon-${item.getId()}`}
           title={item.getName()}
-          source={item.source}
+          colorHash={`${item.getName()}-${item.source}`}
           src={item.entity.spec.icon?.src}
-          material={item.entity.spec.icon?.material}
           background={item.entity.spec.icon?.background}
-          size={24}
+          className={styles.catalogAvatar}
-        />
+          width={24}
+          height={24}
+        >
+          {item.entity.spec.icon?.material && <Icon material={item.entity.spec.icon?.material}/>}
+        </Avatar>
         <span>{item.name}</span>
         <Icon
           small

src/renderer/components/avatar/__tests__/avatar.test.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { render } from "@testing-library/react";
+import { Avatar } from "../avatar";
+import { Icon } from "../../icon";
+
+describe("<Avatar/>", () => {
+  test("renders w/o errors", () => {
+    const { container } = render(<Avatar title="John Ferguson"/>);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  test("shows capital letters from title", () => {
+    const { getByText } = render(<Avatar title="John Ferguson"/>);
+
+    expect(getByText("JF")).toBeInTheDocument();
+  });
+
+  test("shows custom icon passed as children", () => {
+    const { getByTestId } = render(<Avatar title="John Ferguson"><Icon material="alarm" data-testid="alarm-icon"/></Avatar>);
+
+    expect(getByTestId("alarm-icon")).toBeInTheDocument();
+  });
+
+  test("shows <img/> element if src prop passed", () => {
+    const { getByAltText } = render(<Avatar title="John Ferguson" src="someurl"/>);
+
+    expect(getByAltText("John Ferguson")).toBeInTheDocument();
+  });
+});

src/renderer/components/avatar/avatar.module.css

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+.Avatar {
+  background-color: hsl(0deg, 0%, 45%);
+  text-transform: uppercase;
+  color: white;
+  font-size: 1.6ch;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.rounded {
+  border-radius: var(--border-radius);
+}

src/renderer/components/avatar/avatar.tsx

@@ -19,13 +19,14 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import styles from "./avatar.module.css";
+
 import React, { DOMAttributes } from "react";
 import randomColor from "randomcolor";
 import GraphemeSplitter from "grapheme-splitter";
-import { Avatar as MaterialAvatar, AvatarTypeMap } from "@material-ui/core";
+import { cssNames, iter } from "../../utils";
-import { iter } from "../../utils";
 
-interface Props extends DOMAttributes<HTMLElement>, Partial<AvatarTypeMap> {
+interface Props extends DOMAttributes<any> {
   title: string;
   colorHash?: string;
   width?: number;
@@ -33,6 +34,8 @@ interface Props extends DOMAttributes<HTMLElement>, Partial<AvatarTypeMap> {
   src?: string;
   className?: string;
   background?: string;
+  variant?: "circle" | "rounded" | "square";
+  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
 }
 
 function getNameParts(name: string): string[] {
@@ -51,7 +54,7 @@ function getNameParts(name: string): string[] {
   return name.split(/@+/);
 }
 
-function getIconString(title: string) {
+function getLabelFromTitle(title: string) {
   if (!title) {
     return "??";
   }
@@ -70,36 +73,30 @@ function getIconString(title: string) {
 }
 
 export function Avatar(props: Props) {
-  const { title, width = 32, height = 32, colorHash, children, background, ...settings } = props;
+  const { title, width = 32, height = 32, variant = "rounded", colorHash, children, background, imgProps, src, className, ...rest } = props;
 
   const getBackgroundColor = () => {
-    if (background) {
+    return background || randomColor({ seed: colorHash, luminosity: "dark" });
-      return background;
-    }
-
-    if (settings.src) {
-      return "transparent";
-    }
-
-    return randomColor({ seed: colorHash, luminosity: "dark" });
   };
 
-  const generateAvatarStyle = (): React.CSSProperties => {
+  const renderContents = () => {
-    return {
+    if (src) {
-      backgroundColor: getBackgroundColor(),
+      return <img src={src} {...imgProps} alt={title}/>;
-      width,
+    }
-      height,
+
-      textTransform: "uppercase",
+    return children || getLabelFromTitle(title);
-    };
   };
 
   return (
-    <MaterialAvatar
+    <div
-      variant="rounded"
+      className={cssNames(styles.Avatar, {
-      style={generateAvatarStyle()}
+        [styles.circle]: variant == "circle",
-      {...settings}
+        [styles.rounded]: variant == "rounded",
+      }, className)}
+      style={{ width: `${width}px`, height: `${height}px`, backgroundColor: getBackgroundColor() }}
+      {...rest}
     >
-      {children || getIconString(title)}
+      {renderContents()}
-    </MaterialAvatar>
+    </div>
   );
 }