NewsKit is News UK’s design system. It provides interactive building blocks and guidelines for crafting cohesive digital product interfaces and accelerating development. Build better products faster.
| Environment | Link |
|---|---|
| Develop | https://www.newskit.dev-news.co.uk/ |
| Develop | https://storybook.newskit.dev-news.co.uk/ |
| Prod | https://www.newskit.co.uk/ |
| Prod | https://storybook.newskit.co.uk/ |
 Chrome |
 Firefox |
 Safari |
|---|---|---|
| last 2 versions | last 2 versions | last 2 versions |
You will need to install the following as pre-requisites to getting started:
-
Node.js We use two versions of node. You need to be on version: >=16.10.0 to run the application. In your terminal run the command
nvm useto install the required version. -
Yarn to install the project dependencies
-
(Windows Only) Linux Subsystem
-
Additional setup required for WSL is documented here
Once you have the above installed, run the following commands:
Note that if you are on Windows machine, you need to run the wsl command first to run which ever linux environment you've installed on your machine.
git clone git@github.com:newscorp-ghfb/newskit.git
cd newskit
yarn && yarn devA few pages on the site use Google Sheets as a simple CMS, if you are contributing to the product you can request these variables from the team.
We use the following libraries for our automated tests:
- Jest and React Testing Library for unit testing
- Cypress for component and E2E testing
- cypress-axe for automated accessibility testing
- Percy for cross browser visual testing
For detailed information on how to run the automated tests, please visit Testing
- To start engineering with NewsKit, follow the steps in the quickstart guide.
- Have a question? Contact the NewsKit team via the contact form.
Please follow this format for commit messages and PR titles:
[fix|feat|docs|chore|ci]([github issue number]): [description]
eg
fix(999): menu z-order affects focus
The branch naming convention is
[fix|feat|docs|chore|ci]/[github issue number]-[short desscription]
eg
git checkout -b fix/999-menu-z-order
