Feat/create avatar component #231
Conversation
mattgoud
requested review from
MikeLebeau,
FrancoisQtr and
cnavarro-prestashop
| export const avatarColors = [ | ||
| 'neutral', | ||
| 'blue', | ||
| 'yellow', | ||
| 'green', | ||
| 'purple', | ||
| ] as const |
There was a problem hiding this comment.
C'est un vieux commentaire ca (il se peut que j'avais commencé a review il y a longtemps et que j'avais pas fini)
There was a problem hiding this comment.
oui il n'y a plus de color variants, la prop color a été supprimée.
| color: { | ||
| type: String as PropType<PuikAvatarBgColor>, | ||
| required: false, | ||
| default: 'neutral', |
There was a problem hiding this comment.
Si on veut une couleur 'white', est-ce que ce serait pas blanc la couleur par default ?
There was a problem hiding this comment.
C'est un vieux commentaire ca (il se peut que j'avais commencé a review il y a longtemps et que j'avais pas fini)
| src: { | ||
| type: String, | ||
| required: false, | ||
| default: '', | ||
| }, |
There was a problem hiding this comment.
Pour les avatars avec une photo/image, qu'est-ce qu'on veut comme comportement si je prend une photo avec du transparent ? Genre un png ?
Est-ce qu'on laisse la transparence ? Dans ce cas faudrait enlever la couleur par default :O
There was a problem hiding this comment.
bien vu ! le cas où l'image est transparente n'a pas été prévu. Je vois ça
There was a problem hiding this comment.
Après avoir testé, je pense que c'est à l'utilisateur de jouer sur le background avec la prop "mode" (soit fond noir si 'primary' soit fond blanc si 'reverse')
| id: { | ||
| type: String, | ||
| required: false, | ||
| default: undefined, | ||
| }, |
There was a problem hiding this comment.
ça peut toujours être utile pour les utilisateurs si besoin de target facilement les éléments puik (dans la même veine que data-test). C'est une prop qui n'est pas requise donc pas contraignant de la laisser. T'en pense quoi ?
| const initials = computed(() => { | ||
| const firstInitial = props.firstname | ||
| ? props.firstname | ||
| .replace(/[^a-zA-Z0-9]/g, '') |
There was a problem hiding this comment.
Aaah je crois que j'ai, c'est pour checker si le filou ne mets pas des trucs genre '--Mike--' ??
There was a problem hiding this comment.
C'est ça ! c'est par rapport à notre discussion concernant le fait de supprimer les caractères spéciaux
| const initialsValue = props.singleInitial | ||
| ? firstInitial || lastInitial || 'P' | ||
| : firstInitial && lastInitial | ||
| ? firstInitial + lastInitial | ||
| : firstInitial && props.firstname.length > 1 | ||
| ? firstInitial + | ||
| props.firstname | ||
| .replace(/[^a-zA-Z0-9]/g, '') | ||
| .charAt(1) | ||
| .toUpperCase() | ||
| : lastInitial && props.lastname.length > 1 | ||
| ? lastInitial + | ||
| props.lastname | ||
| .replace(/[^a-zA-Z0-9]/g, '') | ||
| .charAt(1) | ||
| .toUpperCase() | ||
| : 'PS' |
There was a problem hiding this comment.
Whaaaaat ??? 👀
La regle c'est:
- Si je veux une seule lettre => je prend la premiere lettre du
prenomou la premiere lettre dunomouP - Si je ne veux pas qu'une seule lettre:
-
- Si j'ai la premiere lettre du
prenomet dunom=> je concatene les deux
- Si j'ai la premiere lettre du
-
- Sinon Si j'ai la premiere lettre du
prenomet que leprenomfait au moins 2 lettres => je prend les 2 premieres lettre duprenom
- Sinon Si j'ai la premiere lettre du
-
- Sinon Si j'ai la premiere lettre du
nomet que lenomfait au moins 2 lettres => je prend les 2 premieres lettre dunom
- Sinon Si j'ai la premiere lettre du
-
- Sinon je mets
PS
- Sinon je mets
C'est bien ca ?
Ouaaah je pense (si j'ai bien tout compris) que tu te fais un peu chier pour pas grand chose frere, je pense que t'aurais juste besoin de trim ta string :O
Genre ton bout de code serait un truc genre:
- (firstInitial + lastInitial).trim() || 'PS'
J'ai pas pris en compte le "est-ce qu'on veut qu'une seule lettre ou pas?" parce que pose la question de est-ce qu'on veut vraiment ce comportement pour le cas ou ni le nom ni le prenom ne sont renseignés ?
There was a problem hiding this comment.
la fonction à été modifiée et une refacto est en cours
la logique est un peu poussée et à été validée par @FrancoisQtr :
Si je veux une seule lettre => je prend la premiere lettre du prenom ou la premiere lettre du nom ou P
=> avec priorité à firstname (prend la première lettre de lastname si la prop firstname n'est pas renseignée) sinon valeur par défault 'P'
Sinon Si j'ai la premiere lettre du prenom et que le prenom fait au moins 2 lettres => je prend les 2 premieres lettre du prenom
=> pas tout à fait, si singleInitial est à false (valeur par défaut) et que firstname et lastname sont renseignés alors tu prends la première lettre de firstname et la première de lastname.
=> si il manque firstname ou lastname alors tu prends les deux premières lettres de la prop renseignée (soit firstname, soit lastname) sinon valeur par défaut 'PS'
Context and needs:
We need to create a component Avatar.
Formulation US:
As a PUIK user, I want to use Avatar component.
Informations :
❓ Types of changes
📚 Description
📝 Checklist