Box Title

); } ``` #### Provider Trilogy **Toujours dans votre fichier _document.tsx ou dans votre fichier racine, importez et utilisez le provider de la façon suivante :** ``` // _document.tsx import { Head, Html, Main, NextScript } from "next/document"; import { TrilogyProvider } from "@bytel/trilogy-react/lib/context/provider"; export default function Document() { return (

); } ``` #### Structurer sa première page avec Trilogy **Il est primordial d'avoir une base de travail saine qui respecte les conventions. Pour ce faire, rien de compliqué : il suffit de jouer correctement avec les différents éléments de structure, notamment les composants [Section](/components/Section) et [Container](/components/Container).** ``` // Home.tsx import { Button, Container, Section, Text } from '@bytel/trilogy-react'; export default function Home() { return (

First section

Second section

); } ``` # ✧ Content Design {#contentDesign} ## Librairie d'exemples ###### **Piochez dans cette librairie d'exemples pour vous inspirer en fonction de la posture relationnelle à avoir avec les utilisatrices et utilisateurs.** ## 1. Collectifs : on fait équipe - “**On a une surprise** pour vous.” - “**Nos boutiques vous accueillent** de 9h à 19h.” - “Chez Bouygues Telecom, **on vous réserve** des bons plans toute l’année.” - “On configure votre offre **ensemble**.” - “**Nos conseillères et nos conseillers** sont là pour vous aiguiller. ” - “**Besoin d’aide** pour choisir ?” - “**Vous vous demandez** quel mode de livraison choisir ?” - “**Parce qu’on se connaît bien**, on a imaginé une boutique en ligne rien que pour vous.” - “**Noa, parce qu’on tient à vous**, on vous propose cette remise de -5€/mois sur votre Bbox pendant un an.” - “On voulait vous remercier : **on vous compte parmi les plus fidèles**.” - “Donner un giga symbolique, c’est **lutter ensemble contre l’exclusion numérique.**” - “Répondez à ce court questionnaire pour **trouver la box qu’il vous faut.**” - “Pour commencer, **et si on vérifiait votre éligibilité à la fibre ?**” - “**Regardons ensemble** les offres disponibles chez vous...” - “**Trouvons** votre box idéale.” - “**On a trouvé** votre box idéale !” ## 2. Empathiques : on est attentionnés - “Bienvenue sur votre espace client, **Nicole** !” - “**Bonne nouvelle Raphaël** : la fibre est disponible chez vous.” - “Marie-Christine, **que recherchez-vous ?**” - “**Heureux de vous accueillir** 👋” - “**Ravis de vous rencontrer** 😃” - “**Allez**, on vous guide 🙂” - “**Tadam !** Toutes les réponses à vos questions :” - “**Psst !** Et si on vous offrait votre déménagement ?” - “**Un imprévu ? Hop !** Direction votre espace client pour modifier votre rendez-vous.” - “Cela mérite de **jeter un œil, non ?**” - “Avec la fibre, **ça va très vite.**” - “**Envie d’en savoir plus** sur nos forfaits ?” - “**On vous montre** nos bons plans du moment ?” - “Regardons ensemble **ces offres rien que pour vous.**” - “**Une astuce pour éviter la queue** : prendre rendez-vous en ligne !” - “Vous recherchez une box internet, un forfait ou un smartphone ? **On vous guide.**” - “**On vous accompagne pour** passer à la fibre.” - “**On vous montre en vidéo** comment accéder à vos chaînes Bbox.” - “C’est votre première connexion ? **On vous accompagne pas à pas.**” - “OK Houston, **nouveau forfait paré au lancement !**” - “Le paiement n’a pas fonctionné. **Mais bien sûr, vous avez droit à un nouvel essai.**” - “**Vos besoins ont changé ?**” - “Vous choisissez votre nouveau forfait. **Et hop, vous économisez aussi sur votre Bbox !**” ## 3. Proactifs : on entreprend - “**On continue** sur l'application ?” - “Pour profiter de la fibre, **vous avez le choix entre nos offres.**” - “A la recherche d’un bon plan ? **Vous êtes au bon endroit.**” - “Besoin d’un nouveau mobile, **peut-être ?**” - “**Et si vous préférez** vous rendre en boutique…” - “**Vous souhaitez plus de précisions ?** Vous savez où nous joindre :” - “**On vous le montre** en boutique ?” - “**Trouver mon offre idéale**” - “**Plutôt** Samsung **ou** Xiaomi ?” - “**Bye bye** l’ADSL ! **Vive** la fibre !” - “Vous avez toutes les réponses à vos questions **[juste ici](https://www.assistance.bouyguestelecom.fr/s/)**. - “Pour passer à la fibre, **[c’est par ici.](https://www.bouyguestelecom.fr/mon-compte)**” - “Vous avez encore des questions ? **On vous répond.**” - “Des photos si précises que l’**on peut compter les tâches de rousseur.**” - “**Internet partout** chez vous” - “**Vous profitez** d’un forfait Sensation 50 Go.” - “Envie de plus de gigas ? Votre budget a changé ? **On a forcément un forfait pour vous.**” - “Ces options **devraient vous plaire**” - “Ces accessoires **vous iraient bien**” ## 4. Honnêtes : on parle vrai - “**On peut le dire Léo** : à la maison, tout le monde a envie d’un WiFi au top dans toutes les pièces.” - “Avec la fibre, **vous allez voir la différence.**” - “300 Mb/s, 1 Gb/s, 2 Gb/s… **On vous montre ce que ça change ?**” - “**Oui oui, on a pensé à** un bonus rien que pour vous.” - “Vous pourrez récupérer votre smartphone **dans 2 heures en boutique.**” - “Nos 9 conseils pour avoir **une box en pleine forme**” - “**Pour un WiFi optimal**, on vous redonne les règles d’or :“ - “Vous voulez changer d’offre Bbox ? **C’est possible depuis votre espace client.**“ - “**Vous voulez quand même résilier ?**” - “La résiliation n’est **pas toujours la solution**” - “Vous pouvez ajouter ces avantages **dès maintenant ou plus tard depuis votre espace client.**” - “Vous vous souvenez du passage du modem 56k à l'ADSL au début des années 2000 ? 👴 **Eh bien le passage de l’ADSL à la fibre, c'est un peu la même chose !**” ## 5. Inspirants : on fait grandir - “**Vous cliquez, vous collectez, le tour est joué !**” - “**Accessoirement**, réalisez l’accord parfait.” - “Nos conseillers peuvent vous rappeler à l’heure de votre choix. **Bye bye les musiques d’attente** 👋” - “**Ça nous fait plaisir de** vous rendre service.” - “Vos enfants sont devant leurs écrans **et hop, vous le vivez bien !**” - “Nous sommes **ravis que vous soyez ravie** 😃” - “**Et au fait**, Bertrand…” - “Quelque chose nous dit que **vous allez l’adorer.**” - “**Et oui**, 9 clients sur 10 recommandent notre réseau mobile !” - “La connexion coupée ? **C’est du passé !**” - “Meilleure connexion, stabilité, fluidité... **La 5G a tout pour plaire.**” - “**Oui, vous pouvez** transmettre gratuitement votre forfait et ses avantages à un proche.” - “Avec votre offre Bbox, vous ajoutez vos plateformes de contenus préférées et vous en profitez gratuitement pendant plusieurs mois. **Alors, on y va ?**” - “Quelles options vous feraient plaisir **pour compléter votre offre Bbox ?**” - “**Pourquoi cette box est faite pour vous ?**” ## Accessibilité ###### **Les règles d’accessibilité servent à garantir une expérience similaire aux utilisatrices et utilisateurs, quelle que soit leur situation.** ## Ecrire pour les personnes dyslexiques Certaines personnes, notamment dyslexiques, peuvent avoir des difficultés à lire, c’est pourquoi il faut respecter certaines règles pour s’assurer qu’elles puissent avoir l’expérience la plus agréable possible. Notez que ces règles facilitent la lecture pour tout le monde et sont des bonnes pratiques de manière générale. - On n’utilise pas de jargon - On évite un maximum de centrer le texte et on l’aligne à gauche - On propose [un contenu clair et concis](https://design.bouyguestelecom.fr/getting-started/content-design/content-principles/microcopy-rules) pour minimiser la charge cognitive - On évite la double négation - On hiérarchise et fragmente un maximum l’information à l’aide de titre, phrases courtes, listes à puces... - Une ligne devrait idéalement faire 45 caractères, maximum 100 caractères - On privilégie les listes à puces à partir de 3 éléments cités - On évite de tout écrire en lettres capitales qui rendent la lecture plus difficile - On utilise les mêmes formulations sur des contenus similaires dans la page ✅ **Do** "Découvrez nos offres exclusives" "Connaissez-vous la référence de votre prise fibre ?" "Connectez-vous à votre espace client pour consulter vos documents et gérer votre offre." ❌ **Don't** "DÉCOUVREZ NOS OFFRES EXCLUSIVES" "Connaissez-vous votre référence OTP ?" "Vous pouvez également vous connecter à votre espace client pour consulter vos factures, vos contrats, souscrire de nouvelles options, voir votre consommation, gérer votre forfait, accéder à l’assistance ou encore suivre vos commandes." ## Ecrire pour les personnes malvoyantes, non-voyantes et daltoniennes Les personnes malvoyantes et non-voyantes peuvent avoir recours à un lecteur d’écran pour parcourir internet. Le lecteur est un logiciel qui va lire les éléments de la page dans l’ordre du code source. - On respecte les règles d'écriture de la langue (ex. : 3,5€) et d'orthographe pour ne pas davantage perturber ce lectorat - On intègre du texte stylé en CSS au lieu d'utiliser un texte dans des visuels ou des images - On évite de donner les informations uniquement par les couleurs (daltonisme) - On s’assure que les images et emojis qui apportent des informations soient bien restituées par les lecteurs d’écran - Au contraire, on s’assure que les images et emojis qui n’apportent aucune information ne soient pas restituées par les lecteurs d’écran ## Conversation ###### ###### La conversation doit être humaine et cohérente entre 2 personnalités : Bouygues Telecom et l’utilisatrice ou l’utilisateur. ## 1. La voix de Bouygues Telecom : “On/Nous” ##### On utilise le “On” et le “Nous” lorsqu’on s’adresse aux utilisatrices et utilisateurs au nom de “Bouygues Telecom”. - ###### On privilégie généralement le “On” pour montrer notre connivence avec nos utilisatrices et utilisateurs ✅ **Do** "On a une surprise pour vous" "On vous montre nos bons plans du moment ?" ❌ **Don't** "Bouygues Telecom a une surprise pour vous" "Nous vous montrons nos bons plans du moment ?" - ###### On privilégie le “Nous” dans les échanges plus solennels ✅ **Do :** "Nous sommes désolés" ❌ **Don't :** "On est désolé" - ###### On privilégie l’accord avec le “Nous” dans certaines tournures impératives pour marquer notre solidarité avec l’utilisatrice ou utilisateur ✅ **Do** "Estimons ensemble vos frais de résiliation" "Regardons les offres disponibles chez vous" ❌ **Don't** "Estimez vos frais de résiliation" "Regardez les offres disponibles chez vous" ## 2. La voix de l’utilisatrice ou utilisateur : “Vous/Je” ##### On utilise le “Vous” plutôt que “Les clients” lorsqu’on dialogue avec l’utilisatrice ou utilisateur. On n’utilise pas le “Je”, sauf dans les cas exceptionnels listés ici. - ###### En général, on utilise le “Vous”/“Votre” et non le “Je”/“Mon”, car on ne parle pas à la place de l’utilisateur ✅ **Do** CTA : "Personnaliser votre téléphone" Titre : "Que recherchez-vous ?" Description : "Recevez votre carte SIM, activez-la en un instant, et le tour est joué." ❌ **Don't** CTA : "Je personnalise mon téléphone" Titre : "Je recherche" Description : "Je reçois ma carte SIM, je l’active en un instant, et le tour est joué." ##### > Exception 1 : le “Je” dans les FAQ. - ###### On utilise le “Je” dans les questions des FAQ et on y répond avec le “Vous” ✅ **Do :** "Quels sont les délais si je repousse ma date de paiement ? Si votre demande de changement a été faite le 10 du mois en cours, vous êtes prélevé le 23 de chaque mois." ❌ **Don't :** "Quels sont les délais si je repousse ma date de paiement ? Si ma demande de changement a été faite le 10 du mois en cours, je suis prélevé le 23 de chaque mois." ##### > Exception 2 : le “Je” dans certaines checkbox. - ###### On utilise le “Je” lorsque l’utilisatrice ou utilisateur doit cocher des informations personnelles ou valider une mention légale en son nom ✅ **Do :** "J'autorise Bouygues Telecom à communiquer mes informations personnelles à Younited pour pré-remplir ma demande et gagner du temps." ❌ **Don't :** "Vous autorisez Bouygues Telecom à communiquer vos informations personnelles à Younited pour pré-remplir votre demande et gagner du temps." ##### > Exception 3 : le “Mon/Ma/Mes” dans certains titres et CTA. - ###### On utilise “Mon/ Ma/Mes” dans les titres et CTA lorsqu’on parle d’une offre ou d’un équipement que l’utilisatrice ou utilisateur possède déjà ou qu’on décrit une action qui lui est propre ✅ **Do** "Ma conso" "Mes options (6)" "Voir mes factures" "Tester mon éligibilité" ❌ **Don't** "La conso de votre mobile" "Les options (6)" "Voir les factures" "Tester l'éligibilité" - ###### Attention, on n’utilise pas “Mon/Ma/Mes” dans un tunnel d’achat, car l’offre ou l’équipement n’appartient pas encore à l’utilisatrice ou utilisateur. On peut en revanche utiliser le “Votre/Vos” pour mieux projeter dans l'achat. ✅ **Do** "Choisir ce téléphone" "Choisir cette box" "Personnaliser votre téléphone" ❌ **Don't** "Choisir mon téléphone" "Choisir ma box" "Personnaliser mon téléphone" ## Règles de microcopie ###### ###### La microcopie désigne les mots et les phrases qui aident les utilisatrices et utilisateurs à réaliser les actions sur nos interfaces : titres, messages d’erreur, CTA... ## Clair, concis, utile Une microcopie doit répondre à ces 3 principes. A la relecture, on se demande donc systématiquement si elle est bien claire, concise et utile. ##### Clair - Etre clair, c’est **donner rapidement les informations** pour guider l’utilisatrice ou utilisateur - En pratique, on **évite les termes techniques et le jargon métier** pour parler les mêmes mots que nos utilisatrices et utilisateurs ✅ **Do :** pour désigner un téléphone mobile, on utilise “téléphone” plutôt que “terminal”. ##### Concis - Etre concis, ce n’est pas forcément faire court. **Chaque mot doit avoir un but précis** - En pratique, on supprime tous les mots inutiles et on développe **une idée par phrase, un message par paragraphe** ✅ **Do :** pour exprimer une idée complexe, on peut utiliser des listes à puces. ##### Utile - Etre utile, c’est **comprendre les besoins et émotions dans le contexte** où se trouve l'utilisatrice ou utilisateur - En pratique, on résout les pain points de l’utilisatrice ou utilisateur et on lui **précise toujours l’action à venir** ✅ **Do :** pour diriger l’utilisatrice ou utilisateur dans le tunnel d’achat d’un téléphone mobile, le CTA “Choisir un mobile” est préférable à “Acheter un mobile”. ## Les phrases courtes On raccourcit les phrases au maximum pour réduire la charge cognitive de l’utilisatrice ou utilisateur et fluidifier sa navigation. Voici quelques règles de concision : - On **supprime les mots inutiles** et les répétitions - On donne **une idée par phrase, un message par paragraphe** - On utilise **un seul verbe par phrase** - On privilégie **les listes à puces** pour exprimer des idées complexes - On **chasse les adverbes en -ment**, type “gratuitement” - On **chasse les verbes au participe présent**, type “en achetant” - On ne fait **pas de supposition**, type “Si vous..., alors...” - Mais attention, on **conserve les mots de liaison** pour éviter le langage Tarzan, type “Vider panier” ✅ **Do :** "Changez de forfait. C’est gratuit, rapide, facile." ❌ **Don't :** "Changez de forfait gratuitement, rapidement et facilement." ## La voix active On privilégie la voix active à la voix passive pour appuyer le fait que l'utilisatrice ou utilisateur est au centre de l’action. ✅ **Do :** "Vous recevrez votre confirmation de commande par e-mail." ❌ **Don't :** "Changez de forfait gratuitement, rapidement et facilement." **Exception :** en cas d’erreur de la part de l’utilisateur ou d’obligation légale, privilégiez la voix passive. ✅ **Do :** "Votre adresse e-mail semble erronée." ❌ **Don't :** "Vous avez mal saisi votre adresse e-mail." ## La cohérence On assure une cohérence des wordings tout au long du parcours pour faciliter la navigation et éviter les confusions. Voici quelques règles de concision : - On utilise **les mêmes mots pour parler de la même chose** - On **s’adresse à l’utilisateur de la même façon** tout au long du parcours - On conjugue **les verbes des CTA avec le même temps et à la même personne** tout au long du parcours - On conjugue **les verbes des entrées avec le même temps et à la même personne** tout au long du parcours - On conjugue **les verbes des titres avec le même temps et à la même personne** tout au long du parcours - On conjugue **les verbes des descriptions avec le même temps et à la même personne** tout au long du parcours ![](/assets/29c369c2-3fa5-4efe-8caf-07492272cb4d) ## La forme interrogative La forme interrogative se réfère aux questions que l’on peut poser à l’utilisatrice ou utilisateur dans une interface, notamment pour renforcer le côté conversationnel d’une expérience. - On privilégie généralement **la forme sujet + verbe pour montrer notre connivence avec l’utilisatrice ou utilisateur** ✅ **Do :** "Vous souhaitez voir toutes les offres ?" ❌ **Don't :** "Souhaitez-vous voir toutes les offres ?" - On privilégie **la forme verbe + sujet dans les échanges solennels** ✅ **Do :** "Souhaitez-vous résilier votre offre ?" ❌ **Don't :** "Vous souhaitez résilier votre offre ?" ## L’écriture inclusive On est inclusif, sans recours au point médian, ni aux parenthèses. - **On évite les tournures de phrases genrées** quand c’est possible. ✅ **Do :** "Serez-vous chez vous à cette date ?" ❌ **Don't :** "Serez-vous présent à cette date ?" - **On essaye de citer le féminin et le masculin**, en commençant par le féminin. ✅ **Do :** "Nos conseillères et conseillers vous accueillent dans l’une de nos 500 boutiques." ❌ **Don't :** "Nos conseiller·e·s vous accueillent dans l’une de nos 500 boutiques." ## Règles orthographiques et typographiques ###### ###### On applique les règles orthographiques et typographiques du Larousse, même si on se réserve certaines spécificités. Voici nos règles les plus fréquentes. Les règles d’écriture des principaux concepts et noms de produit Bouygues Telecom sont disponibles dans [le glossaire](https://design.bouyguestelecom.fr/getting-started/content-design/glossary/a). ## Le pluriel et le singulier - ###### Les noms propres et les noms de produit ne s’accordent jamais au pluriel. ✅ **Do :** "les Samsung", "les Smart TV" ❌ **Don't :** "les iPhones 14" - ###### "mobile" reste au singulier lorsqu’il est un raccourci de "pour le mobile". ✅ **Do :** "les forfaits mobile", "les téléphones mobiles" ❌ **Don't :** "les forfaits mobiles", "les accessoires mobiles" - ###### L’expression "d’économie" s’écrit au pluriel quand l’économie en question est quantifiée, et au singulier quand elle ne l’est pas. ✅ **Do** "Envie de profiter de 5€/mois d’économies ?" "Envie de changer de box dans un souci d’économie ?" ❌ **Don't** "Envie de profiter de 5€/mois d’économie ?" "Envie de changer de box dans un souci d’économies ?" - ###### Le service clients s’écrit sans majuscule et avec un "s" à la fin de "client". ✅ **Do :** "Contacter notre service clients" ❌ **Don't :** "Le service client est ouvert" - ###### "Aucuns" s’écrit toujours au pluriel lorsqu’il est suivi d’un mot qui ne s’écrit qu’au pluriel. ✅ **Do :** "aucuns frais", "aucun mobile" ❌ **Don't :** "aucun travaux", "aucuns forfait" ## La majuscule et la minuscule - ###### Le premier mot d’une phrase prend toujours une majuscule. ✅ **Do :** "Un conseil pour une box internet ou un forfait avec smartphone ? On vous rappelle immédiatement." ❌ **Don't :** "besoin d’aide ? on vous rappelle." - ###### La première lettre d’un mot en majuscule ne prend jamais d’accent. ✅ **Do :** "Etes-vous sur place ?" ❌ **Don't :** "À ne pas manquer" - ###### Les noms de produit ou de marque suivent les règles du propriétaire. Rendez-vous sur leurs sites pour connaître leur orthographe. ✅ **Do :** "iPhone", "iMac", "beIN SPORTS", "OPPO", "Netflix", "Apple", "Huawei" ❌ **Don't :** "Iphone", "IMac", "Bein Sports", "Oppo" - ###### Les noms de produit Bouygues Telecom suivent des règles précises. Rendez-vous dans [le glossaire](https://design.bouyguestelecom.fr/getting-started/content-design) pour connaître leur orthographe. ✅ **Do :** "Bouygues Telecom", "Bbox fit", "Bbox ultym", "B&YOU" ❌ **Don't :** "Bouygues", "Bbox Fit", "Bbox Ultime", "BandU" - ###### Les noms propres prennent une majuscule, contrairement aux noms communs. ✅ **Do :** "Une Smart TV ou un vidéoprojecteur portable Samsung à ce prix-là, vous aviez déjà vu ça ?" ❌ **Don't :** "Comment profiter de la smart TV ou du vidéoprojecteur portable samsung à prix cassé ?" - ###### Les noms communs s’écrivent en minuscules. ✅ **Do :** "les conseillers", "un forfait pour clé 4G", "la fibre" ❌ **Don't :** "les Techniciens", "le Service clients" - ###### Les acronymes ou les sigles jusqu’à 3 lettres s’écrivent tout en majuscules. A partir de 4 lettres, ils s’écrivent comme des noms propres, avec une majuscule sur la première lettre puis en minuscules. ✅ **Do :** "TV", "Arcep" ❌ **Don't :** "Hd", "ARCOM" ###### > 2 exceptions : IBAN, CNIL ## Les unités de mesure - ###### Voici la liste des principales unités de mesure et leurs abréviations : ✅ **Do** Euros : € Grammes : g Kilogrammes : kg Jours : j Heures : h (pour les horaires, on utilise le format “11:00”) Minutes : min Secondes : s Hertz : Hz Kilohertz : kHz Mégabit par seconde : Mb/s Gigabit par seconde : Gb/s Mégaoctets : Mo Gigaoctets : Go Décibels : dB Tours par minute : tr/mn Volts : V Watts : W Milliampère-heure : mAh - ###### Les unités de mesure abréviées ne sont jamais suivies d’un point, sauf s’il s’agit du point final. ✅ **Do :** "On vous offre 15€ de remise !" ❌ **Don't :** "Vous avez donné 2 Go. à l’association Petits Frères des Pauvres." - ###### Les unités de mesure abréviées ne prennent pas d’espace insécable si elles sont composées d’une seule lettre. ✅ **Do :** "5€", "39,03€/mois", "4G", "7j/7" ❌ **Don't :** "9,99 €/mois", "24 h/24" - ###### Les unités de mesure abréviées prennent un espace insécable si elles sont composées d’au moins 2 lettres. ✅ **Do :** "50 Go", "300 Mb/s", "20 min" ❌ **Don't :** "100Go", 15Mpx", "500Mb/s" - ###### Le débits descendants et montants se formulent toujours dans le même ordre, descendant puis montant, avec la flèche collée à gauche du chiffre et sans espace. ✅ **Do :** "↓8 Gb/s ↑1 Gb/s" ❌ **Don't :** "8 Gb/s↓ 1 Gb/s↑" Côté code, pour assurer l'accessibilité, on définit l'attribut aria label de la façon suivante : "8 Gb/s en débit descendant et 1 Gb/s en débit montant". ## Les prix et remises - ###### A la différence du composant [Price](https://design.bouyguestelecom.fr/components/Price), les prix dans le texte sont ponctués par l’abréviation "€" sans espace et prennent une virgule avant les centimes. ✅ **Do :** 23,99€ 23€ 23,99€/mois ❌ **Don't :** 23€99 23 € 23,99 euros - ###### Les remises et économies prennent la forme -X€, -XX,XX€/mois, -X% pour signifier clairement aux utilisateurs qu’il s’agit d’une somme déduite. ✅ **Do :** -5€/mois sur l’option Canal+ -85% de remise immédiate Jusqu’à -10€/mois sur chaque forfait mobile BiG économies : -5€/mois déjà déduits ❌ **Don't :** 5€/mois sur l’option Canal+ 85% de remise immédiate Jusqu’à 10€/mois sur chaque forfait mobile BiG économies : 5€/mois déjà déduits - ###### Exception : sur les canaux conversationnels comme le chatbot, les remises et économies prennent la forme X€, XX,XX€/mois, XX% qui convient mieux aux conversations naturelles. ✅ **Do :** "Vous bénéficiez de 5,98 euros de remise sur votre offre actuelle." ❌ **Don't :** "Vous bénéficiez de -5,98 euros de remise sur votre offre actuelle." ## Les chiffres et les nombres - ###### On écrit toujours en chiffres : ✅ **Do** Les nombres supérieurs à dix : 11 Les mesures métriques de longueur, de surface, de volume, de capacité, de poids et de vitesse : 50 Go Les prix : 100€ de remise immédiate ! Les dates : jusqu'au 01/10/2023 Les âges : Bouygues Telecom, c’est 25 ans d’expertise Les codes postaux et numéros d’arrondissement : 24000 Périgueux - ###### Voici la liste des abréviations des adjectifs numéraux : ✅ **Do** **Au singulier :** 1er, 1re 2e, 5e, 100e... **Au pluriel :** 1ers, 1res 2es, 5es, 100es... - ###### Les numéros de téléphone se composent par tranches de deux, séparés par un espace insécable. ✅ **Do :** 06 60 61 46 14 ❌ **Don't :** 06.60.61.46.14 ###### > Exceptions : les numéros spéciaux ✅ **Do** **Le service clients :** 1064 **Les numéros verts :** 0800 250 300 ## Les emojis - En fin de phrase pour ponctuer une émotion ou en début de phrase pour capter l’attention - 1 emoji maximum par écran - En remplacement d’un mot, jamais en doublon - Jamais dans les titres d’accroche aspirationnelle en Speak - Jamais au milieu d’une phrase - Aucune ponctuation après un emoji - Un espace insécable après le mot qui précède l'émoji ✅ **Do** "Heureux de vous accueillir 👋" "☝Et au fait, Bertrand..." ❌ **Don't** "Heureux de vous accueillir 👋😃" "C’est noté 👍, merci !" ## Titres, textes, listes à puces ###### **Les titres, textes et listes à puces sont des éléments essentiels pour dialoguer avec les utilisatrices et utilisateurs. Ils doivent toujours faciliter leur lecture et leur compréhension des informations.** Ces éléments reprennent en partie [les règles de la microcopie](https://design.bouyguestelecom.fr/getting-started/content-design/content-principles/microcopy-rules). Ici, on liste leurs règles spécifiques. ## Les titres Les titres créent la conversation à travers des informations ou indications sur une marche à suivre. Voilà pourquoi ils doivent attirer le regard et exprimer clairement les objectifs. - On ponctue chaque titre avec **une majuscule sur le premier mot et sans point final** (sauf !, ?, ...) - **On évite de dépasser 2 lignes en version mobile** : on fait au plus court en supprimant les mots inutiles - **On donne rapidement l’information et les objectifs** de la page ou du parcours en diffusant un seul message, pas plus - **On évite les titres génériques** qui ne donnent aucune information - **On évite les formules impératives** : si possible, on privilégie la formulation interrogative ou l’infinitif - **On privilégie des formulations cohérentes** sur les titres d’une même page ou d’un même parcours - **On peut utiliser “Mon/Ma/Mes”** lorsqu’on parle d’une offre ou d’un équipement que l’utilisatrice ou l’utilisateur possède déjà ou qu’on décrit une action qui lui est propre ![](/assets/997cecae-c746-4da3-8ce5-cd7d8618a1df) Les titres répondent à des typographies spécifiques : Titre 1/2 en Speak et Titre 3/4/5/6 en Read. Ces typographies dépendent : - Du support utilisé : web ou app - Du contexte de la page : titres de page, de section, autres titres (étapes, box, cards, steppers...) #### Les titres de page **Web** - **On utilise le Titre 1** en Speak pour les titres de page web - **On met 1 lettre penchée** sur ces titres, **2 lettres penchées de suite** sur les mots qui contiennent 2 lettres identiques de suite. Les lettres penchées autorisées : **b, d, g, o, p, q** - Ces titres doivent tout de suite faire comprendre **l’objectif de la page ou du parcours** ![](/assets/37e6f348-35b9-4815-82d9-a6650394378d) ![](/assets/8ab98dbe-1d3b-4638-b1aa-d7d2d9452561) **App** - **On utilise le Titre 2** en Speak pour les titres de page de l’app - **On met 1 lettre penchée** sur ces titres, **2 lettres penchées de suite** sur les mots qui contiennent 2 lettres identiques de suite. Les lettres penchées autorisées : **b, d, g, o, p, q.** - Ces titres doivent tout de suite faire comprendre **l’objectif de la page ou du parcours** ![](/assets/b3729fbe-b9ed-468d-bc7c-7bbbb27cef47) ![](/assets/b159044c-da26-4f18-a5e9-f5048ba08eac) #### Les titres de section **Web** - **On utilise le Titre 2** en Speak pour les titres de section web, excepté pour les titres annonçant des étapes dans la page ou le parcours - **On met 1 lettre penchée** sur ces titres, **2 lettres penchées de suite** sur les mots qui contiennent 2 lettres identiques de suite. Les lettres penchées autorisées : **b, d, g, o, p, q** ![](/assets/c623664a-45d8-4e06-87ee-1b46344c6511) **App** - **On utilise le Titre 3** pour les titres de section de l’app ![](/assets/deb89f4a-2fe7-4c76-a997-13c65803372b) #### Les autres titres : étapes, box, cards, steppers... **Web** - **On utilise les Titres 3 à 6** en Read pour ces titres web généralement intégrés à des étapes sur une page, un bloc, une box, une card, un stepper... - Dans tous les cas, **on ajuste toujours la taille des Titres selon leur importance** dans la hiérarchie d’informations de la page ou du parcours - **On utilise la typographie recommandée pour certains composants**, comme les alertes (Body 1 Bold), spécifiée dans [les composants](https://design.bouyguestelecom.fr/components) ![](/assets/e250f980-9d4d-4dad-a041-27cedf9b0a4e) ![](/assets/68f277ee-9823-415b-9a23-dc3dd3617f64) ![](/assets/d6eb369d-11b6-41ad-8d72-c48d3e922c47) **App** - **On utilise les Titres 4 à 6** en Read pour ces titres de l'app généralement intégrés à des étapes sur une page, un bloc, une box, une card, un stepper... - Dans tous les cas, **on ajuste toujours la taille des Titres selon leur importance** dans la hiérarchie d’informations de la page ou du parcours - **On utilise la typographie recommandée pour certains composants**, comme les alertes (Body 1 Bold), spécifiée dans [les composants](https://design.bouyguestelecom.fr/components) ![](/assets/a134fe08-85cf-4045-8929-8f8c5892fa31) ![](/assets/ddc4d68e-bc6d-4642-a209-46b1d817a089) ## Les textes Les textes sont tous les paragraphes qui décrivent en détails les informations données par les titres. Ils attirent moins le regard de l’utilisateur. Voilà pourquoi il faut bien hiérarchiser leur contenu. - On ponctue chaque phrase avec **une majuscule sur le premier mot et un point final** (ou !, ?, ...) - On écrit toujours des **textes [clairs, concis et utiles](https://design.bouyguestelecom.fr/getting-started/content-design/content-principles/microcopy-rules)** - On donne **une idée par phrase, un message par paragraphe** - On va **de l’essentiel vers le plus spécifique**. C’est le modèle de la pyramide inversée : on donne immédiatement l’information principale qu’on développe ensuite dans les détails - On peut mettre **en gras certaines informations importantes**, avec modération - On privilégie **les listes à puces** pour exprimer des idées complexes ![](/assets/30c06a87-6ba6-4db2-b63c-ae57a23b8a59) ![](/assets/fef1fde5-72dc-483e-9f93-077e186c9ee4) ## Les listes à puces Les listes à puces permettent d’exprimer plusieurs idées ou une idée complexe de façon claire et aérée. Ils attirent le regard et facilitent la lecture. Voilà pourquoi il faut les rédiger selon certaines règles. - On ponctue chaque phrase avec **une majuscule sur le premier mot et un point final** (ou !, ?, ...) - On peut utiliser **des puces, mais aussi** des chiffres, des icônes, des checkboxs ou encore des radio buttons - On les introduit avec **un titre, une phrase ou un paragraphe** - On utilise **les mêmes formulations** tout le long des listes à puces - On donne **une idée par point** - On privilégie les points avec **une seule phrase** ![](/assets/2f63b636-f4e8-42b0-b9a2-dc8e1202b19a) ![](/assets/ea4a3f81-efdb-4b7f-b70c-c6121daba247) ![](/assets/8230fef9-162e-4a07-b533-284aa660e910) ## Ton de voix ###### **On s’adresse à nos utilisatrices et utilisateurs avec un ton de voix construit selon notre personnalité et notre posture relationnelle, en prenant en compte le contexte au moment du contact.** ## Nos 5 traits de personnalité La personnalité de marque Bouygues Telecom s’incarne dans 5 traits issus de notre culture et de notre histoire, tout en étant résolument tournés vers l’avenir. ![](/assets/9aa1df85-50e9-486c-8585-988376e707d5) ## La posture relationnelle De ces 5 traits de personnalité découlent les grands principes de notre posture relationnelle. C’est à travers ces 5 principes qu’on s’adresse à nos clientes et clients sur tous les canaux : digital, communication, bot, boutique, etc. #### 1. Collectifs : faire équipe ##### En équipe : entre nous et avec les clients - On utilise en alternance “Nous” et “On” plutôt que “Bouygues Telecom” - On utilise “Vous” plutôt que “Les clients” **✅ Do :** "On a une surprise pour vous" **❌ Don't :** "Bouygues Telecom a une surprise pour ses clients" ##### Inclusivité : on offre une place similaire à tout le monde - On évite les tournures de phrases genrées quand c’est possible - On essaye de citer le féminin et le masculin, en commençant par le féminin. **✅ Do :** "Nos conseillères et conseillers sont là pour vous aiguiller." **❌ Don't :** "Nos conseillers sont là pour aiguiller les clients." #### 2. Empathiques : être attentionnés ##### Considération : chaque personne doit se sentir exister individuellement - On s’adresse à l’utilisatrice ou utilisateur par son prénom - Les conseillères et conseillers se présentent aux utilisatrices ou utilisateurs par leurs prénoms **✅ Do :** "C’est bien parce que c’est vous, Nicole." **❌ Don't :** "Pour vous, clients Bouygues Telecom." ##### Naturel : on emprunte un peu au langage parlé, mais pas trop - On utilise les marqueurs d’oralité avec modération - On utilise les onomatopées pour souligner la simplicité d’une offre ou motiver l’action : pas plus d’une par écran - On intègre toujours ces marqueurs d’oralité dans un langage soutenu, pour ne pas tomber dans la familiarité **✅ Do :** "Psst ! Et si on vous offrait votre déménagement ?" **❌ Don't :** "Psst ! Vous avez vu ? Votre déménagement, c’est cadeau !" ##### Horizontalité : on n’est au-dessus de personne - On privilégie les formules suggestives aux formules impératives - On évite d’infantiliser les utilisatrices et utilisateurs **✅ Do :** "Une astuce pour éviter la queue : prendre rendez-vous en ligne !" **❌ Don't :** "Prenez rendez-vous en ligne et passez en priorité" ##### Connivence : mesurée car nous sommes sympathiques sans être familiers - On adapte le ton au contexte : l’humour ne convient pas lors des moments irritants - On utilise des traits d’humour qui soulignent l’empathie, sans exagération ou expression déplacée **✅ Do :** "Ok Houston, nouveau forfait paré au lancement !" **❌ Don't :** "Ah, c’est ballot, votre paiement est refusé !" #### 3. Proactifs : entreprendre ##### Suggestion : on n’impose rien, on anticipe des besoins, on apporte des solutions - On amène la solution ou la réponse à une attente, au lieu de simplement poser le problème - On montre qu’on comprend bien la situation de l'utilisatrice ou utilisateur : on s’adapte et on anticipe ses questions - On n’impose pas notre vision, au risque de tomber à côté ou de paraître intrusif **✅ Do :** "Pour profiter de la fibre, vous avez le choix" **❌ Don't :** "Vous n’êtes pas passé à la fibre ?" ##### Surprise : on est là où on ne nous attend pas - On twiste des expressions courantes pour étonner positivement l’utilisatrice ou utilisateur - On challenge les phrases toutes faites, notamment sur les CTA trop génériques, type “En savoir plus” **✅ Do :** "On vous apporte nos lumières" **❌ Don't :** "On vous aide" ##### Facilitation : on va droit au but, on image - On privilégie les messages courts en simplifiant la syntaxe, rapides à lire et faciles à comprendre - On utilise un langage digital friendly, compris par tout le monde - On intègre des liens dans le texte quand c’est possible **✅ Do :** "Vous avez toutes les réponses à vos questions [juste ici](url)." **❌ Don't :** "Rendez-vous dans la FAQ de la rubrique Assistance sur Bouyguestelecom.fr pour trouver votre réponse." ##### Expérience : on projette dans le bénéfice - On privilégie le langage de l’expérience et du bénéfice plutôt qu’un langage mercantile - On diffuse de l’information chaude plutôt que des arguments froids et indifférenciés **✅ Do :** "Des photos si précises que l’on peut compter les tâches de rousseur" **❌ Don't :** "Des photos d’une qualité et d’un détail époustouflants" #### 4. Honnêtes : parler vrai ##### Justesse et sincérité : on n’en fait jamais trop - On se montre authentique et naturel, avec un vocabulaire assez libre et spontané - On ne fait pas de sur-promesse : les mots ne doivent pas sonner comme des recettes marketing - On est lisible et compréhensible, sans aucune ambiguïté, on est transparent dans l’explication des prix et des offres **✅ Do :** "La fibre, vous allez voir la différence" **❌ Don't :** "La fibre, ça va révolutionner votre vie" ##### Accessibilité : on n’est jamais élitiste - On n’utilise pas de jargon technique ou marketing - On explique une donnée technique avec des images ou des métaphores **✅ Do :** "Nos 9 conseils pour avoir une box en pleine forme" **❌ Don't :** "Comment brancher mon nouveau boîtier ONT à ma box FTTH ?" #### 5. Inspirants : Faire grandir ##### Fraîcheur : on est chantant et créatif, quand cela s’y prête - On peut utiliser des rimes, assonances ou autres astuces linguistiques - On surveille le rythme des paragraphes, en privilégiant par exemple 2 phrases courtes plutôt qu’une longue - On peut prendre des petites libertés de ton par des jeux de mots modernes ou des tournures de phrases inattendues **✅ Do :** "Vous cliquez, vous collectez, le tour est joué !" **❌ Don't :** "Profitez du Click & Collect pour plus de flexibilité" ##### Sourire : on est positif - On évite toute tournure négative - On privilégie les émotions positives, type “super”, “adorer”, “bonne nouvelle”, “ravis” - On met en avant la vision rassurante des choses **✅ Do :** "Vous encadrez le temps d’écran de vos enfants et hop, vous le vivez bien !" **❌ Don't :** "Protégez vos enfants des dangers d’internet." ##### Modernité : on est dans l’air du temps sans être jeuniste - On peut utiliser les emojis avec parcimonie : pas plus d’un par écran - On évite le jeunisme **✅ Do :** "Nous sommes ravis que vous soyez ravis 😃" **❌ Don't :** "Nous sommes ravis que vous soyez ravis 😃🥳🎉" ## Le contexte ###### On répond aux émotions de l’utilisatrice ou utilisateur au moment du contact L’état émotionnel varie selon le contexte où l'utilisatrice ou utilisateur se trouve. On se demande donc systématiquement quelles sont ses émotions pour y répondre avec le ton approprié. Voici quelques exemples : ![](/assets/c3c72a84-30a4-4602-83d7-f6c3fdf4178d) Vous retrouverez ce framework dans l'onglet Content de certains [composants](https://design.bouyguestelecom.fr/components). # ✧ Composants {#components} Tous les composants du Design System. ## Core Components ### Accordion L’accordéon permet d'afficher de grandes quantités de contenu dans un espace réduit grâce à la divulgation progressive. **Utilisation et rôle :** L’accordéon permet de regrouper des informations dans des sections repliables. Chaque section peut être développée ou réduite en cliquant sur l'en-tête de la section. Cela permet aux utilisateurs d’afficher seulement les informations qu'ils souhaitent voir. ##### **Quand utiliser** - **Vente :** les accordéons peuvent être utilisés pour organiser des informations détaillées sur les produits comme les descriptions, les spécifications techniques, les avis des clients et les FAQ. Cela permet aux utilisateurs de consulter facilement les informations sans être submergés. - **Application :** les accordéons peuvent être utilisés pour structurer des sections comme les détails de compte, les paramètres de facturation, les historiques de transactions et les options de support. Cela aide à maintenir une interface propre et bien organisée, facilitant l'accès aux informations pertinentes. ##### **Quand ne pas utiliser** - à des fins purement SEO / éditoriales (cf. mur produits) - à des fins de navigation - pour des informations essentielles à l’utilisateur ou pour masquer des étapes (cf. stepper) **Accessibilité :** ## Comment l'utiliser - chaque en-tête est un titre de section qui introduit du contenu - chaque titre doit avoir comme markup un "h2", "h3", "h4", "h5" ou "h6" en fonction de la place du composant dans la page (voir le composant title) **Exemple de code :** ```

