Skip to main content

Contributing #

We gratefully accept contributions to Duet, but expect new feature requests and changes to be discussed with Duet Design System team before creating a pull request.

To contribute, you need access to some or all of the following tools:

Tool

Duet Git Repository

Tool

Duet Slack

Tool

Abstract for Sketch

Tool

Zeplin


Adding components #

Before creating a new component, please make sure something similar doesn’t already exist. We follow the below defined process to determine if we should extend an existing component, create a new component, or keep the component application specific instead.

Process for adding new components to Duet

Dev setup #

Duet Design System is divided into multiple NPM packages. Development for all of the packages happens inside one mono repository. Follow the below steps to get the dev environment up and running.


Building components #


Testing #

All Duet’s packages come with test suites that can be run with npm test inside each package directory. These tests also run automatically on our CI server whenever there’re changes to master or a new pull request is opened.

Sometimes you want to only run tests for a specific component. To do this, run the following command in the components directory, replacing duet-textarea with the name of any component:

npm test -- duet-textarea

Visual regression tests #

Running npm run test in /packages/components/ creates compare.html under /packages/components/screenshot/. Opening this generated HTML file in a browser gives you a screenshot compare tool that highlights any issues there might be compared to the previous build:

Process for adding new components to Duet

The first screenshot on the left is the original state, the one in the middle is the new changed state, and the third screenshot on the right highlights the difference and breaking changes.


Skipping tests #

While not recommended for normal workflow, you can skip the tests by running: git push --no-verify.


Code style guide #

When working on new components or editing existing ones, make sure to follow our code style guide found under the guidelines section.


Naming #

With every piece of content we name, we aim to follow these simple rules documented under the guidelines section.


Git pull requests #

If you have a specific bug fix or contribution in mind, you can generate a pull request in the Duet Git repository. When naming your branch, please follow the below naming convention:


Filing an issue #

We use Trello to track the backlog, feature requests, and bug reports. If you already have access to Duet’s board you can create an issue under the “Bug reports and feature requests” category by clicking the button below.

If you don’t have access to Trello, please send your feature request or bug report to our support email instead and format the email body according to our issue template.