spjpgrd/newskit

The NewsKit Design system

NewsKit

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/

🙌 Browser support

Chrome	Firefox	Safari
last 2 versions	last 2 versions	last 2 versions

✅ Pre-requisites

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 use to install the required version.

• Yarn to install the project dependencies

• (Windows Only) Linux Subsystem

• Additional setup required for WSL is documented here

📦 Getting Started

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 [email protected]:newscorp-ghfb/newskit.git
cd newskit
yarn && yarn dev

A 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.

Testing

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

👉 What’s next

• To start engineering with NewsKit, follow the steps in the quickstart guide.
• Have a question? Contact the NewsKit team via the contact form.

Styleguides

Commit Messages

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

Branch Names

The branch naming convention is

[fix|feat|docs|chore|ci]/[github issue number]-[short desscription]

eg git checkout -b fix/999-menu-z-order

🔗 Key Links

• Contributing to NewsKit
• NewsKit Documentation
• View NewsKit Design System npm package
• Github repository
• Medium
• Storybook