adds Avatar image display component (#172)

src/components/Avatar/Avatar.js

@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { classify } from "utility/classify";
+
+export const sizes = {
+    sm: "sm",
+    md: "md",
+};
+
+/**
+ * Circular image display component for a user avatar (Note: native img element props like `alt` are passed through)
+ **/
+export const Avatar = ({ className, src, size, ...props }) => {
+    return (
+        <img
+            src={src}
+            className={classify("mainsail-avatar", size, className)}
+            {...props}
+        />
+    );
+};
+
+Avatar.propTypes = {
+    /** Url path to image */
+    src: PropTypes.string.isRequired,
+    /** Size of the image */
+    size: PropTypes.string,
+    /** Style class to add to img */
+    className: PropTypes.string,
+};
+
+Avatar.defaultProps = {
+    size: sizes.md,
+};
+
+Avatar.sizes = sizes;

src/components/Avatar/Avatar.scss

@@ -0,0 +1,20 @@
+/** Avatar Component Styles */
+img.mainsail-avatar {
+    border-radius: 50%;
+    padding: 0;
+    object-fit: cover;
+    background: transparent;
+    width: 64px;
+    height: 64px;
+    box-shadow: $mainsail-shadow-near;
+
+    &.md {
+        width: 64px;
+        height: 64px;
+    }
+
+    &.sm {
+        width: 32px;
+        height: 32px;
+    }
+}

src/components/Avatar/Avatar.stories.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { Avatar } from "./Avatar";
+
+export default {
+    title: "Elements/Avatar",
+    component: Avatar,
+    argTypes: {
+        size: {
+            name: "size",
+            type: { size: "string" },
+            control: {
+                type: "select",
+            },
+            options: Object.values(Avatar.sizes),
+        },
+    },
+};
+
+const Template = (args) => <Avatar {...args} />;
+
+export const MediumAvatar = Template.bind({});
+MediumAvatar.args = {
+    size: "md",
+    alt: "Medium Image",
+    src: "https://i.pravatar.cc/300?u=fake1266783426679@pravatar.com",
+};
+
+export const SmallAvatar = Template.bind({});
+SmallAvatar.args = {
+    size: "sm",
+    alt: "Small Image",
+    src: "https://i.pravatar.cc/300?u=abc1234",
+};

src/components/Avatar/Avatar.test.js

@@ -0,0 +1,20 @@
+// Avatar.test.js
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom/extend-expect";
+
+import { MediumAvatar, SmallAvatar } from "./Avatar.stories";
+
+it("renders the avatar in the medium size", () => {
+    render(<MediumAvatar {...MediumAvatar.args} />);
+    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.getByRole("img").classList.contains("md")).toBeTruthy();
+});
+
+it("renders the avatar in the small size", () => {
+    render(<SmallAvatar {...SmallAvatar.args} />);
+    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.getByRole("img").classList.contains("sm")).toBeTruthy();
+});

src/components/Avatar/index.js

@@ -0,0 +1 @@
+export * from "./Avatar";

src/components/core/index.js

@@ -2,6 +2,7 @@
 import "./index.scss";
 
 // Components Global Export for plopjs
+export { Avatar } from "../Avatar";
 export { SearchInput } from "../SearchInput";
 export { ProgressBar } from "../ProgressBar";
 export { Switcher, useSwitcher } from "../Switcher";

src/components/core/index.scss

@@ -6,6 +6,7 @@
 @import "../../styles/Text.scss";
 
 // SASS Global Import for plopjs
+@import "../Avatar/Avatar.scss";
 @import "../SearchInput/SearchInput.scss";
 @import "../ProgressBar/ProgressBar.scss";
 @import "../Switcher/Switcher.scss";