open-index/open-npm huggingface dataset:
npm package: @slice-and-dice/govuk-react-back-link
Description: Styled anchor with left-pointing triangle, children rendered as text and optional click handler.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

BackLink
========

### Import
```js
  import BackLink from '@govuk-react/back-link';
```
<!-- STORY -->

### Usage

Simple
```jsx
<BackLink>Back</BackLink>
```

With custom click handler
```jsx
<BackLink onClick={this.myCustomFunction}>Back</BackLink>
```

With `href` attribute
```jsx
<BackLink href='#'>Back</BackLink>
```

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

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```'Back'``` | string | Text that will appear in the back link
 `onClick` |  | ```undefined``` | func | Custom function to run when the `onClick` event is fired
npm package: @slice-and-dice/govuk-react-breadcrumb
Description: Renders a styled container, unordered list and list items containing links passed as children.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

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: @slice-and-dice/govuk-react-breadcrumbs
Description: Displays a list of breadcrumbs.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Breadcrumbs
===========

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

### Usage

Simple
```jsx
<Breadcrumbs>
  <Breadcrumbs.Link href="/section">Section</Breadcrumbs.Link>
  <Breadcrumbs.Link href="/section/sub-section">Sub-section</Breadcrumbs.Link>
  Current page
</Breadcrumbs>
```

Providing links with, or without React Router
```jsx
import { Link } from 'react-router-dom';

<Breadcrumbs>
  <Breadcrumbs.Link as={Link} to="/section">Section</Breadcrumbs.Link>
  <Breadcrumbs.Link href="/section">Sub-section</Breadcrumbs.Link>
</Breadcrumbs>
```

### References:
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/breadcrumbs/_breadcrumbs.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Breadcrumbs contents
npm package: @slice-and-dice/govuk-react-button
Description: Styled button component with configurable properties.
Author: Alasdair McLeay
Latest version: 0.7.3
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Button
======

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

### Usage

Simple
```jsx
<Button>My button text</Button>
```

With Icon
```jsx
import { ButtonArrow } from '@govuk-react/icons';

<Button icon={<ButtonArrow />}>My button text</Button>
```

### References:
- https://design-system.service.gov.uk/components/button/
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/button/_button.scss

### TODO:
- Remove cascade styling for nested elements, specifically `svg`
- Consider ensuring text colour automatically switches between black/white based on WCAG guidance
  - see https://www.w3.org/TR/WCAG20-TECHS/G18.html
  - can use Polished's `readableColor` call, but translate their black to govuk's black

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `buttonColour` |  | ```undefined``` | string | Override for default button colour
 `buttonHoverColour` |  | ```undefined``` | string | Override for default button hover colour,<br/>which defaults to `buttonColour` darkened by 5%
 `buttonShadowColour` |  | ```undefined``` | string | Override for default button shadow colour,<br/>which defaults to `buttonColour` darkened by 15%
 `buttonTextColour` |  | ```undefined``` | string | Override for default button text colour,<br/>which defaults to govuk white
 `children` | true | `````` | node | Button text
 `disabled` |  | ```false``` | bool | Renders a disabled button and removes pointer events if set to true
 `icon` |  | ```undefined``` | node | Button icon
 `start` |  | ```false``` | bool | Renders a large button if set to true
npm package: @slice-and-dice/govuk-react-caption
Description: Renders children passed inside a styled span element.
Author: Steve Sims
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Caption
=======

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

### Usage

Simple
```jsx
<Caption>Caption heading text</Caption>
```

With another header
```jsx
import { H1 } from '@govuk-react/heading';

<Caption size="XL">Supporting header text</Caption>
<H1>Main header text</H1>
```

### References
- https://github.com/alphagov/govuk-frontend/blob/master/src/core/_typography.scss
- https://design-system.service.gov.uk/styles/typography/#headings

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | string | Text to be rendered as a caption
 `size` |  | ```'XL'``` | enum(...Object.keys(CAPTION_SIZES) \| ...Object.keys(TYPOGRAPHY_SCALE)) | Visual size level, accepts:<br/>   `XLARGE`, `LARGE`, `MEDIUM`, `XL`, `L`, `M`<br/>   or a numeric size that fits in the GDS font scale list
