open-index/open-npm huggingface dataset:
npm package: @govuk-frederic/app-container
Description: Work in progress React component that provides an application container to a given set of React modules.
Author: Alasdair McLeay
Latest version: 0.1.9

# GOV.UK Frederic AppContainer

Work in progress React component that provides an application container to a given set of React modules.

The container plans to:

- provide a top nav, with a link to each module
- given an api endpoint, fetch reference data via redux or the context api
- read feature flags passed from the server and provide them to modules as props via render props
- Provide a Toast notification system

# Frederic projects:

- https://github.com/stevesims/govuk-frederic
- https://github.com/penx/govuk-frederic-server
- https://github.com/penx/govuk-frederic-app-container
- https://github.com/penx/govuk-frederic-example
- https://github.com/penx/govuk-frederic-example-module
- https://github.com/penx/govuk-frederic-sample-data
- https://github.com/penx/govuk-frederic-api
npm package: @govuk-frederic/array-object-table
Description: Renders a table from an an array of objects, providing they have properties which match provided the keys. Also supports transforms of undefined values.
Author: Steve Sims
Latest version: 0.2.0

ArrayObjectTable
================

### Import
```js
  import ArrayObjectTable from '@govuk-frederic/array-object-table';
```
<!-- STORY -->

### Usage

Simple
```jsx
const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
];
const array = [
  { one: 'test', two: 'test' },
  { one: 'test' },
  {},
];
const title = ['Heading'];

<ArrayObjectTable fields={fields} array={array} title={title}/>;
```

With skipEmptyRows
```jsx
const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
];
const array = [
  {},
  {},
];
const title = ['Heading'];

<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows/>
```

With skipEmptyRows and hideWithNoValues
```jsx
const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
];
const array = [
  {},
  {},
];
const title = ['Heading'];

<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues/>;
```

With object transform and default transform
```jsx
const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two', transform: value => value ? value.toLowerCase() : '' },
  { key: 'three', heading: 'Three' },
  { key: 'three', heading: 'Four', transform: value => value ? value.toLowerCase() : '*' },
];
const array = [
  {one: 'One', two: 'Two'},
];
const title = ['Heading'];
const defaultTransform = value => (value || '-');

<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues defaultTransform={defaultTransform}/>
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `array` | true | `````` | arrayOf[object Object] | 
 `defaultTransform` |  | ```(value = '-') => value``` | func | 
 `fields` | true | `````` | arrayOf[object Object] | 
 `hideWithNoValues` |  | ```false``` | bool | 
 `skipEmptyRows` |  | ```false``` | bool | 
 `title` |  | ```null``` | node |
npm package: @govuk-frederic/countdown-text-area
Description: TextArea which accepts a maxlength prop and renders a TextAreaField, limits characters and styles accordingly.
Author: Steve Sims
Latest version: 0.2.0

CountdownTextArea
=================

### Import
```js
  import CountdownTextArea from '@govuk-frederic/countdown-text-area';
```
<!-- STORY -->

### Usage

Simple
```jsx
import manageState from 'manage-state';

const ManagedCountdownTextarea = manageState(CountdownTextArea, {
 changeEvent: true,
 propsToState: ['value'],
});

<ManagedCountdownTextarea />
```

With maxlength (150)
```jsx
import manageState from 'manage-state';

const ManagedCountdownTextarea = manageState(CountdownTextArea, {
 changeEvent: true,
 propsToState: ['value'],
});

<ManagedCountdownTextarea noMaxLengthAttr maxLength={150} />
```

With maxlength (100) and positiveOnly
```jsx
import manageState from 'manage-state';

const ManagedCountdownTextarea = manageState(CountdownTextArea, {
 changeEvent: true,
 propsToState: ['value'],
});

<ManagedCountdownTextarea maxLength={100} positiveOnly />
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `maxLength` |  | ```undefined``` | number | 
 `noMaxLengthAttr` |  | ```false``` | bool | 
 `positiveOnly` |  | ```false``` | bool |
npm package: @govuk-frederic/header-button
Description: Styled button with further optional active and disabled styles.
Author: The govuk-frederic authors
Latest version: 0.2.0

HeaderButton
============

### Import
```js
  import HeaderButton from '@govuk-frederic/header-button';
```
<!-- STORY -->

### Usage

Simple
```jsx
<HeaderButton>One</HeaderButton>
```

Multiple header buttons
```jsx
<Fragment>
 <HeaderButton>One</HeaderButton>
 <HeaderButton>Two</HeaderButton>
</Fragment>
```

Multiple header buttons with keyline
```jsx
import Keyline from '@govuk-frederic/keyline';

<Fragment>
 <Keyline>
   <HeaderButton>One</HeaderButton>
   <HeaderButton>Two</HeaderButton>
 </Keyline>
</Fragment>
```

Active header button
```jsx
<HeaderButton active>On</HeaderButton>
```

Disabled header button
```jsx
<HeaderButton disabled>Off</HeaderButton>
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `active` |  | `````` | bool | 
 `children` |  | `````` | node | 
 `disabled` |  | `````` | bool |
npm package: @govuk-frederic/keyline
Description: Renders a bottom border with optional inline-block and colour.
Author: Simon Moore
Latest version: 0.2.0

Keyline
=======

### Import
```js
  import Keyline from '@govuk-frederic/keyline';
