PayGreen/paygreen-ui v1.3.1

StepNavbar, amélioration du Toggle, fix du DatePicker + Textarea + DaTextarea

on GitHub

Par @OliviaGometz dans #176, #177 et #178, et @fanya3 dans #180 💪

StepNavbar

• feat: création des composants StepNavbar et StepNavbarItem : ils permettent d'ajouter un menu pour un wizard/onboarding (par exemple), avec des étapes cliquables ou non.

❓ Comment ça marche ?

• Si le StepNavbarItem est encapsulé dans un <a> ou un <button>, c'est que l'étape a été complétée ou en cours de complétion (puisqu'on peut y retourner en cliquant sur le StepNavbarItem).
• Si le StepNavbarItem n'est pas encapsulé par un bouton ou un lien, c'est que l'étape n'a pas été complétée (puisqu'on ne peut pas aller sur une étape pas encore remplie, il faut renseigner les étapes dans l'ordre - sinon, c'est que ce ne sont pas des étapes et que le StepNavbar n'est pas le composant adéquat pour la navigation).
• La props isDoing permet d'indiquer qu'une étape est en cours de remplissage (que le StepNavbarItem soit ou non encapsulé par un bouton ou un lien).

📱 Sur mobile, il n'y a pas d'effet de hover sur les StepNavbarItem : ils sont cliquables s'il y a un lien ou un bouton, mais comme l'écran est trop étroit, on ne cherche pas à afficher le texte et l'icon contenus dans le composant.

Toggle

• feat: on peut désormais choisir la couleur de l'état "non sélectionné" du Toggle : pour toutes les props de couleur (colorPallet, colorTheme, colorWab et colorStatus), on peut passer soit une string (fonctionnement initial), soit un tableau :

colorPallet={
    checked: 'status',
    notChecked: 'wab
}

Si une string est passée, la couleur du "non sélectionné" sera la même qu'auparavant (ces changements de couleur sont donc totalement rétro-compatibles 💪).

• feat: ajout d'une props fieldSize (sm, md ou lg - md par défaut) pour choisir la taille du Toggle. Celui-ci a été un peu réduit dans sa taille par défaut afin de mieux s'intégrer avec d'autres champs.
• feat: la props legend a été retirée afin de simplifier le Toggle déjà très complet. Par ailleurs, cela permettra de mieux adapter la taille de la légende en fonction du Toggle. De ce fait, pour garder une légende, il faudra ajouter un composant DaLabel et encapsuler le tout dans une InternalGrid. ⚠️ Attention à la rétro-comp !
• fix: l'id n'est plus obligatoire (ça marche sans, donc si on veut en mettre un, c'est possible et ça ira sur l'input, mais sinon on peut s'en passer).

DatePicker

• fix: il est désormais possible d'updater dynamiquement la value du DatePicker depuis l'extérieur du composant (via un bouton, par exemple)

Textarea et DaTextarea

• feat: prise en compte de la props defaultValue sur les composants Textarea et DaTextarea : désormais, si on définit une defaultValue, elle sera bien prise en compte (au même titre que la value) et il n'y aura plus d'erreur en console.

Style global

• fix: ajout d'un word-break pour éviter que des mooooooooooooooooooooooooooooooooooooots très très longs et incoupables ne pètent le layout (si nécessaire, il seront désormais coupés). Dans les faits, ça ne change rien parce qu'il n'y a jamais de mot assez long pour tout casser, sauf si l'utilisateur parle allemand ou qu'un QA a décidé de nous emmerder. ❤️