npm package: @slice-and-dice/govuk-react-checkbox
Description: Styled checkbox component, also displaying label.
Author: Alasdair McLeay
Latest version: 0.7.2
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Checkbox
========

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

### Usage

Simple
```jsx
<Checkbox>Text displayed next to checkbox</Checkbox>
```

With disabled state
```jsx
<Checkbox disabled="disabled">Disabled checkbox option</Checkbox>
```

Checkbox preselected
```jsx
<Checkbox defaultChecked>Farm or agricultural waste</Checkbox>
```

Checkbox preselected & disabled
```jsx
<Checkbox disabled="disabled" defaultChecked>Farm or agricultural waste</Checkbox>
```

Checkbox with hint text
```jsx
<Checkbox hint="including English, Scottish, Welsh and Northern Irish">British</Checkbox>
```
### References:
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/checkboxes/_checkboxes.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Text content for checkbox
 `className` |  | ```undefined``` | string | CSS Classname for outermost container
 `hint` |  | ```undefined``` | node |
npm package: @slice-and-dice/govuk-react-date-field
Description: Date field component displaying day, month and year and featuring several configurable options.
Author: Alasdair McLeay
Latest version: 0.7.3
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

DateField
=========

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

### Usage

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

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

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

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

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

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | 
 `defaultValues` |  | ```{   day: undefined,   month: undefined,   year: undefined, }``` | custom | 
 `errorText` |  | ```undefined``` | string | Error text
 `hintText` |  | ```undefined``` | string | Optional hint text
 `input` |  | ```undefined``` | shape[object Object] | Properties that are sent to the input, matching final form and redux form input type
 `inputNames` |  | ```{   day: undefined,   month: undefined,   year: undefined, }``` | shape[object Object] | Input name attributes
npm package: @slice-and-dice/govuk-react-details
Description: Renders a styled details element along with summary from prop and children rendered as contents.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Details
=======

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

### Usage


Simple
```jsx
<Details summary="Help with nationality">
  I am a paragraph of hidden details, to be revealed when summary is clicked
</Details>
```

### References
- https://design-system.service.gov.uk/components/details/
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/details/_details.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```undefined``` | node | The content that will be displayed when details are revealed
 `open` |  | ```false``` | bool | Flag to indicate whether to show component open by default
 `summary` | true | `````` | node | Text for the details summary link e.g. Help with nationality
npm package: @slice-and-dice/govuk-react-document-footer-metadata
Description: Renders styled document footer metadata from props provided.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

DocumentFooterMetadata
======================

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

### Usage


Simple
```jsx
import { Link } from '@govuk-react/link';

const fromData = [
  <Link href="/government/organisations/ministry-of-defence">
    Ministry of Defence
  </Link>,
];

<DocumentFooterMetadata from={fromData} />
```


DFM From & part of example
```jsx
import { Link } from '@govuk-react/link';

const fromData = [
  <Link href="/government/organisations/ministry-of-defence">
    Ministry of Defence
  </Link>,
];
const partOfData = [
  <Link href="/government/topics/energy">Energy</Link>,
  <Link href="/government/topics/environment">Environment</Link>,
];

<DocumentFooterMetadata from={fromData} partOf={partOfData} />
```


DFM From & other data example
```jsx
import { Link } from '@govuk-react/link';

const fromData = [
  <Link href="/government/organisations/ministry-of-defence">
    Ministry of Defence
  </Link>,
];
const otherData = [
  {
    id: 0,
    title: 'Consultation type',
    content: <Link href="/government/publications">Open</Link>,
  },
  {
    id: 1,
    title: 'Published',
    content: '20 January 2012',
  },
];

<DocumentFooterMetadata from={fromData} other={otherData} />
```

### References:
- https://govuk-static.herokuapp.com/component-guide/document_footer

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `from` |  | ```undefined``` | arrayOf[object Object] | Array of JSX nodes to render underneath the `from:` title
 `other` |  | ```undefined``` | arrayOf[object Object] | Array of Objects for any additional items, each object should contain an `id`, `title` and `content` property
 `partOf` |  | ```undefined``` | arrayOf[object Object] | Array of JSX nodes to render underneath the `part of:` title
