# Getting Started

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

A library of web components for the Claromentis Design System.

- [Documentation](#documentation)
- [Getting started](#getting-started)
  - [Install dependencies](#install-dependencies)
  - [Run the development server](#run-the-development-server)
  - [Run the development server with ES5 compatibility](#run-the-development-server-with-es5-compatibility)
  - [Build the component library and documentation](#build-the-component-library-and-documentation)
  - [Run tests](#run-tests)
- [Building components](#building-components)
- [Contributing](#contributing)
- [Publishing to NPM](#publishing-to-npm)

## Documentation

- [Web components guide](https://gitlab.com/claromentis/design/front-end-docs/-/blob/master/WEBCOMPONENTS.md)
- [Front-end style guide](https://gitlab.com/claromentis/design/front-end-docs/-/blob/master/STYLE.md)
- [Stencil](https://stenciljs.com/docs/introduction)

## Getting started

### Install dependencies

Install [Node v12.10.x](https://nodejs.org/) or greater.

```bash
npm install
```

### Run the development server

```bash
npm start
```

### Run the development server with ES5 compatibility

This is useful for testing compatibility with browsers that don't yet fully
support the HTML5 specs for Web Components (Edge, Firefox, IE11).

```
npm start --es5
```

### Build the component library and documentation

```bash
npm run build
```

### Run tests

```bash
npm test
```

## Building components

Visit the [Stencil documentation](https://stenciljs.com/docs/my-first-component) to learn how
to build Web Components using Stencil.

## Contributing

Please refer to the [Contributing Guide](./CONTRIBUTING.md) when making changes to the library.

## Publishing to NPM

The component library is published to and downloaded from [NPM](https://www.npmjs.com/).

To release a new version and publish it to NPM, please follow these steps:

1. Update the version number in `package.json` e.g. `"version": "0.0.21"`
2. Run `npm install` afterwards to update the `package-lock.json` with this new version
3. Make sure the [Changelog](CHANGELOG.md) is up to date
4. Commit with the above changes e.g. `git commit -m "Released 0.0.21`
5. Tag the release e.g. `git tag 0.0.21`
6. Push your changes with `git push` and push the tag `git push --tags`
7. Publish to NPM `npm publish --access public`

To update the version of the component library in any projects that depend on it:

* Run `npm update @claromentis/design-system`