Quel smartphone choisir ?

< !-- contenu du panneau associé -->

``` ## Comment tester - utiliser la touche "Tab" pour arriver au premier élément de l'accordéon - la prise du focus clavier est visible sur cet élément - activer l'élément avec la touche "Entrée" ou "Barre d'espace" - le contenu apparait et le focus reste sur l'élément - activer à nouveau l'élément avec la touche "Entrée" ou "Barre d'espace" - le contenu disparait et le focus reste sur l'élément **Règles d'usage :** - Ne pas dépasser plus de 5 accordéons pour limiter l’encombrement et la charge cognitive **Exemple d'utilisation :** ```jsx Hello World 1 Lorem ipsum dolor sit amet lorem Hello World 2 Lorem ipsum dolor sit amet Hello World 3 Collpased by default Hello World 4 Lorem ipsum dolor sit amet ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | - | | id | string | - | - | | className | string | - | Additional CSS Classes | | testId | string | - | - | ### Alert Les alertes sont utilisées pour afficher des informations concernant un impact sur l'expérience utilisateur et les utilisations du produit. **Utilisation et rôle :** Le composant "Alerte" est un élément destiné à attirer l'attention de l'utilisateur sur des informations importantes, des erreurs, des avertissements ou des confirmations. Il se manifeste généralement sous forme de bandeau ou de boîte de dialogue contenant un message clair et concis, souvent accompagné d'icônes pour renforcer la compréhension visuelle. - **Messages d'erreur** : Pour informer l'utilisateur d'un problème ou d'une action nécessaire pour corriger une erreur. - **Notifications de succès** : Pour confirmer qu'une action a été complétée avec succès. - **Avertissements** : Pour prévenir l'utilisateur d'une action potentiellement risquée ou des conséquences possibles. - **Informations importantes** : Pour fournir des informations critiques qui nécessitent une attention immédiate de l'utilisateur. #### **Exemples d’usages** - **Vente** : les alertes sont utilisées pour notifier les utilisateurs des promotions, des soldes, des erreurs de paiement, des ruptures de stock ou des mises à jour importantes concernant leur commande. - **Assistance** : les alertes sont utilisées pour informer les utilisateurs des interruptions de service, des changements de politiques, des réponses à leurs tickets ou des recommandations d'actions. - **Application/Espace client** : les alertes sont utilisées pour signaler des activités suspectes, des changements de statut de compte, des notifications de facturation, ou des rappels de paiement. #### **Quand ne pas utiliser** - **Messages non essentiels** : Évitez d'utiliser des alertes pour des informations triviales qui ne nécessitent pas une attention immédiate. - **Trop d'alertes** : Ne pas surcharger une page avec plusieurs alertes en même temps. Priorisez les messages les plus importants. - **Informations de fond** : Pour des informations contextuelles ou détaillées qui ne nécessitent pas une action immédiate, préférez des infobulles ou des modals **Content Design :** ## Contexte Une alerte se compose d’une icône, d’un titre et d’une description. Sa couleur et son icône sont associées à la nature du message. Dans tous les cas, son rôle est d’attirer l’attention de l’utilisateur sur une information ou la conséquence d’une action en cours, sans compromettre la suite du parcours. Il existe 4 types d’alerte : ![](/assets/0df0e205-57e4-46c8-80bd-6f9b3d9ed97d) ## Construction Une alerte contient le plus souvent un texte principal (titre) en Body 1 Bold et un texte secondaire (description) en Body 2. On peut mettre certaines informations essentielles du texte secondaire en Body 2 Bold. **Texte principal (Titre)** - **Formulation avec description** : on ponctue chaque titre avec une majuscule sur le premier mot et sans point final (sauf !, ?, ...). - **Message** : on fait tout de suite comprendre à l’utilisateur l’information ou la conséquence de son action en cours. - **Longueur** : dans l’idéal, on ne dépasse pas 2 lignes en version mobile (58 caractères espaces compris). ![](/assets/e10552c2-c04c-4248-b386-251bd47d1e39) - **Formulation sans description** : lorsque l’information principale est assez concise et explicite, l’alerte peut prendre la forme d’un titre sans description. ![](/assets/a0ef677c-51ef-4369-9bb0-67de90e8b551) **Texte secondaire (Description)** - **Formulation standard** : on utilise une phrase verbale, avec une majuscule sur le premier mot et un point final. - **Message** : on précise toutes les informations à connaître et on propose la ou les actions à réaliser si besoin. - **Longueur** : dans l’idéal, on ne dépasse pas 4 lignes en version mobile. ![](/assets/b7b9f6b0-6d07-4c3b-a8bd-094e30838327) - **Formulation avec liste à puces** : on peut utiliser une liste à puces pour exprimer plusieurs idées ou une idée complexe. - **Message** : on donne une idée claire et précise par point. ![](/assets/7edecd40-48aa-4397-a17f-dac6981fb1bb) - **Formulation avec lien** : on peut intégrer un lien dans le texte ou hors du texte pour faciliter la navigation de l’utilisateur. - **Message** : on précise bien la navigation à venir dans le texte du lien. ![](/assets/c52c0e92-54ea-48ec-8858-6620e7b698e0) ## Ton de voix **Les 4 types d'alerte** L’état émotionnel de l’utilisateur varie selon la nature de l’alerte : attention, succès, information ou erreur. On se demande donc systématiquement quelles pourraient être ses émotions pour y répondre avec le ton approprié. ![](/assets/cc9a8236-7c03-4df2-8f01-303f4daddf5b) ## Variables de microcopie **Formulation des 4 types d'alerte** ![](/assets/032abfca-6a0f-4697-b306-0709c0bd921e) **Accessibilité :** ## Comment l'utiliser **Titre** - Le titre de l'alerte introduit du contenu - Ce titre a comme markup un "h1", "h2", "h3", h4", "h5" ou "h6" - Ne pas utiliser le markup "p" **Délai** - Une alerte ne doit pas disparaître automatiquement. **Bouton de fermeture** - L'alerte disparaît uniquement après activation du bouton de fermeture (croix). - Le bouton de fermeture est un pictogramme croix interactif qui a comme intitulé "Fermer X", avec X le titre de l’alerte : - C’est un élément "button" - Il contient le pictogramme croix - Il contient l’intitulé caché visuellement avec la classe css sr-only **Gestion du focus** - Lorsque l'alerte est affichée, le focus est positionné sur le conteneur de l’alerte. Pour cela, ajouter un attribut tabindex="-1" à ce conteneur et appeler la fonction js focus() dessus - Lorsque le bouton de fermeture est activé, le focus doit être géré en fonction du contexte dans lequel cette alerte a été affichée. Le positionnement du focus sera fixé au cas par cas. **exemple de code attendu** ```

