feat: add avatar component (#127)

Add avatar component with default letter avatar story

.eslintrc.js

@@ -10,7 +10,16 @@ module.exports = {
       typescript: {},
     },
   },
+
   rules: {
+    "import/extensions": [
+      "error",
+      "always",
+      {
+        ts: "never",
+        tsx: "never",
+      },
+    ],
     "react/jsx-filename-extension": [
       2,
       { extensions: [".js", ".jsx", ".ts", ".tsx"] },

src/components/Avatar.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Avatar } from "./Avatar";
+
+export default {
+  title: "Avatar",
+};
+
+export const Default: React.FC = () => <Avatar />;

src/components/Avatar.styles.ts

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import MaterialUIAvatar from "@material-ui/core/Avatar";
+import { deepOrange } from "@material-ui/core/colors";
+
+interface BaseButtonProps {
+  textcolor?: string | undefined;
+  backgroundcolor?: string | undefined;
+  bordercolor?: string | undefined;
+}
+
+export const AvatarStyled = styled(MaterialUIAvatar)<BaseButtonProps>`
+  width: 83px;
+  height: 83px;
+  border: 3px solid #985eff;
+  background-color: ${({ backgroundcolor }): string => backgroundcolor || deepOrange[500]};
+  color: ${({ textcolor }): string => textcolor || "white"};
+`;

src/components/Avatar.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { StylesProvider } from "@material-ui/core/styles";
+import { AvatarStyled } from "./Avatar.styles";
+
+export const Avatar: React.FC = () => (
+  <StylesProvider injectFirst>
+    <AvatarStyled>CB</AvatarStyled>
+  </StylesProvider>
+);