Contributing Draft

Please note that the contributing guidelines are in a draft state. We don’t accept contributions to the design system just yet.

Getting started #

Developing packages #

Components #

The component package found from packages/components is built with Stencil.js, a compiler and toolchain for building web components. The component source code is written in TypeScript + JSX (TSX), with stylesheets written in CSS.

The following are the most commonly used commands during development:

The local development server started by npm start serves a file located at /packages/components/src/index.html. Any local changes or new components are available on this page, so this can be used as a testing ground when developing.

To create a new component #

Design Tokens #

The design token package found from packages/tokens uses Theo to transform design tokens into a variety of output formats. Along with the built-in output formats provided by Theo, there is a custom outputs for Markdown (for docs).

The following are the most commonly used commands during development:

Themes #

The themes package found from packages/themes utilizes simple SCSS files and CSS Custom Properties. Gulp.js is used to transform SCSS into CSS.

The following are the most commonly used commands during development:

Webfonts #

The fonts package found from packages/fonts utilizes simple SCSS, Less, and CSS files.

The following are the most commonly used commands during development:

Publishing packages #

All Nord Design System packages are published using Node Package Manager. To be able to publish a package, a few things are required. First of all, you will need to create a user to if you haven’t already and enable 2-factor authentication in the settings. Next, you will need access and publish rights to the Nordhealth organization on NPM. Once you have these setup, you can follow the below steps to publish a package:

How do I retry publishing if publish fails? #

Sometimes, npm run release does not work. Your network may have had a hiccup, you may have not been logged on to npm, etc.

If the lerna.json has not yet been updated, simply try npm run release again.

If it has been updated, you can force re-publish. npm run release --force-publish $(ls packages/).

Developing documentation #

Nord Design System’s documentation uses Eleventy, which is a JavaScript based alternative to static site generator called Jekyll. To learn more about Eleventy and what’s possible, see Eleventy documentation.

Skipping tests when pushing #

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

Git pull requests #

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

Automation #

We use the following tools in this repository to automate certain tasks:

Getting support #

If you experience any issues while getting started with any of Nord’s tools, please head over to the Support page for more guidelines and help.