registers-react-library

React library for common components across Registers user interfaces. We have taken some of the external ONS patterns from the ons-pattern-library-starter repository and wrapped them in dynamic React components.

This tutorial was used to help setup up the project.

Using this Module

1. Install the module using NPM.

npm install --save registers-react-library

1. Import the component you want to use.

import { Button } from 'registers-react-library';

1. Check the storybook for details of what props to pass in.

Environment Setup

Install NPM, it is included with Node.js (Download)

Testing the module locally

1. Clone this repository

git clone https://github.com/ONSdigital/registers-react-library.git

1. Install the local registers-react-library module

npm install --save /path/to/registers-react-library

1. Import the component you want to use

import { Button } from 'registers-react-library';
 
<Button
  id="logoutButton"
  size="thin"
  text="Logout"
  onClick={() => alert('Clicked logout button...')}
  ariaLabel="Logout Button"
  type="submit"
/>

1. When you make changes to registers-react-library, make sure you run the npm install command from step 2 again.

Running the Storybook

npm run storybook

You can access the storybook at localhost:9001.

Deploy the Storybook to Github Pages

npm run build-storybook
npm run deploy-storybook

You can access the deployed Storybook here.

Testing

To run the Enzyme tests (using Jest as a test runner), run the following command:

npm run test

Linting

To run the linter, run the following command:

npm run lint

Contributing

See CONTRIBUTING for details.

License

Copyright ©‎ 2017, Office for National Statistics (https://www.ons.gov.uk)

Released under MIT license, see LICENSE for details.