```
<!-- STORY -->

### Usage

Simple
```jsx
<Keyline>
   <p>example</p>
</Keyline>
```

inlineBlock
```jsx
<Keyline inlineBlock>
   <p>example</p>
</Keyline>
```

inlineBlock with orange border
```jsx
<<Keyline inlineBlock borderColor="#ff9900">
   <p>example</p>
</Keyline>
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `borderColor` |  | `````` | string | 
 `children` |  | `````` | node | 
 `inlineBlock` |  | `````` | bool |
npm package: @govuk-frederic/page-header
Description: Page header component providing space for a title and navigation
Author: Toby Brancher
Latest version: 0.2.0

PageHeader
==========

### Import
```js
  import PageHeader from '@govuk-frederic/page-header';
```
<!-- STORY -->

### Usage

Default example

```jsx
import { Link } from 'react-router-dom';
import PageHeader from '@govuk-frederic/page-header';
import asNavLink from 'as-nav-link';

const LogoLink = asNavLink()(PageHeader.LogoAnchor);
const NavLink = asNavLink()(PageHeader.NavAnchor);
const PageLogo = (<LogoLink to="/">Logo text</LogoLink>);
const PriorityNavigation = (<NavLink to="/">My Account</NavLink>);

…

<PageHeader logo={PageLogo}>
  {PriorityNavigation}
</PageHeader >
```

### TODO:
- Add responsive considerations
- Check rendering of multiple items in Navigation container and provide example Story
- Replace magic numbers from HOC items with constants

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```null``` | node | Navigation items, rendered on the right
 `logo` |  | ```null``` | node | Title, rendered large on the left
npm package: @govuk-frederic/page-navigation
Description: Page navigation component
Author: Toby Brancher
Latest version: 0.2.0

PageNavigation
==============

### Import
```js
  import PageNavigation from '@govuk-frederic/page-navigation';
```
<!-- STORY -->

### Usage

Default example

```jsx
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import asNavLink from 'as-nav-link';

import PageNavigation from '.';

const NavLink = asNavLink()(PageNavigation.Anchor);

const PageNavigationExample = () => (
  <BrowserRouter>
    <PageNavigation>
      <NavLink exact to="/">Home</NavLink>
      <NavLink exact to="/section-01">Section 01</NavLink>
      <NavLink exact to="/section-02">Section 02</NavLink>
    </PageNavigation>
  </BrowserRouter>
);
```

### TODO:
- Add responsive considerations

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```null``` | node | Navigation items
npm package: @govuk-frederic/result-count
Description: Renders children, expected to be a number, styled and with customisable color and background-color.
Author: The govuk-frederic authors
Latest version: 0.2.0

ResultCount
===========

### Import
```js
  import ResultCount from '@govuk-frederic/result-count';
```
<!-- STORY -->

### Usage

Simple
```jsx
<ResultCount>0</ResultCount>
```

Overriding background and text colours
```jsx
<ResultCount backgroundColor="#6f777b" color="white">000</ResultCount>
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `backgroundColor` |  | ```GREY_1``` | string | 
 `children` |  | ```undefined``` | node | 
 `color` |  | ```WHITE``` | string |
npm package: @govuk-frederic/result-count-title
Description: Renders a ResultCount with value sent as a prop, along with a title sent as children.
Author: The govuk-frederic authors
Latest version: 0.2.0

ResultCountTitle
================

### Import
```js
  import ResultCountTitle from '@govuk-frederic/result-count-title';
```
<!-- STORY -->

### Usage

Simple
```jsx
<ResultCountTitle count={3}>Title</ResultCountTitle>
```

In black with count value 0
```jsx
<ResultCountTitle count={0} countColor="black" countBackgroundColor="#dee0e2">Title</ResultCountTitle>
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | `````` | node | 
 `count` |  | `````` | union(number \| string) | 
 `countBackgroundColor` |  | `````` | string | 
 `countColor` |  | `````` | string |
npm package: @govuk-frederic/table-accordion-group
Description: Accordion menu which uses manage-state and react-collapse.
Author: Alasdair Mcleay
Latest version: 0.2.0

TableAccordionGroup
===================

### Import
```js
  import TableAccordionGroup from '@govuk-frederic/table-accordion-group';
```
<!-- STORY -->

### Usage

State managed with children
```jsx
import manageState from 'manage-state';

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedTableAccordionGroup title="Title" expanded="expanded">
  Children
</ManagedTableAccordionGroup>
```

State managed without children
```jsx
import manageState from 'manage-state';

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedTableAccordionGroup title="Title" expanded="expanded"/>
```

Toggle open on title click with 'changeOnTitleClick' prop
```jsx
import manageState from 'manage-state';

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedTableAccordionGroup changeOnTitleClick title="Title" expanded="expanded">
  Children
</ManagedTableAccordionGroup>
```

Array
```jsx
import manageState from 'manage-state';

const arrayExampleItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});


<ManagedTableAccordionGroup
  expanded={
  arrayExampleItems.map((item, index) => {
    if (index) {
      return <div>{item}</div>;
    }
    return null;
  })}
>
  {arrayExampleItems[0]}
</ManagedTableAccordionGroup>
```

