How to use the @govuk-react/lib.spacing.simple function in @govuk-react/lib

import styled from 'styled-components';
import { MEDIA_QUERIES } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

const TabsTitle = styled('h2')(typography.font({ size: 19 }), {
  marginBottom: spacing.simple(1),
  [MEDIA_QUERIES.TABLET]: {
    display: 'none',
  },
});

export default TabsTitle;

import styled from 'styled-components';
import PropTypes from 'prop-types';
import { BORDER_COLOUR } from 'govuk-colours';
import { spacing } from '@govuk-react/lib';
import { MEDIA_QUERIES } from '@govuk-react/constants';

const TabPanel = styled('section')(
  spacing.responsiveMargin({ size: 8, direction: 'bottom' }),
  {
    [MEDIA_QUERIES.TABLET]: {
      marginBottom: spacing.simple(0),
      paddingTop: spacing.simple(6),
      paddingRight: spacing.simple(4),
      paddingBottom: spacing.simple(6),
      paddingLeft: spacing.simple(4),
      border: `1px solid ${BORDER_COLOUR}`,
      borderTop: 0,
      '& > :last-child': {
        marginBottom: 0,
      },
    },
  },
  ({ selected }) => ({
    display: 'block',
    [MEDIA_QUERIES.TABLET]: {
      display: !selected && 'none',
    },
  })
);

import styled from 'styled-components';
import PropTypes from 'prop-types';
import { BORDER_COLOUR } from 'govuk-colours';
import { spacing } from '@govuk-react/lib';
import { MEDIA_QUERIES } from '@govuk-react/constants';

const TabPanel = styled('section')(
  spacing.responsiveMargin({ size: 8, direction: 'bottom' }),
  {
    [MEDIA_QUERIES.TABLET]: {
      marginBottom: spacing.simple(0),
      paddingTop: spacing.simple(6),
      paddingRight: spacing.simple(4),
      paddingBottom: spacing.simple(6),
      paddingLeft: spacing.simple(4),
      border: `1px solid ${BORDER_COLOUR}`,
      borderTop: 0,
      '& > :last-child': {
        marginBottom: 0,
      },
    },
  },
  ({ selected }) => ({
    display: 'block',
    [MEDIA_QUERIES.TABLET]: {
      display: !selected && 'none',
    },
  })
);

import React from 'react';
import styled from 'styled-components';
import { MEDIA_QUERIES } from '@govuk-react/constants';
import { spacing } from '@govuk-react/lib';

import Link from '../link';

const LicenceLogo = styled('svg')({
  display: 'inline-block',
  marginRight: spacing.simple(2),
  marginBottom: spacing.simple(3),
  verticalAlign: 'top',
  [MEDIA_QUERIES.DESKTOP]: {
    marginBottom: 0,
  },
});

const LicenceDescription = styled('span')({
  display: 'inline-block',
});