npm package: @slice-and-dice/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.7.3
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

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

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

### Usage

Simple
```jsx
const heading = 'Message to alert the user to a problem goes here';
const description = 'Optional description of the errors and how to correct them';
const errors = [
  {
    targetName: 'national-insurance-number',
    text: 'National Insurance number error',
  },
  {
    targetName: 'description',
    text: 'Description of what you saw error',
  },
];

const onHandleErrorClick = (targetName) => {
  document.getElementsByName(targetName)[0].scrollIntoView();
};

<div>
  <ErrorSummary
    heading={heading}
    description={description}
    onHandleErrorClick={onHandleErrorClick}
    errors={errors}
  />
  <InputField
    name="national-insurance-number"
    hint="It’s on your National Insurance card, benefit letter, payslip or P60."
  >
    National Insurance number
  </InputField>
  <br />
  <TextArea name="description">Description of what you saw</TextArea>
</div>
```

### References:
- https://govuk-elements.herokuapp.com/errors/#summarise-errors
- https://github.com/alphagov/govuk-frontend/tree/master/src/components/error-summary

### TODO:
- Swap out browser dependancy for context API to help with React Native support

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `description` |  | `````` | string | Optional description of the errors
 `errors` |  | `````` | arrayOf[object Object] | Array of errors with text and target element name to scroll into view when clicked
 `heading` |  | ```'There is a problem'``` | string | Heading text
 `onHandleErrorClick` |  | `````` | func | onClick function to scroll the target element into view
npm package: @slice-and-dice/govuk-react-error-text
Description: Renders a styled span element containing children provided.
Author: Alasdair McLeay
Latest version: 0.7.2
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

ErrorText
=========

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

### Usage


Simple
```jsx
<ErrorText>Example</ErrorText>
```

### References
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/error-message/_error-message.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | string | Text to describe the error
npm package: @slice-and-dice/govuk-react-fieldset
Description: govuk-react Fieldset component.
Author: Steve Sims
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Fieldset
========

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

### Usage

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.

Simple
```jsx
<Fieldset>
  <Fieldset.Legend>Example</Fieldset.Legend>
</Fieldset>
```

The `Fieldset.Legend` sub-component supports a `size` prop compatible with Heading
and a `isPageHeading` prop for use when you wish your legend to be used as a page heading

Custom legend
```jsx
<Fieldset>
  <Fieldset.Legend size="XL" isPageHeading>Legend as page heading</Fieldset.Legend>
</Fieldset>
```

### References
- https://design-system.service.gov.uk/components/fieldset/
- https://github.com/alphagov/govuk-frontend/tree/master/src/components/fieldset
- https://design-system.service.gov.uk/get-started/labels-legends-headings/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node |
npm package: @slice-and-dice/govuk-react-file-upload
Description: File input component with label expected as children.
Author: Alasdair McLeay
Latest version: 0.7.2
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

FileUpload
==========

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

### Usage

Simple
```jsx
<FileUpload name="group0">Upload a document</FileUpload>
```

Input with hint text
```jsx
<FileUpload
  name="group1"
  acceptedFormats=".jpg, .png"
  hint={['This can be in either JPG or PNG format']}
>
  Upload a photo
</FileUpload>
```

Input with hint text & error
```jsx
const meta = {
  touched: true,
  error: 'Example',
};

<FileUpload
  name="group1"
  acceptedFormats=".jpg, .png"
  hint={['This can be in either JPG or PNG format']}
  meta={meta}
>
  Upload a photo
</FileUpload>
```

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

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `acceptedFormats` |  | ```undefined``` | string | 
 `children` | true | `````` | node | 
 `hint` |  | ```undefined``` | string | Optional hint text
 `meta` |  | ```{}``` | shape[object Object] | Final form meta object, pending adjustment/removal
npm package: @slice-and-dice/govuk-react-footer
Description: govuk-react Footer component.
Author: John Robertson
Latest version: 0.7.2
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Footer
======

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