### TODO:
- Implement Async story example in CodeSandbox

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `changeOnTitleClick` |  | ```false``` | bool | 
 `children` |  | ```undefined``` | node | 
 `expanded` | true | `````` | node | 
 `onChange` |  | `````` | func | 
 `open` |  | ```false``` | bool | 
 `title` |  | `````` | node |
npm package: @govuk-frederic/title-result-count
Description: Renders a ResultCount using count prop provided and a title from children.
Author: Steve Sims
Latest version: 0.2.0

TitleResultCount
================

### Import
```js
  import TitleResultCount from '@govuk-frederic/title-result-count';
```
<!-- STORY -->

### Usage

Simple
```jsx
<TitleResultCount count={3}>
 Title Title Title
</TitleResultCount>
```

Counter title with value 0 and override text and background colour.
```jsx
<TitleResultCount count={0} countColor="black" countBackgroundColor="#dee0e2">
 Title Title Title
</TitleResultCount>
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | `````` | node | 
 `count` |  | `````` | union(number \| string) | 
 `countBackgroundColor` |  | `````` | string | 
 `countColor` |  | `````` | string |
npm package: @govuk-one-login/cri-audit
Description: This package provides utilities for interacting with the audit event system in GOV.UK One Login's credential issuers (CRIs).
Latest version: 1.0.3

# `@govuk-one-login/cri-audit`

This package provides utilities for interacting with the audit event system in GOV.UK One Login's credential issuers
(CRIs).

Audit events are published by pushing to the audit event SQS queue deployed as part of the
[TxMA stack](https://github.com/govuk-one-login/ipv-cri-common-infrastructure/blob/main/txma/template.yaml).

For a reference on audit event properties, see the
[GOV.UK One Login event catalogue](https://event-catalogue.internal.account.gov.uk/attributes/).

Further information, changelog and source code can be found in the
[GitHub repository](https://github.com/govuk-one-login/ipv-cri-ts-common/blob/main/packages/cri-audit).

## Usage

The following functions are exported:

| Function                   | Purpose                                                                                            |
| -------------------------- | -------------------------------------------------------------------------------------------------- |
| `buildAndSendAuditEvent()` | Combining the three below functions to construct and send an audit event in a single function call |
| `sendAuditEvent()`         | Sending a given audit event to SQS                                                                 |
| `buildBaseAuditEvent()`    | Constructing the base values required for all audit events, given the event name and component ID  |
| `buildAuditUser()`         | Constructing the `user` property of an audit event, given a `SessionItem`                          |

`buildAndSendAuditEvent()` is the recommended way of using this package, but the other functions are exported to allow
modification to the event, for cases where special fields need to be set outside of `extensions`, `restricted` or
`evidence` (eg, `user.phone`).

All functions are strongly typed, so should be fairly self-explanatory. Audit event types are also exported, so can be
used when constructing audit events.

The package is very small, so for implementation questions see the
[source code](https://github.com/govuk-one-login/ipv-cri-ts-common/blob/main/packages/cri-audit/src/index.ts).

## Running integration tests

Authenticate your AWS CLI with the right account and set the following environment variables:

- `TEST_HARNESS_EXECUTE_URL`
- `SQS_QUEUE_URL`

and use the following command:

`npm run test:integration`

## Module syntax

This module is currently built to both CJS and ESM standards, so should work universally. However, we expect be moving
to ESM-only in the near future.
npm package: @govuk-one-login/cri-metrics
Description: This package exports a number of basic utilities for use when publishing AWS CloudWatch metrics in GOV.UK One Login's credential issuers (CRIs).
Latest version: 1.0.1

# `@govuk-one-login/cri-metrics`

This package exports a number of basic utilities for use when publishing AWS CloudWatch metrics in GOV.UK One Login's
credential issuers (CRIs).

Further information and source code can be found in the
[GitHub repository](https://github.com/govuk-one-login/ipv-cri-ts-common/blob/main/packages/cri-metrics).

## Usage

> [!WARNING]
>
> Metrics are not sent to CloudWatch immediately. They are collected in memory and only 'flushed' to CloudWatch as a
> batch when explicitly instructed to do so.
>
> It is recommended to either use the `@metrics.logMetrics()` class decorator on your Lambda handler, or to call the
> `metrics.publishStoredMetrics()` function at the end of the handler.
>
> It is also necessary to manually request that cold start metrics are recorded - this can be done automatically by
> passing `{ captureColdStartMetric: true }` to the class decorator.
>
> For more information, see the
> [documentation](https://docs.aws.amazon.com/powertools/typescript/latest/features/metrics/) for the underlying
> `@aws-lambda-powertools/metrics` module.

The following functions are exported:

| Utility            | Purpose                                                                                                                                                                    |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `captureMetric()`  | Captures a metric with a given name, and optional value and unit. NB: Metrics captured this way must be flushed at the end of the Lambda execution.                        |
| `captureLatency()` | Executes a callback, measures the time taken and publishes a metric with the response time. The latency metric is a `singleMetric` and is therefore flushed straight away. |
| `metrics`          | The underlying Lambda Powertools instance. Use this to configure the underlying Powertools module, most importantly by configuring the flushing of metrics.                |

## Module syntax

This module is currently built to both CJS and ESM standards, so should work universally. However, we expect be moving
to ESM-only in the near future.
npm package: @govuk-one-login/cri-test-resources-helpers
Description: A resources package used to provide helper functions for the integration tests against the `test-resources` stack.
Latest version: 1.0.2

# `@govuk-one-login/cri-test-resources-helpers`

A resources package used to provide helper functions for the integration tests against the `test-resources` stack.

Further information, changelog and source code can be found in the
[GitHub repository](https://github.com/govuk-one-login/ipv-cri-ts-common/blob/main/packages/cri-test-resources-helpers).

## Usage

The following functions are exported:

| Function                     | Purpose                                                                                                                                     |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `pollForTestHarnessEvents()` | Invokes the `TEST_HARNESS_EXECUTE_API` to retrieve the events that were sent to the SQS queue and then processed by the the dequeue lambda. |

## Module syntax

This module is currently built to both CJS and ESM standards, so should work universally. However, we expect be moving
to ESM-only in the near future.
npm package: @govuk-one-login/cri-types
Description: This package exports useful types and interfaces for the development of GOV.UK One Login credential issuers (CRIs).
Latest version: 1.0.1

# `@govuk-one-login/cri-types`

This package exports useful types and interfaces for the development of GOV.UK One Login credential issuers (CRIs).

Further information, changelog and source code can be found in the
[GitHub repository](https://github.com/govuk-one-login/ipv-cri-ts-common/blob/main/packages/cri-types).

## Module syntax

This module is currently built to both CJS and ESM standards, so should work universally. However, we expect be moving
to ESM-only in the near future.
npm package: @govuk-one-login/event-catalogue-utils
Description: [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=govuk-one-login_event-catalogue-utils&metric=coverage)](https://sonarcloud.io/summary/overall?id=govuk-one-login_event-catalogue-utils)
Author: DI Frontend Capability Team
Latest version: 0.3.0

[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=govuk-one-login_event-catalogue-utils&metric=coverage)](https://sonarcloud.io/summary/overall?id=govuk-one-login_event-catalogue-utils)

# @govuk-one-login/event-catalogue-utils
npm package: @govuk-one-login/frontend-passthrough-headers
Description: Headers for the frontend package to passthrough to downstream services
Author: DI Frontend Capability Team
Latest version: 1.3.2

[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=govuk-one-login_frontend-passthrough-headers&metric=coverage)](https://sonarcloud.io/summary/overall?id=govuk-one-login_frontend-passthrough-headers)


# @govuk-one-login/frontend-passthrough-headers

## Purpose

@govuk-one-login/frontend-passthrough-headers is a set of functions to extract pass-through headers that should be passed through our frontends to our backends.

## Table of Contents

1. [Installation](#installation)
2. [How to use](#how-to-use)
3. [Issues](#issues)

## Installation

Add to your project using `npm i @govuk-one-login/frontend-passthrough-headers`

## How to use

### createPersonalDataHeaders

> [!WARNING]
> This function extracts headers that contain Personal Data. It must not be passed through to API calls to external services.

#### Optional: Logger Configuration

The frontend-passthrough-headers library allows you to set a custom logger or use the default pino logger.

Setting a Custom Logger

Use the setCustomLogger function to configure a custom logger. The custom logger must implement the following interface:

```
export type CustomLogger = {
  trace: (message: string) => void;
  warn: (message: string) => void;
};

