Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(avatar): refactor props and some styles #267

Open
wants to merge 1 commit into
base: refactor-v2
Choose a base branch
from
Open

fix(avatar): refactor props and some styles #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 19 additions & 13 deletions src/components/Avatar/Avatar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down Expand Up @@ -126,6 +126,15 @@ const Avatar = ({ avatar, letter, size, status, variant, children, ...props }) =
}
}

const formatInitials = name => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eu acho melhor adicionar essa função em utils e importar dentro do arquivo do avatar, o que tu acha?

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}
Expand All @@ -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
Expand All @@ -166,19 +175,18 @@ const Avatar = ({ avatar, letter, size, status, variant, children, ...props }) =

const AvatarContainer = styled.div(
({ size }) => css`
overflow: hidden;
width: ${size};
height: ${size};
position: relative;
`
)

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;
Expand All @@ -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;
`
)
Expand Down Expand Up @@ -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
10 changes: 5 additions & 5 deletions src/stories/Avatar.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down