### Usage

Simple
```jsx
<Footer />
```

Footer with Copyright information
```jsx
// Import self hosted copyright image
import crest from './govuk-crest.png';

<Footer
  copyright={{
    text: 'Crown copyright',
    link:
      'https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/',
    image: {
      source: crest,
      height: 102,
      width: 125,
    },
  }}
/>;
```

Footer with navigation.  There is also the option to provide footer links with, or without React/Reach Router.
```jsx
import { Link } from 'react-router-dom';

<Footer>
  <Footer.Navigation>
    <Footer.NavigationLinks heading="Two column list" listColumns={2}>
      <Footer.Link href="/">Navigation item 1</Footer.Link>
      <Footer.Link to="/footer-nav-item-2" as={Link}>Navigation item 2 (Router Link)</Footer.Link>
      <Footer.Link href="/">Navigation item 3</Footer.Link>
      <Footer.Link href="/">Navigation item 4</Footer.Link>
      <Footer.Link href="/">Navigation item 5</Footer.Link>
      <Footer.Link href="/">Navigation item 6</Footer.Link>
    </Footer.NavigationLinks>
    <Footer.NavigationLinks heading="Single column list">
      <Footer.Link href="/">Navigation item 1</Footer.Link>
      <Footer.Link href="/">Navigation item 2</Footer.Link>
      <Footer.Link href="/">Navigation item 3</Footer.Link>
    </Footer.NavigationLinks>
  </Footer.Navigation>
</Footer>
```

Footer with links in meta area
```jsx
<Footer meta={
    <Footer.MetaLinks heading="Support links">
      <Footer.Link href="/">Item 1</Footer.Link>
      <Footer.Link to="/footer-meta-item-2" as={Link}>Item 2 (Router Link)</Footer.Link>
      <Footer.Link href="/">Item 3</Footer.Link>
    </Footer.MetaLinks>
  }
/>
```

Footer with custom content in meta area
```jsx
<Footer meta={
    <Footer.MetaCustom>
      Built by the <Footer.Link href="/">Government Digital Service</Footer.Link>
    </Footer.MetaCustom>
  }
/>
```

NB <Footer.Link /> is styled extention of @govuk-react/link

### References:
- https://design-system.service.gov.uk/components/footer/
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/footer/template.njk
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/footer/_footer.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```undefined``` | node | Footer navigation links
 `container` |  | ```Footer.WidthContainer``` | func | Override the default footer container component.<br/>`children`, `copyright` and `meta` will be placed inside this component.
 `copyright` |  | ```undefined``` | shape[object Object] | Copyright information
 `meta` |  | ```undefined``` | node | Meta text and links
npm package: @slice-and-dice/govuk-react-form-group
Description: govuk-react FormGroup component.
Author: Steve Sims
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

FormGroup
=========

### Import
```js
  import FormGroup from '@govuk-react/form-group';
```
<!-- STORY -->

### Usage

Simple
```jsx
import Checkbox from '@govuk-react/checkbox';

<FormGroup>
  <Checkbox name="group-1">Example</Checkbox>
</FormGroup>
```

### References
- https://github.com/alphagov/govuk-frontend/blob/master/src/objects/_form-group.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | 
 `error` |  | ```false``` | bool |
npm package: @slice-and-dice/govuk-react-grid-col
Description: GridCol component for use inside GridRow component - includes media query breakpoints.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

GridCol
=======

### Import
```js
  import GridCol from '@govuk-react/grid-col';
```
<!-- STORY -->

Should always be wrapped by `GridRow`. Will always render a column at full width if
the browser width is below the `TABLET` breakpoint.

NB our grid is based on flex-box, which differs from govuk-frontend, which instead uses
floats, however it is otherwise similar to use.

### Usage

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