```

Example:

```

import { setCustomLogger } from "@govuk-one-login/frontend-passthrough-headers";

const customLogger = {
  trace: (message: string) => console.log(`TRACE: ${message}`),
  warn: (message: string) => console.warn(`WARN: ${message}`),
};

setCustomLogger(customLogger);

```

Default Logger

If no custom logger is set, a pino logger is used with:
	•	Name: @govuk-one-login/frontend-passthrough-headers
	•	Log Level: process.env.LOG_LEVEL or process.env.LOGS_LEVEL (defaults to warn).


By default, the logger is initialised only once, and calling setCustomLogger again will log a warning.

## Issues

Please raise any issues on the [GitHub repo](https://github.com/govuk-one-login/frontend-passthrough-headers).
npm package: @govuk-react-bjss-pttg/api-docs
Description: govuk-react: A port of the govuk-frontend components for React using styled-components.
Author: Alasdair McLeay
Latest version: 0.10.7

# api-docs

This package helps generate API docs in markdown based on our React component definitions.

## Contributing

> These contributing docs are for contributing to the api-docs package. If you want to update the API docs instead, you just need to run `yarn docs`.

First, run `yarn` to install the relevant dependencies.

After you change this package, to see the effect of your changes on the docs you must run `yarn build` to output files into `/dist`, before regenerating the docs with `yarn docs`.
npm package: @govuk-react-bjss-pttg/details
Description: Renders a styled details element along with summary from prop and children rendered as contents.
Author: Alasdair McLeay
Latest version: 0.10.7

Details
=======

### Import
```js
  import Details from '@govuk-react-bjss-pttg/details';
