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:

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.

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.

• First, make sure you have a recent version of Node.js installed. Duet requires Node.js 12.7.x or newer.
• Next, install Lerna globally by running npm install --global lerna.
• Run npm install and then npm start in the root directory to install and pre-build all design system dependencies and its packages.
• Then run npm start inside any of the packages to start up dev environment for a specific package.
  • Documentation that is shown on duetds.com can be found from /docs/. Changes to it are automatically deployed if tagged with deploy and merged to master brach.
  • All Duet packages and their respective code can be found under /packages/. For example components live in /packages/components/.
• You can use npm run bootstrap in the root directory to link local packages together using symlinks and install the remaining package dependencies. This command allows you to edit “package A” and see the changes in “package B” that depends on “package A” without having to publish a new version to NPM.
• Use npm run publish in the root directory to publish new versions of all packages to NPM if you have the necessary NPM privileges. npm run publish:next can be used to publish prerelease versions under @next tag.
• Additionally, to install a new global dev dependency, run lerna add {package} --dev in the root directory.

Building components #

• Documentation that is shown on duetds.com acts as our primary component development platform. To get started locally, open /docs/ directory and run npm install and npm start.
• Once the server is up and running, you can access the local development environment by pointing your browser to http://localhost:8000. The components section in the documentation will be empty at this point.
• Next, go to /packages/components/ directory and run npm install and npm start that starts up the component watch and build tasks.
• If you now edit any of the .tsx or .scss files under the components, that triggers a rebuild task which also shows any changes you’ve done on the documentation.
• If you wish to test on legacy browsers, use ES5=true npm start. This will start up the dev environment in ES5 documentation mode.
• When working on new components or editing existing ones, make sure to follow our code style guide found under the guidelines section.
• Component examples are inside each component’s readme.md.
• Templates are located under /docs/src/templates/ directory.

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.

• When changing any of the existing features, please make sure that all of the tests pass.
• If you’re creating new features, make sure to add relevant tests.
• For components, we expect each component to:
  • Have end-to-end tests in component-name.e2e.ts for each property added to verify that the functionality works in a real browser.
  • Have unit tests in component-name.spec.ts if the component offers custom methods or events.
  • Have visual regression tests in component-name.e2e.ts for different component variations to make sure we aren’t breaking existing CSS styles.
  • Pass accessibility tests run with npm run test:accessibility against the templates located under /docs/src/templates/ directory.

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

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:

• feature/<feature-name>
• hotfix/<fix-name>
• release/<package-name>/<version-number>

Filing an issue #

We use Jira 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 Jira, please send your feature request or bug report to our support email instead and format the email body according to our issue template.