<Fragment>
  <GridRow>
    <GridCol>
      ...
    </GridCol>
  </GridRow>
  <GridRow>
    <GridCol setWidth="one-half">
      ...
    </GridCol>
    <GridCol setWidth="one-quarter">
      ...
    </GridCol>
    <GridCol setWidth="one-quarter">
      ...
    </GridCol>
  <GridRow>
    <GridCol setWidth="one-third">
      ...
    </GridCol>
    <GridCol setWidth="two-thirds">
      ...
    </GridCol>
  </GridRow>
  <GridRow>
    <GridCol setWidth="one-third" setDesktopWidth="one-quarter">
      ...
    </GridCol>
    <GridCol setWidth="two-thirds" setDesktopWidth="auto">
      ...
    </GridCol>
  </GridRow>
</Fragment>
```

### 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` |  | ```undefined``` | node | GridCol content
 `columnFull` |  | ```false``` | bool | Dimension setting for the column (deprecated)
 `columnOneHalf` |  | ```false``` | bool | Dimension setting for the column (deprecated)
 `columnOneQuarter` |  | ```false``` | bool | Dimension setting for the column (deprecated)
 `columnOneThird` |  | ```false``` | bool | Dimension setting for the column (deprecated)
 `columnThreeQuarters` |  | ```false``` | bool | Dimension setting for the column (deprecated)
 `columnTwoThirds` |  | ```false``` | bool | Dimension setting for the column (deprecated)
 `setDesktopWidth` |  | ```undefined``` | union(string \| number \| enum) | Explicitly set desktop column to width using value or descriptive string<br/>(`one-quarter`, `one-third`, `one-half`, `two-thirds`, `three-quarters`, `full`)
 `setWidth` |  | ```undefined``` | union(string \| number \| enum) | Explicitly set column to width using value or descriptive string<br/>(`one-quarter`, `one-third`, `one-half`, `two-thirds`, `three-quarters`, `full`)
npm package: @slice-and-dice/govuk-react-grid-row
Description: GridRow component for use around GridCol components - includes media query breakpoints.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

GridRow
=======

### Import
```js
  import GridRow from '@govuk-react/grid-row';
```
<!-- STORY -->

### Usage

Example
* https://codesandbox.io/s/x917knwm4z

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

<Fragment>
  <GridRow>
    <GridCol>
      ...
    </GridCol>
  </GridRow>
</Fragment>
```

### 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 | One or more GridCol nodes
npm package: @slice-and-dice/govuk-react-header
Description: Outputs a styled heading tag of provided level, rendering children as contents.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

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: @slice-and-dice/govuk-react-heading
Description: Outputs a styled heading tag of provided level, rendering children as contents.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Heading
=======

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

### Usage


Simple
```jsx
<Heading>Heading text</Heading>
```

To pick different heading levels it is recommended to use the shortcut versions as
that will pick the appropriate tag as well as set the appropriate corresponding font size.

Using shortcuts
```jsx
import { H1, H2, H3, H4, H5, H6 } from "@slice-and-dice/govuk-react-heading";

<H1>h1</H1>
<H2>h2</H2>
<H3>h3</H3>
<H4>h4</H4>
<H5>h5</H5>
<H6>h6</H6>
```

Differing sizes
```jsx
<H6 size={80}>
  H6 with font size 80
</H6>
<Heading as="h2" size="SMALL">
  Heading as h2 with SMALL size
</Heading>
<H3 size="LARGE">H3 with LARGE size</H3>
```

Props pass through
```jsx
<Heading onClick={() => { console.log('clicked'); }}>Click me</Heading>
```

### References:
- https://design-system.service.gov.uk/styles/typography/#headings
- https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss
- https://github.com/alphagov/govuk-frontend/blob/master/src/core/_typography.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `as` |  | ```undefined``` | string | Semantic heading tag to use (e.g. 'h3')<br/>By default element used will be an 'h1'
 `level` |  | ```undefined``` | number | Semantic heading level value between 1 and 6 (deprecated)
 `size` |  | ```'XLARGE'``` | 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: @slice-and-dice/govuk-react-hint-text
Description: Renders a styled span element with children provided.
Author: Alasdair McLeay
Latest version: 0.7.3
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

HintText
========

### Import
```js
  import HintText from '@govuk-react/hint-text';
