Merge pull request #1433 from narmi/avatar

feat(Avatar): Implement Avatar Component

src/Avatar/index.scss

@@ -0,0 +1,26 @@
+.nds-avatar {
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  text-transform: uppercase;
+}
+
+.nds-avatar--xs {
+  height: rem(24px);
+  width: rem(24px);
+  font-size: var(--font-size-s);
+}
+
+.nds-avatar--s {
+  height: rem(32px);
+  width: rem(32px);
+}
+
+.nds-avatar--m {
+  height: rem(40px);
+  width: rem(40px);
+  font-size: var(--font-size-l);
+}

src/Avatar/index.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Avatar from "./";
+import Row from "../Row";
+
+export const Overview = () => {
+  return <Avatar initials="CP" label="Christian Paz" />;
+};
+
+export const WithImage = () => {
+  return (
+    <Avatar
+      imgurl="https://media.licdn.com/dms/image/v2/D4E0BAQHnVTkZjhvlQg/company-logo_200_200/company-logo_200_200/0/1680295112021?e=2147483647&v=beta&t=-4A2TRSHuDiBT_anhoqTULvjXfzVh7_vZApmdXUVzsc"
+      label="Narmi linked in logo"
+    />
+  );
+};
+
+export const WithLink = () => {
+  return <Avatar initials="NM" label="Narmi" linkurl="https://narmi.com" />;
+};
+
+export const Sizes = () => {
+  return (
+    <Row>
+      <Row.Item>
+        <Avatar initials="xs" label="extra small" size="xs" />
+      </Row.Item>
+      <Row.Item>
+        <Avatar initials="s" label="small" size="s" />
+      </Row.Item>
+      <Row.Item>
+        <Avatar initials="m" label="medium" size="m" />
+      </Row.Item>
+    </Row>
+  );
+};
+
+export default {
+  title: "Components/Avatar",
+  component: Avatar,
+};

src/Avatar/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import cc from "classcat";
+import AsElement from "../util/AsElement";
+
+export interface AvatarProps {
+  /** aria-label for accessibility */
+  label: string;
+  /** Fixed height and width of the avatar. Default: "s". */
+  size?: "xs" | "s" | "m";
+  /** String to display in the avatar. If imgurl is provided, this will be ignored. */
+  initials?: string;
+  /** Optional: URL of the image to display in the avatar. If provided, initials will be ignored. */
+  imgurl?: string;
+  /** Optional: URL to navigate to when the avatar is clicked */
+  linkurl?: string;
+}
+
+const Avatar = ({
+  label,
+  size = "s",
+  initials,
+  imgurl,
+  linkurl,
+}: AvatarProps) => {
+  const backgroundImage = imgurl
+    ? { backgroundImage: `url(${imgurl})`, backgroundSize: "cover" }
+    : {};
+
+  return (
+    <AsElement
+      elementType={linkurl ? "a" : "div"}
+      href={linkurl}
+      className={cc([
+        "nds-avatar",
+        `nds-avatar--${size}`,
+        "alignChild--center--center",
+        "bgColor--theme--primary",
+      ])}
+      style={backgroundImage}
+      aria-label={label}
+    >
+      {initials}
+    </AsElement>
+  );
+};
+
+export default Avatar;

src/index.js

@@ -2,6 +2,7 @@ require("./index.scss");
 
 import AutocompleteModal from "./AutocompleteModal";
 import Alert from "./Alert";
+import Avatar from "./Avatar";
 import Button from "./Button";
 import Checkbox from "./Checkbox";
 import ContentCard from "./ContentCard";
@@ -49,6 +50,7 @@ import formatDate from "./formatters/formatDate";
 export {
   AutocompleteModal,
   Alert,
+  Avatar,
   Button,
   Checkbox,
   ContentCard,

src/index.scss

@@ -56,6 +56,7 @@
 // Components
 @import "Alert/";
 @import "AutocompleteModal/";
+@import "Avatar/";
 @import "RadioButtons/";
 @import "Input/";
 @import "DateInput/";

src/index.ts

@@ -2,6 +2,7 @@
  * Typed Components
  */
 import AutocompleteModal from "./AutocompleteModal";
+import Avatar from "./Avatar";
 import DisabledShim from "./DisabledShim";
 import SeparatorList from "./SeparatorList";
 import Slider from "./Slider";
@@ -53,8 +54,9 @@ declare const formatDate;
 
 export * from "./types/Icon.types";
 export {
-  // typed  
+  // typed
   AutocompleteModal,
+  Avatar,
   DisabledShim,
   SeparatorList,
   Slider,