Skip to content

ONSdigital/design-system

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ONS Design System

GitHub release Travis tests codecov Codacy Badge GitHub pull requests Github last commit Github contributors

Installing as a dependency

Nunjucks macros for components and templates are available from npm. Built CSS and JS is also available if you need access to pre-release CSS/JS, otherwise CSS and JS should be loaded from the CDN.

yarn add @ons/design-system

Run Locally

You'll need Git, Node.js, and Yarn to run this project locally.

The version of node required is outlined in .nvmrc.

Using nvm (optional)

If you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.

To enable this we use nvm (Node Version Manager) to switch between versions easily.

  1. install nvm
  2. Run nvm install in the project directory (this will use .nvmrc)

Install dependencies

yarn install

Start a local server

yarn start

Once the server has started, navigate to http://localhost:3030

Testing

To test locally ensure you've followed all the steps above to install dependencies. You can have three options:

Run tests locally in watch mode

This will watch your test files and JavaScript for changes and rerun the test suite each time a change is detected.

Note: This will only run tests on the ES6 bundle.

yarn test:local

Run ES6 and ES5 bundle tests

Running this will run the test suite twice, once against the ES6 bundle and again against the ES5 bundle. However, as local tests only run on evergreen browsers it will be unlikely that you see the ES5 testing fail if the ES6 testing passes.

yarn test

Run tests in BrowserStack

All unit tests are automatically cross browser tested in BrowserStack by TravisCI when a pull request is created or if a change is pushed to an existing pull request.

You can also run cross browser testing in BrowserStack manually against your local branch by running this command:

Note: You will need to set your BROWSER_STACK_USERNAME and BROWSER_STACK_ACCESS_KEY environment variables to allow authentication with BrowserStack. Username and access keys can be found under Automate on the BrowserStack settings page.

yarn test:browserstack

Build

Generate a build into ./build. Will also create Webpack Bundle Analyzer reports for both the ES6 and ES5 bundle and open them in your default browser.

yarn build

Recommended Visual Studio Code plugins for this project