```
<!-- STORY -->

### Usage


Simple
```jsx
<HintText>Example</HintText>
```

### References
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/hint/_hint.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Text for the hint
npm package: @slice-and-dice/govuk-react-input
Description: Styled input component with optional type prop, defaulting to 'text'.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Input
=====

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

### Usage

Simple
```jsx
<Input />
```

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

### TODO:
- Remove `errorColor` and provide examples on how to extend the component

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `type` |  | ```'text'``` | string | HTML `<Input />` type
npm package: @slice-and-dice/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.7.4
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

InputField
==========

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

### Usage

Simple
```jsx
<InputField name="group0">National Insurance number</InputField>
```

Input with hint text
```jsx
<InputField
   name="group1"
   hint={[
     'It’s on your National Insurance card, benefit letter, payslip or P60.',
     <br />,
     'For example, ‘QQ 12 34 56 C’.',
   ]}
 >
   National Insurance number
 </InputField>
```

Input with hint text & error
```jsx
 const meta = {
   touched: true,
   error: 'Example',
 };

 <InputField
   name="group1"
   hint={[
     'It’s on your National Insurance card, benefit letter, payslip or P60.',
     <br />,
     'For example, ‘QQ 12 34 56 C’.',
   ]}
   meta={meta}
 >
   National Insurance number
 </InputField>
```
### References:
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/input/_input.scss
- https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_forms.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | 
 `hint` |  | ```undefined``` | node | 
 `input` |  | ```{}``` | shape[object Object] | 
 `meta` |  | ```{}``` | shape[object Object] |
npm package: @slice-and-dice/govuk-react-inset-text
Description: Renders a styled div containing children with a left hand border, wide or narrow depending on prop passed.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

InsetText
=========

### Import
```js
  import InsetText from '@govuk-react/inset-text';
```
<!-- STORY -->

### Usage

```jsx
<InsetText>
 Hello
</InsetText>
```

### References
- https://design-system.service.gov.uk/components/inset-text/
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/inset-text/_inset-text.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node |
npm package: @slice-and-dice/govuk-react-label
Description: Styled label with children displayed as text.
Author: Alasdair McLeay
Latest version: 0.7.2
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Label
=====

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

### Usage

Simple
```jsx
<Label>Example</Label>
```

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

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Text for the label
 `error` |  | ```false``` | bool | Apply error state styling to the component
npm package: @slice-and-dice/govuk-react-label-text
Description: Styled span element with children displayed as text.
Author: Alasdair McLeay
Latest version: 0.7.2
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

LabelText
=========

### Import
```js
  import LabelText from '@govuk-react/label-text';
```
<!-- STORY -->

### Usage

Simple
```jsx
<LabelText>Example</LabelText>
```

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

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Text for the label
npm package: @slice-and-dice/govuk-react-layout
Description: Component intended to surround grid layouts but now no longer used/required.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

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: @slice-and-dice/govuk-react-lead-paragraph
Description: Renders children passed inside a styled paragraph element.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

LeadParagraph
=============

### Import
```js
  import LeadParagraph from '@govuk-react/lead-paragraph';
```
<!-- STORY -->

### Usage


Simple
```jsx
<LeadParagraph>LeadParagraph example</LeadParagraph>
```

### References
- https://design-system.service.gov.uk/styles/typography/#paragraphs

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Text in the Lead paragraph
npm package: @slice-and-dice/govuk-react-link
Description: govuk-react Link component.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Link
====

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

### Usage

Simple
```jsx
<Link href="/some/page">Example</Link>
```

It is possible to use this component to style a link from react-router, or reach-router
as follows:
```jsx
import { Link as RouterLink } from 'react-router-dom';

<Link as={RouterLink} to="destination">Router example</Link>
```

NB if no link destination is set then the link styling will not be applied

### References
- https://design-system.service.gov.uk/styles/typography/#links
- https://github.com/alphagov/govuk-frontend/blob/master/src/core/_links.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | link contents
 `muted` |  | ```false``` | bool | show link in a "muted" (grey) style
 `noVisitedState` |  | ```false``` | bool | ensure there is no "visited" style
 `textColour` |  | ```false``` | bool | ensure link is shown in plain text colour
npm package: @slice-and-dice/govuk-react-list-item
Description: Renders a styled list item containing children passed.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

ListItem
========

### Import
```js
  import ListItem from '@govuk-react/list-item';
