Système de design Pega Bolt.

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

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Service journey workshop</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#001f5f;font:16px/1.6 system-ui,sans-serif}header{background:#001f5f;color:white;padding:38px 5%;display:grid;grid-template-columns:1.6fr 1fr;gap:30px}small{letter-spacing:.13em;font-size:11px;text-transform:uppercase}h1{font-size:clamp(32px,4vw,48px);line-height:1.12;max-width:650px;margin:16px 0}header p{max-width:550px;color:#d7e2f2}svg{width:100%;max-width:310px;align-self:center;justify-self:center}main{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:32px 5%}h2{font-size:23px;line-height:1.25}aside p{font-size:14px}dl{font-size:14px}dt{font-weight:700;margin-top:18px}dd{margin:2px 0}section{background:white;border-top:3px solid #10a5ac}article{border-bottom:1px solid #d7e2f2}button{font:600 16px/1.5 system-ui;width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:22px 24px;border:0;background:white;color:#001f5f;cursor:pointer}button:hover{background:#f0f5fc}button:focus-visible{outline:3px solid #005154;outline-offset:-4px}.answer{padding:0 24px 24px;color:#303744;font-size:15px}.answer p{margin:0}footer{padding:0 5% 22px;color:#555;font-size:11px}@media(max-width:700px){header{grid-template-columns:1fr;padding:28px 6%}svg{display:none}main{grid-template-columns:1fr;padding:24px 6%;gap:16px}button{padding:20px}dl{display:flex;flex-wrap:wrap;gap:24px}dt{margin:0}}</style><header><div><small>Field notes · Live workshop</small><h1>Make your service journey simpler.</h1><p>A practical session for turning a complex request into a clear next step.</p></div><svg viewBox="0 0 300 200" aria-hidden="true"><path d="M30 100H115M115 100V40H230M115 100V160H230" fill="none" stroke="#86cac6" stroke-width="4"/><circle cx="30" cy="100" r="22" fill="#f76923"/><rect x="95" y="80" width="40" height="40" rx="5" fill="#10a5ac"/><rect x="210" y="20" width="70" height="40" rx="6" fill="#d7e2f2"/><rect x="210" y="140" width="70" height="40" rx="6" fill="#ffc836"/></svg></header><main><aside><small>Before you join</small><h2>One journey.<br>A clearer direction.</h2><p>Map a request, find a point of friction, and rewrite the next step together.</p><dl><div><dt>Format</dt><dd>Live, small-group exercise</dd></div><div><dt>Length</dt><dd>45 minutes</dd></div><div><dt>Example only</dt><dd>No registration is collected</dd></div></dl></aside><div><h2>Useful to know</h2><section aria-label="Workshop questions"><article><h3 style="margin:0"><button aria-expanded="true" aria-controls="a1" id="q1">What should I bring?<span aria-hidden="true">−</span></button></h3><div class="answer" id="a1"><p>Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a2" id="q2">Will there be a recording?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a2" hidden><p>This workshop is live only. The written exercise is included so you can revisit the method with your team.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a3" id="q3">Who is this session for?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a3" hidden><p>Content teams and developers working on service journeys. No prior experience with the workshop format is required.</p></div></article></section></div></main><footer>Independent Bolt Twig interpretation · verified palette and spacing references · system font fallback</footer><script>const qs=[...document.querySelectorAll('button')];qs.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';qs.forEach(x=>{let yes=x===b&&open;x.setAttribute('aria-expanded',yes);x.lastElementChild.textContent=yes?'−':'+';document.getElementById(x.getAttribute('aria-controls')).hidden=!yes})});</script></html>

{% set questions %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'What should I bring?',
    content: '<p>Bring a laptop and one workflow you want to simplify.</p>',
    open: true
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Will there be a recording?',
    content: '<p>This workshop is live only. The written exercise is included.</p>'
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Who is this session for?',
    content: '<p>Content teams and developers working on service journeys.</p>'
  } only %}
{% endset %}
{% include '@bolt-components-accordion/accordion.twig' with {
  content: questions,
  single: true,
  spacing: 'medium',
  icon_valign: 'top'
} only %}