ArrowLeft

Import

  import ArrowLeft from '@govuk-frederic/arrow-left';

Usage

Simple

<ArrowLeft />

Dark background

import { GREY_1 } from 'govuk-colours';

const darkBackground = {
  backgroundColor: GREY_1,
  minHeight: '320px',
  minWidth: '320px',
  padding: '20px',
};

<div style={darkBackground}>
 <ArrowLeft width={28} fill="white" />
</div>

Light background

import { WHITE } from 'govuk-colours';

const lightBackground = {
 backgroundColor: WHITE,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={lightBackground}>
 <ArrowLeft width={28} fill="black" />
</div>

Dark background & title

import { GREY_1 } from 'govuk-colours';

const darkBackground = {
 backgroundColor: GREY_1,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={darkBackground}>
 <ArrowLeft width={28} fill="white" color="white">
   Back to previous page
 </ArrowLeft>
</div>

Light background & title

import { WHITE } from 'govuk-colours';

const lightBackground = {
  backgroundColor: WHITE,
  minHeight: '320px',
  minWidth: '320px',
  padding: '20px',
};

<div style={lightBackground}>
 <ArrowLeft width={28} fill="black">
   Back to previous page
 </ArrowLeft>
</div>

Wrapped with anchor with title text

import { WHITE } from 'govuk-colours';

const lightBackground = {
 backgroundColor: WHITE,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={lightBackground}>
 <a href="http://example.com" style={{ color: '#005CA7' }}>
   <ArrowLeft width={28} fill="black">
     Back to previous page
   </ArrowLeft>
 </a>
</div>

Wrapped with anchor with title text on dark background

import { GREY_1 } from 'govuk-colours';

const darkBackground = {
 backgroundColor: GREY_1,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={darkBackground}>
 <a href="http://example.com" style={{ color: 'white' }}>
   <ArrowLeft width={28} fill="white">
     Back to previous page
   </ArrowLeft>
 </a>
</div>

Passing down onClick with title text

import { GREY_1 } from 'govuk-colours';

const darkBackground = {
 backgroundColor: GREY_1,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={darkBackground}>
 <ArrowLeft width={28} fill="white" onClick={action('clicked arrow button')}>
   Back to previous page
 </ArrowLeft>
</div>

Properties

Prop	Default	Type
`children`	`undefined`	string
`color`	`undefined`	string
`fill`	`BLUE`	string
`onClick`	`undefined`	func
`width`	`20`	number

Arrow

Import

  import Arrow from '@govuk-frederic/arrow';

Usage

Simple

<Arrow />

Properties

Prop	Required	Default	Type	Description
`fill`		`'#0C60A2'`	string
`width`		`20`	number

CompactTableAccordionGroup

Import

  import CompactTableAccordionGroup from '@govuk-frederic/compact-table-accordion-group';

Usage

State managed with children

import manageState from 'manage-state';

const ManagedCompactTableAccordionGroup = manageState(CompactTableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedCompactTableAccordionGroup title="Title" expanded="expanded">
  Children
</ManagedCompactTableAccordionGroup>

State managed without children

import manageState from 'manage-state';

const ManagedCompactTableAccordionGroup = manageState(CompactTableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedCompactTableAccordionGroup title="Title" expanded="expanded"/>

Toggle open on title click with 'changeOnTitleClick' prop

import manageState from 'manage-state';

const ManagedCompactTableAccordionGroup = manageState(CompactTableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedCompactTableAccordionGroup changeOnTitleClick title="Title" expanded="expanded">
  Children
</ManagedCompactTableAccordionGroup>

Array

import manageState from 'manage-state';

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

const ManagedCompactTableAccordionGroup = manageState(CompactTableAccordionGroup, {
  propsToState: ['open'],
});


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

TODO:

Implement Async story example in CodeSandbox

Properties

Prop	Required	Default	Type
`changeOnTitleClick`		`false`	bool
`children`		`undefined`	node
`expanded`	true	``````	node
`onChange`		``````	func
`open`		`false`	bool
`title`		``````	node

Count

Import

  import Count from '@govuk-frederic/count';

Usage

Simple

<Count value="5" />

Properties

Prop	Required	Default	Type	Description
`textClass`		``````	string
`value`	true	``````	union(string	number)

CountdownTextArea

Import

  import CountdownTextArea from '@govuk-frederic/countdown-text-area';

Usage

Simple

import manageState from 'manage-state';

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

<ManagedCountdownTextarea />

With maxlength (150)

import manageState from 'manage-state';

const ManagedCountdownTextarea = manageState(CountdownTextArea, {
 changeEvent: true,
 propsToState: ['value'],
});
 
<ManagedCountdownTextarea noMaxLengthAttr maxLength={150} />

With maxlength (100) and positiveOnly

import manageState from 'manage-state';

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

<ManagedCountdownTextarea maxLength={100} positiveOnly />

Properties

Prop	Default	Type
`maxLength`	`undefined`	number
`noMaxLengthAttr`	`false`	bool
`positiveOnly`	`false`	bool

CounterBar

Import

  import CounterBar from '@govuk-frederic/counter-bar';

Usage

Simple

<CounterBar>
  <CounterBar.Total score={15}>All counters</CounterBar.Total>
  <CounterBar.Counters>
    <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
    <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
    <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
    <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
    <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
  </CounterBar.Counters>
</CounterBar>

Active counter

<CounterBar>
  <CounterBar.Total score={15}>All counters</CounterBar.Total>
  <CounterBar.Counters>
    <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
    <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
    <CounterBar.Counter score={3} active>Counter 3</CounterBar.Counter>
    <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
    <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
  </CounterBar.Counters>
</CounterBar>

Active total

<CounterBar>
  <CounterBar.Total score={15} active>All counters</CounterBar.Total>
  <CounterBar.Counters>
    <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
    <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
    <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
    <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
    <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
  </CounterBar.Counters>
</CounterBar>

Empty counters

<CounterBar>
  <CounterBar.Total score={7}>All counters</CounterBar.Total>
  <CounterBar.Counters>
    <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
    <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
    <CounterBar.Counter />
    <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
    <CounterBar.Counter />
  </CounterBar.Counters>
</CounterBar>

CounterBar with padded counters container

<div style={{padding: '4px'}}>
  <CounterBar>
    <CounterBar.Total score={15}>All counters</CounterBar.Total>
    <CounterBar.Counters>
      <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
      <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
      <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
      <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
      <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
    </CounterBar.Counters>
  </CounterBar>
</div>

Zero/no scores

<CounterBar>
  <CounterBar.Total score={9}>All counters</CounterBar.Total>
  <CounterBar.Counters>
    <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
    <CounterBar.Counter score={0}>Counter 2</CounterBar.Counter>
    <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
    <CounterBar.Counter>Counter 4</CounterBar.Counter>
    <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
  </CounterBar.Counters>
</CounterBar>

Custom colours on total

<CounterBar>
  <CounterBar.Total score={15} scoreColor="yellow" scoreBackgroundColor="pink">All counters</CounterBar.Total>
  <CounterBar.Counters>
    <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
    <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
    <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
    <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
    <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
  </CounterBar.Counters>
</CounterBar>

Custom colours on counters

<CounterBar>
  <CounterBar.Total score={15}>All counters</CounterBar.Total>
  <CounterBar.Counters>
    <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
    <CounterBar.Counter score={2} scoreColor="orange" scoreBackgroundColor="blue">Counter 2</CounterBar.Counter>
    <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
    <CounterBar.Counter score={4} scoreColor="yellow" scoreBackgroundColor="purple">Counter 4</CounterBar.Counter>
    <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
  </CounterBar.Counters>
</CounterBar>

Use any HTML element string for the total

<CounterBar>
  <CounterBar.Total score={15} component="aside">All counters</CounterBar.Total>
  <CounterBar.Counters>
    <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
    <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
    <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
    <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
    <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
  </CounterBar.Counters>
</CounterBar>

Use a Link component for the total

import { HashRouter, Link } from 'react-router-dom';

<HashRouter>
  <CounterBar>
    <CounterBar.Total score={15} component={Link} to="/courses?sort=name'/">All counters</CounterBar.Total>
    <CounterBar.Counters>
      <CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
      <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
      <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
      <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
      <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
    </CounterBar.Counters>
  </CounterBar>
</HashRouter>

Use any HTML element string for a counter

<CounterBar>
  <CounterBar.Total score={15}>All counters</CounterBar.Total>
  <CounterBar.Counters>
    <CounterBar.Counter score={1} component="nav">Counter 1</CounterBar.Counter>
    <CounterBar.Counter score={2} component="aside">Counter 2</CounterBar.Counter>
    <CounterBar.Counter score={3} component="div">Counter 3</CounterBar.Counter>
    <CounterBar.Counter score={4} component="section">Counter 4</CounterBar.Counter>
    <CounterBar.Counter score={5} component="span">Counter 5</CounterBar.Counter>
  </CounterBar.Counters>
</CounterBar>

Use a Link component for a counter

import { HashRouter, Link } from 'react-router-dom';

<HashRouter>
  <CounterBar>
    <CounterBar.Total score={2}>All counters</CounterBar.Total>
    <CounterBar.Counters>
      <CounterBar.Counter score={1} component={Link} to="/courses/1/">Counter 1</CounterBar.Counter>
      <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
      <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
      <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
      <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
    </CounterBar.Counters>
  </CounterBar>
</HashRouter>

Properties

Prop	Required	Default	Type	Description
`children`	true	``````	node

DistractionFree

Import

  import DistractionFree from '@govuk-frederic/distraction-free';

Usage

Simple

<DistractionFree onClick={(e) => {}}>
   content goes here
</DistractionFree>

With title

<DistractionFree arrowLeftTitle="Back to example" onClick={(e) => {}}>
   content goes here
</DistractionFree>

Properties

Prop	Default	Type
`arrowLeftTitle`	``````	string
`children`	``````	node
`onClick`	``````	func

HeaderButton

Import

  import HeaderButton from '@govuk-frederic/header-button';

Usage

Simple

<HeaderButton>One</HeaderButton>

Multiple header buttons

<Fragment>
 <HeaderButton>One</HeaderButton>
 <HeaderButton>Two</HeaderButton>
</Fragment>

Multiple header buttons with keyline

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

Active header button

<HeaderButton active>On</HeaderButton>

Disabled header button

<HeaderButton disabled>Off</HeaderButton>

Properties

Prop	Default	Type
`active`	``````	bool
`children`	``````	node
`disabled`	``````	bool

Keyline

Import

  import Keyline from '@govuk-frederic/keyline';

Usage

Simple

<Keyline>
   <p>example</p>
</Keyline>

inlineBlock

<Keyline inlineBlock>
   <p>example</p>
</Keyline>

inlineBlock with orange border

<<Keyline inlineBlock borderColor="#ff9900">
   <p>example</p>
</Keyline>

Properties

Prop	Default	Type
`borderColor`	``````	string
`children`	``````	node
`inlineBlock`	``````	bool

OpenButton

Import

  import OpenButton from '@govuk-frederic/open-button';

Usage

Simple

import manageState from 'manage-state';

const ManagedOpenButton = manageState(OpenButton, { propsToState: ['open']});

<ManagedOpenButton />

Properties

Prop	Required	Default	Type	Description
`onChange`		``````	func
`open`		``````	bool

RemoveButton

Import

  import RemoveButton from '@govuk-frederic/remove-button';

Usage

Simple

<RemoveButton title="Remove" />

Next to some text

<div><span>Text here</span><RemoveButton title="Remove" /></div>

ResultCountTitle

Import

  import ResultCountTitle from '@govuk-frederic/result-count-title';

Usage

Simple

<ResultCountTitle count={3}>Title</ResultCountTitle>

In black with count value 0

<ResultCountTitle count={0} countColor="black" countBackgroundColor="#dee0e2">Title</ResultCountTitle>

Properties

Prop	Default	Type	Description
`children`	``````	node
`count`	``````	union(number	string)
`countBackgroundColor`	``````	string
`countColor`	``````	string

ResultCount

Import

  import ResultCount from '@govuk-frederic/result-count';

Usage

Simple

<ResultCount>0</ResultCount>

Overriding background and text colours

<ResultCount backgroundColor="#6f777b" color="white">000</ResultCount>

Properties

Prop	Default	Type
`backgroundColor`	`GREY_1`	string
`children`	`undefined`	node
`color`	`WHITE`	string

Spinner

Import

  import Spinner from '@govuk-frederic/spinner';

Usage

Simple

<Spinner visible />

Properties

Prop	Required	Default	Type	Description
`visible`		``````	bool

TableAccordionGroup

Import

  import TableAccordionGroup from '@govuk-frederic/table-accordion-group';

Usage

State managed with children

import manageState from 'manage-state';

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

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

State managed without children

import manageState from 'manage-state';

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

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

Toggle open on title click with 'changeOnTitleClick' prop

import manageState from 'manage-state';

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

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

Array

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
`changeOnTitleClick`		`false`	bool
`children`		`undefined`	node
`expanded`	true	``````	node
`onChange`		``````	func
`open`		`false`	bool
`title`		``````	node

Table

Import

  import Table from '@govuk-frederic/table';

Usage

Simple

<Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={exampleNames} />

rowIncludesHeading

<Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading />

rowIncludesHeading, no titles

<Table rows={arrayExampleContent} rowIncludesHeading names={exampleNames} />

rowIncludesHeading, no titles, small single row

<Table rows={[['title', 'value']]} rowIncludesHeading />

rowIncludesHeading, with flexible columns

<Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading />

Properties

Prop	Required	Default	Type
`flexibleColumns`		``````	bool
`name`		``````	string
`names`		`[]`	arrayOf[object Object]
`rowIncludesHeading`		``````	bool
`rows`	true	``````	arrayOf[object Object]
`titles`		``````	arrayOf[object Object]

TitleResultCount

Import

  import TitleResultCount from '@govuk-frederic/title-result-count';

Usage

Simple

<TitleResultCount count={3}>
 Title Title Title
</TitleResultCount>

Counter title with value 0 and override text and background colour.

<TitleResultCount count={0} countColor="black" countBackgroundColor="#dee0e2">
 Title Title Title
</TitleResultCount>

Properties

Prop	Default	Type	Description
`children`	``````	node
`count`	``````	union(number	string)
`countBackgroundColor`	``````	string
`countColor`	``````	string

Files

API.md

Latest commit

History

API.md

File metadata and controls

ArrowLeft

Import

Usage

Properties

Arrow

Import

Usage

Properties

CompactTableAccordionGroup

Import

Usage

TODO:

Properties

Count

Import

Usage

Properties

CountdownTextArea

Import

Usage

Properties

CounterBar

Import

Usage

Properties

DistractionFree

Import

Usage

Properties

HeaderButton

Import

Usage

Properties

Keyline

Import

Usage

Properties

OpenButton

Import

Usage

Properties

RemoveButton

Import

Usage

ResultCountTitle

Import

Usage

Properties

ResultCount

Import

Usage

Properties

Spinner

Import

Usage

Properties

TableAccordionGroup

Import

Usage

TODO:

Properties

Table

Import

Usage

Properties

TitleResultCount

Import

Usage

Properties