NotGovUK

An implementation of the GOV.UK Design System in React that provides support for writing internal applications in addition to public ones.

27
8
TypeScript

NotGovUK

An implementation of the GOV.UK Design System in React that provides
support for writing internal applications in addition to public ones.
See: About NotGovUK

The components are written in Typescript and documented in
Storybook’s MDX format.

Warning: This is a work in progress and should only be used in
production by brave souls.

(See our documentation site and our Storybook.)

Consuming these components

In order to consume these components you will require a system that
utilised a bundler (such as Webpack) that can process imported assets
such as images, fonts and Sass files. Create React App may be able to
do this but does not provide Server-Side Rendering (SSR). You will also
need to ensure that you provide an instance of react-router.

As such, we suggest that you use our specially designed tech stack for
this purpose. See: Getting started.

Working on this repository

See: Working on and contributing to NotGovUK

Navigating this repository

The is a monorepo and so it contains multiple packages. The packages are
broken down into libraries, components and applications.

  • apps/
    Applications
  • lib/
    Libraries
  • components/
    Components (Special libraries that include assets, such as Sass code
    and images, and are intended to be consumed via Webpack. The structure
    of these is explained below.)
  • coverage/
    A code coverage report that can be created by running make test.
  • storybook-static/
    A static version of the storybook that can be created by running make docs.

Files in a typical component

  1. src/Component.ts[x]
    The implementation of the component. It may reference other .tsx files in
    order to separate business logic from presentation logic. Otherwise, it will
    typically be very simple and contain mostly HTML code.
  2. assets/Component.scss
    The SCSS (CSS) code that pertains to the component.
  3. spec/Component.spec.ts
    The tests for this component.
  4. spec/Component.stories.mdx
    The main documentation of the component. This is what people will use to
    understand how to consume the component.
  5. README.md
    Very simple documentation to aid people browsing the code via GitHub.
    Typically this will just link to the GOV.UK Design System and include a
    screenshot of the component.

Contributing

Pull requests are welcome but it is probably best to open an issue
first to discuss what you think needs to change.

I would like this project to be as easy as possible to both consume and
contribute to. To that end, if you think any of the documentation isn’t
clear please do let me know by raising an issue or a pull request.

Finally, this work is still at quite an early stage. If you run into any
problems or have any questions, please do get in touch.

– Daniel Martin, December 2019 (updated August 2020).