# Sistema de Design Pega Bolt ## Prévia da interface do Sistema de Design Pega Bolt Experimente a pilha de perguntas com apenas um item aberto, ao lado de um resumo editorial ilustrado. ## Referência de design do Sistema de Design Pega Bolt Referência pública do Bolt Twig Pattern Lab. Os valores em rem são fluidos e dependem da raiz da página; não considere todos os valores em rem múltiplos fixos de 16 px. O layout da prévia e a ilustração são originais. ### Funções das cores da marca | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --bolt-color-navy | #001f5f | Cor principal da marca. | | --bolt-color-navy-dark | #081c45 | Fundo mais escuro. | | --bolt-color-navy-xlight | #d7e2f2 | Superfície clara da marca. | | --bolt-color-teal | #10a5ac | Destaque da ilustração; não é automaticamente acessível como texto corrido. | | --bolt-color-teal-xdark | #005154 | Opção em teal mais escura. | | --bolt-color-orange | #f76923 | Destaque quente. | | --bolt-color-yellow | #ffc836 | Cor de destaque. | ### Espaçamento em dois eixos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --bolt-spacing-x-xsmall | 0.3875rem | Use a escala horizontal para o espaçamento em x e a escala vertical para o espaçamento em y. | | --bolt-spacing-x-small | 0.775rem | Use a escala horizontal para o espaçamento em x e a escala vertical para o espaçamento em y. | | --bolt-spacing-x-medium | 1.55rem | Use a escala horizontal para o espaçamento em x e a escala vertical para o espaçamento em y. | | --bolt-spacing-x-large | 3.1rem | Use a escala horizontal para o espaçamento em x e a escala vertical para o espaçamento em y. | | --bolt-spacing-y-xsmall | 0.3375rem | Use a escala horizontal para o espaçamento em x e a escala vertical para o espaçamento em y. | | --bolt-spacing-y-small | 0.675rem | Use a escala horizontal para o espaçamento em x e a escala vertical para o espaçamento em y. | | --bolt-spacing-y-medium | 1.35rem | Use a escala horizontal para o espaçamento em x e a escala vertical para o espaçamento em y. | | --bolt-spacing-y-large | 2.7rem | Use a escala horizontal para o espaçamento em x e a escala vertical para o espaçamento em y. | ### Fundamentos tipográficos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --bolt-type-font-size-display | 3.75rem | Relativo à raiz fluida; escolha as tags semânticas de título de forma independente. | | --bolt-type-font-size-xxlarge | 2.35rem | Relativo à raiz fluida; escolha as tags semânticas de título de forma independente. | | --bolt-type-font-size-large | 1.4rem | Relativo à raiz fluida; escolha as tags semânticas de título de forma independente. | | --bolt-type-font-size-regular | 1rem | Relativo à raiz fluida; escolha as tags semânticas de título de forma independente. | | --bolt-type-font-size-small | 0.9rem | Relativo à raiz fluida; escolha as tags semânticas de título de forma independente. | | Font family | Open Sans | Famílias tipográficas para texto corrido e títulos nos fundamentos publicados. | | Weights | 300 / 400 / 600 / 700 / 800 | De leve a extranegrito; carregue os arquivos de fonte correspondentes. | ### Densidade da página | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Attribute | data-bolt-info-density | Defina apenas no elemento html. | | comfortable | Larger font and spacing | Densidade voltada à leitura. | | regular | Default | O atributo pode ser omitido. | | compact | Smaller font and spacing | Não aplique como modificador local de card. | ### Composição do acordeão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | single | false by default | true restringe o acordeão a um único item aberto. | | spacing | medium | O esquema lista none, xsmall, small, medium e large. | | icon_valign | center | top alinha o ícone ao início de acionadores com várias linhas. | | no_separator | false | Mantenha os separadores para distinguir os limites entre perguntas. | | box_shadow | false | Sombra externa opcional. | | item.open | false | Expanda um item inicial. | | item.inactive | false | Item recolhido sem ícone de alternância. | | item.trigger | Content | Escreva uma pergunta significativa no lugar do rótulo padrão. | ## Guia completo do Sistema de Design Pega Bolt Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de Design Pega Bolt: escolha a implementação do Bolt ### Twig e React têm contratos diferentes > Este guia aborda a implementação pública do Bolt Twig / Pattern Lab. A página inicial atual do Bolt também oferece o BoltDS React para aplicações e portais; as duas implementações têm documentação e controle de versões separados. A prévia é uma interpretação independente de HTML, não um runtime do Bolt. O exemplo é um material de apoio para oficina, com um resumo visível e perguntas opcionais. Ele se encaixa naturalmente na implementação Twig, voltada a conteúdo: a hierarquia editorial vem primeiro, enquanto o acordeão disponibiliza o material complementar sob demanda. Uma aplicação criada com BoltDS React deve seguir a documentação correspondente, em vez de copiar os caminhos de namespace do Twig. Consulte a especificação de apoio ## Sistema de Design Pega Bolt: estrutura azul-marinho, poucos destaques vibrantes ### Uma superfície de leitura com a identidade da marca A paleta publicada inclui azul-marinho #001f5f, teal #10a5ac e laranja #f76923. O exemplo usa o azul-marinho como cabeçalho editorial marcante e o teal e o laranja como destaques da ilustração. Esses tons são valores dos fundamentos, não uma garantia de que toda combinação seja adequada para textos pequenos. Os dados do recurso aparecem sobre superfícies brancas e em azul-marinho claro. O diagrama ramificado decorativo representa uma oficina sobre como simplificar a jornada de um serviço; é uma ilustração original, não um logotipo da Pega nem um diagrama oficial. Consulte a especificação de apoio ## Sistema de Design Pega Bolt: tipografia fluida e medidas legíveis ### Os valores em rem não garantem equivalências fixas em pixels O Bolt publica o tamanho regular como 1rem, o grande como 1.4rem, o xxlarge como 2.35rem e o display como 3.75rem. A raiz varia conforme a janela de visualização e a densidade; portanto, converter a tabela inteira usando uma base fixa de 16 px elimina o comportamento pretendido. A base define Open Sans para o texto do corpo e dos títulos. Como os arquivos de fonte não estão incluídos, a prévia independente usa uma fonte alternativa do sistema. Ela mantém um título claro, um antetítulo compacto e parágrafos confortáveis, sem alegar correspondência tipográfica exata em pixels. Consulte a especificação de apoio ## Sistema de design Pega Bolt: ritmos horizontal e vertical diferentes ### Evite substituir por uma escala genérica de oito pontos O espaçamento horizontal médio é de 1.55rem, enquanto o espaçamento vertical médio é de 1.35rem. No nível grande, a mesma distinção aparece em 3.1rem e 2.7rem. Use a escala x entre objetos adjacentes e a escala y entre seções empilhadas. Em telas largas, a prévia mantém a introdução e a sequência de perguntas em colunas separadas; em seguida, empilha os elementos em um breakpoint local de 700 px. Esse breakpoint é uma escolha da aplicação, não um token do Bolt. Os rótulos longos das perguntas quebram ao lado do ícone sem reduzir o tamanho do texto. Consulte a especificação de apoio ## Pega Bolt Guia do sistema de design: crie a sequência de perguntas com Twig ### Os itens são conteúdo capturado, não uma propriedade de dados Cada chamada de accordion-item.twig fornece um acionador e conteúdo. Um bloco set do Twig captura a marcação renderizada dos itens; o elemento pai recebe essa marcação por meio de content. O exemplo completo acima abre a primeira pergunta e usa single: true. spacing controla os recuos dos itens, e icon_valign controla o alinhamento do ícone. Mantenha os separadores quando as perguntas precisarem de limites bem definidos. A flag inactive não desativa um controle de formulário: ela recolhe o conteúdo e oculta o ícone. - Mantenha datas, pré-requisitos e disponibilidade fora das respostas recolhidas. - Use o acionador para identificar uma pergunta específica. - Evite incluir outro acordeão dentro de uma resposta. Consulte a especificação de apoio ## Sistema de design Pega Bolt: expanda sem perder a posição de leitura ### Uma resposta por vez A interpretação de HTML usa botões reais, aria-expanded, aria-controls e painéis de resposta ocultos. Ao clicar em uma pergunta fechada, ela abre e a resposta anterior se fecha; ao clicar na pergunta aberta, ela se recolhe. O foco permanece no botão acionado. Isso reproduz o comportamento selecionado de abertura única sem depender do Bolt JavaScript. A prévia não implementa links diretos do Bolt nem afirma executar o runtime nativo do componente. No Bolt nativo, quando o modo single está ativado, um item indicado por link direto tem prioridade sobre um item inicialmente aberto. Consulte a especificação de apoio ## Sistema de design Pega Bolt: a densidade pertence à página inteira ### Uma configuração da raiz, não uma propriedade do componente O Bolt reconhece comfortable, regular e compact por meio de data-bolt-info-density no elemento html. O padrão é regular. Comfortable aumenta o tamanho do texto e o espaçamento; compact reduz ambos. Não aplique o atributo da raiz a um acordeão esperando uma alteração de densidade por componente compatível. Nesta página de leitura, a prévia mantém uma composição editorial confortável e fixa, em vez de fingir reproduzir o mecanismo de densidade nativo. Consulte a especificação de apoio ## Sistema de design Pega Bolt: integre o componente real ao contexto ### Use o ambiente documentado O comando de instalação só faz sentido em uma aplicação Bolt com Twig que resolva os namespaces dos componentes e compile os assets necessários. O repositório público oferece um ambiente de desenvolvimento completo por meio de yarn setup e yarn start. É um ambiente de referência, não uma implantação de produção em duas linhas. 1. Escolha Twig para a implementação do conteúdo renderizado no servidor e confirme a versão em uso na sua aplicação. 2. Instale o pacote de acordeão, registre o namespace Twig existente na configuração da aplicação Bolt e inclua os assets compilados do projeto. 3. Renderize o exemplo completo de perguntas e, em seguida, verifique a expansão única, a quebra de linha dos acionadores e a navegação por teclado no projeto real. Consulte a especificação de apoio ## Pega Bolt Exemplos de componentes do sistema de design ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente de HTML/CSS das bases do Bolt Twig e do comportamento de acordeão com abertura única. Fonte alternativa do sistema; sem runtime do 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.

