Home

Bolt Design System Wiki

Welcome to the Bolt wiki! Explore and learn about how to use the design system.

Table of Contents

1. Slackbot Helper
2. Accessibility
3. Contributor Guidelines
4. Consumer Guidelines
5. List of POCs

Slackbot Helper

In a channel or DM with yourself/bot within the DigtialIT Slack, type docbot: help for a list of commands. Docbot is a quick way to access some of the Wiki information within Slack.

Accessibility

• Basic A11y Checklist

Contributor Guidelines

• Get started with Bolt locally
• Pega Digital Standards and Conventions (Gitlab)
  • Always start with this team wide doc before anything else.
• Bolt Specific Standards and Conventions
  • Bolt Specific Naming Conventions
    1. Prefixing Custom Attributes
    2. Standard Props for Passing Content in Twig
    3. Pattern Lab Docs
    4. Component Folder
    5. Component Naming
    6. Release Naming
    7. Git Branches
  • Bolt Specific Formats
    1. API
    2. Comments
    3. Documentations
    4. Release Notes
    5. README
    6. PR Description
  • Bolt Specific Folder Structures
    • View Folder Structures page
• How to save SVG graphics and SVG icons
• Bolt Doc Writing Guide
• VS Code Configuration

Bolt Specific Templates

1. Twig: Example Component
2. JS: Example Component
3. Schema: Example Component
4. README: Example Component
5. Example Jest Test

Bolt Specific Workflows

1. Deprecations
2. Releases

Consumer Guidelines

Drupal Integration

• Upgrade to 4.x
• Upgrade to 5.x
• Upgrade to minor release
• Deprecations and Replacements
• Building Websites with Bolt in Drupal

Build from Design Mockups

1. From Design Mockup to Code
2. Customize Component with Schema
3. Override with Utility Classes

Build from Scratch

1. Customize Component with Schema
2. Build with Utility Classes?
3. Build a One-off Snowflake
4. Build a New Component

List of POCs

Proof of concepts for future updates.

• POC: Banner Redesign
• POC: Navbar and Tabs Enhancements
• POC: Table Enhancements