![Run tests](https://github.com/nordhealth/design-system/actions/workflows/tests.yml/badge.svg) ![Publish packages to production](https://github.com/nordhealth/design-system/actions/workflows/publish-production.yml/badge.svg) ![Deploy to GitHub Pages](https://github.com/nordhealth/design-system/actions/workflows/deploy.yml/badge.svg)

# Nord Web Components

The component package found from `packages/components` is built with [Lit](https://lit.dev/), a library for building Web Components. The component source code is written in TypeScript, with stylesheets written in CSS.

## Initial setup

We use [Docker](https://www.docker.com/) to run automated tests in a consistent, stable environment across platforms. Docker requires one-time installation and setup.

On mac, if you use [brew](https://brew.sh/), then docker can be installed with the the following command:

```sh
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:

```sh
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/`](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

```sh
pnpm scaffold [component-name]
```

e.g.

```sh
pnpm scaffold date-picker
```

## License

See license in LICENSE.md

## Copyright

Copyright © 2025 Nordhealth Ltd.