```
<!-- STORY -->

Make a page easier to scan by letting users reveal more detailed information only if they need it.

- https://govuk-react.github.io/govuk-react/?path=/docs/details
- https://design-system.service.gov.uk/components/details/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```undefined``` | ReactNode | The content that will be displayed when details are revealed
 `open` |  | ```undefined``` | boolean | Flag to indicate whether to show component open by default
 `summary` | true |  | ReactNode | Text for the details summary link e.g. Help with nationality
npm package: @govuk-react-bjss-pttg/fieldset
Description: govuk-react Fieldset component.
Author: Steve Sims
Latest version: 0.10.7

Fieldset
========

### Import
```js
  import Fieldset from '@govuk-react-bjss-pttg/fieldset';
```
<!-- STORY -->

Use the fieldset component when you need to show a relationship between multiple
form inputs. For example, you may need to group a set of text inputs into a single
fieldset when [asking for an address](https://design-system.service.gov.uk/patterns/addresses).

- https://govuk-react.github.io/govuk-react/?path=/docs/fieldset
- https://design-system.service.gov.uk/components/fieldset/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `padding` |  |  | Padding \| Padding[] |
npm package: @govuk-react-bjss-pttg/file-upload
Description: File input component with label expected as children.
Author: Alasdair McLeay
Latest version: 0.10.7

FileUpload
==========

### Import
```js
  import FileUpload from '@govuk-react-bjss-pttg/file-upload';
```
<!-- STORY -->

Help users select and upload a file.

- https://govuk-react.github.io/govuk-react/?path=/docs/file-upload
- https://design-system.service.gov.uk/components/file-upload/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `acceptedFormats` |  | ```undefined``` | string | 
 `error` |  |  | boolean | Apply error state styling to the component
 `hint` |  | ```undefined``` | string | Optional hint text
 `key` |  |  | Key | 
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `meta` |  | ```{}``` | { error?: string \| string[]; touched?: boolean; } | Final form meta object, pending adjustment/removal
 `name` |  | ```undefined``` | string | 
 `onChange` |  | ```undefined``` | ChangeEventHandler<HTMLInputElement> | 
 `padding` |  |  | Padding \| Padding[] | 
 `ref` |  |  | Ref<HTMLInputElement> |
npm package: @govuk-react-bjss-pttg/global-style
Description: A Styled Component to apply global style for use with govuk-react.
Author: Alasdair McLeay
Latest version: 0.10.7

GlobalStyle
===========

### Import
```js
  import GlobalStyle from '@govuk-react-bjss-pttg/global-style';
```
<!-- STORY -->

A Styled Component to apply global style for use with govuk-react.

- https://govuk-react.github.io/govuk-react/?path=/docs/global-style

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `suppressMultiMountWarning` |  |  | boolean | 
 `theme` |  |  | DefaultTheme |
npm package: @govuk-react-bjss-pttg/main
Description: Styled container which aligns to topNav component, is centered, and provides top padding.
Author: Toby Brancher
Latest version: 0.10.7

Main
====

### Import
```js
  import Main from '@govuk-react-bjss-pttg/main';
```
<!-- STORY -->

Provides a container which aligns to the TopNav component, is centered, and provides top padding.

Note, this equivalent to 'width-container' from govuk-frontend.

- https://govuk-react.github.io/govuk-react/?path=/docs/main
- https://design-system.service.gov.uk/styles/layout/#page-wrappers

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```undefined``` | ReactNode | Child nodes for the page being built
npm package: @govuk-react-bjss-pttg/multi-choice
Description: Styled container for a group of radio buttons (the children), also accepting label, meta and hint props.
Author: Alasdair McLeay
Latest version: 0.10.7

MultiChoice
===========

### Import
```js
  import MultiChoice from '@govuk-react-bjss-pttg/multi-choice';
```
<!-- STORY -->

For wrapping a set of radio buttons with a label, optional hint and optional error.

- https://govuk-react.github.io/govuk-react/?path=/docs/multi-choice
- https://design-system.service.gov.uk/components/radios/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `hint` |  | ```undefined``` | string | 
 `label` | true |  | ReactNode | 
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `meta` |  | ```{}``` | { error?: string \| string[]; touched?: boolean; } | 
 `padding` |  |  | Padding \| Padding[] |
npm package: @govuk-react-bjss-pttg/table
Description: A styled table supporting a 'construction kit' approach and rendering children as constituent parts.
Author: Alasdair McLeay
Latest version: 0.10.7

Table
=====

### Import
```js
  import Table from '@govuk-react-bjss-pttg/table';
```
<!-- STORY -->

Use the table component to make information easier to compare and scan for users.

- https://govuk-react.github.io/govuk-react/?path=/docs/table
- https://design-system.service.gov.uk/components/table/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `body` |  | ```undefined``` | ReactNode | Table body rows and cells (for backward compatibility)
 `caption` |  | ```undefined``` | string | Table caption title
 `children` |  | ```undefined``` | ReactNode | Table body rows and cells (recommended way)
 `head` |  | ```undefined``` | ReactNode | Table header rows and cells
npm package: @govuk-react-bjss-pttg/tabs
Description: govuk-react Tabs component.
Author: David Murdoch
Latest version: 0.10.7

Tabs
====

### Import
```js
  import Tabs from '@govuk-react-bjss-pttg/tabs';