``` Referência de código - A sequência de perguntas com abertura única não implementa links diretos do Bolt. O exemplo em Twig é o caminho de integração nativo; as informações essenciais da oficina permanecem fora das respostas recolhidas. ### Perguntas da oficina com uma resposta aberta Renderize cada pergunta com o template do item, capture a marcação e passe-a ao acordeão pai. ``` {% 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 %} ``` Referência de código - Use em uma aplicação Bolt com Twig configurada. O componente oficial não oferece uma entrada de uso simples em HTML. - single limita a expansão simultânea. Os links diretos têm prioridade sobre um item inicialmente aberto. - O esquema lista large como a maior opção de espaçamento, embora um exemplo da documentação use xlarge; este exemplo permanece dentro dos limites do esquema. ## Pega Bolt Configuração do agente do sistema de design ### Ponto de partida para implementação O comando do pacote adiciona o componente, não um site independente. Use o namespace Twig @bolt-components-accordion registrado no projeto e os assets compilados do Bolt. A configuração de desenvolvimento do repositório e a integração à aplicação são caminhos diferentes; nenhum dos dois corresponde ao BoltDS React API atual. ``` # 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 ``` ### Um prompt para seu projeto ``` Crie uma página de recursos para uma oficina em Bolt Twig, usando a paleta azul-marinho/turquesa verificada, uma hierarquia tipográfica fluida e escalas de espaçamento x/y distintas. Mantenha as informações essenciais visíveis. Componha accordion-item.twig dentro de accordion.twig com single true e espaçamento medium. Não use caminhos Twig como APIs de React. ``` ## Sistema de design Pega Bolt: fontes e escopo Este guia aborda a implementação pública do Bolt Twig / Pattern Lab. A página inicial atual do Bolt também oferece o BoltDS React para aplicações e portais; as duas implementações têm documentação e controle de versões separados. A prévia é uma interpretação independente de HTML, não um runtime do Bolt. - Implementações do Bolt Pontos de entrada React e Twig. - Tokens de cor da marca Paleta Pega e variáveis CSS. - Espaçamento Escalas x e y independentes. - Tipografia Tamanhos fluidos em rem e famílias tipográficas. - Densidade de informações Configuração de densidade no nível da página. - Esquema do acordeão Propriedades Twig, template de item e restrições de interação. ## Sistema de design Pega Bolt: recursos relacionados ### Porsche sistema de design Explore Porsche Design System v4 com espaçamento fluido, esquemas de cores CSS, tipografia Porsche Next e um configurador com duas opções. A referência inclui expressões reais de tokens e uma entrada completa do Vite que usa os eventos atuais do controle segmentado. ### Red Hat PatternFly Use PatternFly para criar um espaço de trabalho operacional: referências semânticas de tokens, cartões de serviço selecionáveis, seleção em massa com três estados, revisão do escopo e código nativo completo de React. ### REI Cedar Crie um seletor de atendimento de pedidos concreto com Cedar, blocos nativos do Vue, valores reais de tokens, navegação completa pelo teclado e uma composição responsiva de produtos. - [Referência de implementação](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Consulte a especificação de apoio](https://boltdesignsystem.com/) - [Consulte a especificação de apoio](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Consulte a especificação de apoio](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Consulte a especificação de apoio](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Consulte a especificação de apoio](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Consulte a especificação de apoio](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Referência de código](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Implementações do Bolt Pontos de entrada React e Twig.](https://boltdesignsystem.com/) - [Tokens de cor da marca Paleta Pega e variáveis CSS.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Espaçamento Escalas x e y independentes.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Tipografia Tamanhos fluidos em rem e famílias tipográficas.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Densidade de informações Configuração de densidade no nível da página.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Esquema do acordeão Propriedades Twig, template de item e restrições de interação.](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)