Replacing <Avatar/> component by native one (#4452)

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,51 @@
+/**
+ * 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;
+  user-select: none;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.rounded {
+  border-radius: 4px;
+}
+
+.disabled {
+  opacity: 0.5;
+  filter: grayscale(0.7);
+}

src/renderer/components/avatar/avatar.tsx

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

src/renderer/components/avatar/index.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+export * from "./avatar";