# CSC Design System - Web Component library

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

A cross-platform web component library that utilizes CSC Design System guidelines. It helps CSC developers to build applications with unified design. The components can be used with any browser and on top of any front-end framework.

## Getting Started

See the [documentation](https://design-system.csc.fi/) on how to use the web components and their attributes.

## Contributing

### Creating / modifying components

- Run `npm install` in root of the project
- Run `npm run generate` in the root of the project to generate new components
- Run `npm run build:watch` in root of the project

### The documentation project

The root project generates a json that is used to generate the base of the documentation of the component.

- Run `npm install` in documentation/angular
- Run `npm start` in documentation/angular

Create an example for a new web component

- Run `ng g c examples/c-name-of-the-component` in documentation/angular

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/saulipurhonen"><img src="https://avatars.githubusercontent.com/u/48789543?v=4?s=100" width="100px;" alt=""/><br /><sub><b>saulipurhonen</b></sub></a><br /><a href="https://github.com/CSCfi/csc-ui/commits?author=saulipurhonen" title="Documentation">📖</a> <a href="https://github.com/CSCfi/csc-ui/commits?author=saulipurhonen" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/hannyle"><img src="https://avatars.githubusercontent.com/u/23532204?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hang Le</b></sub></a><br /><a href="https://github.com/CSCfi/csc-ui/commits?author=hannyle" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/villeerikssoncsc"><img src="https://avatars.githubusercontent.com/u/100685708?v=4?s=100" width="100px;" alt=""/><br /><sub><b>villeerikssoncsc</b></sub></a><br /><a href="https://github.com/CSCfi/csc-ui/commits?author=villeerikssoncsc" title="Documentation">📖</a> <a href="https://github.com/CSCfi/csc-ui/commits?author=villeerikssoncsc" title="Code">💻</a> <a href="https://github.com/CSCfi/csc-ui/commits?author=villeerikssoncsc" title="Tests">⚠️</a> <a href="#infra-villeerikssoncsc" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
    <td align="center"><a href="https://github.com/csc-design-system-team"><img src="https://avatars.githubusercontent.com/u/115702104?v=4?s=100" width="100px;" alt=""/><br /><sub><b>csc-design-system-team</b></sub></a><br /><a href="https://github.com/CSCfi/csc-ui/commits?author=csc-design-system-team" title="Documentation">📖</a> <a href="#infra-csc-design-system-team" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/CSCfi/csc-ui/commits?author=csc-design-system-team" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/razorfever"><img src="https://avatars.githubusercontent.com/u/5346684?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Oskari Väistö</b></sub></a><br /><a href="https://github.com/CSCfi/csc-ui/commits?author=razorfever" title="Documentation">📖</a> <a href="#infra-razorfever" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/CSCfi/csc-ui/commits?author=razorfever" title="Code">💻</a> <a href="https://github.com/CSCfi/csc-ui/commits?author=razorfever" title="Tests">⚠️</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!