govuk-react

govuk-react

A set of govuk components for React using glamorous.

CSS styling is derived from GOV.UK/elements but modified to suit custom markup. Also flexbox is preferred over floats.

Usage

npm install govuk-react --save

import { Button } from 'govuk-react'

const MyComponent = ({title}) => (<div>
  <h1>{title}</h1>
  <Button />
</div>)

See the Storybook for examples of all available components.

Also see the example project for basic usage.

Assumptions

Use of these components assumes the following from the peer project:

• Either normalize.css or sanitize.css is used as a CSS reset.
• The GDS Transport font face is included (for gov.uk domains only)
• Other than the reset, no other styles affecting generic elements (without classes, IDs etc) are present in the CSS.

Why Glamorous/CSS-in-JS?

See A Unified Styling Language

Why not use GDS styles/classes directly

1. We want to be free to write different DOM structure and/or CSS that is more in keeping with a React and bem-ish architecture. (e.g. in React you often don't need to specify IDs for field inputs, and can wrap inputs with labels so that they are automatically associated. We want to leave the decision of whether to use input IDs to the parent project. GDS styles don't wrap inputs with labels and require IDs and for attributes).
2. We want a parent project to not have to worry about a specific build system (e.g. for handling import styles.css, particularly if you want universal support) or including certain CSS files. We want a simple npm install govuk-react to be enough to get govuk styled components on to your page, irrespective of your build system.

Related sites and projects:

• govuk-elements (source)
• govuk_frontend_toolkit
• govuk-frontend
• govuk_template (source)
• GOV.UK Design Patterns

Contributing

Creating a new component

To create a new component:

• npm run create-component -- MyNewComponent where MyNewComponent is the name of your new component.

This creates a folder named MyNewComponent in src/components with the component file (index.js), a basic render test (test.js), and a default story (stories.js). You will need to add this to src/stories/index.js to view it in storybook.

Unit testing

Unit testing follows similar patterns as Glamorous with Jest, utilising Jest snapshots, and Enzyme.

To run unit & eslint tests:

$ npm run test

To run & watch unit tests:

$ npm run test:unit