fix(Avatar): initials

8base · Jul 9, 2019 · eb373d7 · eb373d7
1 parent 897831a
commit eb373d7
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 12 deletions.
diff --git a/..._tests__/__image_snapshots__/avatar-test-js-components-avatar-common-1-snap.png b/..._tests__/__image_snapshots__/avatar-test-js-components-avatar-common-1-snap.png
diff --git a/...ests__/__image_snapshots__/avatars-test-js-components-avatars-common-1-snap.png b/...ests__/__image_snapshots__/avatars-test-js-components-avatars-common-1-snap.png
diff --git a/src/components/Avatar/Avatar.js b/src/components/Avatar/Avatar.js
@@ -5,23 +5,29 @@ import { theme, AvatarImgTag, AvatarTag, AvatarHandleTag } from './Avatar.theme'
 
 type AvatarProps = {
   src?: string,
-  name?: string,
+  firstName?: string,
+  lastName?: string,
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   onPick?: () => void,
   pickLabel?: string,
 };
 
+const DEFAULT_INITIALS = 'A';
+
 function Avatar({
   src,
-  name,
+  firstName,
+  lastName,
   onPick,
   pickLabel,
   ...rest
   }: AvatarProps) {
+  const initials = firstName && lastName ? firstName.slice(0, 1) + lastName.slice(0, 1) : DEFAULT_INITIALS;
+
   return (
-    <AvatarTag { ...rest } name={ name } tagName="div">
+    <AvatarTag { ...rest } firstName={ firstName } tagName="div">
       {
-        src ? <AvatarImgTag modifiers={ rest } tagName="img" src={ src } /> : (name ? name.slice(0, 2).toUpperCase() : 'A')
+        src ? <AvatarImgTag modifiers={ rest } tagName="img" src={ src } /> : initials
       }
       {
         (onPick && pickLabel)

diff --git a/src/components/Avatar/Avatar.stories.js b/src/components/Avatar/Avatar.stories.js
@@ -9,8 +9,8 @@ export default (asStory) => {
         <Column gap="lg">
           <Row>
             <Avatar />
-            <Avatar name="Madelyn" />
-            <Avatar name="0 First" />
+            <Avatar firstName="Madelyn" lastName="Clantz" />
+            <Avatar firstName="0" lastName="Wiers" />
             <Avatar src="https://randomuser.me/api/portraits/women/17.jpg" />
           </Row>
           <Row>

diff --git a/src/components/Avatar/Avatar.test.js b/src/components/Avatar/Avatar.test.js
@@ -5,9 +5,9 @@ import { AvatarHandleTag } from './Avatar.theme';
 
 describe('<Avatar />', () => {
   it('should render avatar with name', () => {
-    const wrapper = mount(<Avatar name="kd" />);
+    const wrapper = mount(<Avatar firstName="Albert" lastName="Santalo" />);
 
-    expect(wrapper.text()).toBe('KD');
+    expect(wrapper.text()).toBe('AS');
   });
 
   it('should render avatar without name', () => {

diff --git a/src/components/Avatar/Avatar.theme.js b/src/components/Avatar/Avatar.theme.js
@@ -6,8 +6,8 @@ const name = 'avatar';
 
 const COLORS = ['#ffd012', '#a6e50f', '#00bb6e', '#9975d0', '#4da1ff', '#1968cb', '#ff6d4a', '#EB518E', '#eb4235'];
 
-const getBackgroundColorByName = (name: ?string) => {
-  const index = name ? Math.abs(((name.charCodeAt(0) - 64) % COLORS.length)) : 0;
+const getBackgroundColorByName = (firstName: ?string) => {
+  const index = firstName ? Math.abs(((firstName.charCodeAt(0) - 64) % COLORS.length)) : 0;
 
   return COLORS[index];
 };
@@ -20,7 +20,7 @@ const [AvatarTag, themeAvatar] = createThemeTag(name, ({ COLORS }: *) => ({
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
-    backgroundColor: getBackgroundColorByName(props.name),
+    backgroundColor: getBackgroundColorByName(props.firstName),
     color: COLORS.WHITE,
     fontWeight: 600,
 
@@ -66,6 +66,7 @@ const [AvatarHandleTag, themeHandle] = createThemeTag(`${name}Handle`, ({ COLORS
     left: '0',
     right: '0',
     height: '30%',
+    cursor: 'pointer',
 
     display: 'flex',
     justifyContent: 'center',

diff --git a/src/components/Avatars/Avatars.js b/src/components/Avatars/Avatars.js
@@ -37,7 +37,14 @@ const Avatars = ({ users, size, onClick, ...rest }: AvatarsProps) => {
         React.Children.toArray(
           users.slice(0, 4).map(({ firstName, lastName, avatarUrl }, index) => (
             <Tooltip className={ tooltipClassName } message={ `${firstName} ${lastName}` }>
-              <Avatar className={ avatarClassName } style={{ zIndex: Math.abs(index - 7) }} name={ firstName } src={ avatarUrl } size={ size } />
+              <Avatar
+                className={ avatarClassName }
+                style={{ zIndex: Math.abs(index - 7) }}
+                firstName={ firstName }
+                lastName={ lastName }
+                src={ avatarUrl }
+                size={ size }
+              />
             </Tooltip>
           ),
           ))