DOCSEARCHbyAlgolia
Submit Docs

GovBR-DS Design System

website·Indexed 30 days ago

https://govbr-ds.gitlab.io/experimentos/govbr-ds-wc-lerna/

A comprehensive design system for the Brazilian government, providing documentation on UI components, design tokens, and governance processes. It includes guidelines for usability testing, Figma Code Connect integration, GitLab CI/CD pipelines, and a structured workflow for demand analysis, sprint management, and release homologation.

Tokens
94.1K
Snippets
297
Records
701
Agent score
72%

What's inside GovBR-DS

  1. Overview of Triage Bot implementation options in GitLab

    A Triage Bot is an automation used to classify, label, close inactive items, and respond to events in issues and merge requests. In GitLab, this can be implemented via:

    • Native Rules: Using issue/MR templates, labels, and quick actions.
    • GitLab Bots: Using GitLab Auto DevOps or custom comments via webhooks/API.
    • GitLab CI + Scripts: Creating CI jobs that interact with the GitLab API to label, close, or assign items.

  2. Overview of Visual Regression Testing with BackstopJS

    Visual regression testing ensures that CSS changes do not introduce unintended visual bugs. BackstopJS uses Chrome Headless via Puppeteer to automate this process. The workflow consists of three main parts:

    1. Baseline (Reference): The original screenshot used as the source of truth.
    2. Test: A new screenshot generated during the current run and compared against the baseline. If they match, the test passes; otherwise, it fails.
    3. Diff: A generated image highlighting the differences between the baseline and the test image.

    Note: Visual tests can produce false positives due to dynamic content, animations, or page load speeds.

  3. Overview of Danger Bot for MR Automation

    Danger is a CI/CD pipeline tool that automates code reviews by posting comments and warnings to Merge Requests (MRs) based on declarative rules. It is used to apply review checklists, highlight sensitive changes (like build-size baseline modifications), validate MR conventions (titles, labels, Draft/WIP status), and enforce DX policies.

  5. Overview of the govBR-DS Datetimepicker component

    The Datetimepicker component in the govBR-DS design system provides functionality for selecting dates and times. It is built upon the external flatpickr library and depends on the Button and Input components. The component supports three primary variations: a combined DateTimePicker, a DatePicker, and a TimePicker. Key behaviors include date navigation, date range selection, and various interaction states.
    # External dependency used by the component
# https://flatpickr.js.org/

  6. Overview of GovBR-DS Web Components library

    The GovBR-DS Web Components library provides a set of standardized UI components based on the Digital Government Design Pattern (Padrão Digital de Governo). It is designed for accessibility and consistency across government interfaces. The library offers an interactive playground to test components, properties, methods, events, slots, and CSS Parts.

  7. Overview of the Accessible Development Guide for PDG

    The Accessible Development Guide integrates accessibility into every phase of the PDG (Padrão Digital de Governo) development process to ensure the creation of inclusive digital products. The framework is based on inclusive design, prioritizing two core principles: Co-design (incorporating diverse user perspectives during discovery and improvement) and Alterity (considering unique user needs, abilities, and cultural diversity to avoid stereotypes).

  8. Overview of GovBR-DS Management Guidelines

    The GovBR-DS management documentation provides a standardized framework for design teams to maintain consistency in the development of Design System artifacts. It serves as both an onboarding guide for new team members and a reference for existing managers to refine processes, methodologies, and technologies used within the project. The documentation is intended to be an evolving instrument; managers are encouraged to update, edit, and improve the content based on real-world scenarios encountered during the project's lifecycle.

  11. Manage test results and analytics in LambdaTest

    LambdaTest provides several management interfaces for test oversight:

    • Dashboard: Provides a general overview of test results, including real-time session logs, automation tests, and real device logs. It includes a graph of tests executed per day/week/month with user and test-type filters.
    • Analytics: Allows the creation of custom dashboards to visualize Snapshot tests, OS/Browser distribution, and error rates via analytical graphs.
    • Manage: Centralized area for bug tracking (issues), reviewing test logs, and project organization.
    • Integrations: Supports connections with bug trackers, project management tools, CI/CD pipelines, and communication platforms.

  12. Integrate GovBR-DS Web Components with different frameworks

    GovBR-DS components are built as Custom Elements (Web Components), making them compatible with any application using the Web Platform. Depending on your architecture, you can integrate them as follows:

    • HTML and JavaScript: Use Custom Elements directly.
    • Angular: Use components with typed inputs, standalone components, and forms.
    • React: Use React wrappers, typed events, and SSR (Server-Side Rendering) integration.
    • Vue: Integrate with Vue 3 using the Composition API and v-model.