The design system at Knock
npm install @telegraph/tokens
Pick one:
Via CSS (preferred):
@import "@telegraph/tokens"; (option: default.css, dark.css, light.css)
Via Javascript:
import "@telegraph/tokens/default.css"; (options: default.css, dark.css, light.css)
Scope styles:
<body className="tgph">
Note: If you only want to use telegraph in a certain part of your app, you would wrap that part in an element with the
tgphclass.
Here is how to run the Storybook and development server locally:
- Clone the repository
git clone https://github.com/knocklabs/telegraph.git- Install dependencies
asdf install
yarn install- Compile the packages and watch for changes
yarn dev:packages- In another terminal tab, run the Storybook server
yarn dev:storybook-
Open
http://localhost:3005in your browser. You can now make changes to the code and see them refresh automatically. -
Running tests
yarn test:watchBefore committing, run the following commands to ensure the code is formatted and linted:
yarn format
yarn lintWe use changesets to manage releases. Each time a PR is opened, make sure to include a changeset. A changeset bot will add a comment to your PR prompting you to do so with a template, click that and commit it to your PR.
| Name | Version |
|---|---|
| @telegraph/compose-refs |  |
| @telegraph/helpers |  |
| @telegraph/postcss-config |  |
| @telegraph/prettier-config |  |
| @telegraph/style-engine |  |
| @telegraph/vite-config |  |
| Name | Status |
|---|---|
| @telegraph/color-picker | Planned |
| @telegraph/data-list | Planned |
| @telegraph/dialog | Planned |
| @telegraph/divider | Planned |
| @telegraph/form-control | Planned |
| @telegraph/link | Planned |
| @telegraph/spinner | Planned |
| @telegraph/tab | Planned |
| @telegraph/textarea | Planned |
| @telegraph/toast | Planned |
| @telegraph/toggle | Planned |