Skip to content

Latest commit

 

History

History
1247 lines (1012 loc) · 28.9 KB

API.md

File metadata and controls

1247 lines (1012 loc) · 28.9 KB
Raw

ArrayObjectTable

Import

  import ArrayObjectTable from '@govuk-frederic/array-object-table';

Usage

Simple

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

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

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

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

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 Required Default Type Description
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

Card

Import

  import Card from '@govuk-frederic/card';

Usage

Simple

<Card>Example</Card>

Properties

Prop Required Default Type Description
accentColor undefined string color for bottom border accent
backgroundColor WHITE string color for the background
centered false bool flag to indicate content should be centered
children true `````` node
topBorder false bool flag to indicate that top of the card should have a single-pixel grey border

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 Description
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 Required Default Type Description
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={15}>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 Required Default Type Description
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

import Keyline from '@govuk-frederic/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 Required Default Type Description
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 Required Default Type Description
borderColor `````` string
children `````` node
inlineBlock `````` bool

ObjectTable

Import

  import ObjectTable from '@govuk-frederic/object-table';

Usage

Simple

const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
  { key: 'three', heading: 'Three' },
  { key: 'four', heading: 'Four' },
];
const object = { one: 'test', two: 'test', three: '', four: null };
const title = ['Heading'];

<ObjectTable fields={fields} object={object} title={title}/>;

With skipEmptyValues

const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
  { key: 'three', heading: 'Three' },
  { key: 'four', heading: 'Four' },
];
const object = { one: 'test', two: 'test', three: '', four: null };
const title = ['Heading'];

<ObjectTable fields={fields} object={object} title={title} skipEmptyValues={false}/>

With hideWithNoValues

const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
];
const object = { };
const title = ['Heading'];

<ObjectTable fields={fields} object={object} title={title} hideWithNoValues />;

Properties

Prop Required Default Type Description
defaultTransform (value = '-') => value func
fields [] arrayOf[object Object]
hideWithNoValues false bool
object {} object
skipEmptyValues false bool
title null node

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

PageHeader

Import

  import PageHeader from '@govuk-frederic/page-header';

Usage

Default example

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

PageNavigation

Import

  import PageNavigation from '@govuk-frederic/page-navigation';

Usage

Default example

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

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 Required 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 Required Default Type Description
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 Description
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

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];

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

rowIncludesHeading

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];

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

rowIncludesHeading, no titles

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];

<Table rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNames} />

rowIncludesHeading, no titles, small single row

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];

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

rowIncludesHeading, with titles, with flexible columns

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];

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

Properties

Prop Required Default Type Description
borderless false bool
flexibleColumns false bool
name `````` string
nameByRow false bool
names [] arrayOf[object Object]
rowIncludesHeading false bool
rows true `````` arrayOf[object Object]
spacing SPACING.SCALE_3 string
titles null 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 Required Default Type Description
children `````` node
count `````` union(number | string)
countBackgroundColor `````` string
countColor `````` string