# Système de design Pega Bolt ## Aperçu de l’interface du système de design Pega Bolt Essayez la pile de questions à ouverture unique, à côté d’un résumé éditorial illustré. ## Référence de design du système de design Pega Bolt Référence publique du Bolt Twig Pattern Lab. Les valeurs en rem varient avec la racine de la page ; ne considérez pas toutes les valeurs en rem comme des multiples fixes de 16 px. La mise en page de l’aperçu et l’illustration sont originales. ### Rôles des couleurs de marque | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --bolt-color-navy | #001f5f | Couleur principale de la marque. | | --bolt-color-navy-dark | #081c45 | Arrière-plan plus foncé. | | --bolt-color-navy-xlight | #d7e2f2 | Surface de marque pâle. | | --bolt-color-teal | #10a5ac | Accent de l’illustration ; ne convient pas automatiquement au texte courant accessible. | | --bolt-color-teal-xdark | #005154 | Variante sarcelle plus foncée. | | --bolt-color-orange | #f76923 | Accent chaud. | | --bolt-color-yellow | #ffc836 | Accent de mise en évidence. | ### Espacement sur deux axes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --bolt-spacing-x-xsmall | 0.3875rem | Utilisez l’échelle horizontale pour l’espacement sur l’axe x et l’échelle verticale pour celui sur l’axe y. | | --bolt-spacing-x-small | 0.775rem | Utilisez l’échelle horizontale pour l’espacement sur l’axe x et l’échelle verticale pour celui sur l’axe y. | | --bolt-spacing-x-medium | 1.55rem | Utilisez l’échelle horizontale pour l’espacement sur l’axe x et l’échelle verticale pour celui sur l’axe y. | | --bolt-spacing-x-large | 3.1rem | Utilisez l’échelle horizontale pour l’espacement sur l’axe x et l’échelle verticale pour celui sur l’axe y. | | --bolt-spacing-y-xsmall | 0.3375rem | Utilisez l’échelle horizontale pour l’espacement sur l’axe x et l’échelle verticale pour celui sur l’axe y. | | --bolt-spacing-y-small | 0.675rem | Utilisez l’échelle horizontale pour l’espacement sur l’axe x et l’échelle verticale pour celui sur l’axe y. | | --bolt-spacing-y-medium | 1.35rem | Utilisez l’échelle horizontale pour l’espacement sur l’axe x et l’échelle verticale pour celui sur l’axe y. | | --bolt-spacing-y-large | 2.7rem | Utilisez l’échelle horizontale pour l’espacement sur l’axe x et l’échelle verticale pour celui sur l’axe y. | ### Fondements typographiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --bolt-type-font-size-display | 3.75rem | Valeurs relatives à la racine fluide ; choisissez séparément les balises de titre sémantiques. | | --bolt-type-font-size-xxlarge | 2.35rem | Valeurs relatives à la racine fluide ; choisissez séparément les balises de titre sémantiques. | | --bolt-type-font-size-large | 1.4rem | Valeurs relatives à la racine fluide ; choisissez séparément les balises de titre sémantiques. | | --bolt-type-font-size-regular | 1rem | Valeurs relatives à la racine fluide ; choisissez séparément les balises de titre sémantiques. | | --bolt-type-font-size-small | 0.9rem | Valeurs relatives à la racine fluide ; choisissez séparément les balises de titre sémantiques. | | Font family | Open Sans | Familles de polices pour le corps de texte et les titres, définies dans les fondements publiés. | | Weights | 300 / 400 / 600 / 700 / 800 | De léger à extra-gras ; chargez les fichiers de polices correspondants. | ### Densité de la page | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Attribute | data-bolt-info-density | À définir uniquement sur l’élément html. | | comfortable | Larger font and spacing | Densité favorisant la lecture. | | regular | Default | Attribut facultatif. | | compact | Smaller font and spacing | Ne pas appliquer comme modificateur local d’une carte. | ### Composition de l’accordéon | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | single | false by default | true limite l’accordéon à un seul élément ouvert. | | spacing | medium | Le schéma propose none, xsmall, small, medium et large. | | icon_valign | center | top aligne l’icône sur les déclencheurs répartis sur plusieurs lignes. | | no_separator | false | Conservez les séparateurs pour marquer distinctement les questions. | | box_shadow | false | Ombre facultative autour de l’ensemble. | | item.open | false | Développer un élément initial. | | item.inactive | false | Élément réduit sans icône de bascule. | | item.trigger | Content | Rédigez une question pertinente à la place du libellé par défaut. | ## Guide complet du système de design Pega Bolt Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Pega Bolt : choisir l’implémentation Bolt ### Twig et React reposent sur des contrats différents > Ce guide porte sur l’implémentation publique de Bolt Twig / Pattern Lab. La page d’accueil actuelle de Bolt propose également BoltDS React pour les applications et les portails ; les deux implémentations ont une documentation et un versionnage distincts. L’aperçu est une interprétation indépendante de HTML, et non un environnement d’exécution Bolt. L’exemple est une ressource d’atelier qui comprend un résumé visible et des questions facultatives. Il se prête naturellement à l’implémentation Twig, axée sur le contenu : la hiérarchie éditoriale passe en premier, tandis que l’accordéon rend le contenu complémentaire accessible à la demande. Une application basée sur BoltDS React doit s’appuyer sur sa documentation plutôt que reprendre les chemins d’espace de noms Twig. Consultez la spécification associée ## Système de design Pega Bolt : structure bleu marine et accents vifs limités ### Une surface de lecture aux couleurs de la marque La palette publiée comprend le bleu marine #001f5f, le sarcelle #10a5ac et l’orange #f76923. L’exemple utilise le bleu marine pour un en-tête éditorial marqué et le sarcelle et l’orange comme accents de l’illustration. Ces teintes font partie des valeurs fondamentales ; cela ne garantit pas que toutes leurs combinaisons conviennent aux petits caractères. Les informations sur la ressource sont présentées sur des surfaces blanches et bleu marine pâle. Le schéma ramifié décoratif illustre un atelier consacré à la simplification du parcours de service ; il s’agit d’une création originale, et non d’un logo Pega ou d’un diagramme officiel. Consultez la spécification associée ## Système de design Pega Bolt : typographie fluide et largeur de lecture confortable ### Les valeurs en rem ne sont pas des équivalents fixes en pixels Bolt définit une taille standard de 1rem, une grande taille de 1.4rem, une taille xxlarge de 2.35rem et une taille d’affichage de 3.75rem. La taille de base varie selon la fenêtre et la densité : convertir tout le tableau en partant d’une base fixe de 16 px ne rendrait donc pas le comportement prévu. Les fondations désignent Open Sans pour le corps du texte et les titres. L’aperçu autonome utilise une police système de repli, car les fichiers de polices ne sont pas fournis. Il conserve un titre bien visible, un surtitre compact et des paragraphes agréables à lire, sans prétendre reproduire la typographie au pixel près. Consultez la spécification associée ## système de design Pega Bolt : les rythmes horizontal et vertical diffèrent ### Évitez de remplacer ces échelles par une échelle générique de huit points L’espacement horizontal moyen est de 1.55rem, tandis que l’espacement vertical moyen est de 1.35rem. La même distinction s’applique aux grandes valeurs : 3.1rem et 2.7rem. Utilisez l’échelle x entre des éléments voisins et l’échelle y entre des sections empilées. Sur grand écran, l’aperçu place l’introduction et la liste de questions dans deux colonnes distinctes, puis les empile à un point de rupture local de 700 px. Ce point de rupture relève de l’application, pas d’un jeton Bolt. Les longs libellés de question passent à la ligne à côté d’une icône sans que le texte soit réduit. Consultez la spécification associée ## système de design Pega Bolt : créez la liste de questions avec Twig ### Les éléments sont du contenu capturé, pas une propriété de données Chaque appel à accordion-item.twig fournit un déclencheur et du contenu. Un bloc Twig set capture le rendu des éléments ; le parent reçoit ce balisage via content. L’exemple complet ci-dessus ouvre la première question et utilise single: true. spacing contrôle les marges intérieures des éléments et icon_valign règle l’alignement de l’icône. Conservez les séparateurs lorsque les questions doivent être clairement délimitées. L’indicateur inactive ne désactive pas un contrôle de formulaire : il replie le contenu et masque l’icône. - Laissez les dates, les prérequis et les disponibilités en dehors des réponses repliées. - Formulez chaque question de façon concrète dans le déclencheur. - Évitez d’imbriquer un autre accordéon dans une réponse. Consultez la spécification associée ## système de design Pega Bolt : développer une réponse sans perdre sa position de lecture ### Une réponse à la fois L’interprétation HTML utilise de vrais boutons, aria-expanded, aria-controls et des panneaux de réponse masqués. Cliquer sur une question fermée l’ouvre et replie la réponse précédente ; cliquer sur la question ouverte la replie. Le focus reste sur le bouton déclencheur. Cela reproduit le comportement sélectionné d’ouverture d’un seul élément, tout en restant indépendant de Bolt JavaScript. L’aperçu ne prend pas en charge les liens profonds Bolt et ne prétend pas exécuter l’environnement d’exécution du composant natif. Dans Bolt natif, un élément indiqué par un lien profond prend le pas sur un élément initialement ouvert lorsque le mode single est activé. Consultez la spécification associée ## système de design Pega Bolt : la densité s’applique à toute la page ### Un paramètre racine, pas une propriété du composant Bolt reconnaît les valeurs comfortable, regular et compact via data-bolt-info-density sur l’élément html. La valeur par défaut est regular. Comfortable augmente la taille du texte et les espacements ; compact les réduit. N’appliquez pas l’attribut racine à un accordéon en vous attendant à obtenir une densité par composant prise en charge. Pour cette page de lecture, l’aperçu conserve une mise en page éditoriale confortable et fixe, au lieu de prétendre reproduire le moteur de densité natif. Consultez la spécification associée ## système de design Pega Bolt : intégrer le vrai composant dans son contexte ### Utilisez l’environnement documenté La commande d’installation est prévue pour une application Bolt Twig qui résout les espaces de noms des composants et compile les ressources requises. Le dépôt public fournit un environnement de développement complet avec yarn setup et yarn start. Il s’agit d’un environnement de référence, pas d’un déploiement de production en deux lignes. 1. Choisissez Twig pour l’implémentation du contenu rendu côté serveur et vérifiez sa version dans votre application. 2. Installez le package accordéon, enregistrez son espace de noms Twig existant dans la configuration de l’application Bolt et incluez les ressources compilées du projet. 3. Affichez l’exemple complet de questions, puis vérifiez dans le projet réel l’ouverture d’une seule réponse à la fois, le retour à la ligne des déclencheurs et la navigation au clavier. Consultez la spécification associée ## système de design Pega Bolt : exemples de composants ### Exemple interactif autonome complet Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation indépendante HTML/CSS des fondations Twig de Bolt et du comportement d’un accordéon à ouverture unique. Police système de repli ; aucun environnement d’exécution Bolt. ``` Service journey workshop
Field notes · Live workshop