```
<!-- STORY -->

### Usage


Simple
```jsx
<ListItem>List item example</ListItem>
```

With a link
```jsx
import { Link } from '@govuk-react/link';

<ListItem>
  <Link href="https://www.google.com/">List item example</Link>
</ListItem>
```

### References
- https://github.com/alphagov/govuk-frontend/blob/master/src/core/_lists.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | List item content
npm package: @slice-and-dice/govuk-react-list-navigation
Description: Renders ListItems in an UnorderedList from children sent, with optional list style type.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

ListNavigation
==============

### Import
```js
  import ListNavigation from '@govuk-react/list-navigation';
```
<!-- STORY -->

### Usage

Simple
```jsx
import Link from '@govuk-react/link';

<ListNavigation>
  <Link href="/section-a">Section A</Link>
  <Link href="/section-b">Section B</Link>
</ListNavigation>
```

Using React Router with `Link` component for GDS styled links
```jsx
import { Link as RouterLink } from 'react-router-dom';
import { Link } from '@govuk-react/link';

<ListNavigation listStyleType="circle">
  <Link as={RouterLink} to="/link-a">Link A</Link>
  <Link as={RouterLink} to="/link-b">Link B</Link>
</ListNavigation>
```

### References:
- https://govuk-static.herokuapp.com/component-guide/government_navigation

### TODO:
- Consider using the context API https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md
- Fix active state overlaping siblings

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | List navigation content
 `listStyleType` |  | ```undefined``` | string | CSS value for `list-style-type`
npm package: @slice-and-dice/govuk-react-loading-box
Description: Absolutely positioned loading overlay with spinner and numerous configurable options.
Author: Alasdair McLeay
Latest version: 0.7.2
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

LoadingBox
==========

### Import
```js
  import LoadingBox from '@govuk-react/loading-box';
```
<!-- STORY -->

### Usage

Simple
```jsx
<LoadingBox loading>
  Lorem ipsum dolor sit amet
</LoadingBox>
```

Loading box complex
```jsx
<LoadingBox
   loading={false}
   backgroundColor={'#fff'}
   timeIn={800}
   timeOut={200}
   backgroundColorOpacity={0.85}
   spinnerColor={'#000'}
>
  Lorem ipsum dolor sit amet
</LoadingBox>
```

### References:
- https://govuk-loader-prototype.herokuapp.com/components/loader

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `backgroundColor` |  | ```WHITE``` | string | Background color (3 or 6 Hex char) of loading spinner overlay when loading is true.
 `backgroundColorOpacity` |  | ```0.85``` | number | Opacity of loading spinner backgroud colour when loading is true
 `children` | true | `````` | node | One or more children nodes that loading box will overlay
 `loading` |  | ```false``` | bool | Whether loading is currently set to true or false
 `spinnerColor` |  | ```BLACK``` | string | Color (3 or 6 Hex char) of loading spinner
 `timeIn` |  | ```800``` | number | Length of fade-in animation in milliseconds
 `timeOut` |  | ```200``` | number | Length of fade-out animation in milliseconds
 `title` |  | ```undefined``` | string | Loading spinner title text
npm package: @slice-and-dice/govuk-react-main
Description: Styled container which aligns to topNav component, is centered, and provides top padding.
Author: Toby Brancher
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Main
====

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

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


### Usage

Example
* https://codesandbox.io/s/x917knwm4z

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

<Main>
  <GridRow>
    <GridCol>
      ...
    </GridCol>
  </GridRow>
</Main>
```

### TODO
- Implement the 1020px min-width MQ to constants

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```undefined``` | node | Child nodes for the page being built
npm package: @slice-and-dice/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.7.7
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

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

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

### Usage

Simple
```jsx
import Radio from '@govuk-react/radio';

<MultiChoice label="example">
   <Radio name="group1" inline>
     Yes
   </Radio>
   <Radio name="group1" inline>
     No
   </Radio>
</MultiChoice>
```