< !-- pictogramme alert -->

Warning

contenu de l’alerte

``` **Règles d'usage :** - Privilégier un titre concis - Éviter les doublons entre le titre et le contenu de l’alerte - Associer une action maximum à une alerte - Ne pas changer/enlever l’icone **Exemple d'utilisation :** ```jsx ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | iconName | IconName | [IconNameValues](#enum_IconNameValues) | Custom icon | | title | ReactNode | - | Alert title content | | description | ReactNode | - | Alertt description content | | display | boolean | true, false | Display Alert component | | toaster | boolean | true, false | - | | banner | boolean | true, false | - | | markup | AlertMarkup | "h2", "h3", "h4", "h5", "h6", "p" | - | | status | StatusState | "ERROR", "INFO", "SUCCESS", "WARNING" | Status Variant (INFO|SUCCESS|WARNING|ERROR) | | id | string | - | - | | onClick | ClickEvent | - | onClick Event for all alert | | accessibilityLabel | string | - | - | | testId | string | - | Test Id for Test Integration | | className | string | - | Additional CSS Classes | ### AutoComplete L'Autocomplete est un champ de saisie qui propose des suggestions dynamiques à mesure que l'utilisateur tape, pour accélérer et fiabiliser la saisie. **Utilisation et rôle :** L'Autocomplete propose des suggestions dynamiques à mesure que l'utilisateur tape. Il combine les avantages d'un champ de saisie libre et d'un sélecteur structuré, pour accélérer la saisie et réduire les erreurs. ## Quand l'utiliser - **Formulaires de recherche** : aider l'utilisateur à trouver rapidement un élément parmi une liste longue grâce aux suggestions automatiques. - **Saisie d'adresses** : améliorer l'expérience en proposant des compléments d'adresse basés sur les caractères déjà saisis. - **Sélection de tags ou mots-clés** : faciliter l'ajout de tags en suggérant des options existantes correspondant à la saisie en cours. - **Listes de données volumineuses** : remplacer un select classique lorsque la liste contient trop d'entrées pour être parcourue confortablement. ## Quand ne pas l'utiliser - **Listes courtes et fixes** : pour des listes de moins de 5-7 options, préférer un Select ou des Radio buttons. - **Saisie libre sans référentiel** : si l'utilisateur peut saisir n'importe quelle valeur sans correspondance dans une liste, utiliser un Input classique. - **Champs avec format contraint** : pour des dates, numéros de téléphone ou codes postaux, préférer des composants spécialisés (Calendar, Input avec masque). ## Les différents types / Variant - L'**Autocomplete avec données locales** (data) filtre les suggestions côté client à partir d'un tableau de données déjà chargé. Idéal pour des listes courtes et statiques. - L'**Autocomplete avec suggestions asynchrones** (getSuggestions) appelle une fonction asynchrone à chaque frappe pour récupérer des suggestions dynamiques depuis une API. Adapté aux grandes bases de données. - L'**Autocomplete avec debounce** (debounceSuggestionsTimeout) retarde l'appel aux suggestions pour éviter des requêtes trop fréquentes lors de la frappe rapide. **Règles d'usage :** - Afficher des suggestions pertinentes - Permettre la saisie libre en complément ### Badge Les badges sont des étiquettes permettant de communiquer efficacement une information simple et contextuelle (le plus souvent, un compte numérique) sur le composant auquel le badge est rattaché. **Utilisation et rôle :** Le composant Badge est un petit indicateur visuel utilisé pour attirer l'attention sur des éléments spécifiques de l'interface utilisateur. Les badges sont idéaux pour afficher des états, des notifications ou des quantités - **Indicateurs de statut :** Pour montrer l'état actuel d'un élément (ex : en cours, complet, nouveau). - **Notifications :** Pour indiquer de nouvelles activités ou des mises à jour. - **Quantités :** Pour afficher le nombre d'éléments associés à une catégorie ou une action (ex : articles dans le panier, messages non lus). ##### **Quand utiliser** **Pour indiquer un état ou un statut** - **Vert :** Succès, disponible - **Rouge :** Erreur - **Jaune :** Attention - **Bleu :** Information **Pour indiquer le nombre d’item contenu** - **Vente :** les badge peuvent être utilisés pour le stock ou la disponibilité (ex : “En stock”, “Rupture de stock”), afficher le nombre d’article dans le panier de l’utilisateur - **Assistance :** les badge peuvent être utilisés pour indiquer le statut d’un ticket de support - **Application/Espace client :** les badge peuvent être utilisés pour indiquer le nombre de message non lus, ou signaler qu’il ##### **Quand ne pas utiliser** - **Informations primaires :** Ne pas utiliser les badges pour des informations essentielles qui doivent être claires - **Actions cliquables :** Les badges ne doivent pas être utilisés comme éléments interactifs - **Surutilisation :** Éviter de mettre des badges partout, car cela pourrait réduire leur impact et encombrer l'interface **Règles d'usage :** - Toujours placer l’icône en haut à droite - Ne pas écrire tout les chiffres si ça dépasse 99 - Un badge ne peut pas contenir un texte **Exemple d'utilisation :** ```jsx ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | If no content add children (Icon for example) | | label | string | - | Badge content text | | position | BadgePositionEnum | "bottom-left", "bottom-right", "top-left", "top-right" | - | | status | StatusState | "ERROR", "INFO", "SUCCESS", "WARNING" | - | | variant | BadgeVariant | "ACCENT", "ERROR", "INFO", "MAIN", "SUCCESS", "WARNING" | - | | onClick | ClickEvent | - | onClick Event for Badge | | accessibilityLabel | string | - | - | | inverted | boolean | true, false | Inverted style for Badge | | testId | string | - | - | | id | string | - | - | | className | string | - | Additional CSS Classes (ONLY FOR WEB) | ### Box Une box est un conteneur qui permet de regrouper et structurer du contenu dans une page. **Utilisation et rôle :** Une box est un conteneur qui permet de regrouper et structurer du contenu dans une page. ##### **Quand l'utiliser** - **Structurer du contenu** : Pour regrouper des éléments afin de les rendre plus lisibles et organisés. - **Encadrer des sections** : Pour délimiter des sections distinctes sur une page, comme des offres spéciales, des informations produit, ou des articles de blog. ##### **Exemples d'usages** - **Vente** : "Box" est utilisé pour structurer des sections de produits, des cartes de produit, des recommandations, et des sections promotionnelles. Il aide à organiser visuellement les produits et les informations pour une meilleure expérience utilisateur. - **Assistance** : est utilisé pour regrouper des FAQ, des guides, des articles de support, et des options de contact. Cela permet de présenter les informations de manière claire et accessible pour que les utilisateurs trouvent facilement ce qu'ils recherchent. - **Application/Espace client** : est utilisé pour organiser des sections telles que les informations de compte, les historiques de transactions, les paramètres de notification et les messages. Il aide à maintenir une mise en page propre et logique, facilitant la navigation et l'accès aux informations importantes. ##### **Quand ne pas utiliser** - **Décorations inutiles** : Évitez d'utiliser les Box uniquement à des fins décoratives sans valeur ajoutée en termes de structure ou d'organisation du contenu. - **Duplication inutile** : Ne pas utiliser les Box pour encapsuler des éléments déjà bien structurés et lisibles sans conteneur supplémentaire. **Accessibilité :** **Comment l'utiliser** - Le titre de la box introduit du contenu - Ce titre a comme markup un "h1", "h2", "h3", h4", "h5", ou "h6" en fonction de la place du composant dans la page (voir le composant title) **Règles d'usage :** - La couleur de la bordure en flat, ne peut pas être changé. - Les box doivent toujours respecter les grilles - Utilisez la bonne couleur en fonction du contenu pour appuyer votre message - Le box header doit être utilisé pour mettre en avant une box parmi une liste de box. - La couleur de la bordure en flat ne peut pas être changée - Les Box doivent toujours respecter les grilles - Utilisez la bonne couleur en fonction du contenu pour appuyer votre message **Exemple d'utilisation :** ```jsx Box Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. Box Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. Box Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. Box Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. Link ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | Box child | | skeleton | boolean | true, false | Box skeleton | | href | string | - | - | | highlighted | TrilogyColor | [TrilogyColorValues](#enum_TrilogyColorValues) | Add Left Highlight Border With Semantic Color | | shadowless | boolean | true, false | Remove box shadow | | backgroundSrc | string | - | Source of background Image | | headerOffset | boolean | true, false | - | | flat | boolean | true, false | Flat box remove shadow and add plain border | | active | boolean | true, false | Activated box | | inverted | boolean | true, false | Inverted Box Color | | blank | boolean | true, false | - | | backgroundColor | TrilogyColor | [TrilogyColorValues](#enum_TrilogyColorValues) | Box Content Background Color | | onClick | ClickEvent | - | onClick Event | | fullheight | boolean | true, false | - | | accessibilityLabel | string | - | - | | testId | string | - | Test id | | id | string | - | - | | className | string | - | Additional css classes | ### Breadcrumb Le breadcrumb ou fil d’ariane est un élément de navigation utilisé pour indiquer l'emplacement actuel de l'utilisateur et l'aider à naviguer. **Utilisation et rôle :** Le breadcrumb ou fil d’ariane est un élément de navigation utilisé pour indiquer l'emplacement actuel de l'utilisateur et l'aider à naviguer. - **Navigation de sites complexes :** Lorsque le site a une structure hiérarchique profonde, les breadcrumbs permettent aux utilisateurs de naviguer facilement entre les niveaux. - **Pages de produits et catégories :** Pour montrer aux utilisateurs où ils se trouvent dans la hiérarchie des produits. - **Guides et documents d'assistance :** Pour aider les utilisateurs à revenir à des sections plus générales lorsqu'ils explorent des guides détaillés. ##### **Quand utiliser** - **Vente :** Aide les utilisateurs à naviguer facilement entre les catégories de produits. - **Assistance :** Permet aux utilisateurs de suivre et de revenir à des sections spécifiques. - **Application/Espace client :** Guide les utilisateurs à travers les différentes sections de leur compte ##### **Quand ne pas utiliser** - **Sites avec une structure plate :** Si le site a une structure peu profonde (1 ou 2 niveaux) - **Pages autonomes** : Pour les pages qui ne s'intègrent pas dans une hiérarchie plus large, les breadcrumbs peuvent causer de la confusion. **Règles d'usage :** - Ne doit pas être utilisé pour affiché des étapes - Le breadcrumb ne doit pas dépasser 327px de large - Ne pas changer le séparateur **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | Breadcrumb Children | | accessibilityLabel | string | - | Accessibility label | | testId | string | - | Test id | ### Button Le bouton est un composant cliquable qui permet à l’utilisateur de déclencher une action spécifique au sein de l’interface. **Utilisation et rôle :** Le bouton est un élément clé pour initier ou valider une action dans un parcours. Qu’il s’agisse de vente, d’assistance ou d’espace client, il doit clairement guider les actions de l’utilisateur dans son parcours ou au sein d’une page. ##### **Quand l'utiliser** - **Etapes et parcours** : passer à l'étape suivante, démarrer ou continuer un parcours. - **Confirmation et soumission** : valider, confirmer ou soumettre un choix ou plusieurs choix. - **Déclenchement d'une action** : ouvrir une modale ou un dropdown. ##### **Quand ne pas l'utiliser** - **Navigation** : pour des actions de navigation qui font sortir du parcours ou redirigent vers une information complémentaire, on utilise le [link](https://design.bouyguestelecom.fr/components/Link). ##### Types et usages des boutons Le rôle du bouton est de guider les utilisateurs dans les étapes clés d'un parcours. Pour cela, il doit répondre à des usages en suivant une hiérarchie d’importance bien définie. - Le **bouton de conversion** met en avant une action de conversion sur une page avec un objectif business bien défini (ex. : “Choisir ce forfait”, “Choisir cette box”, “Ajouter cette option”). Il est possible de mettre plusieurs boutons de conversion sur une même page, mais ils doivent toujours correspondre à une même action et donc avoir la même formulation (ex. : “Choisir ce forfait” dans le mur des forfaits). Il peut être associé à un bouton secondaire ou à un bouton ghost, jamais à **un bouton primaire**. - Le **bouton primaire** met en avant l’action principale de la page qui ne correspond pas à un objectif business et n’a donc pas pour but de faire convertir l’utilisateur. Il peut être associé à un bouton secondaire ou à un bouton ghost, jamais à un **bouton de conversion**. - Le **bouton secondaire** met en avant une ou plusieurs actions complémentaires sur la page. Il peut être associé à un **bouton primaire**, à un **bouton de conversion** ou à un **bouton ghost**. - Le **bouton ghost** est utilisé pour actions les moins importantes de la page. Il met en avant une action peu fréquente ou une action de découverte, sans forte emphase visuelle. Il peut être associé à un **bouton de conversion**, à un **bouton primaire** ou à un **bouton secondaire**. **Content Design :** ### Contexte Un bouton est utilisé pour déclencher une action. Pour cela, il doit être clair, prédictible et inciter l’utilisateur à cette action. Un bouton doit donc toujours prendre en compte le contexte et préciser l’action à venir. ### Construction ##### Formulation : en Body 1 Bold - Un bouton prend la forme + , car il doit clairement indiquer l’action à venir, tout en incitant l’utilisateur à cliquer. ![](/assets/6b097112-ff7a-46d5-afee-ed917be5a747) ![](/assets/04eb9d6b-fe3a-4c31-8cdf-327f1f1ae971) - Un bouton prendre la forme {Mot} + {Verbe à l’infinitif} dans le cas où celui-ci ne peut pas commencer par {Verbe à l’infinitif}. ![](/assets/63d657d8-4fda-4e70-9088-347b78b1fc97) - Un bouton peut prendre la forme {Verbe à l’infinitif sans complément} uniquement si l’action est assez courante et explicite. ![](/assets/2dd4edd1-dce4-43d6-bea0-25d5f97694aa) - Un bouton peut contenir une valeur dynamique dans un contexte de filtrage des items. ![](/assets/62a461f2-b303-4edf-8c16-9c7212ac5287) ##### Longueur : 25 caractères maximum - Un bouton doit être le plus court possible et se limiter à une seule action. Chaque mot doit avoir un but précis, on supprime donc tous les mots inutiles. Dans l’idéal, on ne dépasse pas les 25 caractères, espaces compris. ![](/assets/30e32bc2-d7d1-4558-8f45-b67fc3642dc0) ##### Cohérence : le même mot pour décrire la même action - Un bouton doit reprendre les mêmes termes et notions de l’interface pour décrire l’action de l’utilisateur. ![](/assets/0a9f5323-cea6-461c-9189-daeb5cc4c72a) ##### Majuscule, minuscule et ponctuation - Un bouton commence toujours par une lettre en majuscule, le reste est en minuscule. ![](/assets/439f8e51-ab39-422c-9e40-1d388dc50033) - Les noms de produit ou de marque d’un bouton suivent les règles du propriétaire. Rendez-vous sur leurs sites pour connaître leur orthographe. ![](/assets/3dce61d1-16bf-4540-81c1-ed8bf0981ecd) - Un bouton ne prend jamais de signe de ponctuation. ![](/assets/26d96f05-3e90-429c-84f4-8e073a9029ca) ##### Conversation - On privilégie {mon/ma/mes} lorsqu’on parle d’une offre ou d’un équipement que l’utilisateur possède déjà ou qu’on décrit une action qui lui est propre. ![](/assets/121401d1-78e0-4de1-a629-49f92881dfa8) ![](/assets/fb593fc1-8dec-4d55-b5d3-44c0fb634864) - On privilégie {ce/cette/ces} lorsque l’utilisateur répond à un choix proposé par Bouygues Telecom. ![](/assets/f3554b85-0930-475d-9ebc-6cedbdc2c7c1) ### Actions récurrentes ##### Les boutons de conversion ![](/assets/85ec3baf-45e3-47f8-802a-87cab4d258f0) ##### Les boutons primaires ![](/assets/0ef2bc8c-9cff-4ae9-a1be-ec1955428335) ##### Les boutons secondaires ![](/assets/47081461-9136-47e8-97de-db55c917e803) ##### Les boutons ghost ![](/assets/b669982b-5be6-4d01-8eee-abf6c9f3985f) ### Variables de microcopie ##### Formulation standard ![![](/assets/a2f739af-ef2f-4481-911c-3dc0a277d907)](/assets/daf76f63-4809-4a86-b411-38f9ad015183) ##### Formulations contextualisées - Choix offre - Choix option - Choix produit - Eligibilité - En savoir plus - Paiement - RDV - Retour - Suivant **Accessibilité :** ## Comment l'utiliser **Si l'activation du bouton déclenche le chargement d'une nouvelle page :** - le bouton a comme markup un "a", avec un attribut href - l'intitulé visible permet d'en comprendre la destination - si ce n'est pas le cas : - Si le lien est dans un "p", dans un "td", dans un "li" et que le contenu rend explicite l'intitulé visible ou si le titre qui précède le lien aide à comprendre la destination alors il n'y a rien de plus à faire d'un point de vue conformité - si son contexte ne permet pas de comprendre la destination, il faudra : - soit modifier l'intitulé visible et le rendre plus explicite - soit le compléter en utilisant l'accessibilityLabel dont la valeur reprend l'intitulé visible et le complète **Si l'activation du bouton déclenche une action sur la page, permet de soumettre un formulaire :** - le bouton a comme markup un "button" - l'intitulé visible permet d'en comprendre l'action qui résulte de son activation - si ce n'est pas le cas, il est nécessaire de le compléter en utilisant l'accessibilityLabel dont la valeur reprend l'intitulé visible et le complète (ex : plusieurs bouton "supprimer" dans le panier, nécessité de le compléter avec le nom du produit à supprimer) - un bouton d'action n'a pas de contexte **Navigation au clavier :** - la prise du focus clavier est visible sur le bouton - un 'button' est activable avec la touche "Entrée" et la barre d'espace - un "a" est activable avec la touche "Entrée" - après activation d'un bouton, il peut être nécessaire de déplacer le focus, cela va dépendre du contexte **Règles d'usage :** - Association des types de boutons - Placement horizontal des boutons - Placement vertical des boutons **Exemple d'utilisation :** ```jsx ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | iconName | IconName | [IconNameValues](#enum_IconNameValues) | If Icon, Button + Icon && Button IconName | | children | ReactNode | - | Button child | | disabled | boolean | true, false | Disabled button | | markup | ButtonMarkup | "a", "button", "input" | HTML element : button|input|a (ONLY FOR WEB) | | href | string | - | Href | | to | string | - | Link | | loading | boolean | true, false | Loading button | | name | string | - | Button name attribute | | routerLink | ElementType | [ElementTypeValues](#enum_ElementTypeValues) | - | | type | ButtonType | "button", "reset", "submit" | button type (button|reset|submit) | | variant | ButtonVariant | "CONVERSION", "GHOST", "PRIMARY", "SECONDARY" | Button variant : accent|primary|secondary|ghost. | | accessibilityLabel | string | - | Accessibility label | | fullwidth | boolean | true, false | Fullwidth button | | onClick | ClickEvent | - | Click Event | | testId | string | - | Test Id for Test Integration | | id | string | - | Custom id for button (ONLY FOR WEB) | | className | string | - | Additional css classes (ONLY FOR WEB) | ### Calendar Le composant Calendar permet de sélectionner et visualiser des dates ou des plages de dates dans une interface claire et intuitive. Il s’adapte aux différents formats et langues, tout en respectant les règles d’accessibilité. **Utilisation et rôle :** Le composant Calendar permet à l’utilisateur de sélectionner une ou plusieurs dates. Il peut être utilisé pour planifier un rendez-vous, choisir une date de livraison ou consulter des événements passés. #### Quand l’utiliser - **Planification & réservation** : planifier ou réserver une intervention ou un rendez vous - **Filtrage de données** : Filtrer en sélectionnant une date, des factures, des historiques ect... - **Choisir une date précise** : Renseigner une date précise comme une date d’anniversaire dans un formulaire - **Choisir une plage de date** : Sélectionner une date de début et de fin afin définir une période #### Quand ne pas utiliser : - **Dates simples** : pour des sélections de date comme “aujourd’hui” ou “demain” privilégier l’utilisation d’un radio button #### Les types de calendar : - Le calendar **Single Date** permet à l’utilisateur de prendre un rendez ou pour filtrer un contenu ou lors d’un formulaire à une date précise et unique comme le choix de la date de naissance dans un formulaire - Le calendar **Date range** permet à l’utilisateur de définir une période, une durée ou un intervalle pour réserver un rendez vous ou filtrer un contenu **Exemple d'utilisation :** ```jsx With disabled dates console.log(e)} disabledDates={[new Date(2025, 10, 4), new Date(2025, 10, 10)]} minDate={new Date(2025, 9, 10)} maxDate={new Date(2032, 11, 20)} value={new Date(2025, 10, 2)} onChange={(e) => { console.log(e ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | value | ChangeEventCalendar | - | Value for calendar | | minDate | Date | - | Min value for calendar | | maxDate | Date | - | Max value for calendar | | disabled | boolean | true, false | Disabled calendar | | readOnly | boolean | true, false | Read only calendar | | onChange | ((e: ChangeEventCalendar) => void) | - | OnChange Calendar Event | | onMonthChange | ((e: Date) => void) | - | onMonthChange Calendar Event | | disabledDates | Date[] | - | Values disabled | ### Card Une card contient du contenu (image et texte) et des actions sur un seul sujet. **Utilisation et rôle :** Une card contient du contenu (image et texte) et des actions sur un seul sujet. - **Présentation de produits :** Pour afficher des informations sur un produit, y compris des images, des descriptions, et des prix. - **Offres et promotions :** Pour mettre en avant des promotions spéciales ou des offres limitées dans le temps. - **Articles et ressources :** Pour regrouper des articles de blog, des tutoriels, ou des guides. - **Fonctionnalités et services :** Pour présenter différentes fonctionnalités ou services offerts. ##### **Quand utiliser** - **Vente :** Utilisées pour afficher des informations sur les produits, telles que des images, des descriptions, des prix et des avis des utilisateurs. Par exemple : une carte produit présentant une image, un titre, un prix, et un bouton "Ajouter au panier". - **Assistance :** Employées pour organiser les FAQ, les articles de support ou les témoignages des clients. Par exemple : une carte d'article de support contenant un titre, un résumé et un lien vers l'article complet - **Application/Espace client :** Utilisées pour présenter les informations de compte, les factures, les notifications et les offres personnalisées. Par exemple : une carte de notification avec un message, une date, et un bouton pour en savoir plus. ##### **Quand ne pas utiliser** - **Texte long :** Éviter d'utiliser des cartes pour de longs paragraphes de texte qui seraient mieux présentés sous forme d'articles ou de pages séparées. - **Contenu non lié :** Ne pas regrouper des informations non connexes dans une même carte pour éviter la confusion de l'utilisateur. **Accessibilité :** **Comment l'utiliser** - Le titre de la card a comme markup un "h2", "h3", "h4", "h5" ou "h6" en fonction de la place du composant dans la page (voir le composant title) - Ne pas utiliser le markup "p" pour le titre - Si l'image est décorative, l'alternative textuelle (attribut alt) est vide : alt="" - Si l'image est porteuse d'information, son alternative textuelle est remplie - Le titre est le premier élément de la Card dans le code source généré. - L'image et l'overline sont après le titre dans l'ordre du code source généré, pouvant restés visualisés en premier **Règles d'usage :** - Une card ne peut pas contenir un hat - Ne pas changer le background des cards - Respecter la hiérarchie des boutons. - Les cards doivent toujours respecter les grilles **Exemple d'utilisation :** ```jsx Présentation Title lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu, vulputate vera. Présentation Title lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu, vulputate vera. Horizontal Title lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu, vulputate vera. Horizontal inverted Title lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu, vulputate vera. ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | - | | flat | boolean | true, false | Adding border for Card content | | horizontal | boolean | true, false | Horizontal Card orientation | | floating | boolean | true, false | Floating card | | skeleton | boolean | true, false | Loading card | | onClick | ClickEvent | - | onClick Event | | reversed | boolean | true, false | Reversed card | | href | string | - | - | | active | boolean | true, false | Activated card | | fullheight | boolean | true, false | - | | accessibilityLabel | string | - | - | | id | string | - | - | | className | string | - | Additional CSS Classes | | testId | string | - | - | ### Checkbox La checkbox permet aux utilisateurs de sélectionner un ou plusieurs éléments dans un ensemble. **Utilisation et rôle :** Le composant Checkbox permet aux utilisateurs de sélectionner ou désélectionner une ou plusieurs options dans une liste. Les checkbox sont particulièrement utiles pour les formulaires et les configurations où plusieurs options peuvent être sélectionnées simultanément. ##### **Quand l'utiliser** - **Sélections multiples** : pour sélectionner plusieurs options parmi une liste. - **Filtre** : pour sélectionner ou déselectionner un ou plusieurs filtres dans une liste. - **Consentements & Conditions d’utilisation** : pour obtenir des accords ou des consentements, par exemple pour les conditions d'utilisation ou les abonnements aux newsletters. ##### **Quand ne pas l'utiliser** - **Sélections uniques** : pour une sélection unique parmi plusieurs options, utiliser des radio buttons. - **Actions immédiates** : ne pas utiliser pour déclencher des actions immédiates comme l'envoi d'un formulaire ou la navigation. Dans ce cas, utiliser des boutons. ##### **Checkbox ou Switch ?** - **Les Checkbox** permettent à l’utilisateur de sélectionner plusieurs choix et qui doivent être validé (Ex. : Formulaire) sauf dans le cas de filtrage de recherche qui lui peu s’actualiser directement. - **Un Switch** permet de réaliser une action immédiate ou de basculer entre deux modes (Ex. : Forfait bloqué, Notification push). ##### **Les différents types de checkbox** - **Les checkbox** contiennent uniquement un label, ils sont idéaux dans des interfaces ou formulaires compacts pour des choix simples et évidents qui n'ont pas besoin de détails et privilégient la rapidité de sélection (ex. : iPhone, Samsung, Google). - **Les checkbox** tiles contiennent un label, une description optionnelle et une icône si besoin. Ils peuvent être utilisés pour des choix difficiles et importants qui ont besoin d'informations supplémentaires permettant à l'utilisateur de comparer avant d'effectuer un choix (ex. : types d’offres). Ils peuvent être positionnés verticalement ou horizontalement selon l’espace disponible. **Content Design :** ## Contexte Une checkbox est utilisée pour sélectionner des éléments (0, 1 ou plusieurs) d’une liste spécifique, en cochant ou décochant la ou les cases souhaitées. Les textes doivent être assez explicites pour éviter toute confusion entre ces éléments. Une checkbox peut également se présenter avec un élément unique, obligatoire ou non, pour accepter des conditions par exemple. Pour toute autre sélection unique, on utilise [les radio buttons](https://design.bouyguestelecom.fr/components/Radio?activeTab=content). ## Construction ##### Checkbox à éléments multiples Une Checkbox à éléments multiples peut être introduite par un texte principal (titre) et précisée par un texte secondaire (description). Dans ce cas, le texte principal est en bold et le texte secondaire est en regular. **Texte principal (Titre)** - **Formulation** : on utilise les mêmes formulations tout au long de la liste, avec une majuscule sur le premier mot et sans point final. - **Message** : on donne une seule idée claire, concise et explicite par élément. - **Longueur** : dans l’idéal, on ne dépasse 1 ligne en version mobile. ![](/assets/8abc2b1d-c3fb-445f-8b31-b492d30ac27f) **Texte secondaire (description)** - **Formulation** : on utilise les mêmes formulations tout au long de la liste, avec une majuscule sur le premier mot et un point final sur les phrases verbales. - **Message** : on donne une seule idée claire, concise et explicite par élément. Ce texte doit apporter un message complémentaire au titre (description, proposition, solution...), donc on évite les redondances. - **Longueur** : dans l’idéal, on ne dépasse 2 lignes en version mobile. ![](/assets/aced3a19-94f3-428a-80e2-521462ec84f5) ##### Checkbox à élément unique **Checkbox à élément unique et non obligatoire** - **Formulation** : on ponctue avec une majuscule sur le premier mot et sans point final. - **Message** : on donne une seule idée claire, concise et explicite par élément. - **Longueur** : dans l’idéal, on ne dépasse 1 ligne en version mobile. ![](/assets/ce9c7d0d-d412-4385-b9a0-350148e8b78f) **Checkbox à élément unique et obligatoire** - **Formulation** : on ponctue avec une majuscule sur le premier mot et avec un point final sur les phrases verbales. - **Message** : on privilégie une seule idée claire, concise et explicite par élément, mais on peut intégrer plusieurs idées et plusieurs phrases par élément lorsque les contraintes juridiques l’exigent. - **Longueur** : on fait au plus court en supprimant les mots inutiles. ![](/assets/754d204d-b747-4816-9436-f1695b91a3f1) **Accessibilité :** ## **Comment l'utiliser** **Son étiquette :** - Une checkbox doit toujours avoir une étiquette visible (un label) - La description peut-être générée dans l'élément "label" si elle est simple **Son état :** - Une checkbox peut être en disabled - Une checkbox ne peut pas être en readonly - si une case à cocher est indiquée comme étant obligatoire, l'attribut aria-required="true" doit être ajouté à l''élément "input" - si les cases à cocher sont dans un groupe, et que la sélection d'une des cases à cocher est obligatoire, l'attribut aria-required="true" doit être ajouté au groupe **Regroupement :** - Si plusieurs cases à cocher sont utilisées pour répondre à un même sujet, une même thématique, une même question : - Si chaque étiquette est suffisamment explicite pour comprendre l'action qui résulte de son activation, il n'est pas nécessaire de prévoir un regroupement - Si ce n'est pas le cas, il est nécessaire de regrouper les cases à cocher et de donner un nom visible de préférence à ce groupe **Son activation :** - l'activation d'une case à cocher ne doit pas déclencher le chargement d'une nouvelle page, ni déclencher le déplacement du focus **Exemples de code attendu** ```

* Champs obligatoires

J’accepte les conditions générales *

Comment souhaitez-vous être contacté ? *

Email Téléphone Courrier

``` **Règles d'usage :** - Sélection unique - Checkbox et Radio button - Alignement horizontal - Activation d'état - Label des checkbox ### Chips Les chips sont des éléments compacts qui représentent une entrée, un attribut ou une action. **Utilisation et rôle :** Les chips sont des éléments d’interface interactifs qui permettent de filtrer une ou plusieurs options dans un groupe logique. ##### **Quand l'utiliser** - **Filtrage** : pour filtrer des résultats de recherche via différentes catégories (ex. : Apple, Samsung, Xiaomi) ou caractéristiques (Ex. : Couleurs, Tailles). ##### **Quand ne pas l'utiliser** - **Actions** : ne pas utiliser pour déclencher des actions comme des soumissions de formulaires. Dans ces cas on utilise des boutons. - **Navigation** : ne pas utiliser pour naviguer ou afficher différents contenus au sein de la même page. Dans ces cas, on utilise les Tabs - **Sélections nécessitant une validatio** : ne pas utiliser pour des actions de sélection unique ou multiple qui doivent être validées (ex. : Civilité, Condition, Consentement). Dans ces cas, on utilise des radio buttons ou des checkbox, en fonction du besoin. **Accessibilité :** ## Comment l'utiliser **Regroupement** Si plusieurs chips sont utilisées pour répondre à un même sujet, une même thématique : - Si chaque étiquette est suffisamment explicite pour comprendre l'action qui résulte de son activation, il n'est pas nécessaire de prévoir un regroupement - Si ce n'est pas le cas, il est nécessaire de regrouper les chips et de donner un nom visible à ce groupe **Exemple de code attendu** ```

Marque

``` **Règles d'usage :** - Icône - Action - Groupement des chips - 2 Chips minimum **Exemple d'utilisation :** ```jsx Chips du panel de controls Chips 2 Chips 3 Chips 4 Chips disabled ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | Chips content | | onClick | ClickEvent | - | onClick Event for all Chips | | active | boolean | true, false | active Render Chips Active | | disabled | boolean | true, false | Disabled chips | | accessibilityLabel | string | - | - | | testId | string | - | Test Id for Test Integration | | id | string | - | Chips id | | className | string | - | Additional CSS Classes | ### Columns Le composant Columns permet de diviser l'espace horizontal en plusieurs sections verticales, afin de créer une structure harmonieuse et responsive. **Utilisation et rôle :** Les colonnes font partie des outils essentiels pour composer votre page. ![](/assets/29a0c5ba-c545-4e04-9b84-d72ac6bf542d) **Taille des colonnes** Les colonnes se basent sur une grille de 12 unités de large. ![](/assets/df2d3ffb-bb67-437a-9248-19c000b95698) `is-narrow` permet à une colonne de prendre la taille minimale possible, en fonction de son contenu. ![](/assets/13468c00-7b8c-4890-9d04-999ec90046d2) **Colonnes sur plusieurs lignes** Ajoutez `is-multiline` pour que vos colonnes passent automatiquement d'une ligne à l'autre. ![](/assets/51eea98b-6c17-4c8b-9731-04aa86978695) **Exemple d'utilisation :** ```jsx Nous sommes 2 colonnes simples Column Column Nous sommes des colonnes multiline Column Column Column Column Nous sommes des colonnes inlined Column Column Column Column Column ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | * | | multiline | boolean | true, false | Multiline Columns | | scrollable | boolean | true, false | Make colomns scrollable to vertical | | gap | GapSize | [GapSizeValues](#enum_GapSizeValues) | - | | fullBleed | boolean | true, false | - | | mobile | boolean | true, false | Responsive mode | | marginless | boolean | true, false | delete margin | | fullheight | boolean | true, false | - | | align | Alignable | "ALIGNED_CENTER", "ALIGNED_END", "ALIGNED_START", "ALIGNED_STRETCH", "CENTER", "END", "START", "STRETCH" | - | | verticalAlign | Alignable | "ALIGNED_CENTER", "ALIGNED_END", "ALIGNED_START", "ALIGNED_STRETCH", "CENTER", "END", "START", "STRETCH" | - | | id | string | - | - | | className | string | - | Additional CSS Classes | | testId | string | - | - | ### Container Le conteneur centre votre contenu horizontalement. C'est l'élément de mise en page le plus basique. **Utilisation et rôle :** L'élément Container suit directement une section de base et est chargé de restreindre votre contenu en fonction de la largeur de la page. Il contient les rangées et les colonnes permettant d'organiser votre contenu selon une grille. **Quand utiliser :** - **Organiser le contenu :** Contenir les rangées et colonnes selon une grille pour une mise en page structurée. - **Restreindre la largeur :** Adapter la largeur du contenu en fonction de la page. **Quand ne pas utiliser :** - **Plein écran :** Pour une utilisation sur toute la largeur de la section, utilisez la classe `is-fluid`. **Exemple d'utilisation :** ```jsx Je suis une box dans un container ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | * - ------------------ WEB PROPERTIES ----------------------- | | medium | boolean | true, false | Set medium container | | id | string | - | Set id attribute | | className | string | - | Additional CSS Classes | | testId | string | - | - | ### Countdown Le compte à rebours est utile pour visualiser la fin d’un évènement. **Utilisation et rôle :** Le composant Countdown, ou compte à rebours, est un élément visuel utilisé pour afficher le temps restant avant un événement particulier. - **Promotions et Offres Limitées :** Afficher le temps restant pour profiter d'une promotion ou d'une offre spéciale. - **Lancements de Produits :** Annoncer le lancement d'un nouveau produit avec un compte à rebours. - **Maintenance Planifiée :** Informer les utilisateurs du temps restant avant une maintenance planifiée. ##### **Quand utiliser** - **Vente :** - Afficher le temps restant pour une vente flash, incitant les utilisateurs à agir rapidement. - Compter jusqu'à la mise en vente d'un nouveau produit ou d'une collection. - Temps restant pour bénéficier d'une remise spéciale. - Assistance : - Informer les utilisateurs du temps estimé restant avant la résolution d'un ticket. - Indiquer les heures de disponibilité du support en temps réel (par exemple, avant la fermeture du service). - **Application/Espace client :** - Compter le temps restant avant l'échéance d'un paiement de facture. - Afficher des offres temporaires spéciales pour les utilisateurs connectés. - Indiquer le temps restant avant une maintenance qui pourrait affecter l'accès aux services. ##### **Quand ne pas utiliser** - **Information Statique :** Ne pas utiliser un compte à rebours pour des informations qui ne sont pas sensibles au temps. - **Chargement de Pages :** Ne pas utiliser pour indiquer le temps de chargement des pages ou des contenus. - **Messages Non Urgents :** Éviter d'utiliser pour des informations qui n'ont pas de contrainte temporelle. **Règles d'usage :** - Adapter le format au contexte **Exemple d'utilisation :** ```jsx Countdown Countdown small ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | deadline | Date | - | Date to reach before the end of the countdown | | format | CountdownFormat | "dd", "dd-hh", "dd-hh-mm", "dd-hh-mm-ss", "hh-mm-ss", "mm-ss", "ss" | Format of countdown | | event | ClickEvent | - | - | | small | boolean | true, false | - | | inverted | boolean | true, false | White countdown on darked background | | id | string | - | - | | className | string | - | Additional CSS Classes | | testId | string | - | - | ### Datepicker Champ de saisie de date avec calendrier intégré, permettant à l'utilisateur de saisir ou sélectionner une date au format JJ/MM/AAAA. **Utilisation et rôle :** Le Datepicker est un champ de saisie de date qui ouvre un calendrier déroulant pour faciliter la sélection d'une date précise. L'utilisateur peut saisir la date directement au clavier ou la choisir visuellement dans le calendrier. ##### **Quand l'utiliser** - **Formulaire de date précise** : pour recueillir une date de naissance, d'activation ou d'échéance dans un formulaire. - **Planification & réservation** : pour permettre à l'utilisateur de choisir une date de rendez-vous ou de livraison. - **Saisie flexible** : quand l'utilisateur doit pouvoir saisir la date au clavier ou la sélectionner dans le calendrier. ##### **Quand ne pas utiliser** - **Dates relatives** : pour des choix comme "aujourd'hui" ou "demain", préférer des boutons radio. - **Plage de dates** : pour sélectionner une période (date de début + date de fin), utiliser le composant Calendar en mode "Date range". - **Navigation calendaire** : pour afficher des événements ou un planning, utiliser directement le composant Calendar. **Règles d'usage :** - Afficher le format de date attendu ### Divider Les séparateurs sont utilisés pour différencier des zones d'information au sein d'un espace de contenu neutre comme les cartes, les box ou les sections. **Utilisation et rôle :** **Quand utiliser** - Pour séparer deux items dans une liste, un menu ou un tableau - Pour séparer deux section ou deux paragraphe - Pour accentuer le choix entre deux offres **Quand ne pas utiliser** - Pour séparer deux inputs dans un formulaire **Règles d'usage :** - Utiliser des dividers que lorsque cela est nécessaire - Garder une cohésion graphique au sein de la page **Exemple d'utilisation :** ```jsx Divider avec icon Divider simple ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | iconName | IconName | [IconNameValues](#enum_IconNameValues) | Custom icon for Divider | ### Fab Le FAB (Floating Action Button) représente l'action la plus importante sur un écran. Il met les actions clés à portée de main. **Utilisation et rôle :** Le FAB (Floating Action Button) représente l'action la plus importante sur un écran.Il est généralement positionné en bas à droite de l'écran et offre un moyen rapide et visible pour accéder à une fonctionnalité clé. Le FAB est particulièrement utile pour les actions qui doivent être mises en avant et facilement accessibles sur les appareils mobiles. - **Action principale :** Pour l'action la plus importante sur une page, comme ajouter un nouvel élément, lancer une recherche ou ouvrir un formulaire. - **Accessibilité rapide :** Pour permettre un accès rapide à des fonctionnalités fréquemment utilisées. - **Accentuation visuelle :** Pour mettre en avant une action spécifique et la rendre facilement repérable. ##### **Quand utiliser** - **Vente :** Utilisé pour des actions telles que "Ajouter au panier", "Scanner un code-barres" ou "Accéder aux offres spéciales". - **Assistance :** Employé pour des actions comme "Démarrer une conversation", "Soumettre une demande d'assistance" ou "Appeler le support technique". - **Application/Espace client :** Utilisé pour des actions rapides telles que "Ajouter un nouveau paiement", "Mettre à jour les informations personnelles" ou "Contacter le service client". ##### **Quand ne pas utiliser** - **Multiples actions principales :** Évitez d'utiliser plusieurs FAB pour différentes actions principales sur la même page. - **Actions secondaires :** Ne pas utiliser le FAB pour des actions secondaires ou moins fréquentes. - **Interfaces chargées :** Si l'interface contient déjà de nombreux éléments interactifs, ajouter un FAB peut rendre l'interface surchargée et confuse. **Règles d'usage :** - Utiliser des icônes claires et compréhensibles - Le FAB doit être positionné en bas à droite sur l’écran **Exemple d'utilisation :** ```jsx Ecrire Extended fab ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | iconName | IconName | [IconNameValues](#enum_IconNameValues) | name of icon | ### FlexBox Le composant FlexBox est un élément de structure conçu pour faciliter l'alignement et la disposition des éléments enfants de manière répétitive. Il offre une structure efficace pour gérer l'orientation et l'espacement entre les éléments. **Utilisation et rôle :** **Utilisation :** - Disposition des Éléments : Facilite l'organisation des éléments de l'interface utilisateur en alignant les composants soit horizontalement soit verticalement. - Gestion de l'Espace : Permet un espacement uniforme et une gestion cohérente des gaps entre les éléments, améliorant l'accessibilité et la lisibilité. - Layout Répétitif : Idéal pour créer des mises en page répétitives comme des listes, des groupes de boutons, ou des sections de contenu. **Exemples d'Usage :** - Barres de Navigation : Créer des barres de navigation horizontales avec un espacement égal entre chaque lien. - Listes de Produits : Afficher les produits dans une disposition verticale, en garantissant un espacement chez chaque élément pour une meilleure lecture. - Groupes de Boutons : Aligner des boutons horizontalement dans un formulaire pour un accès facile. **Comportement :** - Orientation Flexible : Choix entre une orientation horizontale ou verticale selon les exigences du design. - Espacement Automatisé : Ajustement automatique du gap entre les éléments pour s'adapter à divers tailles d'écran. - Adaptabilité : S'ajuste aux changements dans la taille et le contenu des éléments enfants, maintenant la cohérence visuelle. - Personnalisation : Possibilité de définir et de modifier les propriétés du Stack pour répondre aux besoins spécifiques d'un projet. **Exemple d'utilisation :** ```jsx

Avec la props <code>gap</code>

Avec la props <code>justify</code> + "space-between"

Avec la props <code>narrow</code> (anciennement le composant Column)...

...ou avec <code>size</code>

Comportement <code>scrollable</code>

FlexBox dans FlexBox

Avec <code>align</code> et <code>justify</code> + "reverse"

Cas pratique BIG Voir les prix avec forfait mobile Si vous avez ou prenez un forfait Bouygues Telecom.

``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | Box child | | gap | GapSize | [GapSizeValues](#enum_GapSizeValues) | - | | direction | Direction | "column", "column-reverse", "row", "row-reverse" | } Flex direction | | align | Align | "CENTER", "END", "START", "STRETCH" | } Align items | | justify | JustifyProps | "CENTER", "END", "SPACE_AROUND", "SPACE_BETWEEN", "SPACE_EVENLY", "START" | } Justify content | | wrap | boolean | true, false | } Wrap content | | scrollable | boolean | true, false | scrollable mode (overflow-x: auto) | | fullBleed | boolean | true, false | - | | fullheight | boolean | true, false | Full height (height: 100%) | | mobile | boolean | true, false | - | | id | string | - | Id attribute | | className | string | - | Additional css classes | | testId | string | - | - | ### Hero Bannière de haut de page destiné à attirer l'attention. **Utilisation et rôle :** L'élément Hero est la grande bannière que vous rencontrez sur les plateformes numériques et qui informe clairement l'utilisateur sur les produits/services dans lesquels l'entreprise est spécialisée. Il attire l'attention de manière évidente des visiteurs qui parcourent la page. L'élément Hero est visuellement esthétique et informatif par nature et est un grand affichage de ce que l'entreprise représente. **Quand utiliser :** - **Attirer l'attention de l'utilisateur :** Première chose que l'utilisateur voit, idéal pour expliquer le sujet de la page et afficher une incitation à l'action. - **Mettre en évidence les détails :** Détails du plan d'assurance et actions principales. **Quand ne pas utiliser :** - **Afficher de longs morceaux de texte :** Utilisez d'autres éléments pour du texte détaillé ou explicatif. **Exemple d'utilisation :** ```jsx Internet garanti Profitez dInternet dès labonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.

Internet garanti

``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | Hero Children | | overlap | boolean | true, false | Hero overlap components in tab (need to add key for each element), | | backgroundHeight | BackgroundHeight | 100, 150, 200, 300 | - | | onClick | ClickEvent | - | onClick Event | | backgroundColor | TrilogyColor | [TrilogyColorValues](#enum_TrilogyColorValues) | Hero background color | | backgroundSrc | string | - | If source, it will display background option | | inverted | boolean | true, false | Inverted | | id | string | - | - | | className | string | - | Additional CSS Classes | | testId | string | - | - | ### Icon Chaque icône est conçue pour communiquer une intention et faciliter la navigation. Pour voir la liste complète, c'est par [ici](/foundations/icons). **Utilisation et rôle :** - L'icône ne doit pas être entourée de vide. Si elle est carrée, elle prend donc tout l'espace de travail. Si elle est rectangulaire, elle ne peut donc avoir du vide que sur un des axes (x ou y). - L'icône doit alors être alignée sur l'axe qui n'est pas occupé intégralement : un centrage vertical ou horizontal est donc requis. - Les angles, les arêtes, les arrondis doivent être impeccables et ne doivent pas subir d'abruptes changements de direction. - Le SVG ne doit contenir aucune couleur, elles seront ajoutées si nécessaire en CSS **Quand utiliser** - Pour attirer l'attention de l'utilisateur. - Généralement la première chose que l'utilisateur voit, ce qui en fait un endroit idéal pour expliquer le sujet de la page et afficher une incitation à l'action. - Pour mettre en évidence les détails du plan d'assurance et les actions principales. **Quand ne pas utiliser** Lorsque vous devez afficher de longs morceaux de texte. **Accessibilité :** **Comment l'utiliser :** - si l'icon est décoratif et n'apporte pas d'information, le code est prévu pour ne pas être restitué par les TA (Technologies d'assistance) - si l'icon est porteur de sens, il faut rajouter un texte caché avec la classe CSS sr-only qui fournit l'information - si l'icon est un élément interactif : - il faut rajouter un texte caché dans un "span" avec la classe CSS sr-only qui fournit l'action effectuée lorsque l'élément est activé - ce "span" est dans un "button" si l'action s'applique dans la page ou dans un "a" si l'action recharge une page - ne pas utiliser l'attribut aria-label sur les éléments "button" ou "a" **Exemple de code :** icon permettant de visualiser ou masquer le mot de passe : ``` ``` **Exemple d'utilisation :** ```jsx

``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | name | IconName | [IconNameValues](#enum_IconNameValues) | - | | size | IconSize | "huge", "large", "medium", "small", "smaller" | - | | circled | boolean | true, false | - | | stretched | boolean | true, false | Stretched icon | | color | string | - | Custom Icon Color | | backgroundColor | TrilogyColor | [TrilogyColorValues](#enum_TrilogyColorValues) | Custom Background color only if circled | | skeleton | boolean | true, false | Icon Skeleton | | stacked | boolean | true, false | - | | align | Alignable | "ALIGNED_CENTER", "ALIGNED_END", "ALIGNED_START", "ALIGNED_STRETCH", "CENTER", "END", "START", "STRETCH" | - | | verticalAlign | Alignable | "ALIGNED_CENTER", "ALIGNED_END", "ALIGNED_START", "ALIGNED_STRETCH", "CENTER", "END", "START", "STRETCH" | - | | onClick | ClickEvent | - | onClick Event Icon | | accessibilityLabel | string | - | - | | testId | string | - | - | | id | string | - | - | | className | string | - | - | ### Input Le composant Input permet de récolter des informations saisies librement par l'utilisateur. **Utilisation et rôle :** Un input est un champ dans lequel les utilisateurs peuvent saisir du texte ou sélectionner une option ou un élément. ##### **Quand utiliser** - **Input Selector :** Champ de saisie permettant aux utilisateurs de choisir une option parmi une liste prédéfinie. - **Vente :** Sélectionner une catégorie de produit, une taille ou une couleur. - **Assistance :** Choisir une catégorie de problème ou un type de demande. - **Application/Espace client :** Sélectionner un type de service ou une période spécifique. - **Input Text :** Champ de saisie permettant aux utilisateurs de saisir du texte libre. - **Vente :** Ajouter des commentaires, envoyer des messages aux vendeurs. - **Assistance :** Décrire un problème, laisser des commentaires sur un article d'aide. - **Application/Espace client :** Modifier des informations personnelles, envoyer des messages au service client. - **Input Password :** Champ de saisie destiné à la saisie sécurisée de mots de passe. - **Vente :** Connexion ou création de compte. - **Assistance :** Connexion sécurisée à une section d'assistance personnalisée. - **Application/Espace client :** Connexion ou modification du mot de passe. ##### **Quand ne pas utiliser** - **Actions non textuelles :** Pour des actions qui ne nécessitent pas de saisie textuelle, utilisez plutôt des boutons, des cases à cocher ou des sélecteurs. - **Données statiques :** Pour afficher des données statiques ou non modifiables, utilisez des composants de texte ou des labels. - **Choix limités :** Pour des choix limités et prédéfinis, utilisez des composants de sélection comme des dropdowns ou des radio buttons. ##### **Cas d'erreur** - **L’erreur de saisie** : Au clic sur le CTA, la page s’ancre directement sur l’input complété avec une erreur de saisie. ![](/assets/3ca50171-114d-4a1a-9a2e-538a3082ba5d) - **La non complétion d’un input obligatoire** : Au clic sur le CTA, la page s’ancre directement sur l’input avec un champ obligatoire non complété. ![](/assets/99c7979a-4abe-4cda-ac16-906932affe34) - **La non complétion de plusieurs inputs obligatoires** : Au clic sur le CTA, la page s’ancre directement sur le champ obligatoire non complété le plus haut de la page. ![](/assets/2b642b7d-232c-474e-beab-8c764f673015) **Content Design :** ## Contexte Un input doit indiquer de façon claire et précise les informations à saisir par l’utilisatrice ou utilisateur. Ils peuvent se présenter en une ou plusieurs étapes et doivent respecter des bonnes pratiques d’accessibilité. ## Construction Les inputs texte sont construits selon les éléments suivants : - L'étiquette (ou titre de l'input) - Le helper text : l'exemple, le format ou l'aide à la saisie - Le message d’erreur ##### L'étiquette (ou titre de l'input) - **Formulation :** on utilise les mêmes formulations tout au long du formulaire, avec une majuscule sur le premier mot et sans signe de ponctuation (pas de :). - **Message :** on donne explicitement l’information à saisir, de la manière la plus concise possible (ex. : Votre prénom). - **Longueur :** dans l’idéal, on ne dépasse pas 1 ligne en version mobile. - **Champ obligatoire :** on met un astérisque à la fin de l'étiquette si le champ est obligatoire (ex. : Votre prénom *) ![](/assets/8747014c-f405-4120-80e0-82d11d057425) ##### Le helper text : l'exemple, le format ou l’aide à la saisie - **Contexte :** lorsque le champs de saisie est contrôlé (adresse e-mail, numéros de téléphone, prise fibre...), on donne un exemple en-dessous de l'étiquette. - **Formulation :** on mentionne le bon exemple précédé de la mention “Ex. :”, le bon format précédé de la mention “Format :” ou la bonne aide à la saisie. - **Message :** on privilégie un exemple facile à comprendre ou une aide à la saisie claire qui permettra à l’utilisatrice ou utilisateur de retrouver facilement la bonne information. - **Longueur :** dans l’idéal, on ne dépasse pas 1 ligne en version mobile pour l’exemple et le format, 2 lignes en version mobile pour l’aide à la saisie. **L'exemple** ![](/assets/3d7f68a5-8fee-4ed3-a970-43773c9a568d) **Le format** ![](/assets/80dafee5-ba52-4400-8b69-b140e6f81b78) **L'aide à la saisie** ![](/assets/033d7220-ec53-4f99-9b5c-0a49a085134a) ##### Le message d'erreur - **Contexte :** un message d’erreur apparaît automatiquement lorsque l’utilisatrice ou utilisateur valide le formulaire en omettant de renseigner un input obligatoire (non complétion) ou renseigne un format incorrect (erreur de saisie). - **Formulation :** on utilise une phrase verbale, avec une majuscule sur le premier mot et un point final, en reprenant les termes formulés dans le titre de l’input. Ex. : Votre prénom (titre) / Merci de renseigner votre prénom (message d’erreur). - **Longueur :** dans l’idéal, on ne dépasse pas 2 lignes en version mobile. **La non complétion d’un input obligatoire** - **Message :** on indique explicitement l’information qu’il faut renseigner. ![](/assets/28787e11-0541-4486-8ac9-b011e7a52fdf) **L’erreur de saisie** - **Message :** on indique toujours au préalable la cause de l’erreur et on donne explicitement la solution pour résoudre le problème, avec un ton encourageant, sans culpabiliser l’utilisatrice ou utilisateur. Dans le cas d’une erreur sur le format, on complète le message par un exemple concret. ![](/assets/196c79ab-5303-43ed-b500-3e1a9c5ac709) ![](/assets/2e437d33-53c1-49a2-9331-f6cae211e7f2) ## Les différents inputs ##### L'input texte ![![](/assets/0b1251b5-712d-4479-86a4-abe7ef6ad2fa)](/assets/a898c359-4f25-48c1-8128-3d0a6ba576d4) ##### L'input date ![](/assets/f3c72ee3-1d44-49dd-a149-ec99735848c0) ##### L'input mot de passe ![](/assets/0a4f6ad4-3fb5-4ccf-b27f-24222d8d537c) ##### L'input search bar ![](/assets/0e5763a0-f443-4749-a142-4d6b78f8bd7e) **Accessibilité :** ## Comment l'utiliser ### L'étiquette - Elle est obligatoire, elle est toujours visible, placée visuellement juste au dessus du champ - Elle est reliée au champ dans le code (for/id) - Elle est complétée par un astérisque si le champ doit obligatoirement être rempli ### Le placeholder - Il n'est pas obligatoire - Il ne remplace pas l'étiquette ### Helper text : format/exemple/aide à la saisie - Le helper text est visuellement entre l'étiquette et le champ - Un format ou un exemple est obligatoire lorsque la donnée à saisir doit respecter un certain format (ex : date, email...). Il n'est pas obligatoire sinon - L'erreur de saisie provoque un message d'erreur indiquant que la donnée n'est pas valide et dans le cas d'un format, contient un exemple de saisie correcte. Il apparait une fois le bouton de soumission activé - En dehors du format ou d'un exemple, le helper text peut contenir un texte indiquant où trouver la donnée à saisir par exemple - Le helper text n'est pas obligatoire ### L'attribut autocomplete - Il doit être présent pour les données relatives à la personne qui rempli le formulaire (nom, prénom...) - Il n'est pas obligatoire sinon - Sa valeur est choisie dans la liste présente dans l'onglet code ### Champ obligatoire - Si le champ doit obligatoirement être rempli, la propriété "required" doit être utilisée - S'il n'est pas rempli, un message d'erreur apparait une fois le bouton de soumission activé ### Message d'erreur - Le message d'erreur doit apparaitre en dessous du champ en erreur - Lorsqu'il apparait, il est relié au champ (via aria-describedby sur input) ### Disabled ou readonly - Un champ sera en disabled si il ne peut pas être rempli, il ne contient pas de valeur - Un champ sera en readonly si il est pré-rempli. Il ne peut pas être modifié mais sa valeur doit pouvoir être lue (contraste suffisant) et être parcouru (avec les flèches de direction si la valeur dépasse la zone visible) **Règles d'usage :** - Ne pas changer l’icone sur l’input search **Exemple d'utilisation :** ```jsx Input type text Input type password Input type text with icon and status success Input type text with icon and status error ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | iconNameLeft | IconName | [IconNameValues](#enum_IconNameValues) | - | | iconNameRight | IconName | [IconNameValues](#enum_IconNameValues) | - | ### Link Le lien est un composant cliquable qui permet à l’utilisateur de naviguer vers une nouvelle page ou une autre section de l'interface. **Utilisation et rôle :** Le Lien guide l'utilisateur vers une information ou une ressource complémentaire, en préservant son contexte et en facilitant son retour à sa tâche principale. ##### **Quand l'utiliser** - **Navigation entre les pages** : accéder à une autre page, naviguer dans un menu ou rejoindre une section différente du site. - **Accès à des ressources ou documents** : télécharger un document, consulter un guide, accéder à un contenu informatif externe à la page actuelle. - **Services externes** : accéder à un site partenaire, être redirigé vers une plateforme tierce. ##### **Quand ne pas l'utiliser** - **Boutons** : on n’utilise pas le lien pour initier ou valider une actions dans un parcours. Dans ce cas, on utilise le [button](https://design.bouyguestelecom.fr/components/Button). #### **Les différents liens** - **Le Standalone Link** (lien hors du texte) est isolé du contenu textuel pour être mieux mis en avant. Il peut comporter une icône à droite pour renforcer sa signification. On le privilégie pour : - Naviguer vers une page - Afficher une information ou une ressource importante dans le parcours utilisateur - Répondre à un besoin de visibilité prioritaire - **L’Inline Link** (lien dans le texte) est intégré directement dans un bloc de texte avec la balise html . Il permet de rediriger sans interrompre la lecture. On le privilégie pour : - Compléter une information dans un contexte spécifique - Afficher une information ou une ressource secondaire dans le parcours utilisateur - Préciser une référence ou apporter une aide contextuelle **Content Design :** ## Contexte Un lien est utilisé pour naviguer d'une page à une autre page ou d’une page à un autre contenu au sein de la même page, en cliquant sur du texte souligné dans les deux cas. Il peut être en dehors du texte ou dans le texte. Un lien doit donc toujours être clair, concis et préciser le contenu à venir. ## Construction ##### Lien hors du texte (Standalone Link) - **Formulation standard** : on privilégie les phrases verbales, à l’infinitif ou non, sous forme affirmative ou interrogative. ![](/assets/0e230455-4eb4-4f7b-aa45-63ee36dd1364) ![](/assets/03eb1c30-3bc5-45d0-a934-853fe11add10) - **Formulation courte** : certains liens prennent la forme d’un seul mot ou d’un seul verbe à l’infinitif, uniquement si l’action est assez courante et explicite. ![](/assets/c8a5f15a-8c9c-4eb3-b422-7e957f9e8bbe) ![](/assets/7b037150-2335-475c-a610-9dcf006966f3) - **Majuscule, minuscule et ponctuation** : un lien hors du texte commence toujours par une lettre en majuscule, le reste est en minuscule, excepté sur les noms de produit ou de marque qui suivent les règles du propriétaire. Un lien ne prend pas de point final, (sauf ? pour les formes interrogatives). ![](/assets/b169cd9e-70a4-4aa4-a3e2-eb37037595a2) - **Longueur** : un lien doit être le plus court possible et se limiter à une seule action. Chaque mot doit avoir un but précis, on supprime donc tous les mots inutiles. Dans l’idéal, on ne dépasse pas les 60 caractères, espaces compris. ![](/assets/7ceef9a7-7288-4d49-bdb8-6c7622d45a87) ##### Lien dans le texte (Inline Link) - **Formulation** : on utilise la même forme standard et les mêmes règles de longueur que pour les liens hors du texte. Pour les lettres en majuscule, minuscule et la ponctuation, on suit le fil du texte dans lequel ce lien est intégré. ![](/assets/d8b7116c-c430-46fd-a9d1-df1ca9f00a3a) ![](/assets/62617413-4ef8-4309-a493-f0ee8fef0057) ![](/assets/ce71832d-d28c-45f2-bfe9-261f072ee5f5) ![](/assets/ce60969d-e804-4a0a-81f9-56e9f420ffad) ## Liens récurrents ![](/assets/648a94fd-0eeb-4727-903c-ea73bfdc1f7e) **Accessibilité :** ## Comment l'utiliser - un lien est utilisé lorsque son activation déclenche le chargement d'une nouvelle page - un lien interne à la page (href="#ancre") déplace le focus vers la cible du lien à l'intérieur de la page - L'intitulé du lien est pertinent, il permet d'en comprendre la destination - si ce n'est pas le cas : - Si le lien est dans un "p", dans un "td", dans un "li" et que le contenu rend explicite l'intitulé visible ou si le titre qui précède le lien aide à comprendre la destination alors il n'y a rien de plus à faire d'un point de vue conformité - si son contexte ne permet pas de comprendre la destination, il faudra : - soit modifier l'intitulé visible et le rendre plus explicite - soit le compléter en utilisant l'accessibilityLabel dont la valeur reprend l'intitulé visible et le complète - un lien a comme markup "a" - un lien a obligatoirement un attribut href. qui lui permet de recevoir le focus clavier - si un lien n'a pas de href, il faut ajouter à l'élément "a" un attribut tabindex="0" pour qu'il reçoive le focus clavier et un attribut role="link" pour qu'il puisse être restitué comme étant un lien par les lecteurs d'écran - un lien est activable au clavier avec la touche "Entrée" - la prise du focus clavier est visible sur le lien ## Quand ne pas utiliser - si l'activation de ce lien déclenche une action à l'intérieur de la page alors il faut utiliser le composant "Button" avec comme markup un "button" ## Comment tester - pour tester si un lien interne à la page est fonctionnel : - utiliser la touche "Tab" jusqu'à arriver sur le lien - utiliser la touche "Entrée" - le focus doit être déplacé sur la cible du lien. Pour s'en assurer, utiliser par exemple "document.activeElement" dans la console du navigateur - l'utilisation à nouveau de la touche TAB permet d'atteindre l'élément interactif qui suit la cible atteinte, dans l'ordre du code source **Règles d'usage :** - Lien ou bouton - Lien avec icône - Lien externe **Exemple d'utilisation :** ```jsx Mot de passe oublié ? Je suis dans un paragraphe et ceci est un lien standard ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | iconName | IconName | [IconNameValues](#enum_IconNameValues) | Adding Icon Link | ### List Les listes sont des outils de mise en page, allant des listes simples aux listes de descriptions incluant des icones en entête. **Utilisation et rôle :** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. **Quand utiliser** **Quand ne pas utiliser** **Content Design :** ## Contexte Les listes à puces permettent d’exprimer plusieurs idées ou une idée complexe de façon claire et aérée. Ils attirent le regard et facilitent la lecture. Voilà pourquoi il faut les rédiger selon certaines règles. ## Construction Quelque soit la liste, elle doit toujours répondre aux règles suivantes : - On ponctue chaque point de la liste avec **une majuscule sur le premier mot et sans point final (ou !, ?, ...)** - On peut utiliser **des points, des chiffres, des icônes, des checkboxes ou encore des radio buttons** - On les introduit avec **un titre, une phrase ou un paragraphe** - On utilise **les mêmes formulations** tout le long des listes à puces - On donne **une idée par point** - On privilégie les points avec **une seule phrase** - On privilégie les listes à puces **à partir de 3 éléments cités** (accessibilité) ![](/assets/997c245c-59f5-4256-be4c-e5502d47230d) ![](/assets/c9036770-9271-4192-91a1-f1aaded0a9e1) **Exemple d'utilisation :** ```jsx Liste simple Élement de liste Élement de liste Élement de liste Liste simple numérotée Élement de liste Élement de liste Élement de liste Liste avec icons Ceci est un titre Ceci est la description Ceci est un titre Ceci est la description Ceci est un titre Ceci est la description Liste avec divider Ceci est un titre Ceci est la description Ceci est un titre Ceci est la description Ceci est un titre Ceci est la description ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | * | | divider | boolean | true, false | Add divider between items | | ordered | boolean | true, false | Display ordered list | | accessibilityLabel | string | - | - | | testId | string | - | - | | id | string | - | - | | className | string | - | Additional CSS Classes | ### Modal Une modale met en avant un contenu nécessitant une interaction de l'utilisateur avant qu'il ne puisse continuer son parcours. Elle apparait au clic sur un élément déclencheur (généralement un lien ou un bouton) **Utilisation et rôle :** Le composant "Modal" s'affiche au-dessus du contenu principal de la page, qui nécessite une interaction de l'utilisateur avant de pouvoir retourner à l'interface principale. Les modals sont utilisés pour attirer l'attention sur des informations importantes ou des actions critiques. ##### **Quand utiliser** - **Confirmation d'actions :** Pour demander à l'utilisateur de confirmer une action importante, comme la suppression d'un compte ou la confirmation d'un achat. - **Formulaires courts :** Pour afficher des formulaires courts, tels que des inscriptions à la newsletter ou des formulaires de contact. - **Informations critiques :** Pour présenter des informations critiques ou des erreurs qui nécessitent l'attention immédiate de l'utilisateur. - **Options détaillées :** Pour montrer des options ou des détails supplémentaires sans naviguer loin de la page actuelle. - **Vente :** - **Confirmation d'achat :** Utiliser une modal pour confirmer les achats avant de finaliser la transaction. - **Détails de produit :** Afficher des informations détaillées sur un produit sans quitter la page de liste de produits. - **Offres spéciales :** Présenter des offres spéciales ou des promotions de manière non intrusive. - **Assistance :** - **Formulaire de contact :** Utiliser une modal pour permettre aux utilisateurs de soumettre des demandes d'assistance ou des tickets de support. - **Tutoriels rapides :** Afficher des tutoriels ou des aides contextuelles pour guider l'utilisateur à travers des fonctionnalités complexes. - **Alertes critiques :** Notifier l'utilisateur de pannes de service ou d'autres problèmes critiques. - **Application/Espace client :** - **Mise à jour des informations :** Permettre aux utilisateurs de mettre à jour leurs informations personnelles ou de compte. - **Notifications de sécurité :** Informer les utilisateurs de connexions suspectes ou d'autres problèmes de sécurité nécessitant une attention immédiate. - **Gestion des abonnements :** Faciliter la gestion des abonnements et des services directement dans l'application. ##### **Quand ne pas utiliser** - **Interruptions non nécessaires :** Évitez d'utiliser des modals pour des informations non essentielles qui peuvent être intégrées de manière moins intrusive. - **Navigation principale :** Ne pas utiliser les modals pour la navigation principale ou pour des interactions fréquentes, car cela peut perturber l'expérience utilisateur. - **Contenus longs :** Évitez d'utiliser des modals pour des contenus très longs qui nécessitent un défilement excessif. - **Navigation compliquée :** Ne forcez pas les utilisateurs à naviguer à travers plusieurs étapes dans un modal. Gardez les interactions simples et directes. **Content Design :** ## Contexte Une modale ajoute un niveau d’information dans un contexte précis. Les textes doivent donc être clairs et pertinents pour faciliter une compréhension et une décision rapides. Elle peut contenir un message de suggestion, d’information, d’erreur, de confirmation ou encore d’alerte. **Titre** - **Formulation** : on ponctue chaque titre avec une majuscule sur le premier mot et sans point final (sauf !, ?, ...). - **Message** : on fait tout de suite comprendre à l’utilisateur l’information ou l’action proposée. - **Longueur** : dans l’idéal, on ne dépasse pas 2 lignes en version mobile (48 caractères espaces compris). ![](/assets/3ccc2404-ea7f-4cdc-850e-a62239716732) **Texte** - **Formulation** : on utilise une phrase verbale, avec une majuscule sur le premier mot et un point final. - **Message** : on précise toutes les informations à connaître pour réaliser l’action ou les actions proposées. - **Longueur** : dans l’idéal, on ne dépasse pas 4 lignes en version mobile. Certaines modales, notamment d’information, nécessitent des contenus plus longs. Dans ce cas, on va toujours de l’essentiel vers le plus spécifique et on privilégie des listes à puces pour exprimer des idées complexes. ![](/assets/30afbcf4-8089-4dbb-ad75-06ea438b58e6) **Bouton** - **Formulation** : on utilise la forme + . - **Message** : on indique clairement l’action ou les actions possibles, tout en incitant l’utilisateur à cliquer sur l’action principale. - **Action** : on peut intégrer une action principale (bouton primary) ou 2 actions, dont 1 principale (bouton primary) et 1 secondaire (bouton tertiary). Dans le cas d’une modale sans action à réaliser, on conserve un bouton primary avec le label “Fermer”. - **Longueur** : dans l’idéal, on ne dépasse pas 25 caractères, espaces compris. ![](/assets/564d8328-0eff-41ce-9c3d-1f375f184201) ![](/assets/2cf1ae31-094b-46e9-9374-4d2ccc2baf2a) **Autres éléments** Si besoin, on peut intégrer des éléments comme une icône, un visuel, des boutons radio, des mentions légales... Ces éléments doivent être intégrés avec parcimonie, pour ne pas surcharger le contenu de la modale. ![](/assets/d15442fa-badb-4b4f-92a4-fcf515104bf3) ![](/assets/2366185f-8f49-4a05-8d1c-f0049633157a) ## Ton de voix **Les différents types de modale** L’état émotionnel de l’utilisateur varie selon le type de modale. On se demande donc systématiquement quelles pourraient être ses émotions pour y répondre avec le ton approprié. ![](/assets/ccf53230-d300-46ba-ad0a-16fd7fce9181) ## Variables de microcopie **Formulation standard** ![](/assets/c166583e-932d-4587-9444-6379697be907) **Accessibilité :** ## Comment l'utiliser - le bouton qui déclenche l'ouverture de la modale a un intitulé explicite, soit visible, soit caché avec la classe CSS sr-only ## Comment tester - Utiliser la touche TAB pour arriver sur le bouton qui déclenche l'ouverture de la modale - le focus est positionné sur le bouton croix de fermeture - l'utilisation de la touche TAB positionne le focus sur le prochain élément interactif à l'intérieur de la modale dans l'ordre du code source - l'utilisation répétée de la touche TAB ne quitte jamais la modale. Le focus boucle à l'intérieur - lorsque le dernier élément reçoit le focus, l'utilisation de la touche TAB positionne le focus sur le bouton croix de fermeture - et inversement en utilisant la touche Shift TAB - lorsque le bouton de fermeture est activé, le focus est positionné sur le bouton qui a déclenché l'ouverture de la modale **Règles d'usage :** - Doit être facile à fermer, toujours laisser un bouton et une croix pour fermer la modal - Ne pas superposer ou empiler les modals **Exemple d'utilisation :** ```jsx Click to open modal } active={false} onClose={() => null} >

Modal content

* Champs obligatoires

Comment souhaitez-vous être contacté ? *

Email Téléphone Courrier

``` **Règles d'usage :** - Sélection multiple - Radio buttons et checkbox - Label des radio buttons - Utilisation des radio buttons - Label des radio tiles **Exemple d'utilisation :** ```jsx ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | checked | boolean | true, false | Checked radio | | disabled | boolean | true, false | Disabled | | readonly | boolean | true, false | - | | label | string | - | Label for radio | | onChange | RadioChangeEventHandler | - | * | | name | string | - | Name for radio | | value | string | - | Value for radio | | required | boolean | true, false | Required radio | | accessibilityLabel | string | - | - | | id | string | - | Id for button, by default id is generate | | className | string | - | Additional css classes (ONLY FOR WEB) | | testId | string | - | - | ### Range Le composant range permet aux utilisateurs d'effectuer des sélections à partir d'une plage de valeurs. **Utilisation et rôle :** Le composant Range permet aux utilisateurs de sélectionner une valeur à partir d'une plage de valeurs, souvent de manière intuitive et visuelle. ##### **Quand utiliser :** - **Sélection de valeurs continues :** Parfait pour des opérations comme le réglage de la température ou de la luminosité. - **Intuitivité :** Idéal pour les interactions qui se traduisent bien du monde physique aux écrans tactiles. - **Gain de place :** Permet de sélectionner des valeurs sans occuper beaucoup d'espace à l'écran. ##### **Quand ne pas utiliser** - **Valeurs discrètes ou spécifiques :** Pour des sélections précises où les utilisateurs doivent choisir des valeurs spécifiques, préférez un champ de saisie ou une liste déroulante. - **Compréhension difficile :** Si les utilisateurs ont besoin de précision numérique exacte, un autre type de champ pourrait être plus adapté. **Exemple d'utilisation :** ```jsx ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | min | number | - | min length | | max | number | - | max length | | label | string | - | label of range | | value | number | - | only for slider | | valueMin | number | - | value min cursor | | valueMax | number | - | value max cursor | | unit | string | - | display unit of values | | onChangeMin | InputChangeEventHandlerWeb | - | on change min cursor | | onChangeMax | InputChangeEventHandlerWeb | - | on change max cursor | | name | string | - | input name | | gap | number | - | space max between min and max cursor | | onChange | InputChangeEventHandlerNative | - | on change cursor (works with simple prop) | | simple | boolean | true, false | display one cursor | | accessibilityLabel | string | - | - | | testId | string | - | - | | id | string | - | id for Range | | className | string | - | Additional CSS Classes | ### Rows Gerér l'alignement horizontal entre les éléments de deux colonnes **Utilisation et rôle :** **Comportement de base** Le composant `row` fonctionne comme les colonnes, mais il réparti ses enfants dans le sens vertical : ![](/assets/e1225250-c601-4b83-b9f3-5778237615b0) **Alignement horizontal** Son utilisation avec la facette `is-narrow` permet d'aligner des éléments identiques horizontalement : ![](/assets/3f5dbd23-ac8a-4697-9537-7367147952a8) **Exemple d'utilisation :** ```jsx 1 2 3 4 5 6 ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | Rows children | | gap | GapSize | [GapSizeValues](#enum_GapSizeValues) | - | | id | string | - | - | | className | string | - | Additional CSS Classes | | testId | string | - | - | ### Section Le composant Section est une unité de structure de base utilisée pour diviser les pages en segments logiques. Il encapsule le contenu et permet de structurer la mise en page de manière cohérente et modulable. **Utilisation et rôle :** Le composant Section est utilisé pour diviser le contenu en segments distincts, permettant une meilleure organisation et lisibilité. L'élément de base d'une page Trilogy est l'élément HTML section, utilisé ainsi : `

`. Une `section` gère les marges principales de la page et prend toute la largeur disponible. ![](/assets/903cb599-c97e-4cca-8609-198c29a8a717) **Quand utiliser :** - **Organisation du contenu :** Segmenter des parties du contenu afin de le rendre plus structuré. - **Amélioration de la lisibilité :** Faciliter la lecture en divisant les informations complexes en sections plus petites et digestes. - **Hiérarchisation visuelle :** Mettre en évidence différentes parties du contenu pour guider l'utilisateur. **Quand ne pas utiliser :** - **Fragmentation excessive du contenu :** Ne divisez pas trop le contenu au risque de le rendre difficile à suivre. Utilisez des paragraphes ou d'autres éléments de structuration. - **Contenu très court :** Pour des informations très brèves, une section entière pourrait être superflue ; privilégiez des paragraphes ou des listes pour ce type de contenu. **Exemple d'utilisation :** ```jsx

Première section

Seconde section

Troisième section

``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | skeleton | boolean | true, false | Skeleton before loaded | | style | Styles | - | - | | backgroundColor | TrilogyColor | [TrilogyColorValues](#enum_TrilogyColorValues) | Section Background Color | | backgroundSrc | string | - | Source of background Image | | inverted | boolean | true, false | Inverted Section Color | | children | ReactElementsWithNoText | - | * | | id | string | - | - | | className | string | - | Additional CSS Classes | | testId | string | - | - | ### Segmented-Control Un segmented control est un ensemble linéaire de deux segments ou plus, chacun fonctionnant comme un bouton. **Utilisation et rôle :** Un Segmented Control est un groupe de boutons où une seule option peut être sélectionnée à la fois. Il est souvent utilisé pour offrir un choix parmi un nombre d'options liées. - **Navigation :** Pour basculer entre différentes vues ou sections de contenu sans recharger la page. - **Filtres de contenu :** Pour permettre aux utilisateurs de filtrer des données ou des listes d'éléments. - **Options exclusives :** Pour présenter des options exclusives où une seule peut être sélectionnée à la fois. **Quand utiliser** - **Vente :** - Utiliser pour basculer entre différentes catégories de produits (ex. : "Nouveautés", "Populaires", "En solde"). - Offrir des options de tri comme "Prix croissant", "Prix décroissant", "Mieux notés".` - Permettre de basculer entre des vues de liste et des vues de grille des produits. - **Assistance :** - Utiliser pour naviguer entre différentes sections d'aide comme "FAQ", "Guides", "Contact". - Faciliter la sélection entre différents types de requêtes d'assistance (ex. : "Technique", "Facturation", "Général"). - Offrir des options pour choisir entre différents modes de contact (ex. : "Chat en direct", "Email", "Téléphone"). - **Application/Espace client :** - Utiliser pour basculer entre différentes sections de gestion de compte comme "Informations personnelles", "Abonnements", "Historique de commande". - Permettre de filtrer les notifications par types, par exemple "Toutes", "Important", "Messages". - Tableaux de bord : Offrir des vues différentes sur les tableaux de bord, comme "Aperçu", "Détails", "Statistiques" **Quand ne pas utiliser** - **Actions critiques :** Ne pas utiliser pour des actions critiques qui nécessitent une confirmation supplémentaire. - **Contenu complexe :** Si le contenu associé à chaque segment est complexe ou très différent, envisager une autre méthode de navigation. **Règles d'usage :** - Un seule segment peut être sélectionner à la fois - Les segments ne peuvent pas contenir qu’un icône ### Select Le sélecteur donne aux utilisateurs la possibilité d'effectuer une sélection unique ou des sélections multiples parmi un certain nombre d'options. **Utilisation et rôle :** Le composant Select permet aux utilisateurs de choisir parmi une liste d'options prédéfinies au sein d'un formulaire, facilitant ainsi la soumission de données. ##### **Quand utiliser :** - **Liste déroulante :** Lorsque les utilisateurs doivent choisir une option parmi plusieurs possibilités. - **Formulaires :** Pour simplifier la sélection et la soumission de données dans les formulaires. ##### **Quand ne pas utiliser :** - **Entrées textuelles libres ou réponses longues :** Utilisez un champ de texte à la place. - **Nombre d'options très limité :** Préférez les boutons radio pour une sélection plus rapide. **Exemple d'utilisation :** ```jsx Select simple avec icon Select avec selection multiple ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | iconName | IconName | [IconNameValues](#enum_IconNameValues) | icon for left of selector | ### Stepper Un stepper affiche la progression d’un parcours en le décomposant en plusieurs étapes logiques et numérotées. **Utilisation et rôle :** Le Stepper permet de segmenter un processus en plusieurs étapes. Chaque étape est représentée par un indicateur distinct, souvent numéroté ou nommé, et permet aux utilisateurs de comprendre où ils se trouvent dans le processus, ce qu'ils ont déjà accompli, et ce qui leur reste à faire. - **Formulaires multi-étapes** : Pour diviser des formulaires longs et complexes en sections plus gérables. - **Processus d'inscription** : Pour guider les utilisateurs à travers les différentes étapes de création de compte. - **Guides interactifs** : Pour offrir des tutoriels pas-à-pas dans l'application d'espace client ou sur le site d'assistance ##### **Quand utiliser** - **Vente** : - Utiliser pour guider les utilisateurs à travers les étapes de sélection de produit, information d'expédition, paiement, et confirmation. - Lorsqu'un produit nécessite une personnalisation ou une configuration spécifique, un Stepper peut segmenter ce processus. - Simplifier le processus d'inscription en le divisant en étapes claires. - Etre transparent avec l’utilisateur sur le nombre d’étapes, le rassurer sur le fait que cela va être rapide - **Assistance** : - Guider les utilisateurs à travers une série d'étapes pour diagnostiquer et résoudre des problèmes techniques - Faciliter la soumission de tickets d'assistance en divisant le formulaire en sections plus faciles à gérer. - Offrir des tutoriels pas-à-pas pour aider les utilisateurs à résoudre des problèmes courants. - **Application/Espace client** : - Gestion des abonnements : Guider les utilisateurs à travers les étapes de modification, renouvellement ou annulation d'abonnements. - Configuration initiale : Aider les nouveaux utilisateurs à configurer leur compte et à se familiariser avec les fonctionnalités principales. - Mise à jour de profil : Diviser le processus de mise à jour des informations de compte en étapes gérables. ##### **Quand ne pas utiliser** - **Actions simples** : Pour des tâches qui peuvent être accomplies en une ou deux étapes, un formulaire simple ou un bouton d'action est préférable. - **Navigation générale** : Ne pas utiliser le Stepper comme outil de navigation principale ou secondaire - **Contenu non structuré** : Lorsque les informations ne suivent pas une séquence logique ou ne nécessitent pas de progression étape par étape. **Content Design :** ## Contexte Le Stepper doit guider les utilisatrices et utilisateurs étape par étape dans leurs parcours. Il les rassure sur leur progression et leur donne une vision du chemin à parcourir. Le Stepper nécessite des libellés d'étapes clairs qui indiquent en un coup d’œil ce qu’il y a à accomplir à chaque étape. ## Construction Un stepper se compose de plusieurs étapes indiquées par un titre et un compteur d’étapes, reliées par une barre de progression. **Titre** - **Formulation** : on utilise les mêmes formulations à chaque étape, de préférence des noms ou groupes nominaux plutôt que des phrases verbales, avec une majuscule sur le premier mot et sans point final. - **Message** : on fait tout de suite comprendre l’objectif précis de l’étape, sans ambiguïté. - **Longueur** : on ne dépasse pas 1 ligne en version mobile, 25 caractères espaces compris dans l’idéal. ![](/assets/8d7f100f-9632-4316-9207-b4ade69b32d8) ![](/assets/a14fb326-0131-4005-87a0-0918a0073bb9) ![](/assets/257cf17d-d0b7-4afe-a3ee-8647f8fe68d9) **Règles d'usage :** - Le step actif doit toujours avoir un label - Toujours permettre à l’utilisateur de revenir en arrière si nécessaire **Exemple d'utilisation :** ```jsx ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | * - -------------------------- WEB PROPERTIES ------------------------------- | | id | string | - | - | | className | string | - | - | | testId | string | - | - | ### Sticker Le sticker est utilisé pour faire émerger une information. **Utilisation et rôle :** Les stickers sont utilisés pour attirer l’attention de l’utilisateur sur une information liée à un produit ou une offre. ##### **Quand l'utiliser** - **Mise en avant d’une information** : pour mettre en avant des informations essentielles comme des réductions, des offres limitées, des nouveautés, etc. ##### **Quand ne pas l'utiliser** - **Eléments interactifs** : ne pas utiliser pour réaliser des actions ou rediriger les utilisateurs. - **Informations non spécifiques** : ne pas utiliser pour des informations qui ne nécessitent pas une attention spécifique ou immédiate. - **Sur-utilisation** : ne pas utiliser trop de stickers sur une seule page pour éviter de surcharger visuellement la lecture de l’utilisateur et diluer l'impact. #### **Les différents types de sticker** - **Sticker conversion (ACCENT)** : met en avant une information de conversion sur une page avec un objectif business (ex. : “Bon plan”, “1 mois offert”). Il peut y avoir plusieurs stickers de conversion sur la même page avec des bons plans différents. - **Sticker information (INFO)** : met en avant toutes les informations liées à l’offre B.iG (ex. : “BiG économies : -7€/mois déjà déduits”). - **Sticker defaut (MAIN)** : met en avant tous types d’informations, hors conversions (ex. : “Nouveau”, “livraison offerte”). - **Sticker reconditionné (ECO)** : met en avant une information sur un produit ou une offre reconditionné (ex. : Reconditionné) #### **Stickers ou Tag ?** - **Le Sticker** est utilisé pour mettre en avant une information importante pour l’utilisateur comme des réductions, des bons plans ou des nouveautés (ex. : “Bon plan”, “-XX€ de remise”, “1 mois offert”). - **Le Tag** permet d’organiser et catégoriser les éléments et d’indiquer l’état ou le statut d’un élément (ex. : “Connecté”, “Non connecté”, “Disponible”). **Content Design :** ## Contexte Les stickers sont utilisés pour attirer l’attention de l’utilisateur sur une information liée à un produit ou une offre. C’est pourquoi l’information qu’il porte doit être rédigée de façon extrêmement concise et efficace. ## Construction Un sticker contient un label très court et porte une couleur selon l’information : conversion, BiG, information hors conversion ou reconditionné. On peut également y intégrer une icône, tant qu’elle a une signification pertinente avec l’information donnée. **Label** - **Formulation** : on ponctue chaque label avec une majuscule sur le premier mot, le reste en minuscule, et sans point final (sauf !, ?, ...). On formule toujours des phrases nominales (courtes, directes et sans verbe conjugué), et non des phrases verbales (plus longues, avec un verbe conjugué). - **Formulation avec chiffres** : on précise toujours les remises et économies avec la forme -X€, -XX,XX€/mois, -X% pour signifier clairement aux utilisatrices et utilisateurs qu’il s’agit d’une somme déduite. - **Message** : on fait tout de suite comprendre l’information proposée. - **Longueur** : on ne dépasse pas une ligne en version mobile, 25 caractères espaces compris au maximum. ![](/assets/d69bf061-8a03-4764-8d81-89b6e6265b41) ![](/assets/7eb5b3d3-9974-46a4-be38-90494fbf02e6) ![](/assets/8655ba4f-aa9d-4319-89a9-d754ebbf2b34) ![](/assets/3aeff240-d117-47a0-b638-e5b177aeb163) **Règles d'usage :** - Accessiblité - Césure - Lien dans un sticker - Longueur - Stickers avec icônes **Exemple d'utilisation :** ```jsx ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | iconName | IconName | [IconNameValues](#enum_IconNameValues) | - | ### Switch Un switch permet aux utilisateurs de choisir deux états mutuellement exclusifs comme ON/OFF. **Utilisation et rôle :** Le Switch permet aux utilisateurs de choisir entre deux options. Il est particulièrement utile pour activer ou désactiver des fonctionnalités ou des paramètres de manière rapide et intuitive. ##### **Quand l'utiliser** - **Activation / Désactivation** : pour permettre aux utilisateurs d'activer ou désactiver des paramètres, fonctionnalités ou des options (ex. : notifications, mode sombre, BiG). - **Paramètres instantanés** : pour des changements qui prennent un effet immédiatement sans nécessiter de confirmation supplémentaire. - **Préférences personnelles** : pour permettre aux utilisateurs de personnaliser leur expérience et leurs préférences (ex. : activer des recommandations personnalisées). ##### **Quand ne pas l'utiliser** - **Sélections avec validation** : lorsque l’utilisateur doit sélectionner un ou plusieurs choix qui doivent être validés. Dans ce cas, utiliser des checkbox ou des boutons radio. - **Action de filtrage** : pour filtrer des résultats. Dans ce cas, utiliser des checkbox ou des chips. - **Actions et conséquences** : pour des actions qui nécessitent une confirmation ou des conséquences majeures (ex. : suppression de compte). Dans ce cas, utiliser le composant bouton. #### **Switch ou checkbox** ? - **Un Switch** permet de réaliser une action immédiate ou d’activer ou désactiver un mode ou une option (ex. : forfait bloqué, préférences d’utilisation). - **Les Checkbox**permettent à l’utilisateur de sélectionner plusieurs choix qui doivent être validés (ex. : Formulaire), sauf dans le cas de filtrage de recherche peuvent s’actualiser directement. **Content Design :** ## Contexte Un switch peut être accompagné d’un texte principal et d’un texte secondaire pour faciliter la compréhension de l’action proposée. Ces contenus associés doivent être placés à proximité pour expliciter la fonction et garantir l’accessibilité. **Texte principal (titre)** - **Formulation** : on ponctue chaque titre avec une majuscule sur le premier mot et sans point final (sauf !, ?, ...), toujours avec une forme affirmative : actif = oui / inactif = non. - **Message** : on fait tout de suite comprendre à l’utilisateur l’information ou la conséquence de l’action proposée. - **A ne pas faire** : les propositions contradictoires ou les questions auxquelles les utilisateurs ne peuvent pas répondre. - **Longueur** : dans l’idéal, on ne dépasse 1 ligne en version mobile. ![](/assets/83a81008-3965-49c8-b416-3372abbacf36) ![](/assets/83d0c031-9614-4ab9-8fd5-f95558914906) **Texte secondaire (description)** On accompagne le titre d’une description lorsque celui-ci nécessite un ou des éléments complémentaires pour guider au mieux l’utilisateur dans l’action requise. - **Formulation** : on ponctue chaque description avec une majuscule sur le premier mot et un point final. - **Message** : on précise toutes les informations nécessaires à connaître pour réaliser l’action proposée. Cette description doit apporter un message complémentaire au titre : description, proposition, solution... - **A ne pas faire** : les propositions redondantes ou inutiles pour la compréhension de l’utilisateur. - **Longueur** : dans l’idéal, on ne dépasse 2 lignes en version mobile. ![](/assets/cc87d801-17ce-42b2-ba5f-6549674cba0e) ![](/assets/50a3bc04-b3dd-4788-b66a-d2d438f18116) - **Exception** : on peut mettre une description unique dans certains cas comme les mentions légales, lorsque le texte nécessite davantage d’explications. ![](/assets/2ad82eb8-801a-46c5-ad6d-db9971f6f640) **Règles d'usage :** - Label unique - Label - Alignement des labels **Exemple d'utilisation :** ```jsx ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | checked | boolean | true, false | Checked switch | | onChange | SwitchEventHandler | - | onChange event | | onClick | SwitchEventHandler | - | onClick event | | label | string | - | Switch label | | disabled | boolean | true, false | Switch disabled | | readonly | boolean | true, false | Switch readonly | | value | string | - | Switch value | | name | string | - | Switch name | | reversed | boolean | true, false | change switch position | | fullWidth | boolean | true, false | - | | status | StatusState | "ERROR", "INFO", "SUCCESS", "WARNING" | Status Variant (INFO|SUCCESS|WARNING|ERROR) | | id | string | - | Is auto generate by default | | className | string | - | Additional CSS Classes | | testId | string | - | - | ### Table Les tableaux permettent d'afficher des données tabulaires. Ils sont classiques par défaut et peuvent être déclinés pour comparer des éléments (forfaits, téléphones, etc.) **Utilisation et rôle :** Les tables organisent des informations complexes de manière structurée et digeste, rendant les données claires et accessibles. Une table bien conçue améliore la clarté et l'expérience utilisateur en maximisant le potentiel des données. **Quand utiliser :** - **En-tête et description clairs :** Pour que les utilisateurs comprennent facilement ce qu'ils consultent. - **Typographie lisible et espacement adéquat :** Facilite la lecture et la compréhension rapide du contenu. **Quand ne pas utiliser :** - **Alignement central pour le contenu :** Réduit la lisibilité et la détection des irrégularités, rendant la comparaison des lignes plus difficile. - **Autres formats visuels :** Si les données peuvent être mieux comprises via des graphiques ou des diagrammes, privilégiez ces derniers. **Exemple d'utilisation :** ```jsx Title 1 Title 2 Title 3 Donnée 1 Donnée 2 Donnée 3 Donnée 4 Donnée 5 Donnée 6

``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | circular | false | - | to have circular timepicker | | label | string | - | * | | sample | string | - | (below label) | | required | boolean | true, false | Required | | help | string | - | * | | value | string | - | Current time value in "HH:MM" format (e.g., "14:30", "23:59") | | onChange | ((time: string) => void) | - | Callback called when time changes, receives new "HH:MM" value | | disabled | boolean | true, false | Disabled state of the component (default: false) | | step | number | - | Step for minutes (e.g., 5 for 5-minute increments, default: 5) | | id | string | - | - | | className | string | - | - | | testId | string | - | - | ### Title Les titres nous permettent de structurer les sections de notre contenu et nous avons utilisé différentes tailles pour créer une hiérarchie dans ces sections. **Utilisation et rôle :** Le titre structure le contenu et attire l'attention sur les éléments clés, améliorant ainsi la navigation et la compréhension pour l'utilisateur. **Quand utiliser :** - **Hiérarchiser les informations :** Organise le contenu de manière logique et compréhensible. - **Améliorer la lisibilité :** Facilite la lecture en segmentant le texte en sections digestes. - **Guider l'utilisateur :** Dirige efficacement l'attention de l'utilisateur vers les points importants. **Quand ne pas utiliser :** - **Textes ou contenus secondaires :** Qui ne nécessitent pas une attention particulière de la part de l'utilisateur. - **Éléments interactifs :** Où un bouton ou un lien serait plus approprié afin de déclencher une action. **Content Design :** ## Contexte Les titres créent la conversation à travers des informations ou indications sur une marche à suivre. Voilà pourquoi ils doivent attirer le regard et exprimer clairement les objectifs. ## Construction Quelque soit le niveau de titre, il doit toujours répondre aux règles suivantes : - On ponctue chaque titre avec **une majuscule sur le premier mot et sans point final** (sauf !, ?, ...) - **On évite de dépasser 2 lignes en version mobile** : on fait au plus court en supprimant les mots inutiles - **On donne rapidement l’information et les objectifs** de la page ou du parcours en diffusant un seul message, pas plus - **On évite les titres génériques** qui ne donnent aucune information - **On évite les formules impératives** : si possible, on privilégie la formulation interrogative ou l’infinitif - **On privilégie des formulations cohérentes** sur les titres d’une même page ou d’un même parcours - **On peut utiliser “Mon/Ma/Mes”** lorsqu’on parle d’une offre ou d’un équipement que l’utilisatrice ou l’utilisateur possède déjà ou qu’on décrit une action qui lui est propre ## Typographie Les titres répondent à des typographies spécifiques : Titre 1/2 en Speak et Titre 3/4/5/6 en Read. Ces typographies dépendent : - Du support utilisé : web ou app - Du contexte de la page : titres de page, de section, autres titres (étapes, box, cards, steppers...) #### Les titres de page **Web** - **On utilise le Titre 1** en Speak pour les titres de page web - **On met 1 lettre penchée** sur ces titres, **2 lettres penchées de suite** sur les mots qui contiennent 2 lettres identiques de suite. Les lettres penchées autorisées : **b, d, g, o, p, q** - Ces titres doivent tout de suite faire comprendre **l’objectif de la page ou du parcours** ![](/assets/37e6f348-35b9-4815-82d9-a6650394378d) ![](/assets/8ab98dbe-1d3b-4638-b1aa-d7d2d9452561) **App** - **On utilise le Titre 2** en Speak pour les titres de page de l’app - **On met 1 lettre penchée** sur ces titres, **2 lettres penchées de suite** sur les mots qui contiennent 2 lettres identiques de suite. Les lettres penchées autorisées : **b, d, g, o, p, q.** - Ces titres doivent tout de suite faire comprendre **l’objectif de la page ou du parcours** ![](/assets/b3729fbe-b9ed-468d-bc7c-7bbbb27cef47) ![](/assets/b159044c-da26-4f18-a5e9-f5048ba08eac) #### Les titres de section **Web** - **On utilise le Titre 2** en Speak pour les titres de section web, excepté pour les titres annonçant des étapes dans la page ou le parcours - **On met 1 lettre penchée** sur ces titres, **2 lettres penchées de suite** sur les mots qui contiennent 2 lettres identiques de suite. Les lettres penchées autorisées : **b, d, g, o, p, q** ![](/assets/c623664a-45d8-4e06-87ee-1b46344c6511) **App** - **On utilise le Titre 3** pour les titres de section de l’app ![](/assets/deb89f4a-2fe7-4c76-a997-13c65803372b) #### Les autres titres : étapes, box, cards, steppers... **Web** - **On utilise les Titres 3 à 6** en Read pour ces titres web généralement intégrés à des étapes sur une page, un bloc, une box, une card, un stepper... - Dans tous les cas, **on ajuste toujours la taille des Titres selon leur importance** dans la hiérarchie d’informations de la page ou du parcours - **On utilise la typographie recommandée pour certains composants**, comme les alertes (Body 1 Bold), spécifiée dans [les composants](https://design.bouyguestelecom.fr/components) ![](/assets/e250f980-9d4d-4dad-a041-27cedf9b0a4e) ![](/assets/68f277ee-9823-415b-9a23-dc3dd3617f64) ![](/assets/d6eb369d-11b6-41ad-8d72-c48d3e922c47) **App** - **On utilise les Titres 4 à 6** en Read pour ces titres de l'app généralement intégrés à des étapes sur une page, un bloc, une box, une card, un stepper... - Dans tous les cas, **on ajuste toujours la taille des Titres selon leur importance** dans la hiérarchie d’informations de la page ou du parcours - **On utilise la typographie recommandée pour certains composants**, comme les alertes (Body 1 Bold), spécifiée dans [les composants](https://design.bouyguestelecom.fr/components) ![](/assets/a134fe08-85cf-4045-8929-8f8c5892fa31) ![](/assets/ddc4d68e-bc6d-4642-a209-46b1d817a089) **Accessibilité :** **Comment l'utiliser :** - Un titre introduit une section - Un titre est pertinent, il permet de comprendre le contenu de la section - Un titre a comme markup un "h1", "h2", "h3", h4", "h5", "h6" uniquement - Sur une page web, la hiérarchie des titres est cohérente : - éviter les ruptures comme passer d'un titre de niveau 2 à un titre de niveau 4 - le titre principal de la page est un titre de niveau 1 - les niveaux sont utilisés correctement : un titre de niveau 3 est bien dans la section qui a le titre de niveau 2 précédent **Quand ne pas l'utiliser :** - Ne pas utiliser les titres à des fins de présentation, pour grossir du texte par exemple - Ne pas générer des titres vides - Ne pas utiliser les markup "p", "span", "div" **Comment tester :** - utiliser l'extension navigateur "HeadingsMap ![](/assets/4b0b31fd-34e0-44a1-aa27-f6f2884a2b93) **Exemple d'utilisation :** ```jsx Titre de niveau 1 Ceci est un sous-titre Titre de niveau 2 Titre de niveau 3 Titre de niveau 4 Titre de niveau 5 Titre de niveau 6 ``` **Props :** | Name | Type | Values | Description | |------|------|----------|----------| | children | ReactNode | - | Title child | | level | TitleLevels | 1, 2, 3, 4, 5, 6 | Title size : 1-3 | | typo | string | - | Typos | | skeleton | boolean | true, false | Title Skeleton | | markup | TitleMarkup | "div", "h1", "h2", "h3", "h4", "h5", "h6", "p", "span" | h1 | h2 | h3 | h4 | h5 | h6 | p | span | div | | style | Styles | - | Additional styles | | subtitle | boolean | true, false | Subtitle below title | | overline | boolean | true, false | Overline above title | | inverted | boolean | true, false | Title white color | | accessibilityLabel | string | - | Accessibility label | | onClick | ClickEvent | - | onClick Event | | marginless | boolean | true, false | delete margin | | testId | string | - | Test Id for Test Integration | | id | string | - | - | | className | string | - | Additional css classes | # Enums {#enums} | Name | Values | |------|------| | IconNameValues {#enum_IconNameValues} | `"tri-4g", "tri-4g-4g-plus", "tri-4g-5g", "tri-4g-plus", "tri-5g", "tri-5g-4g-plus", "tri-accessories", "tri-accomodation", "tri-advisor", "tri-africa", "tri-air-travel", "tri-alert", "tri-anonymous-mode", "tri-applicationrdr", "tri-archiving", "tri-archiving-folder", "tri-arrow-backward", "tri-arrow-bottom", "tri-arrow-down", "tri-arrow-forward", "tri-arrow-high", "tri-arrow-left", "tri-arrow-right", "tri-arrow-up", "tri-artificial-intelligence", "tri-artist-chair", "tri-at", "tri-at-check", "tri-at-cogs-circle", "tri-at-exclamation-circle", "tri-at-globe", "tri-at-infinity-circle", "tri-at-infos", "tri-at-plus-circle", "tri-at-retirement", "tri-at-unavailable", "tri-at-unvailable", "tri-autoplan", "tri-babyphone", "tri-badges", "tri-bank", "tri-barcode-search", "tri-barriers-engagement", "tri-basketball", "tri-battery", "tri-bduo", "tri-beach", "tri-beautician", "tri-beety", "tri-bell", "tri-bell-ringing", "tri-big", "tri-birthday", "tri-bluetooth", "tri-box", "tri-box-4g", "tri-box-add", "tri-box-check", "tri-box-cogs", "tri-box-eole", "tri-box-eole-2", "tri-box-eole-tv", "tri-box-exclamation", "tri-box-faq", "tri-box-mobile", "tri-box-radio", "tri-box-redo", "tri-box-sim", "tri-box-smarttv", "tri-box-stethoscope", "tri-box-ultym", "tri-box-unavailable", "tri-box-unavalaible", "tri-box-wifi-6", "tri-box-wifi-6-plus-sim-cards", "tri-box-wifi-6-tv", "tri-btv", "tri-btv-illimite", "tri-btvplus", "tri-building", "tri-building-2", "tri-business-trip", "tri-caid-capri", "tri-calendar", "tri-calendar-check", "tri-calendar-clock-circle", "tri-calendar-cogs-circle", "tri-calendar-exclamation-circle", "tri-calendar-info-circle", "tri-calendar-plus", "tri-calendar-question-circle", "tri-calendar-unavailable", "tri-camera", "tri-car-auto", "tri-car-pooling", "tri-car-rent", "tri-career-committees", "tri-catering", "tri-certification", "tri-champagne-glasses", "tri-chat", "tri-chat-ia", "tri-chat-plus", "tri-check", "tri-check-circle", "tri-check-double", "tri-children-access", "tri-chimney-antenna", "tri-chip", "tri-christmas-sleigh", "tri-christmas-socks", "tri-christmas-tree", "tri-city-hall", "tri-clapperboard", "tri-clean-surface", "tri-click-collect-2h", "tri-clipboard-checklist", "tri-clock", "tri-closed", "tri-cloud", "tri-cloud-100go", "tri-cloud-20go", "tri-cloud-30go", "tri-cloud-50go", "tri-cloud-70go", "tri-cloud-check", "tri-cloud-cogs-circle", "tri-cloud-exclamation-circle", "tri-cloud-globe", "tri-cloud-infinity", "tri-cloud-plus-circle", "tri-cloud-save", "tri-co2-emission", "tri-co2-research", "tri-cogs", "tri-collaborative-library", "tri-comment", "tri-comment-earth", "tri-comment-exclamation-circle", "tri-comment-eye", "tri-comment-info", "tri-comment-question", "tri-comment-voicemail", "tri-comments-question-dots", "tri-community", "tri-concierge", "tri-confetti-cannon", "tri-connected-watch", "tri-contact", "tri-contactless-payment", "tri-cooptation", "tri-copy", "tri-corporate-card", "tri-countryside", "tri-courier", "tri-credit-card", "tri-credit-card-accepted", "tri-credit-card-lock", "tri-credit-cards", "tri-credit-cards-12", "tri-credit-cards-24", "tri-crippling-disease", "tri-cse", "tri-cursor", "tri-day-donations", "tri-degree", "tri-desktop", "tri-diagnostic", "tri-dislike", "tri-distance-1m", "tri-distance-2m", "tri-dont-touch", "tri-download", "tri-duplicata", "tri-e-dp", "tri-ear-slash", "tri-earth", "tri-eco-conception", "tri-ecommerce-promo-label", "tri-ecoresponsible-digital", "tri-electric-car", "tri-electrical-overload", "tri-electrical-plug", "tri-energy", "tri-energy-optimization", "tri-entertainment", "tri-envelope", "tri-envelope-attachment", "tri-envelope-plus-circle", "tri-environmental-footprint", "tri-equal", "tri-equal-circle", "tri-esim", "tri-esim-check", "tri-esim-download", "tri-esim-unavailable", "tri-ethernet", "tri-ethernet-female", "tri-ethernet-male", "tri-ethics", "tri-europe", "tri-euros", "tri-exclamation", "tri-exclamation-circle", "tri-exclamation-redo", "tri-expense-reports", "tri-eye", "tri-eye-slash", "tri-facebook", "tri-faceid", "tri-facemask-1", "tri-facemask-2", "tri-factory", "tri-file-attached", "tri-file-euro", "tri-file-euro-check-circle", "tri-file-euro-exclamation-circle", "tri-file-euro-info-circle", "tri-file-euro-lock-circle", "tri-file-euro-question-circle", "tri-file-list", "tri-file-management", "tri-file-new", "tri-file-pdf", "tri-film", "tri-fingerprint", "tri-firework", "tri-first-aid", "tri-first-aid-check", "tri-flash-sell", "tri-flexymoov-bicycle", "tri-flower-order", "tri-folder", "tri-football", "tri-france", "tri-france-marker", "tri-frown", "tri-gamepad", "tri-gamepad-online", "tri-games-console", "tri-gauge", "tri-gauge-cogs-circle", "tri-gauge-exclamation-circle", "tri-gauge-full", "tri-gauge-half", "tri-gauge-plus-circle", "tri-gauge-three-quarter", "tri-gdt", "tri-gesture-swipe", "tri-gift", "tri-good-practices", "tri-google", "tri-guitar", "tri-hairdresser", "tri-hand-mobile", "tri-hand-tools", "tri-handball", "tri-hands-helping", "tri-handsfree", "tri-headphones", "tri-health-insurance", "tri-heart", "tri-heart-hands", "tri-heart-message", "tri-help-disability", "tri-hierarchy", "tri-home", "tri-home-tools", "tri-hospital", "tri-hospital-building", "tri-hotspot", "tri-hourglass", "tri-hydro-gel", "tri-identity", "tri-immersive-content-glass", "tri-immersive-content-people", "tri-individual-card", "tri-infos", "tri-infos-circle", "tri-instagram", "tri-installer", "tri-interim", "tri-internal-fraud", "tri-iot", "tri-ip", "tri-laptop", "tri-laptop-tablet-mobile", "tri-lightbulb-on", "tri-like", "tri-lines-speed", "tri-link", "tri-link-copy", "tri-linkedin", "tri-lock", "tri-lock-check-circle", "tri-logo", "tri-mabb", "tri-mail", "tri-mailbox-marker", "tri-man", "tri-map-marker", "tri-marker", "tri-marker-solid", "tri-massage", "tri-mental-disability", "tri-mental-handicap", "tri-menu", "tri-micro", "tri-micro-sim", "tri-microphone", "tri-microwaves", "tri-minus", "tri-minus-circle", "tri-mobile", "tri-mobile-06-slash", "tri-mobile-07-slash", "tri-mobile-08-slash", "tri-mobile-ban", "tri-mobile-broken", "tri-mobile-cloud", "tri-mobile-comment", "tri-mobile-coverage", "tri-mobile-data-transfer", "tri-mobile-diagnostic", "tri-mobile-esim-download", "tri-mobile-esim-transfer", "tri-mobile-euro", "tri-mobile-eye", "tri-mobile-financing", "tri-mobile-fraudulent-use", "tri-mobile-globe", "tri-mobile-hand", "tri-mobile-heart-hands", "tri-mobile-infinity", "tri-mobile-like", "tri-mobile-lock", "tri-mobile-night-mode", "tri-mobile-oxidisation", "tri-mobile-percentage", "tri-mobile-plus-sim-cards", "tri-mobile-reconditionned", "tri-mobile-recovery", "tri-mobile-scan-qr", "tri-mobile-star", "tri-mobile-sync", "tri-mobile-tools", "tri-mobile-up-down", "tri-mobile-v-sign", "tri-mobile-youth", "tri-mobility", "tri-modem-3g", "tri-moon", "tri-motivation", "tri-mountain", "tri-mouse", "tri-moving-persons-goods", "tri-mug", "tri-musical-note", "tri-mypeopledoc", "tri-nano-sim", "tri-network", "tri-network-antenna", "tri-new-tabbed-page", "tri-newspapers", "tri-notebook-tarifs", "tri-notes", "tri-nuclear", "tri-office-supply", "tri-omnichannel", "tri-optician", "tri-organization-chart", "tri-pack-big", "tri-package-preparation", "tri-paper-plane", "tri-paperclip", "tri-parcel", "tri-parcel-relay", "tri-paste", "tri-pause", "tri-pay-gap", "tri-pencil", "tri-perplexity", "tri-person-door", "tri-personal-space", "tri-phishing", "tri-phone", "tri-phone-africa", "tri-phone-blocked", "tri-phone-burger", "tri-phone-euro", "tri-phone-europe", "tri-phone-globe", "tri-phone-incoming-call", "tri-phone-infinity", "tri-phone-missed", "tri-phone-notes", "tri-phone-outgoing-call", "tri-phone-plus-sim-card", "tri-phone-plus-sim-cards", "tri-phone-switzerland", "tri-phone-waiting-call", "tri-physical-disability", "tri-picto-faciliti", "tri-picto-handicapzero", "tri-picto-la-fibre", "tri-picto-mabb", "tri-picto-payment-americanexpress", "tri-picto-payment-cb", "tri-picto-payment-mastercard", "tri-picto-payment-paypal", "tri-picto-payment-visa", "tri-pinterest", "tri-play", "tri-play-beginning", "tri-plexi-exchange", "tri-plug-check", "tri-plus", "tri-plus-circle", "tri-portal-egp", "tri-portal-rh", "tri-power", "tri-presence", "tri-press-kit", "tri-printer", "tri-printing-stationery", "tri-priority-path", "tri-promo", "tri-promo-label-50", "tri-promo-label-60", "tri-promo-label-70", "tri-promo-label-80", "tri-promo-label-90", "tri-promotions", "tri-provident-health", "tri-qr-code", "tri-question", "tri-question-circle", "tri-recruitment-difficulties", "tri-recycle", "tri-redo-14-days", "tri-redo-30-days", "tri-redo-7-days", "tri-reduce-co2-emission", "tri-refresh", "tri-remote", "tri-repeater-alt", "tri-restricted-area", "tri-ringtone-welcomesound", "tri-rotation-360", "tri-rugby", "tri-rules", "tri-samples", "tri-samples-cogs-circle", "tri-samples-exclamation-mark-circle", "tri-samples-plus-circle", "tri-santa-claus", "tri-satellite-antenna", "tri-savings-account", "tri-scan", "tri-scan-qr", "tri-sd-card", "tri-search", "tri-security-health", "tri-seminars", "tri-server", "tri-share", "tri-shield", "tri-shield-at", "tri-shield-check", "tri-shield-exclamation", "tri-shield-private-life", "tri-shooting-star", "tri-shopping-bag", "tri-shopping-cart", "tri-sim-card", "tri-sim-card-big", "tri-sim-card-esim-transfer", "tri-sim-card-lock", "tri-sim-card-plus-mobile-big", "tri-sim-card-redo", "tri-sim-card-unlock", "tri-sim-cards", "tri-sliders", "tri-smart-change", "tri-smile", "tri-smile-neutral", "tri-smile-nocircled", "tri-smile-plus", "tri-snapchat", "tri-social-engagement", "tri-solidarity-day", "tri-sort", "tri-sport", "tri-sport-shirt", "tri-stadium", "tri-star", "tri-star-empty", "tri-star-filled", "tri-star-half", "tri-steering-wheel", "tri-stopwatch", "tri-stopwatch-click-collect", "tri-store", "tri-store-locator", "tri-submenu", "tri-succession-plan", "tri-sun", "tri-sun-euro", "tri-sunglasses", "tri-sustainable-development", "tri-sync", "tri-synchro", "tri-tablet", "tri-talentsoft", "tri-target", "tri-team-meal", "tri-teleconsultation", "tri-tennis", "tri-th", "tri-thunder-redo", "tri-tiktok", "tri-times", "tri-times-circle", "tri-tools", "tri-top-news", "tri-train", "tri-training-diploma", "tri-transport", "tri-trash", "tri-travel-agency", "tri-travel-policies", "tri-tree-antenna", "tri-trombinoscope", "tri-truck", "tri-truck-day-after", "tri-truck-gift", "tri-truck-speed", "tri-turkey", "tri-tv", "tri-tv-4k", "tri-tv-8k", "tri-tv-btv", "tri-tv-curved", "tri-tv-hd", "tri-tv-infinity", "tri-tv-multi", "tri-tv-multi-optical-fiber", "tri-tv-vod", "tri-twitch", "tri-twitter", "tri-unavailable", "tri-undo", "tri-unlimited", "tri-upload", "tri-usbkey", "tri-user", "tri-user-comment", "tri-user-headset", "tri-user-heart", "tri-user-key", "tri-user-legal", "tri-user-lightbulb", "tri-user-lock", "tri-user-shield", "tri-user-tie", "tri-user-unlock", "tri-users", "tri-users-family", "tri-users-shield-star", "tri-v-sign", "tri-vacations", "tri-victory", "tri-video-camera", "tri-visio", "tri-visor", "tri-visually-impaired", "tri-voice-assistance", "tri-voice-ia", "tri-voicemail", "tri-volume-off", "tri-volume-on", "tri-vtc-taxi-motorbike", "tri-wall", "tri-waste-reduction", "tri-watch", "tri-water", "tri-webcam", "tri-widget", "tri-wifi", "tri-wifi-5", "tri-wifi-6", "tri-wifi-6e", "tri-wifi-7", "tri-wifi-check", "tri-wifi-cogs", "tri-wifi-low", "tri-wifi-medium", "tri-wifi-share", "tri-wifi-unavailable", "tri-windmill", "tri-windows", "tri-woman", "tri-woman-man", "tri-work-stoppage", "tri-workelo", "tri-workplace-layout", "tri-workshop", "tri-x", "tri-youth", "tri-youtube", "tri-zoom-in", "tri-zoom-out"` | | ... 20 more ...Values {#enum_... 20 more ...Values} | `"tri-alert", "tri-arrow-down", "tri-arrow-high", "tri-arrow-left", "tri-arrow-right", "tri-arrow-up", "tri-bell", "tri-calendar", "tri-check", "tri-check-circle", "tri-clock", "tri-exclamation-circle", "tri-eye", "tri-eye-slash", "tri-file-attached", "tri-infos-circle", "tri-micro", "tri-paperclip", "tri-picto-faciliti", "tri-picto-handicapzero", "tri-picto-la-fibre", "tri-picto-payment-americanexpress", "tri-picto-payment-cb", "tri-picto-payment-mastercard", "tri-picto-payment-paypal", "tri-picto-payment-visa", "tri-search", "tri-times", "tri-trash"` | | TrilogyColorValues {#enum_TrilogyColorValues} | `"ACCENT", "ACCENT_FADE", "DISABLED", "DISABLED_FADE", "ERROR", "ERROR_FADE", "FONT", "FONT_PLACEHOLDER", "INFO", "INFO_FADE", "MAIN", "MAIN_FADE", "NEUTRAL", "NEUTRAL_FADE", "STROKE", "STROKE_FADE", "SUCCESS", "SUCCESS_FADE", "WARNING", "WARNING_FADE", "WHITE"` | | ElementTypeValues {#enum_ElementTypeValues} | `"a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "search", "section", "select", "set", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textPath", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"` | | GridSizeValues {#enum_GridSizeValues} | `1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9` | | GapSizeValues {#enum_GapSizeValues} | `0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9` | | ColumnsSizeValues {#enum_ColumnsSizeValues} | `1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9` | | FlexSizeValues {#enum_FlexSizeValues} | `1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9` | | ... 19 more ...Values {#enum_... 19 more ...Values} | `"tri-alert", "tri-arrow-down", "tri-arrow-high", "tri-arrow-left", "tri-arrow-right", "tri-arrow-up", "tri-bell", "tri-calendar", "tri-check", "tri-check-circle", "tri-clock", "tri-exclamation-circle", "tri-eye", "tri-eye-slash", "tri-file-attached", "tri-infos-circle", "tri-micro", "tri-paperclip", "tri-picto-faciliti", "tri-picto-handicapzero", "tri-picto-la-fibre", "tri-picto-payment-americanexpress", "tri-picto-payment-cb", "tri-picto-payment-mastercard", "tri-picto-payment-paypal", "tri-picto-payment-visa", "tri-search", "tri-times", "tri-trash"` | | stringValues {#enum_stringValues} | `0, 12, 16, 24, 32, 4, 40, 48, 56, 64, 8` | | string[]Values {#enum_string[]Values} | `"has-text-accent", "has-text-centered", "has-text-disabled", "has-text-error", "has-text-font-placeholder", "has-text-grey", "has-text-info", "has-text-justified", "has-text-left", "has-text-main", "has-text-main-fade", "has-text-right", "has-text-success", "has-text-warning", "has-text-weight-bold", "has-text-weight-medium", "has-text-weight-normal", "has-text-weight-semibold", "has-text-white", "is-capitalized", "is-italic", "is-lowercase", "is-uppercase"` | | ViewMarkupValues {#enum_ViewMarkupValues} | `"a", "button", "dd", "details", "dialog", "div", "dl", "dt", "input", "label", "li", "main", "ol", "p", "span", "summary", "ul"` | --- *Trilogy Design System - Documentation générée automatiquement*

Quel smartphone choisir ?

Warning

Quel smartphone choisir ?