How to use the @govuk-react/constants.SPACING.SCALE_2 function in @govuk-react/constants

import { SPACING } from '@govuk-react/constants';
import { TEXT_COLOUR } from 'govuk-colours';
import { typography } from '@govuk-react/lib';

const SectionSummary = styled('div')(
  // typography.common,
  // govuk-body
  typography.font({ size: 19 }),

  // margin - top: 0;
  // @include govuk - responsive - margin(4, "bottom");
  {
    color: TEXT_COLOUR,
    display: 'block',
    // section summary
    marginTop: SPACING.SCALE_2,
    marginBottom: 0,
  },
);

export default SectionSummary;

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

const TopNavInner = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  width: `calc(100% - ${SPACING.SCALE_5})`,
  maxWidth: '960px',
  padding: `calc(${SPACING.SCALE_2} * 0.8) ${SPACING.SCALE_3}`,
  boxSizing: 'border-box',
  [MEDIA_QUERIES.LARGESCREEN]: {
    padding: `calc(${SPACING.SCALE_2} * 0.8) 0`,
    flexDirection: 'row',
    width: `calc(100% - ${SPACING.SCALE_6})`,
  },
});

export default TopNavInner;

({ errorText }) => ({
    borderLeft: errorText ? `4px solid ${ERROR_COLOUR}` : undefined,
    marginRight: errorText ? SPACING.SCALE_3 : undefined,
    paddingLeft: errorText ? SPACING.SCALE_2 : undefined,
  }),
);

({ errorText }) =>
    errorText
      ? {
          borderLeft: `4px solid ${ERROR_COLOUR}`,
          marginRight: SPACING.SCALE_3,
          paddingLeft: SPACING.SCALE_2,
        }
      : undefined,
  spacing.withWhiteSpace({ marginBottom: 6 })

import { BLUE } from 'govuk-colours';

import { FONT_SIZE, LINE_HEIGHT, MEDIA_QUERIES, SPACING } from '@govuk-react/constants';
import { spacing } from '@govuk-react/lib';

const StyledRelatedItems = styled('div')(
  {
    borderTop: `10px solid ${BLUE}`,
    paddingTop: SPACING.SCALE_1,
    width: '100%',
    [MEDIA_QUERIES.LARGESCREEN]: {
      fontSize: FONT_SIZE.SIZE_16,
      lineHeight: LINE_HEIGHT.SIZE_16,
    },
    '> h3': {
      marginBottom: SPACING.SCALE_2,
    },
    '> ul': {
      marginBottom: SPACING.SCALE_4,
      '> li': {
        marginBottom: `calc(${SPACING.SCALE_2} + 2px)`,
      },
    },
  },
  spacing.withWhiteSpace({ marginBottom: 0 })
);

/**
 *
 * ### Usage
 *
 * Simple

const StyledRelatedItems = styled('div')(
  {
    borderTop: `10px solid ${BLUE}`,
    paddingTop: SPACING.SCALE_1,
    width: '100%',
    [MEDIA_QUERIES.LARGESCREEN]: {
      fontSize: FONT_SIZE.SIZE_16,
      lineHeight: LINE_HEIGHT.SIZE_16,
    },
    '> h3': {
      marginBottom: SPACING.SCALE_2,
    },
    '> ul': {
      marginBottom: SPACING.SCALE_4,
      '> li': {
        marginBottom: `calc(${SPACING.SCALE_2} + 2px)`,
      },
    },
  },
  spacing.withWhiteSpace({ marginBottom: 0 })
);

/**
 *
 * ### Usage
 *
 * Simple
 * ```jsx
 * import { H3 } from '@govuk-react/heading';
 * import UnorderedList from '@govuk-react/unordered-list';
 * import Link from '@govuk-react/link';
 * import ListItem from '@govuk-react/list-item';

({ error }) => ({
    borderLeft: error ? `${BORDER_WIDTH_MOBILE} solid ${ERROR_COLOUR}` : undefined,
    marginRight: error ? SPACING.SCALE_3 : undefined,
    paddingLeft: error ? SPACING.SCALE_2 : undefined,
  }),
  spacing.withWhiteSpace({ marginBottom: 0 })

({ error }) => ({
    borderLeft: error ? `4px solid ${ERROR_COLOUR}` : undefined,
    marginRight: error ? SPACING.SCALE_3 : undefined,
    paddingLeft: error ? SPACING.SCALE_2 : undefined,
  }),
  spacing.withWhiteSpace({ marginBottom: 0 })

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { SPACING } from '@govuk-react/constants';

const StyledLayout = styled('div')({
  padding: SPACING.SCALE_2,
  boxSizing: 'border-box',
});

/**
 *
 * 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)
 *

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

const RightHandSide = styled('div')({
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'space-between',
  marginTop: SPACING.SCALE_2,
  [MEDIA_QUERIES.LARGESCREEN]: {
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    width: '66.66%',
    paddingLeft: SPACING.SCALE_3,
    marginTop: 0,
  },
});

export default RightHandSide;