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.

🙌 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 git@github.com: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