```
<!-- STORY -->

The tabs component lets users navigate between related sections of content, displaying one section at a time.

- https://govuk-react.github.io/govuk-react/?path=/docs/tabs
- https://design-system.service.gov.uk/components/tabs/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  |  | ReactNode | child components that will appear in the Tabs section
npm package: @govuk-react-bjss-pttg/text-area
Description: Styled textarea supporting additional parameters via props.
Author: Alasdair McLeay
Latest version: 0.10.7

TextArea
========

### Import
```js
  import TextArea from '@govuk-react-bjss-pttg/text-area';
```
<!-- STORY -->

Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.

- https://govuk-react.github.io/govuk-react/?path=/docs/text-area
- https://design-system.service.gov.uk/components/textarea/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `error` |  |  | boolean | Apply error state styling to the component
 `hint` |  | ```undefined``` | ReactNode | 
 `input` |  | ```{}``` | TextareaHTMLAttributes<HTMLTextAreaElement> | 
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `meta` |  | ```{}``` | { error?: string \| string[]; touched?: boolean; } | 
 `padding` |  |  | Padding \| Padding[] |
npm package: @govuk-react/breadcrumb
Description: Renders a styled container, unordered list and list items containing links passed as children.
Author: Alasdair McLeay
Latest version: 0.8.0

Breadcrumb
==========

### Import
```js
  import Breadcrumb from '@govuk-react/breadcrumb';
```
<!-- STORY -->

### Usage

This component is DEPRECATED.

Please use the `Breadcrumbs` component instead.

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Breadcrumb contents
npm package: @govuk-react/date-input
Description: Date input component displaying day, month and year and featuring several configurable options.
Author: Alasdair McLeay
Latest version: 0.2.12

DateInput
=========

### Import
```js
  import DateInput from '@govuk-react/date-input';
```
<!-- STORY -->

### Usage

Simple
```jsx
<DateInput>What is your date of birth?</DateInput>
```

Date with hint text
```jsx
<DateInput hintText="For example, 31 03 1980">
  What is your date of birth?
</DateInput>
```

Date with hint text & error
```jsx
<DateInput
  hintText="For example, 31 03 1980"
  errorText="Error message goes here"
>
  What is your date of birth?
</DateInput>
```

With custom input name props
```jsx
<DateInput inputNames={{ day: 'dayInputName' }} hintText="For example, 31 03 1980">
  What is your date of birth?
</DateInput>
```

### References:
- https://github.com/alphagov/govuk-frontend/tree/master/src/components/date-input

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | 
 `errorText` |  | ```undefined``` | string | Error text
 `hintText` |  | ```undefined``` | string | Optional hint text
 `inputNames` |  | ```{   day: 'dateInputDay',   month: 'dateInputMonth',   year: 'dateInputYear', }``` | shape[object Object] | Input name attributes
npm package: @govuk-react/error-summary
Description: Notice used to display form errors to user - also includes anchors to jump to relevant form sections.
Author: Tarandeep Singh Chauhan
Latest version: 0.10.7

ErrorSummary
============

### Import
```js
  import ErrorSummary from '@govuk-react/error-summary';
```
<!-- STORY -->

Use this component at the top of a page to summarise any errors a user has made.

- https://govuk-react.github.io/govuk-react/?path=/docs/error-summary
- https://design-system.service.gov.uk/components/error-summary/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `description` |  | ```undefined``` | string | Optional description of the errors
 `errors` |  | ```[]``` | { targetName?: string; text?: string; }[] | Array of errors with text and target element name to scroll into view when clicked
 `heading` |  | ```There is a problem``` | string | Heading text
 `onHandleErrorClick` |  | ```undefined``` | (targetName: string) => void | onClick function to scroll the target element into view
npm package: @govuk-react/fieldset
Description: govuk-react Fieldset component.
Author: Steve Sims
Latest version: 0.10.7

Fieldset
========

### Import
```js
  import Fieldset from '@govuk-react/fieldset';
```
<!-- STORY -->

Use the fieldset component when you need to show a relationship between multiple
form inputs. For example, you may need to group a set of text inputs into a single
fieldset when [asking for an address](https://design-system.service.gov.uk/patterns/addresses).

- https://govuk-react.github.io/govuk-react/?path=/docs/fieldset
- https://design-system.service.gov.uk/components/fieldset/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `padding` |  |  | Padding \| Padding[] |
npm package: @govuk-react/file-upload
Description: File input component with label expected as children.
Author: Alasdair McLeay
Latest version: 0.10.7

FileUpload
==========

### Import
```js
  import FileUpload from '@govuk-react/file-upload';