Make your service journey simpler.

A practical session for turning a complex request into a clear next step.

Useful to know

Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.

``` Référence du code - La liste de questions à ouverture unique ne prend pas en charge les liens profonds Bolt. L’exemple Twig montre la méthode d’intégration native ; les informations essentielles de l’atelier restent visibles en dehors des réponses repliées. ### Questions d’atelier avec une seule réponse ouverte Affichez chaque question avec le modèle d’élément, capturez leur balisage et transmettez-le à l’accordéon parent. ``` {% set questions %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'What should I bring?', content: '

Bring a laptop and one workflow you want to simplify.

', open: true } only %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'Will there be a recording?', content: '

This workshop is live only. The written exercise is included.

' } only %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'Who is this session for?', content: '

Content teams and developers working on service journeys.

' } only %} {% endset %} {% include '@bolt-components-accordion/accordion.twig' with { content: questions, single: true, spacing: 'medium', icon_valign: 'top' } only %} ``` Référence du code - À utiliser dans une application Bolt Twig configurée. Le composant officiel ne fournit pas de point d’entrée pour une utilisation simple en HTML. - single limite le nombre d’éléments ouverts simultanément. Les liens profonds ont priorité sur un élément initialement ouvert. - Le schéma indique large comme l’option d’espacement la plus grande, bien qu’un exemple de la documentation utilise xlarge ; cet exemple respecte le schéma. ## Configuration de l’agent IA Pega Bolt du système de design ### Point de départ de l’implémentation La commande du package ajoute le composant, pas un site web autonome. Utilisez l’espace de noms Twig @bolt-components-accordion enregistré dans le projet et les ressources Bolt compilées. La configuration de développement du dépôt et l’intégration à l’application sont deux démarches distinctes ; aucune des deux ne correspond au BoltDS React API actuel. ``` # In an existing Bolt Twig application with its asset pipeline configured: npm install @bolt/components-accordion # To inspect the complete official development environment instead: git clone https://github.com/boltdesignsystem/bolt.git cd bolt yarn setup yarn start ``` ### Un prompt pour votre projet ``` Créez une page de ressources d’atelier Bolt Twig avec la palette bleu marine et turquoise vérifiée, une hiérarchie typographique fluide et des échelles d’espacement x/y distinctes. Gardez les informations essentielles visibles. Composez accordion-item.twig dans accordion.twig avec single true et un espacement moyen. N’utilisez pas les chemins Twig comme des API React. ``` ## système de design Pega Bolt : sources et périmètre Ce guide porte sur l’implémentation publique de Bolt Twig / Pattern Lab. La page d’accueil actuelle de Bolt propose également BoltDS React pour les applications et les portails ; les deux implémentations ont une documentation et un versionnage distincts. L’aperçu est une interprétation indépendante de HTML, et non un environnement d’exécution Bolt. - Implémentations Bolt Points d’entrée React et Twig. - Jetons de couleur de marque Palette Pega et variables CSS. - Espacement Échelles x et y indépendantes. - Typographie Tailles rem fluides et familles de polices. - Densité de l’information Paramètre de densité à l’échelle de la page. - Schéma de l’accordéon Propriétés Twig, modèle d’élément et contraintes d’interaction. ## système de design Pega Bolt : ressources associées ### Porsche système de design Découvrez Porsche Design System v4 à travers ses espacements fluides, ses jeux de couleurs CSS, la typographie Porsche Next et un configurateur à deux choix. La référence comprend les expressions réelles des tokens et un point d’entrée Vite complet utilisant les événements actuels du contrôle segmenté. ### Red Hat PatternFly Utilisez PatternFly pour créer un espace de travail opérationnel : références aux tokens sémantiques, cartes de service sélectionnables, sélection groupée à trois états, vérification du périmètre et code React natif complet. ### REI Cedar Créez un sélecteur de commandes Cedar concret avec des vignettes Vue natives, les véritables valeurs des tokens, une navigation complète au clavier et une composition de produits adaptative. - [Référence de mise en œuvre](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Source](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Source](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Source](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Source](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Source](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Consultez la spécification associée](https://boltdesignsystem.com/) - [Consultez la spécification associée](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Consultez la spécification associée](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Consultez la spécification associée](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Consultez la spécification associée](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Consultez la spécification associée](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Référence du code](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Implémentations Bolt Points d’entrée React et Twig.](https://boltdesignsystem.com/) - [Jetons de couleur de marque Palette Pega et variables CSS.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Espacement Échelles x et y indépendantes.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Typographie Tailles rem fluides et familles de polices.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Densité de l’information Paramètre de densité à l’échelle de la page.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Schéma de l’accordéon Propriétés Twig, modèle d’élément et contraintes d’interaction.](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)