### References:
- https://govuk-elements.herokuapp.com/errors/
- https://govuk-elements.herokuapp.com/errors/example-form-validation-single-question-radio

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | 
 `hint` |  | ```undefined``` | string | 
 `label` | true | `````` | node | 
 `meta` |  | ```{}``` | shape[object Object] |
npm package: @slice-and-dice/govuk-react-ordered-list
Description: Renders an ordered list containing children passed - also supports listStyleType prop.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

OrderedList
===========

### Import
```js
  import OrderedList from '@govuk-react/ordered-list';
```
<!-- STORY -->

### Usage

Simple
```jsx
import OrderedList from '@govuk-react/ordered-list';
import ListItem from '@govuk-react/list-item';

<OrderedList>
  <ListItem>Lorem ipsum dolor sit.</ListItem>
  <ListItem>Consectetur adipiscing elit.</ListItem>
  <ListItem>Curabitur et libero nec.</ListItem>
</OrderedList>
```

with Roman
```jsx
import OrderedList from '@govuk-react/ordered-list';
import ListItem from '@govuk-react/list-item';

<OrderedList listStyleType="lower-roman">
  <ListItem>Lorem ipsum dolor sit.</ListItem>
  <ListItem>Consectetur adipiscing elit.</ListItem>
  <ListItem>Curabitur et libero nec.</ListItem>
</OrderedList>
```

### References
- https://design-system.service.gov.uk/styles/typography/#lists
- https://github.com/alphagov/govuk-frontend/blob/master/src/core/_lists.scss

### TODO
- Consider using the context API https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | One or more ListItem components
 `listStyleType` |  | ```undefined``` | string | CSS value for `list-style-type`, or `bullet` or `number` to match govuk-frontend
npm package: @slice-and-dice/govuk-react-page
Description: Provides Page wrapper components.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Page
====

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

### Usage

Simple
```jsx
import BackLink from '@govuk-react/back-link';
import { H1 } from '@govuk-react/heading';

<Page beforeChildren={<BackLink href="#" />}>
  <H1>Page title</H1>
</Page>
```

### References
- https://design-system.service.gov.uk/styles/page-template/
- https://design-system.service.gov.uk/styles/layout/#page-wrappers
- https://github.com/alphagov/govuk-frontend/blob/master/src/objects/_main-wrapper.scss
- https://github.com/alphagov/govuk-frontend/blob/master/src/objects/_width-container.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `beforeChildren` |  | ```undefined``` | node | 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``` | node | Page contents
 `container` |  | ```Page.WidthContainer``` | func | Override the default page container component.<br/>`beforeChildren` and `children` (wrapped in `main`) will be placed inside this component.
 `footer` |  | ```undefined``` | node | Override the default page footer component.
 `header` |  | ```<TopNav />``` | node | Override the default page header component.
 `id` |  | ```'content'``` | string | ID for page content
 `main` |  | ```Page.Main``` | func | Override the default wrapper component for main page content
npm package: @slice-and-dice/govuk-react-pagination
Description: Renders a styled list using flexbox, along with PaginationAnchor items expected to be provided as children.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Pagination
==========

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

### Usage

Simple usage with `asPaginationItem` HOC
```jsx
import { asPaginationItem } from '@govuk-react/hoc';

const PaginationAnchor = asPaginationItem('a');

<Pagination>
  <PaginationAnchor href="#prev" previousPage>
    Previous page
  </PaginationAnchor>
  <PaginationAnchor href="#next" nextPage>
    Next page
  </PaginationAnchor>
</Pagination>
```

### References:
- https://govuk-static.herokuapp.com/component-guide/previous_and_next_navigation

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | `asPaginationItem` nodes
npm package: @slice-and-dice/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.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Panel
=====

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

### Usage

Simple
```jsx
<Panel title="Application complete" />
```

Panel with header and HTML body
```jsx
<Panel title="Application complete">
  Your reference number<br />
  <strong>HDJ2123F</strong>
</Panel>
```

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

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```undefined``` | node | Panel body text
 `title` | true | `````` | string | Panel title text