```
<!-- STORY -->

Help users select and upload a file.

- https://govuk-react.github.io/govuk-react/?path=/docs/file-upload
- https://design-system.service.gov.uk/components/file-upload/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `acceptedFormats` |  | ```undefined``` | string | 
 `error` |  |  | boolean | Apply error state styling to the component
 `hint` |  | ```undefined``` | string | Optional hint text
 `key` |  |  | Key | 
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `meta` |  | ```{}``` | { error?: string \| string[]; touched?: boolean; } | Final form meta object, pending adjustment/removal
 `name` |  | ```undefined``` | string | 
 `onChange` |  | ```undefined``` | ChangeEventHandler<HTMLInputElement> | 
 `padding` |  |  | Padding \| Padding[] | 
 `ref` |  |  | Ref<HTMLInputElement> |
npm package: @govuk-react/footer
Description: govuk-react Footer component.
Author: John Robertson
Latest version: 0.10.7

Footer
======

### Import
```js
  import Footer from '@govuk-react/footer';
```
<!-- STORY -->

The footer provides copyright, licensing and other information about your service and department.

- https://govuk-react.github.io/govuk-react/?path=/docs/footer
- https://design-system.service.gov.uk/components/footer/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```undefined``` | ReactNode | Footer navigation links
 `container` |  | ```Footer.WidthContainer``` | ElementType<any> | Override the default footer container component.<br/>`children`, `copyright` and `meta` will be placed inside this component.
 `copyright` |  | ```undefined``` | CopyrightProps | Copyright information
 `licence` |  | ```<Licence />``` | ReactNode | Licence content
 `meta` |  | ```undefined``` | ReactNode | Meta text and links
npm package: @govuk-react/global-style
Description: A Styled Component to apply global style for use with govuk-react.
Author: Alasdair McLeay
Latest version: 0.10.7

GlobalStyle
===========

### Import
```js
  import GlobalStyle from '@govuk-react/global-style';
```
<!-- STORY -->

A Styled Component to apply global style for use with govuk-react.

- https://govuk-react.github.io/govuk-react/?path=/docs/global-style

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `suppressMultiMountWarning` |  |  | boolean | 
 `theme` |  |  | DefaultTheme |
npm package: @govuk-react/header
Description: Outputs a styled heading tag of provided level, rendering children as contents.
Author: Alasdair McLeay
Latest version: 0.8.0

Header
======

### Import
```js
  import Header from '@govuk-react/header';
```
<!-- STORY -->

### Usage

This component is DEPRECATED.

Please use the `Heading` component instead.

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `level` |  | ```1``` | number | Semantic heading level value between 1 and 6
 `size` |  | ```undefined``` | enum(...Object.keys(HEADING_SIZES) \| ...Object.keys(TYPOGRAPHY_SCALE)) | Visual size level, accepts:<br/>   `XLARGE`, `LARGE`, `MEDIUM`, `SMALL`, `XL`, `L`, `M`, `S`<br/>   or a numeric size that fits in the GDS font scale list
npm package: @govuk-react/images
Description: govuk-react: A port of the govuk-frontend components for React using styled-components.
Author: Alasdair McLeay
Latest version: 0.7.7

Use of images is dependent on the build system of the parent project and are not exported/included by default.

They are used for development purposes when running Storybook and can be utilised by a parent project as follows:

```
import iconPointer from '@govuk-react/images/icon-pointer.png'

...

<Button iconUrl={iconPointer} start>Start now</Button>

```
npm package: @govuk-react/input-field
Description: Styled composite component displaying an input with a label and hint text and error text depending on props.
Author: Alasdair McLeay
Latest version: 0.10.7

InputField
==========

### Import
```js
  import InputField from '@govuk-react/input-field';
```
<!-- STORY -->

Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number.

- https://govuk-react.github.io/govuk-react/?path=/docs/input-field
- https://design-system.service.gov.uk/components/text-input/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `error` |  |  | boolean | Apply error state styling to the component
 `hint` |  | ```undefined``` | ReactNode | 
 `input` |  | ```{}``` | InputProps | 
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `meta` |  | ```{}``` | { error?: string \| string[]; touched?: boolean; } | 
 `padding` |  |  | Padding \| Padding[] |
npm package: @govuk-react/layout
Description: Component intended to surround grid layouts but now no longer used/required.
Author: Alasdair McLeay
Latest version: 0.8.0

Layout
======

### Import
```js
  import Layout from '@govuk-react/layout';
```
<!-- STORY -->

THIS COMPONENT IS NO LONGER REQUIRED TO ACHIEVE LAYOUT;
1. `GridCol` contains the required gutters, we do not need to provide additional gutter
to build an accurate grid layout.

2. `GridRow` contains the required `display: flex;` and associated properties for `GridCol`.

3. `Main` contains the required properties to center a container that matches up with `TopNav`
and house the remaining body of content for the page.

If you feel you may still need a `Layout` component, please do raise a ticket on [Github](https://github.com/govuk-react/govuk-react/issues/177)

### Usage

This component provides default padding.
You can use this component to wrap Grid components however it is not required.

Simple usage
```jsx
import GridRow from '@govuk-react/grid-row';
import GridCol from '@govuk-react/grid-col';

<Layout>
  <GridRow>
    <GridCol>
      ...
    </GridCol>
  </GridRow>
</Layout>
```

### References:
- https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_grid_layout.scss
- https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_layout.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | GridRow and GridCol children nodes
npm package: @govuk-react/multi-choice
Description: Styled container for a group of radio buttons (the children), also accepting label, meta and hint props.
Author: Alasdair McLeay
Latest version: 0.10.7

MultiChoice
===========

### Import
```js
  import MultiChoice from '@govuk-react/multi-choice';
