![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)

# Ionic DS

This repo is the implementation of Ionic's Design System. The design system iteslf is on [Figma](https://www.figma.com/files/project/1012866/Design-System). More reading on Design Systems and our implementation can be found on [Notion](https://www.notion.so/ionic/DS-4d5b524cc90040a7a4d0b0165346b106). 
This repo is based on [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter).

## Documentation

The need for documentation is known. We are [currently working with the capacitor team](https://github.com/ionic-team/stencil/issues/2541) to aid in documenting functional components. 

## Components vs Design System

This shared repo contains components that implement our design system. Things like buttons, cards, headings, form fields... It also contains resused components unrelated to our design system. Things like Prismic/Disqus integration tools, additional reading links, ads... Multiple Ionic sites use these components, but they are not part of the formal design system. These components are in `src/components` while Design System components are in `src/ds/components`. 

## NPM Link

Until this repo is more mature, it may be useful to work in this repo while actively working on sites that use these components themselves. The [NPM Link](https://docs.npmjs.com/cli/link) command lets you link dependencies in your `package.json` to another project on your computer instead of grabbing it from npm. For example to link this repo with the `capacitor-site` project, assuming this repo is the same parent directory as the `capacitor-site` you would run this from the `capacitor-site` root folder:

```bash
# starting out in the root of this project
npm link ../ionic-ds
```

Then you can run `npm build` in `ionic-ds` any time to test your changes. Note, you'll likely need to re-run `npm start` in the `capacitor-site` directory as well to see changes. The Stencil development file watcher and bundler won't see changes to dependencies like it does for changes to a project's own source files.

### Script tag

- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
- Put a script tag similar to this `<script src='https://unpkg.com/@ionic-internal/ionic-ds/dist/ionic-ds.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

### Node Modules
- Run `npm install @ionic-internal/ionic-ds --save`
- Put a script tag similar to this `<script src='node_modules/@ionic-internal/ionic-ds/dist/ionic-ds.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

### In a stencil-starter app
- Run `npm install @ionic-internal/ionic-ds --save`
- Add an import to the npm packages `import @ionic-internal/ionic-ds;`
- Then you can use the element anywhere in your template, JSX, html etc
