Delai moyen etape
3.2j
Scenario d'adoption
Fil rouge montrant la coherence du Design System dans un parcours complet d'onboarding Financial Service.
Objectif
Ce scenario demontre comment les composants b.connect DS V3 se combinent pour creer un parcours utilisateur coherent, de l'intake a l'activation d'un Financial Service.
Contexte
Cas d'usage : Onboarding d'un Financial Service "Corp Alpha SAS" Persona : Operateur compliance b.connect Flux : Intake → KYB/KYC → Configuration OIDC → Activation production
Ecran complet : Intake
1. En-tete de page
Onboarding
Financial Services
2. Stepper de progression
- Intake
- KYB/KYC
- OIDC
- Activation
3. KPIs
Risque courant
Faible
Incidents bloquants
0
4. Machine d'etats
PROSPECT
WAITING_DOCS22%
ELIGIBLE
READY_TO_CONFIGURE
PROD_DELIVERED
5. Table des FS
| SIREN | Etat | Progression | ||
|---|---|---|---|---|
| Corp Alpha SAS | 123 456 789 | WAITING_DOCS | ||
| FinServ Beta | 987 654 321 | ELIGIBLE | ||
| NeoBank Gamma | 456 789 012 | INELIGIBLE |
6. Fil d'activite
7. Notification de confirmation
Dossier cree
Corp Alpha SAS — onboarding initie avec succes.
Annotations
| Zone | Composant | Token notable |
|---|---|---|
| Header | BcPageHeader | --bc-display (Poppins 700) |
| Stepper | BcStepperH | --bc-pink (accent actif) |
| KPIs | BcStatCard | --bc-raised (fond eleve) |
| Etats | BcStateMachine | --bc-blue-bg (noeud actif) |
| Table | BcDataGrid | --bc-edge2 (bordures lignes) |
| Feed | BcActivityFeed | Tones semantiques |
| Toast | BcToast | --bc-green (succes) |
Matrice "quand utiliser quoi"
| Decision | Option A | Option B | Quand choisir A | Quand choisir B |
|---|---|---|---|---|
| Navigation interne | BcTabs | BcStepperH | Navigation non lineaire | Flux sequentiel strict |
| Notification | BcToast | BcBanner | Confirmation ephemere | Alerte persistante |
| Donnees denses | BcDataGrid | BcCard | Comparaison tabulaire | Contenu vertical, storytelling |
| Action bloquante | BcModal | BcDrawer | Interruption voulue | Contexte preserve |
| Selection | BcSelect | BcSelectSearchable | < 10 options | > 10 options, recherche |
| Etat binaire | BcToggle | BcCheckbox | On/off immediat | Selection formulaire |
Versioning
Le Design System suit SemVer :
| Type | Format | Exemple | Impact |
|---|---|---|---|
| Major | X.0.0 | Breaking changes | Migration requise |
| Minor | 0.X.0 | Nouveaux composants | Adoption incrementale |
| Patch | 0.0.X | Fixes visuels/a11y | Transparent |
Changelog recent
- v3.3.0 (21 fev. 2026) — P5 delivered : composants complementaires
- v3.2.0 (21 fev. 2026) — P3/P4 delivered : data + feedback
- v3.1.0 (21 fev. 2026) — Core finalized : fondations + P0/P1/P2