```
<!-- STORY -->

For wrapping a set of radio buttons with a label, optional hint and optional error.

- https://govuk-react.github.io/govuk-react/?path=/docs/multi-choice
- https://design-system.service.gov.uk/components/radios/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `hint` |  | ```undefined``` | string | 
 `label` | true |  | ReactNode | 
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `meta` |  | ```{}``` | { error?: string \| string[]; touched?: boolean; } | 
 `padding` |  |  | Padding \| Padding[] |
npm package: @govuk-react/page
Description: Provides Page wrapper components.
Author: Alasdair McLeay
Latest version: 0.10.7

Page
====

### Import
```js
  import Page from '@govuk-react/page';
```
<!-- STORY -->

Use this template to keep your pages consistent with the rest of GOV.UK.

- https://govuk-react.github.io/govuk-react/?path=/docs/page
- https://design-system.service.gov.uk/styles/page-template/
- https://design-system.service.gov.uk/styles/layout/#page-wrappers

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `beforeChildren` |  | ```undefined``` | ReactNode | Content that needs to appear outside the main page wrapper (see `main`).<br/>For example: A back link component, breadcrumbs, phase banner component
 `children` |  | ```undefined``` | ReactNode | Page contents
 `container` |  | ```Page.WidthContainer``` | ElementType<any> | Override the default page container component.<br/>`beforeChildren` and `children` (wrapped in `main`) will be placed inside this component.
 `footer` |  | ```undefined``` | ReactNode | Override the default page footer component.
 `header` |  | ```<TopNav />``` | ReactNode | Override the default page header component.
 `id` |  | ```content``` | string | ID for page content
 `main` |  | ```Page.Main``` | ElementType<any> | Override the default wrapper component for main page content
npm package: @govuk-react/panel
Description: Styled panel accepting a heading string and an array of body text as strings or mark-up.
Author: Alasdair McLeay
Latest version: 0.10.7

Panel
=====

### Import
```js
  import Panel from '@govuk-react/panel';
```
<!-- STORY -->

The panel component is a visible container used on confirmation or results pages to highlight important content.

- https://govuk-react.github.io/govuk-react/?path=/docs/panel
- https://design-system.service.gov.uk/components/panel/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```undefined``` | ReactNode | Panel body text
 `title` | true |  | string | Panel title text
npm package: @govuk-react/phase-badge
Description: Badge with solid background and bold text, rendered from children.
Author: Alasdair McLeay
Latest version: 0.5.1

PhaseBadge
==========

### Import
```js
  import PhaseBadge from '@govuk-react/phase-badge';
```
<!-- STORY -->

### Usage

Simple
```jsx
<PhaseBadge>beta</PhaseBadge>
```

### References:
- https://govuk-elements.herokuapp.com/alpha-beta-banners/
npm package: @govuk-react/phase-banner
Description: Banner with solid background and bold text, rendered from children.
Author: Alasdair McLeay
Latest version: 0.10.7

PhaseBanner
===========

### Import
```js
  import PhaseBanner from '@govuk-react/phase-banner';
```
<!-- STORY -->

Use the phase banner component to show users your service is still being worked on.

- https://govuk-react.github.io/govuk-react/?path=/docs/phase-banner
- https://design-system.service.gov.uk/components/phase-banner/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  |  | ReactNode | Children text and links
 `level` | true |  | string | Alpha or beta banner
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `padding` |  |  | Padding \| Padding[] |
npm package: @govuk-react/select
Description: Styled select menu, taking its options as children and with various configurable parameters via props.
Author: Alasdair McLeay
Latest version: 0.10.7

Select
======

### Import
```js
  import Select from '@govuk-react/select';
```
<!-- STORY -->

The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.

- https://govuk-react.github.io/govuk-react/?path=/docs/select
- https://design-system.service.gov.uk/components/select/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `error` |  |  | boolean | Apply error state styling to the component
 `errorText` |  | ```undefined``` | string | 
 `hint` |  | ```undefined``` | ReactNode | 
 `input` |  | ```{}``` | SelectHTMLAttributes<HTMLSelectElement> | 
 `label` | true |  | string | 
 `margin` |  |  | Margin \| Margin[] | 
 `mb` |  |  | string \| number | 
 `meta` |  | ```{}``` | { error?: string \| string[]; touched?: boolean; } | 
 `padding` |  |  | Padding \| Padding[] |
npm package: @govuk-react/table
Description: A styled table supporting a 'construction kit' approach and rendering children as constituent parts.
Author: Alasdair McLeay
Latest version: 0.10.7

Table
=====

### Import
```js
  import Table from '@govuk-react/table';
```
<!-- STORY -->

Use the table component to make information easier to compare and scan for users.

- https://govuk-react.github.io/govuk-react/?path=/docs/table
- https://design-system.service.gov.uk/components/table/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `body` |  | ```undefined``` | ReactNode | Table body rows and cells (for backward compatibility)
 `caption` |  | ```undefined``` | string | Table caption title
 `children` |  | ```undefined``` | ReactNode | Table body rows and cells (recommended way)
 `head` |  | ```undefined``` | ReactNode | Table header rows and cells