How to use @govuk-react/lib - 10 common examples

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

const ListItem = styled('li')(
  // including font definition here is belt & braces
  // govuk-frontend doesn't bother to do that
  typography.font({ size: 19 }),
  { marginBottom: SPACING_POINTS[1] },
  spacing.withWhiteSpace()
);

/**
 *
 * ### Usage
 *
 *
 * Simple
 * ```jsx
 * List item example
 * ```
 *
 * With a link
 * ```jsx
 * import { Link } from '@govuk-react/link';
 *

// Constants for chevron sourced from govuk-frontend
const CHEVRON_SIZE = 7;
const CHEVRON_BORDER_WIDTH = 1;
const CHEVRON_BORDER_COLOUR = SECONDARY_TEXT_COLOUR;
const CHEVRON_ALTITUDE_CALCULATED = 5.655;

const BreadcrumbsContainer = styled('div')(
  typography.font({ size: 16 }),
  typography.textColour,
  {
    // margins here are not responsive, hence why they're not specified using withWhiteSpace
    marginTop: SPACING_POINTS[3],
    marginBottom: SPACING_POINTS[2],
  },
  spacing.withWhiteSpace(),
);

const BreadcrumbsList = styled('ol')({
  margin: 0,
  padding: 0,
  listStyleType: 'none',
  display: 'block',
});

const BreadcrumbsListItem = styled('li')({
  display: 'inline-block',
  position: 'relative',
  marginBottom: SPACING_POINTS[1],
  marginLeft: SPACING_POINTS[2],
  paddingLeft: SPACING_POINTS[2] + CHEVRON_ALTITUDE_CALCULATED,
  '::before': {

import React from 'react';
import PropTypes from 'prop-types';
import { ERROR_COLOUR } from 'govuk-colours';
import { SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

const StyledError = styled('span')(
  typography.font({ size: 19, weight: 'bold' }),
  {
    display: 'block',
    // NB non-responsive spacing
    marginBottom: SPACING_POINTS[3],
    clear: 'both',
    color: ERROR_COLOUR,
  },
  spacing.withWhiteSpace()
);

/**
 *
 * ### Usage
 *
 *
 * Simple
 * ```jsx
 * Example
 * ```
 *
 * ### References
 * - https://github.com/alphagov/govuk-frontend/blob/master/src/components/error-message/_error-message.scss
 */
const ErrorText = props => ;

import {
  BORDER_WIDTH_FORM_ELEMENT,
  FOCUS_WIDTH,
  FOCUS_WIDTH_RAW,
  MEDIA_QUERIES,
  SPACING_POINTS,
} from '@govuk-react/constants';

const radioSize = SPACING_POINTS[7];
const labelPaddingLeftRight = SPACING_POINTS[3];
// When the default focus width is used on a curved edge it looks visually smaller.
// So for the circular radios we bump the default to make it look visually consistent.
const RADIOS_FOCUS_WIDTH = `${FOCUS_WIDTH_RAW + 1}px`;

