From 96adddc963ad30cfc1b63e15b4b291b2cbbb4bed Mon Sep 17 00:00:00 2001
From: unknown <contato@alexbritto.com>
Date: Mon, 20 Dec 2021 15:59:58 -0300
Subject: [PATCH] fix(avatar): refactor props and some styles

---
 src/components/Avatar/Avatar.jsx | 32 +++++++++++++++++++-------------
 src/stories/Avatar.stories.mdx   | 10 +++++-----
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/Avatar/Avatar.jsx b/src/components/Avatar/Avatar.jsx
index 4e7e782c..e5efcf48 100644
--- a/src/components/Avatar/Avatar.jsx
+++ b/src/components/Avatar/Avatar.jsx
@@ -6,7 +6,7 @@ import { Icon } from '../Iconography'
 import { Flex } from '../Grid'
 import { Typography } from '../Typography'
 
-const Avatar = ({ avatar, letter, size, status, variant, children, ...props }) => {
+const Avatar = ({ avatar, name = '', size, status, variant, ...props }) => {
   const sizeProps = useMemo(() => {
     switch (size) {
       case 'tiny':
@@ -126,6 +126,15 @@ const Avatar = ({ avatar, letter, size, status, variant, children, ...props }) =
     }
   }
 
+  const formatInitials = name => {
+    let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu')
+    let initials = [...name.matchAll(rgx)] || []
+
+    initials = ((initials.shift()?.[1] || '') + (initials.pop()?.[1] || '')).toUpperCase()
+
+    return initials
+  }
+
   return avatar ? (
     <AvatarContainer
       size={sizeProps.sizeInPx}
@@ -144,12 +153,12 @@ const Avatar = ({ avatar, letter, size, status, variant, children, ...props }) =
       height={sizeProps.sizeInPx}
       justifyContent='center'
       alignItems='center'
-      bg={children || letter ? sizeProps.color : 'white'}
+      bg={name ? sizeProps.color : 'white'}
       {...props}
     >
-      {children || letter ? (
+      {name ? (
         <Typography color='orange' lineHeight={6} fontSize={sizeProps.fontSize}>
-          {children || letter}
+          {formatInitials(name)}
         </Typography>
       ) : (
         <Icon
@@ -166,7 +175,6 @@ const Avatar = ({ avatar, letter, size, status, variant, children, ...props }) =
 
 const AvatarContainer = styled.div(
   ({ size }) => css`
-    overflow: hidden;
     width: ${size};
     height: ${size};
     position: relative;
@@ -174,11 +182,11 @@ const AvatarContainer = styled.div(
 )
 
 const AvatarImage = styled.div(
-  ({ theme: {space}, avatar, size, variant }) => css`
+  ({ avatar, size, variant }) => css`
     cursor: pointer;
     width: ${size};
     height: ${size};
-    border-radius: ${variant ?  `${space[4]}px` : '50%'};
+    border-radius: ${variant ? '4px' : '50%'};
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
@@ -187,10 +195,9 @@ const AvatarImage = styled.div(
 )
 
 const NonAvatarContainer = styled(Flex)(
-  ({ theme: {space}, variant }) => css`
-    overflow: hidden;
+  ({ variant }) => css`
     cursor: pointer;
-    border-radius: ${variant ?  `${space[4]}px` : '50%'};
+    border-radius: ${variant ? '4px' : '50%'};
     position: relative;
   `
 )
@@ -220,11 +227,10 @@ Avatar.defaultProps = {
 
 Avatar.propTypes = {
   avatar: PropTypes.string,
-  letter: PropTypes.string,
+  name: PropTypes.string,
   size: PropTypes.oneOf(['tiny', 'very-small', 'small', 'medium', 'large', 'very-large', 'huge']),
   status: PropTypes.oneOf(['available', 'away', 'approved', 'busy', 'denied']),
-  variant: PropTypes.bool,
-  children: PropTypes.string
+  variant: PropTypes.bool
 }
 
 export default Avatar
diff --git a/src/stories/Avatar.stories.mdx b/src/stories/Avatar.stories.mdx
index 3bc65fda..35fd1e47 100644
--- a/src/stories/Avatar.stories.mdx
+++ b/src/stories/Avatar.stories.mdx
@@ -52,9 +52,9 @@ a variação `Variant` é utilizada quando o avatar mostrado é de uma empresa.
   </Story>
 </Canvas>
 
-# Iniciais
+# Name
 
-Caso não seja passado um atributo `avatar` é possível passar as iniciais do nome do avatar, através da propriedade `letter`.
+Caso não seja passado um atributo `avatar` é possível passar um do nome do avatar, para que sejam mostradas as suas iniciais, através da propriedade `name`.
 
 <Canvas>
   <Story
@@ -67,15 +67,15 @@ Caso não seja passado um atributo `avatar` é possível passar as iniciais do n
     }}
   >
     <SaturnProvider>
-      <Avatar letter='A' color='#ffffff' />
-      <Avatar letter='AB' color='#ffffff' size='large' />
+      <Avatar name='Lorem Ipsum' color='#ffffff' />
+      <Avatar name='Fulano de Tal' color='#ffffff' size='large' />
     </SaturnProvider>
   </Story>
 </Canvas>
 
 # Default
 
-Caso não seja haja as propriedades `avatar` e `letter` será mostrado um ícone padrão para usuário e para empresa.
+Caso não haja as propriedades `avatar` e `name` será mostrado um ícone padrão para usuário e para empresa.
 
 <Canvas>
   <Story