Brickslab.Tools

@brickslab./ui-webSections

Champ d'inscription newsletter composé de Input et Button. Gère le cycle loading / success / error en interne via une Promise, ou en externe via la prop status. Deux layouts disponibles : inline (défaut) et stacked. Responsive natif : bascule en colonne sous 480 px.

Aperçu

layout

layout="inline"

layout="stacked"

size

size="sm"

size="md"

size="lg"

buttonVariant

buttonVariant="primary"

buttonVariant="secondary"

buttonVariant="ghost"

title + description

status contrôlé

status="loading"

status="success"

Bienvenue, vous êtes inscrit !

status="error"

Cette adresse est déjà inscrite.

Props

Prop	Type	Défaut	Requis	Description
`onSubmit`	`(email: string) => void \| Promise<void>`	—	✓	Callback déclenché à la soumission avec l'email validé. Si la fonction retourne une Promise, le composant gère automatiquement les états loading / success / error en interne.
`title`	`string`	—	—	Titre affiché au-dessus du formulaire.
`description`	`string`	—	—	Sous-titre ou description contextuelle.
`placeholder`	`string`	`"votre@email.com"`	—	Placeholder du champ email.
`buttonLabel`	`string`	`"S'inscrire"`	—	Libellé du bouton CTA.
`successMessage`	`string`	`"Merci, vous êtes inscrit !"`	—	Message affiché à la place du formulaire après une soumission réussie.
`status`	`"idle" \| "loading" \| "success" \| "error"`	`"idle"`	—	Statut contrôlé en externe. Lorsqu'il est fourni, il prime sur la gestion d'état interne.
`errorText`	`string`	—	—	Message d'erreur externe (ex : erreur API). Prioritaire sur l'erreur de validation interne.
`layout`	`"inline" \| "stacked"`	`"inline"`	—	Disposition du champ et du bouton. "inline" : sur la même ligne (bascule en colonne sous 480 px). "stacked" : empilés verticalement.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	—	Taille partagée entre le composant Input et le composant Button.
`buttonVariant`	`"primary" \| "secondary" \| "ghost" \| "danger"`	`"primary"`	—	Variante visuelle du bouton CTA.
`fullWidth`	`boolean`	`false`	—	Étend le container à 100 % de son parent.
`value`	`string`	—	—	Valeur email en mode contrôlé. À combiner avec onChange.
`onChange`	`(email: string) => void`	—	—	Handler de changement en mode contrôlé.
`style`	`React.CSSProperties`	—	—	Styles inline sur le container racine.
`className`	`string`	—	—	Classe CSS additionnelle sur le container racine.

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
  onSubmit="..."
  title="..."
  description="..."
  placeholder="votre@email.com"
  buttonLabel="S'inscrire"
  successMessage="Merci, vous êtes inscrit !"
  status="idle"
  errorText="..."
  // +8 autres props disponibles
/>

onSubmittitledescriptionplaceholderbuttonLabelsuccessMessagestatuserrorTextlayoutsizebuttonVariantfullWidthvalueonChangestyleclassName

Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    description="Votre sous-titre"
  />
</div>

Utilisation

tsx

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

// Basique — gestion d'état interne automatique
<NewsLetter
  onSubmit={async (email) => {
    await api.subscribe(email);
  }}
/>

// Avec titre et description
<NewsLetter
  title="Restez informé"
  description="Recevez nos actualités chaque semaine, sans spam."
  onSubmit={handleSubmit}
/>

// Layout stacked
<NewsLetter
  layout="stacked"
  title="Rejoignez la communauté"
  buttonLabel="Je m'inscris"
  fullWidth
  onSubmit={handleSubmit}
/>

// Tailles
<NewsLetter size="sm" buttonLabel="OK"            onSubmit={handleSubmit} />
<NewsLetter size="md"                              onSubmit={handleSubmit} />
<NewsLetter size="lg" buttonLabel="S'inscrire"    onSubmit={handleSubmit} />

// Variantes de bouton
<NewsLetter buttonVariant="primary"   onSubmit={handleSubmit} />
<NewsLetter buttonVariant="secondary" onSubmit={handleSubmit} />
<NewsLetter buttonVariant="ghost"     onSubmit={handleSubmit} />

// Statut contrôlé en externe
<NewsLetter status="loading"  value={email} onChange={setEmail} onSubmit={handleSubmit} />
<NewsLetter status="success"  successMessage="Bienvenue !" onSubmit={handleSubmit} />
<NewsLetter
  status="error"
  errorText="Cette adresse est déjà inscrite."
  value={email}
  onChange={setEmail}
  onSubmit={handleSubmit}
/>