Brickslab.Tools

@brickslab./ui-webCarte

Carte de témoignage composée d'un LogoMark circulaire, du nom de l'auteur, d'une note en étoiles et d'un commentaire. Le logo affiche le rendu par défaut si aucun imgSrc n'est fourni. Compose LogoMark, StarRating et Text en interne.

Aperçu

Tailles — logo par défaut

size="sm"

Une expérience vraiment remarquable. Je recommande sans hésiter.

size="md" (défaut)

Une expérience vraiment remarquable. Je recommande sans hésiter.

size="lg"

Une expérience vraiment remarquable. Je recommande sans hésiter.

Variations de rating

rating=5

Parfait sur tous les points. Rien à redire.

rating=3

Correct dans l'ensemble, quelques améliorations possibles.

rating=1

En dessous de mes attentes, service client peu réactif.

Avec imgSrc personnalisé

imgSrc fourni

Intégration parfaite dans notre workflow existant. L'équipe est très réactive.

imgSrc absent (défaut)

Intégration parfaite dans notre workflow existant. L'équipe est très réactive.

Props

Prop	Type	Défaut	Requis	Description
`userName`	`string`	—	✓	Nom de l'auteur du témoignage. Affiché via le composant Text avec la variante body-md et le ton brand.
`comment`	`string`	—	✓	Corps du témoignage. Affiché via le composant Text avec la variante body-sm et le ton default.
`rating`	`number`	—	✓	Note sur 5. Passée au composant StarRating.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	—	Taille du LogoMark et de la typographie. Propagée au composant LogoMark interne.
`imgSrc`	`string`	—	—	URL de l'image du logo. Si absent, le LogoMark affiche le rendu par défaut (cercle avec la lettre B).
`imgAlt`	`string`	—	—	Texte alternatif de l'image. Défaut : "Logo de {userName}". Ignoré si imgSrc est absent.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  userName="..."
  comment="..."
  rating={0}
  size="md"
  imgSrc="..."
  imgAlt="..."
/>

userNamecommentratingsizeimgSrcimgAlt

Utilisation

tsx

import { Testimonial } from "@brickslab./ui-web";

// Rendu par défaut — logo par défaut, taille md
<Testimonial
  userName="Alice Martin"
  comment="Une expérience vraiment remarquable. Je recommande sans hésiter."
  rating={5}
/>

// Taille sm
<Testimonial
  userName="Bob Dupont"
  comment="Correct dans l'ensemble, quelques améliorations possibles."
  rating={3}
  size="sm"
/>

// Taille lg
<Testimonial
  userName="Carol Lee"
  comment="La qualité est au rendez-vous. L'équipe est très réactive."
  rating={4}
  size="lg"
/>

// Logo personnalisé avec imgSrc
<Testimonial
  userName="David Morel"
  comment="Intégration parfaite dans notre workflow existant."
  rating={5}
  imgSrc="/images/david-avatar.png"
  imgAlt="Photo de David Morel"
/>

// Note partielle
<Testimonial
  userName="Emma Blanc"
  comment="Bon produit mais la documentation peut être améliorée."
  rating={2}
/>