feat(Avatar): various background colors based on passed user name

8base · Oct 29, 2018 · 2ddea82 · 2ddea82
1 parent e6c4e43
commit 2ddea82
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 12 deletions.
diff --git a/src/atoms/Avatar/Avatar.js b/src/atoms/Avatar/Avatar.js
@@ -5,6 +5,7 @@ import { createStyledTag, createTheme } from '../../utils';
 
 type AvatarProps = {|
   src?: string,
+  name: string,
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   onPick?: () => void,
   pickLabel?: string,
@@ -65,14 +66,22 @@ const AvatarHandleTag = createStyledTag(`${name}Handle`, {
   color: '#d0d7dd',
 });
 
+const COLORS = ['#ffd012', '#a6e50f', '#00bb6e', '#9975d0', '#4da1ff', '#1968cb', '#ff6d4a', '#EB518E', '#eb4235'];
+
+const getBackgroundColorByName = (name: ?string) => {
+  const index = name ? ((name.charCodeAt(0) - 64) % COLORS.length) : 0;
+
+  return COLORS[index];
+};
+
 const AvatarTag = createStyledTag(name, (props) => ({
   borderRadius: '100%',
   overflow: 'hidden',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   position: 'relative',
-  backgroundColor: props.theme.COLORS.LIGHT_GRAY1,
+  backgroundColor: getBackgroundColorByName(props.name),
   color: props.theme.COLORS.DARK_GRAY1,
 
   [`&:hover ${AvatarHandleTag}`]: {
@@ -86,14 +95,15 @@ const AvatarImgTag = createStyledTag(`${name}Img`, {
 
 function Avatar({
   src,
+  name,
   onPick,
   pickLabel,
   ...rest
   }: AvatarProps) {
   return (
-    <AvatarTag { ...rest } tagName="div">
+    <AvatarTag { ...rest } name={ name } tagName="div">
       {
-        src ? <AvatarImgTag tagName="img" src={ src } /> : 'A'
+        src ? <AvatarImgTag tagName="img" src={ src } /> : (name ? name[0].toUpperCase() : 'A')
       }
       {
         (onPick && pickLabel)

diff --git a/src/atoms/Avatar/Avatar.stories.js b/src/atoms/Avatar/Avatar.stories.js
@@ -6,7 +6,11 @@ export default (asStory) => {
   asStory('ATOMS/Avatar', module, (story, { Avatar }) => {
     story
       .add('with default modifiers', () => (
-        <Avatar src="https://randomuser.me/api/portraits/women/76.jpg" />
+        <React.Fragment>
+          <Avatar />
+          <Avatar name="Madelyn" />
+          <Avatar src="https://randomuser.me/api/portraits/women/76.jpg" />
+        </React.Fragment>
       ))
       .add('with pick', () => (
         <Avatar src="https://randomuser.me/api/portraits/women/76.jpg" onPick={ () => alert(1) } pickLabel="Change" />

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -25,7 +25,7 @@ exports[`Storyshots ATOMS/Avatar with custom size modifiers 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
-  background-color: #d0d7dd;
+  background-color: #ffd012;
   color: #323c47;
   width: 2rem;
   height: 2rem;
@@ -40,6 +40,7 @@ exports[`Storyshots ATOMS/Avatar with custom size modifiers 1`] = `
 >
   <div
     className="emotion-2 emotion-1"
+    name={undefined}
   >
     <img
       className="emotion-0 emotion-1"
@@ -50,10 +51,36 @@ exports[`Storyshots ATOMS/Avatar with custom size modifiers 1`] = `
 `;
 
 exports[`Storyshots ATOMS/Avatar with default modifiers 1`] = `
-.emotion-4 {
+.emotion-8 {
   margin: 2rem;
 }
 
+.emotion-0 {
+  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;
+  position: relative;
+  background-color: #ffd012;
+  color: #323c47;
+  width: 8rem;
+  height: 8rem;
+}
+
+.emotion-0:hover .emotion-1 {
+  bottom: 0;
+}
+
 .emotion-2 {
   border-radius: 100%;
   overflow: hidden;
@@ -70,7 +97,7 @@ exports[`Storyshots ATOMS/Avatar with default modifiers 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
-  background-color: #d0d7dd;
+  background-color: #4da1ff;
   color: #323c47;
   width: 8rem;
   height: 8rem;
@@ -80,18 +107,31 @@ exports[`Storyshots ATOMS/Avatar with default modifiers 1`] = `
   bottom: 0;
 }
 
-.emotion-0 {
+.emotion-4 {
   width: 100%;
 }
 
 <div
-  className="emotion-4 emotion-5"
+  className="emotion-8 emotion-9"
 >
+  <div
+    className="emotion-0 emotion-1"
+    name={undefined}
+  >
+    A
+  </div>
   <div
     className="emotion-2 emotion-1"
+    name="Madelyn"
+  >
+    M
+  </div>
+  <div
+    className="emotion-0 emotion-1"
+    name={undefined}
   >
     <img
-      className="emotion-0 emotion-1"
+      className="emotion-4 emotion-1"
       src="https://randomuser.me/api/portraits/women/76.jpg"
     />
   </div>
@@ -119,7 +159,7 @@ exports[`Storyshots ATOMS/Avatar with pick 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
-  background-color: #d0d7dd;
+  background-color: #ffd012;
   color: #323c47;
   width: 8rem;
   height: 8rem;
@@ -168,6 +208,7 @@ exports[`Storyshots ATOMS/Avatar with pick 1`] = `
 >
   <div
     className="emotion-4 emotion-1"
+    name={undefined}
   >
     <img
       className="emotion-0 emotion-1"
@@ -14943,7 +14984,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Link with children 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
-  background-color: #d0d7dd;
+  background-color: #ffd012;
   color: #323c47;
   width: 8rem;
   height: 8rem;
@@ -14982,6 +15023,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Link with children 1`] = `
   >
     <div
       className="emotion-2 emotion-1"
+      name={undefined}
     >
       <img
         className="emotion-0 emotion-1"