Knowit Design System

The Knowit Design system provides a set of organized tools, patterns and practices that serve as the foundation for Knowit’s digital products and experiences.

The initial project skeleton was created using Create React App and storybook init.

Getting started

To run the app in development mode, run the following commands:

npm install
npm run prepare
npm run storybook

This will open http://localhost:6006 in your browser.

To build the app for production, run:

npm run build-storybook

Once the app is built, it is ready to be deployed.

To run storybook tests, use the following command:

npm run test-storybook

To run unit tests, use the following command:

npm run test

To get the test coverage, use the following command:

npm run test-storybook --coverage

Publishing Storybook

The app is published to Chromatic on every push using GitHub Actions as CI/CD -tool.

Please refer to the CI/CD -automation documentation for instructions on how to configure GitHub Actions. The necessary configurations can be found in the .github/workflows folder.

Pull request with UI review

When you are making a pull request to the main branch, the first thing to do is to review the visual changes that the pull request introduces. This is done in the Chromatic UI review.

Accessibility tests are done by the storybook-addon-a11y package. Accessibility tests are also ran as part of test-storybook by the configured axe-playwright package.

After accepting the changes in Chromatic, the code changes can be reviewed in Github. When the pull request is merged, the changes are automatically deployed.

Installation and Usage guide

Installation and usage guide can be located here

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.