govuk-react

We aim to track the following projects (in priority order) as to which components to implement and how they should look/behave. Where possible we are using the existing CSS as a guide. When we need to modify to suit custom markup, we aim to provide a comment in our code as to why this was done.

Using Link with a Router Link

We provide a Link component which creates an element styled as a GDS link. As we are using styled-components it is possible to apply that style to an existing component using the as prop. Other props will be passed through.

Why CSS-in-JS?

This project is part of a larger initiative to componetise large scale React applications. Using CSSinJS allows us to include styles inside a module bundle that can be published (using npm publish) and consumed by a peer application, without putting dependencies on the peer application to implement a specific CSS build system.

Why not use GDS styles/classes directly

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

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.

We want to distribute React applications as modules that have self contained styles. CSS in JS allows all styles to be contained in distributable JS modules that can be ported across projects.

About the GDS font

Unfortuantely the GDS transport font has a relatively restrictive license described on the gov.uk blog. We are investigating rendering an elegant alternative before falling back to Arial on issue 272.