fix(Avatar): add sizes and fix styles

8base · Sep 4, 2018 · 17bfa96 · 17bfa96
1 parent 0e40ed9
commit 17bfa96
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 27 deletions.
diff --git a/src/atoms/Avatar/Avatar.js b/src/atoms/Avatar/Avatar.js
@@ -4,8 +4,8 @@ import React from 'react';
 import { createStyledTag, createTheme } from '../../utils';
 
 type AvatarProps = {|
-  src: string,
-  size?: 'xs' | 'md' | 'lg',
+  src?: string,
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
 |};
 
 const name = 'avatar';
@@ -17,6 +17,10 @@ const theme = createTheme(name, {
         width: '1.5rem',
         height: '1.5rem',
       },
+      sm: {
+        width: '3.6rem',
+        height: '3.6rem',
+      },
       md: {
         width: '5rem',
         height: '5rem',
@@ -25,22 +29,42 @@ const theme = createTheme(name, {
         width: '7rem',
         height: '7rem',
       },
+      xl: {
+        width: '10rem',
+        height: '10rem',
+      },
     },
   },
   defaults: {
     size: 'md',
   },
 });
 
-const StyledTag = createStyledTag(name, {
+const AvatarTag = createStyledTag(name, (props) => ({
   borderRadius: '100%',
+  overflow: 'hidden',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: props.theme.COLORS.LIGHT_GRAY1,
+  color: props.theme.COLORS.DARK_GRAY1,
+}));
+
+const AvatarImgTag = createStyledTag(`${name}Img`, {
+  width: '100%',
 });
 
 function Avatar({
   src,
   ...rest
   }: AvatarProps) {
-  return <StyledTag { ...rest } tagName="img" src={ src } />;
+  return (
+    <AvatarTag { ...rest } tagName="div">
+      {
+        src ? <AvatarImgTag tagName="img" src={ src } /> : 'A'
+      }
+    </AvatarTag>
+  );
 }
 
 export { Avatar, theme };
diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -1,44 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots ATOMS/Avatar with custom size modifiers 1`] = `
-.emotion-1 {
+.emotion-2 {
   margin: 2rem;
 }
 
 .emotion-0 {
+  width: 100%;
+}
+
+.emotion-1 {
   border-radius: 100%;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #d0d7dd;
+  color: #323c47;
   width: 1.5rem;
   height: 1.5rem;
 }
 
 <div
-  className="emotion-1"
+  className="emotion-2"
 >
-  <img
-    className="emotion-0"
-    src="https://randomuser.me/api/portraits/women/87.jpg"
-  />
+  <div
+    className="emotion-1"
+  >
+    <img
+      className="emotion-0"
+      src="https://randomuser.me/api/portraits/women/87.jpg"
+    />
+  </div>
 </div>
 `;
 
 exports[`Storyshots ATOMS/Avatar with default modifiers 1`] = `
-.emotion-1 {
+.emotion-2 {
   margin: 2rem;
 }
 
-.emotion-0 {
+.emotion-1 {
   border-radius: 100%;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #d0d7dd;
+  color: #323c47;
   width: 5rem;
   height: 5rem;
 }
 
+.emotion-0 {
+  width: 100%;
+}
+
 <div
-  className="emotion-1"
+  className="emotion-2"
 >
-  <img
-    className="emotion-0"
-    src="https://randomuser.me/api/portraits/women/76.jpg"
-  />
+  <div
+    className="emotion-1"
+  >
+    <img
+      className="emotion-0"
+      src="https://randomuser.me/api/portraits/women/76.jpg"
+    />
+  </div>
 </div>
 `;
 
@@ -12737,17 +12783,36 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Label with kind modifiers 1`] = `
 `;
 
 exports[`Storyshots ATOMS/TYPOGRAPHY/Link with children 1`] = `
-.emotion-2 {
+.emotion-3 {
   margin: 2rem;
 }
 
-.emotion-0 {
+.emotion-1 {
   border-radius: 100%;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #d0d7dd;
+  color: #323c47;
   width: 5rem;
   height: 5rem;
 }
 
-.emotion-1 {
+.emotion-0 {
+  width: 100%;
+}
+
+.emotion-2 {
   cursor: pointer;
   font-family: Poppins;
   font-weight: 400;
@@ -12758,22 +12823,26 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Link with children 1`] = `
   color: #4DA1FF;
 }
 
-.emotion-1:hover {
+.emotion-2:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 <div
-  className="emotion-2"
+  className="emotion-3"
 >
   <a
-    className="emotion-1"
+    className="emotion-2"
     to="https://randomuser.me/api/portraits/women/87.jpg"
   >
-    <img
-      className="emotion-0"
-      src="https://randomuser.me/api/portraits/women/87.jpg"
-    />
+    <div
+      className="emotion-1"
+    >
+      <img
+        className="emotion-0"
+        src="https://randomuser.me/api/portraits/women/87.jpg"
+      />
+    </div>
   </a>
 </div>
 `;