const Label = styled('label')(
  typography.font({ size: 19 }),
  {
    display: 'block',
    position: 'relative',
    minHeight: radioSize,
    padding: `0 0 0 ${radioSize}px`,
    clear: 'left',
  },
  ({ inline }) =>
    inline && {
      [MEDIA_QUERIES.LARGESCREEN]: {
        float: 'left',
        clear: 'none',
        marginRight: SPACING_POINTS[4],
      },
    },
  spacing.withWhiteSpace({ marginBottom: 2 })

import Navigation from './atoms/navigation';
import Link from './atoms/link';
import SectionBreak from './atoms/section-break';
import MetaCustom from './atoms/meta-custom';

import MetaContainer from './molecules/meta-container';
import MetaLinks from './molecules/meta-links';
import NavigationLinks from './molecules/navigation-links';

const FooterContainer = styled('footer')(
  {
    borderTop: `1px solid ${FOOTER_BORDER_TOP}`,
    background: `${FOOTER_BACKGROUND}`,
    color: `${FOOTER_TEXT}`,
  },
  typography.font({ size: 16 }),
  spacing.withWhiteSpace({ padding: [{ size: 7, direction: 'top' }, { size: 5, direction: 'bottom' }] })
);

/**
 *
 * ### Usage
 *
 * Simple
 * ```jsx
 * <footer>
 * ```
 *
 * Footer with Copyright information
 * ```jsx
 * // Import self hosted copyright image
 * import crest from './govuk-crest.png';</footer>

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

import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import { SECONDARY_TEXT_COLOUR } from 'govuk-colours';
import { SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

const StyledHint = styled('span')(
  typography.font({ size: 19 }),
  {
    display: 'block',
    // NB non-responsive marginBottom here
    marginBottom: SPACING_POINTS[3],
    color: `${SECONDARY_TEXT_COLOUR}`,
  },
  spacing.withWhiteSpace()
);

// NB govuk-frontend has styling adjustments for when hint-text is placed next to some other
// components - we have not tried to replicate that here

/**
 *
 * ### Usage
 *

import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import { spacing, typography } from '@govuk-react/lib';

// TODO should `LabelText` and `Label` be consolidated?
// TODO add support for differing font sizes, as per govuk-frontend - see:
// https://github.com/alphagov/govuk-frontend/blob/master/src/components/label/_label.scss

const StyledLabelText = styled('span')(
  typography.font({ size: 19 }),
  typography.textColour,
  {
    display: 'block',
    clear: 'none',
    paddingBottom: '2px',
  },
  ({ error }) => ({
    fontWeight: error ? 700 : undefined,
  }),
  spacing.withWhiteSpace({ marginBottom: 0 })
);

/**
 *
 * ### Usage
 *

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import { spacing, typography } from '@govuk-react/lib';
import { HEADING_SIZES, SPACING_POINTS, TYPOGRAPHY_SCALE } from '@govuk-react/constants';

const StyledLegend = styled('legend')(
  spacing.withWhiteSpace(),
  typography.font({ size: 19 }),
  typography.textColour,
  {
    boxSizing: 'border-box',
    display: 'table',
    maxWidth: '100%',
    marginBottom: SPACING_POINTS[2],
    padding: 0,
    // Disabling this as per https://github.com/alphagov/govuk-frontend/issues/1239
    // overflow: 'hidden',
    whiteSpace: 'normal',
  },
  ({ size }) => {
    const actualSize = Number.isNaN(Number(size)) ? HEADING_SIZES[size] : size;

    if (size !== undefined && !actualSize) {
      throw Error(`Unknown size ${size} used for legend.`);
    }

import PropTypes from 'prop-types';
import { SECONDARY_TEXT_COLOUR } from 'govuk-colours';
import { SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

import Link from './atoms/link';

// Constants for chevron sourced from govuk-frontend
const CHEVRON_SIZE = 7;
const CHEVRON_BORDER_WIDTH = 1;
const CHEVRON_BORDER_COLOUR = SECONDARY_TEXT_COLOUR;
const CHEVRON_ALTITUDE_CALCULATED = 5.655;

const BreadcrumbsContainer = styled('div')(
  typography.font({ size: 16 }),
  typography.textColour,
  {
    // margins here are not responsive, hence why they're not specified using withWhiteSpace
    marginTop: SPACING_POINTS[3],
    marginBottom: SPACING_POINTS[2],
  },
  spacing.withWhiteSpace(),
);

const BreadcrumbsList = styled('ol')({
  margin: 0,
  padding: 0,
  listStyleType: 'none',
  display: 'block',
});

const BreadcrumbsListItem = styled('li')({

import PropTypes from 'prop-types';
import {
  HEADING_SIZES,
  LEVEL_SIZE,
  LEVEL_TAG,
  MEDIA_QUERIES,
  TYPOGRAPHY_SCALE,
} from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

// use `size` only with string for XLARGE, SMALL etc and number for px size
// so if `size` is a string, we find a numeric size based off `HEADING_SIZES`
// but if `size` is a number we just send through that number

const StyledHeading = styled('h1')(
  typography.textColour,
  ({ size }) => {
    const actualSize = Number.isNaN(Number(size)) ? HEADING_SIZES[size] : size;

    if (!actualSize) {
      throw Error(`Unknown size ${size} used for heading.`);
    }

    return Object.assign(
      {},
      typography.font({ size: actualSize, weight: 'bold' }),
    );
  },
  {
    display: 'block',
    marginTop: 0,
  },