UserInfo

Função

Esta molécula foi desenhada para compor as informações de usuário, podendo ou não conter ações adjascentes, dependendo da demanda do projeto.

Estrutura Básica

Espaçamentos

1. horizontalMargin, como Margem Lateral
2. horizontalPadding, como Espaçamento Interno
3. verticalMargin, como Margens Superior e Inferior
4. verticalPadding, como Espaçamento Interno

Átomos

5. Avatar, com a função de User Avatar
6. Label, com a função de Bio Text Field
7. Label, com a função de User Name
8. Label, com a função de Description Text
9. Divider, com a função de divider
10. ButtonIcon, com a função de More Actions

Prop-Token Mapping

Props da Molécula

Prop	Token	Default Value	Use
horizontalMargin	SpacingMarginal	16	1
horizontalPadding	SpacingMarginal	16	2
verticalMargin	SpacingMarginal	16	3
verticalPadding	SpacingMarginal	16	4
avatarBaseProps	-	-	5
labelBioBaseProps	-	-	6
userNameBaseProps	-	-	7
labelDescriptionBaseProps	-	-	8
dividerBaseProps	-	-	9
buttonIconBaseProps	-	-	10

avatarBaseProps

Prop	Token	Default Value
size	SizeAvatarBase	64
borderColor	ColorPrimary	#A94CC9
borderRadius	BorderRadiusAvatar	32
borderWidth	BorderWidthAvatar	0

labelBioBaseProps

labelBioBaseProps	Token	Default Value
fontFamily	FontFamilyBase	undefined
fontSize	FontSizeBody	14
fontWeight	FontWeightLight	Light (200)
lineHeight	LineHeightNotification	18
multilineLimit	MultilineLimitTitle	undefined
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorMediumNeutral	#464646

userNameBaseProps

userNameBaseProps	Token	Default Value
fontFamily	FontFamilyBase	undefined
fontSize	FontSizeHeading	16
fontWeight	FontWeightBold	Bold (700)
lineHeight	LineHeightTitle	24
multilineLimit	MultilineLimitTitle	1
textAlign	TextAlignmentHeading	Left
textCase	TextCaseHighlight	Sentence
textColor	ColorPrimary	#A94CC9
opacity	OpacityDisabled	0.3

labelDescriptionBaseProps

labelDescriptionBaseProps	Token	Default Value
fontFamily	FontFamilyBase	undefined
fontSize	FontSizeBody	14
fontWeight	FontWeightNormal	Regular (400)
lineHeight	LineHeightBase	20
textAlign	TextAlignmentBody	Left
textCase	TextCaseBody	None
textColor	ColorMediumNeutral	#464646

dividerBaseProps

dividerBaseProps	Token	Default Value
height	HeightDividerRegular	1
color	ColorSurfaceLightNeutral	#9E9E9E

buttonIconMoreBaseProps

buttonIconMoreBaseProps	Token	Default Value
size	SizeIconBase	24
tintColor	ColorMediumNeutral	#464646

Reações

Responsividade

Com alterações no tamanho da tela, o átomo label com a função de Bio Text Field se altera para exibir todo conteúdo. O User Name, o Description Line 1 e Line 2 só possuem uma linha cada, se necessário aparecem reticências para acomodar o conteúdo. O restante dos átomos, Avatar User e More Actions se adequam a tela seguindo o mesmo alinhamento original.

Conteúdo

O Bio Text Field é o átomo que determina a altura da molécula. Os outros átomos, User Name e Descriptions Text Line 1 e 2, só possuem uma linha cada, para acomodar o conteúdo, se necessário, aparecem reticências. Nenhuma alteração acontece com os átomos de Avatar User e More Actions.

Estados

Essa molécula não apresenta múltiplos estados.