Nord Web Components

The component package found from packages/components is built with Lit, a library for building Web Components. The component source code is written in TypeScript, with stylesheets written in CSS.

Initial setup

We use Docker to run automated tests in a consistent, stable environment across platforms. Docker requires one-time installation and setup.

On mac, if you use brew, then docker can be installed with the the following command:

brew install --cask docker

Alternatively, you can download docker directly from here: https://docs.docker.com/get-docker/

For detailed information on what docker is, what is does, how it works etc, please refer to their documentation.

Once docker is installed, run the following command in the components directory:

pnpm build:docker

This will create, install, and build all the necessary parts for running tests inside a docker container. The result of this process is cached, and will be used whenever tests are run.

NOTE: This should also be run whenever package.json dependencies change.

Once this is complete, you can use the commands below to run tests in a docker container.

Commands

The following are the most commonly used commands during development:

• pnpm start - Compile components, start watching for changes, start local development server on port 3333.
• pnpm build - Builds the project.
• pnpm test - Run all tests once, including visual regression.
• INCLUDE_VISUAL_REGRESSION=false pnpm test - Run all tests once, excluding visual regression.
• pnpm test -- [path/glob for test file] - Run specific tests file. e.g. pnpm test -- **/Button.test.ts
• pnpm test:watch - Run all tests and watch for changes.
• pnpm test:capture - Updates screenshot snapshots.

Development server

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

Component usage examples are available via the dev server using the URL structure http://localhost:3333/[component]/[example]/ e.g. /button/basic/. This is mapped to the file path /button/usage/basic.html. These pages get reloaded on any change.

If you go to http://localhost:3333/ you get a listing of all components. Then, if you navigate to a component, you get a list of all the usage examples of that component.

It is possible to change the theme used in an example via a query string e.g. /button/basic?theme=nord-dark. The possible theme values are:

• nord (default)
• nord-high-contrast
• nord-dark
• nord-dark-high-contrast
• vet
• vet-high-contrast
• vet-dark
• vet-dark-high-contrast

To create a new component

pnpm scaffold [component-name]

e.g.

pnpm scaffold date-picker

License

See license in LICENSE.md

Copyright

Copyright © 2025 Nordhealth Ltd.