const Licence = () => (
  <div>
    </div>

import styled from 'styled-components';
import { MEDIA_QUERIES } from '@govuk-react/constants';
import { H2 } from '@govuk-react/heading';
import { spacing } from '@govuk-react/lib';
import { BORDER_COLOUR } from 'govuk-colours';

const SectionHeading = styled(H2)(
  {
    borderBottom: `1px solid ${BORDER_COLOUR}`,
    paddingBottom: spacing.simple(2),
    marginTop: 0,
    [MEDIA_QUERIES.DESKTOP]: {
      paddingBottom: spacing.simple(4),
    },
  },
  spacing.withWhiteSpace({ marginBottom: 7 })
);

export default SectionHeading;

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

import { BLACK, BORDER_COLOUR, GREY_4, WHITE } from 'govuk-colours';
import { MEDIA_QUERIES } from '@govuk-react/constants';

const spacingSimple1 = spacing.simple(1);
const spacingSimple2 = spacing.simple(2);
const spacingSimple3 = spacing.simple(3);
const spacingSimple4 = spacing.simple(4);
const spacingSimple5 = spacing.simple(5);

const StyledListItem = styled('li')({
  marginLeft: spacingSimple5,
  ':before': {
    content: "'\\2014  '",
    marginLeft: -spacingSimple5,
    paddingRight: spacingSimple1,
  },
  [MEDIA_QUERIES.TABLET]: {
    marginLeft: 0,
    ':before': {
      content: 'none',
    },
  },
});

import styled from 'styled-components';
import PropTypes from 'prop-types';
import { BORDER_COLOUR } from 'govuk-colours';
import { spacing } from '@govuk-react/lib';
import { MEDIA_QUERIES } from '@govuk-react/constants';

const TabPanel = styled('section')(
  spacing.responsiveMargin({ size: 8, direction: 'bottom' }),
  {
    [MEDIA_QUERIES.TABLET]: {
      marginBottom: spacing.simple(0),
      paddingTop: spacing.simple(6),
      paddingRight: spacing.simple(4),
      paddingBottom: spacing.simple(6),
      paddingLeft: spacing.simple(4),
      border: `1px solid ${BORDER_COLOUR}`,
      borderTop: 0,
      '& > :last-child': {
        marginBottom: 0,
      },
    },
  },
  ({ selected }) => ({
    display: 'block',
    [MEDIA_QUERIES.TABLET]: {
      display: !selected && 'none',
    },
  })
);

TabPanel.propTypes = {

import styled from 'styled-components';
import PropTypes from 'prop-types';
import { BORDER_COLOUR } from 'govuk-colours';
import { spacing } from '@govuk-react/lib';
import { MEDIA_QUERIES } from '@govuk-react/constants';

const TabPanel = styled('section')(
  spacing.responsiveMargin({ size: 8, direction: 'bottom' }),
  {
    [MEDIA_QUERIES.TABLET]: {
      marginBottom: spacing.simple(0),
      paddingTop: spacing.simple(6),
      paddingRight: spacing.simple(4),
      paddingBottom: spacing.simple(6),
      paddingLeft: spacing.simple(4),
      border: `1px solid ${BORDER_COLOUR}`,
      borderTop: 0,
      '& > :last-child': {
        marginBottom: 0,
      },
    },
  },
  ({ selected }) => ({
    display: 'block',
    [MEDIA_QUERIES.TABLET]: {
      display: !selected && 'none',
    },
  })

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

import { BLACK, BORDER_COLOUR, GREY_4, WHITE } from 'govuk-colours';
import { MEDIA_QUERIES } from '@govuk-react/constants';

const spacingSimple1 = spacing.simple(1);
const spacingSimple2 = spacing.simple(2);
const spacingSimple3 = spacing.simple(3);
const spacingSimple4 = spacing.simple(4);
const spacingSimple5 = spacing.simple(5);

const StyledListItem = styled('li')({
  marginLeft: spacingSimple5,
  ':before': {
    content: "'\\2014  '",
    marginLeft: -spacingSimple5,
    paddingRight: spacingSimple1,
  },
  [MEDIA_QUERIES.TABLET]: {
    marginLeft: 0,
    ':before': {
      content: 'none',
    },

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

import { BLACK, BORDER_COLOUR, GREY_4, WHITE } from 'govuk-colours';
import { MEDIA_QUERIES } from '@govuk-react/constants';

const spacingSimple1 = spacing.simple(1);
const spacingSimple2 = spacing.simple(2);
const spacingSimple3 = spacing.simple(3);
const spacingSimple4 = spacing.simple(4);
const spacingSimple5 = spacing.simple(5);

const StyledListItem = styled('li')({
  marginLeft: spacingSimple5,
  ':before': {
    content: "'\\2014  '",
    marginLeft: -spacingSimple5,
    paddingRight: spacingSimple1,
  },
  [MEDIA_QUERIES.TABLET]: {
    marginLeft: 0,
    ':before': {
      content: 'none',