Button component

Créer un composant web "Button" ré-utilisable.

Criteres d'acceptation

[x] Le Bouton possede deux variant => Secondaire/Primaire
[x] Le Bouton possede un etat "désactivé"
[x] Le style présenté est intégré au composant
[x] La palette de style est integrée et utilise des variables CSS
[x] La font JetBrains Mono est installée dans le projet

Style

Les valeurs en PX sont a convertir en REM	Type	Value
min width	90px
min height	33px
padding top/bottom	6px
padding left/right	16px
border-radius	5px
gap	16px

Maquette

Palette

Color	Value
palette-primary	#0066C3
palette-background	#1C2128
palette-container	#22272E
palette-paper	#2D333B
palette-text	#F5F5F5
palette-text-caption	#778491
palette-disabled	#444C56

Notes

Utiliser fontsource pour l'installation des fonts est une option interessante: https://fontsource.org/

horameus commented 3 months ago

Tu veux dire quoi par 'Le style présenté est intégré au composant' ? Je suppose que tu ne veux pas d'une class css primary et secondary ?

BenoitSafari commented 3 months ago

Tu veux dire quoi par 'Le style présenté est intégré au composant' ? Je suppose que tu ne veux pas d'une class css primary et secondary ?

J'entends par la que le resultat visuel doit correspondre a la maquette.

Mais pour aller plus loin dans ta question qui semble correspondre au variant, le but du jeu c'est d'avoir une props variant qui prendrait en parametre une string "primary"/"secondary". Et c'est cette props qui definira le style du button.

<lupo-button variant="primary">
    Coucou, click ici pour un bon plan
</lupo-button>

Tu peux regler la question de plusieurs façons;

Creer une condition dans ton composant qui resoud la classe en fonction de la props. Et donc faire des classes "LupoButton--primary"/"LupoButton--secondary" ou un truc dans ce gout la
Utiliser un selecteur css ciblant l'attribut "variant"

horameus / Lupokedex