Merge pull request #30 from arturbien/avatar

added Avatar component

Author: arturbien

src/components/Avatar/Avatar.js

@@ -0,0 +1,63 @@
+import React from "react";
+import propTypes from "prop-types";
+import styled from "styled-components";
+import { blockSizes } from "../common/system";
+
+const StyledAvatar = styled.div`
+  display: inline-block;
+  box-sizing: border-box;
+  object-fit: contain;
+  height: calc(${props => blockSizes.md} - 2px);
+  width: calc(${props => blockSizes.md} - 2px);
+  border-radius: ${({ square }) => (square ? 0 : "50%")};
+  overflow: hidden;
+  ${({ noBorder, theme }) =>
+    !noBorder &&
+    `
+    border-top: 2px solid ${theme.borderDark};
+    border-left: 2px solid ${theme.borderDark};
+    border-bottom: 2px solid ${theme.borderLightest};
+    border-right: 2px solid ${theme.borderLightest};
+    background: ${theme.material};
+  `}
+  ${({ src }) =>
+    !src &&
+    `
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-weight: bold;
+    font-size: 1rem;
+  `}
+`;
+const SlyledAvatarIMG = styled.img`
+  display: block;
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+`;
+// src takes priority over children
+
+const Avatar = ({ children, noBorder, square, src, alt, ...otherProps }) => {
+  return (
+    <StyledAvatar noBorder={noBorder} square={square} {...otherProps}>
+      {src ? <SlyledAvatarIMG src={src} alt={alt} /> : children}
+    </StyledAvatar>
+  );
+};
+
+Avatar.defaultProps = {
+  square: false,
+  noBorder: false,
+  src: undefined,
+  children: null,
+  alt: ""
+};
+Avatar.propTypes = {
+  square: propTypes.bool,
+  noBorder: propTypes.bool,
+  children: propTypes.node,
+  src: propTypes.string,
+  alt: propTypes.string
+};
+export default Avatar;

src/components/Avatar/Avatar.stories.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+
+import Avatar from "./Avatar";
+import AppBar from "../AppBar/AppBar";
+import Toolbar from "../Toolbar/Toolbar";
+import Button from "../Button/Button";
+
+storiesOf("Avatar", module)
+  .addDecorator(story => (
+    <div
+      style={{
+        padding: "5rem",
+        background: "teal"
+      }}
+    >
+      {story()}
+    </div>
+  ))
+  .add("default", () => (
+    <AppBar>
+      <Toolbar
+        style={{ justifyContent: "space-between", paddingRight: "1rem" }}
+      >
+        <Button flat accent>
+          Menu
+        </Button>
+        <Avatar src="https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1" />
+      </Toolbar>
+    </AppBar>
+  ))
+  .add("noBorder", () => (
+    <AppBar>
+      <Toolbar
+        style={{ justifyContent: "space-between", paddingRight: "1rem" }}
+      >
+        <Button flat accent>
+          Menu
+        </Button>
+        <Avatar
+          src="https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1"
+          noBorder
+        />
+      </Toolbar>
+    </AppBar>
+  ))
+  .add("letter", () => (
+    <AppBar>
+      <Toolbar
+        style={{ justifyContent: "space-between", paddingRight: "1rem" }}
+      >
+        <Button flat accent>
+          Menu
+        </Button>
+        <Avatar style={{ background: "palevioletred" }}>AK</Avatar>
+      </Toolbar>
+    </AppBar>
+  ))
+  .add("square", () => (
+    <AppBar>
+      <Toolbar
+        style={{ justifyContent: "space-between", paddingRight: "1rem" }}
+      >
+        <Button flat accent>
+          Menu
+        </Button>
+        <Avatar square>🚀</Avatar>
+      </Toolbar>
+    </AppBar>
+  ));

src/components/index.js

@@ -3,6 +3,7 @@ import reset from "./common/reset";
 
 import Anchor from "./Anchor/Anchor";
 import AppBar from "./AppBar/AppBar";
+import Avatar from "./Avatar/Avatar";
 import Bar from "./Bar/Bar";
 import Button from "./Button/Button";
 import Checkbox from "./Checkbox/Checkbox";
@@ -42,6 +43,7 @@ export {
   reset,
   Anchor,
   AppBar,
+  Avatar,
   Bar,
   Button,
   Checkbox,