Ionic DS

This repo is the implementation of Ionic's Design System. The design system iteslf is on Figma. More reading on Design Systems and our implementation can be found on Notion. This repo is based on stencil-app-starter.

Documentation

The need for documentation is known. We are currently working with the capacitor team 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 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:

# 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
• 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