Add user and group icons

src/components/Avatar.js

@@ -1,34 +1,49 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
+import { Icon } from './Icon'
 import { color } from './shared/styles'
 
 const SIZES = {
-  big: 60,
-  medium: 40,
   small: 24,
+  medium: 40,
+  big: 60,
 }
 
 const StyledAvatar = styled.div`
   background: ${props =>
     !props.src || props.isLoading ? color.metalGrey : 'transparent'};
+  border: 2px solid ${color.paperWhite};
   border-radius: 50%;
   display: inline-block;
   vertical-align: top;
   overflow: hidden;
   height: ${props => SIZES[props.size]}px;
   width: ${props => SIZES[props.size]}px;
+  line-height: ${props => SIZES[props.size] - 6}px;
+  text-align: center;
+
   img {
     width: 100%;
     height: auto;
     display: block;
   }
 `
 
-export const Avatar = ({ src, name, ...props }) => {
+export const Avatar = ({ src, size, name, isLoading, ...props }) => {
+  let avatarFigure = <Icon size={size} icon="user" />
+  const a11yProps = {}
+
+  if (isLoading) {
+    a11yProps['aria-busy'] = true
+    a11yProps['aria-label'] = 'Loading avatar ...'
+  } else if (src) {
+    avatarFigure = <img src={src} alt={name} />
+  }
+
   return (
-    <StyledAvatar {...props}>
-      <img src={src} alt={name} />
+    <StyledAvatar size={size} {...a11yProps} {...props}>
+      {avatarFigure}
     </StyledAvatar>
   )
 }

src/components/Avatar.stories.js

@@ -1,5 +1,7 @@
 import React from 'react'
+import styled from '@emotion/styled'
 import { Avatar } from './Avatar'
+import { color, spacing } from './shared/styles'
 
 export default {
   title: 'Design System|Avatar',
@@ -8,35 +10,40 @@ export default {
   },
 }
 
+const Background = styled.div`
+  background: ${color.moonGrey};
+  padding: ${spacing.padding.medium}px;
+`
+
 export const big = () => (
-  <div>
+  <Background>
     <Avatar
       size="big"
       name="Tair Assimov"
       src="https://avatars2.githubusercontent.com/u/5113"
     />
     <Avatar isLoading size="big" />
-  </div>
+  </Background>
 )
 
 export const medium = () => (
-  <div>
+  <Background>
     <Avatar
       size="medium"
       name="Tair Assimov"
       src="https://avatars2.githubusercontent.com/u/6704740"
     />
     <Avatar isLoading size="medium" />
-  </div>
+  </Background>
 )
 
 export const small = () => (
-  <div>
+  <Background>
     <Avatar
       size="small"
       name="Tair Assimov"
       src="https://avatars2.githubusercontent.com/u/211478"
     />
     <Avatar isLoading size="small" />
-  </div>
+  </Background>
 )

src/components/Icon.js

@@ -7,7 +7,7 @@ import { color } from './shared/styles'
 const SIZES = {
   small: 16,
   medium: 24,
-  large: 32,
+  big: 32,
 }
 
 const Svg = styled.svg`