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

if (colValues[key] && value === true) {
          if (process.env.NODE_ENV !== 'production') {
            const newKey = key.replace('column', '').replace(/^([A-Z][a-z]+)([A-Z])/, '$1-$2').toLocaleLowerCase();
            // eslint-disable-next-line no-console
            console.warn(`deprecated prop ${key} used in GridCol, please replace with setWidth="${newKey}"`);
          }
          widthValue = colValues[key];
        }
      });
      widthStyle = {
        [MEDIA_QUERIES.TABLET]: {
          width: widthValue,
        },
      };
    }
    widthStyle[MEDIA_QUERIES.TABLET] = setGrowShrink(widthStyle[MEDIA_QUERIES.TABLET]);

    const desktopWidthStyle = desktopWidthFromProps({ setWidth: props.setDesktopWidth });

    if (desktopWidthStyle) {
      desktopWidthStyle[MEDIA_QUERIES.DESKTOP] =
        setGrowShrink(desktopWidthStyle[MEDIA_QUERIES.DESKTOP]);
    }

    return Object.assign(
      {},
      widthStyle,
      desktopWidthStyle,
    );
  },
);

import { LINK_COLOUR, LINK_HOVER_COLOUR, FOCUS_COLOUR } from 'govuk-colours';
import { FOCUS_WIDTH, FONT_SIZE, SPACING, NTA_LIGHT } from '@govuk-react/constants';
import { withWhiteSpace } from '@govuk-react/hoc';

const HIDDEN_TEXT_FOCUS_WIDTH = `${parseInt(FOCUS_WIDTH.split('px')[0], 10) + 1}px`;

const StyledSpan = styled('span')({
  textDecoration: 'underline',
  textDecorationSkipInk: 'none',
});

const StyledSummary = styled('summary')({
  cursor: 'pointer',
  color: LINK_COLOUR,
  fontFamily: NTA_LIGHT,
  fontSize: FONT_SIZE.SIZE_19,
  position: 'relative',
  marginBottom: SPACING.SCALE_1,
  ':hover': {
    color: LINK_HOVER_COLOUR,
  },
  ':focus': {
    outline: `${HIDDEN_TEXT_FOCUS_WIDTH} solid ${FOCUS_COLOUR}`,
    // outlineOffset: '-1px', In alpha/govuk-frontend but causes arrow icon to be hidden when open
    background: FOCUS_COLOUR,
  },
});

/**
 *
 * ### Usage
 *

import { withWhiteSpace } from '@govuk-react/hoc';

const HIDDEN_TEXT_FOCUS_WIDTH = `${parseInt(FOCUS_WIDTH.split('px')[0], 10) + 1}px`;

const StyledSpan = styled('span')({
  textDecoration: 'underline',
  textDecorationSkipInk: 'none',
});

const StyledSummary = styled('summary')({
  cursor: 'pointer',
  color: LINK_COLOUR,
  fontFamily: NTA_LIGHT,
  fontSize: FONT_SIZE.SIZE_19,
  position: 'relative',
  marginBottom: SPACING.SCALE_1,
  ':hover': {
    color: LINK_HOVER_COLOUR,
  },
  ':focus': {
    outline: `${HIDDEN_TEXT_FOCUS_WIDTH} solid ${FOCUS_COLOUR}`,
    // outlineOffset: '-1px', In alpha/govuk-frontend but causes arrow icon to be hidden when open
    background: FOCUS_COLOUR,
  },
});

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

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

// Label to be linked to checkbox in parent component
// in order to provide toggle function of mobile menu
// when javascript is not present.
const Button = styled('label')({
  display: 'flex',
  alignItems: 'center',
  [MEDIA_QUERIES.LARGESCREEN]: {
    display: 'none',
  },
});

const ButtonText = styled('div')({
  cursor: 'default',
  ':hover': {
    textDecoration: 'underline',
  },
});

const ButtonIcon = styled('div')(({ open }) => ({
  content: '""',
  display: 'inline-block',
  width: '0',
  height: '0',

({ size }) => {
    const actualSize = Number.isNaN(Number(size)) ? CAPTION_SIZES[size] : size;

    // bottom margin - hard-coded values because they're a bit odd
    const marginStyle = actualSize > 19 ? { marginBottom: SPACING_POINTS[1] } : undefined;
    const marginResponsiveStyle = actualSize === 24 ?
      { [MEDIA_QUERIES.TABLET]: { marginBottom: 0 } } : undefined;

    return {
      ...marginStyle,
      ...marginResponsiveStyle,
    };
  },
  {

return [
      { listStyleType: type },
      type === 'none'
        ? {
            paddingLeft: 0,
          }
        : {
            paddingLeft: SPACING_POINTS[4],
          },
      // TODO consider whether these spacing adjusts should be for all non-`none` styles
      // NB the inclusion of these ensures that withWhiteSpace's mb prop doesn't work on ListItem
      ['disc', 'decimal'].includes(type)
        ? {
            [`> ${ListItem}`]: {
              marginBottom: 0,
              [MEDIA_QUERIES.TABLET]: {
                marginBottom: SPACING_POINTS[1],
              },
            },
          }
        : {
            // Style when not disc/decimal
            [`> ${ListItem}`]: {
              marginBottom: SPACING_POINTS[1],
            },
          },
    ];
  }
);

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

const OuterContainer = styled('div')({
  paddingTop: SPACING.SCALE_5,
  textAlign: 'center',
});

// This is currently 'width-container' and not 'main' from govuk-frontend
// Maybe we should deprecate this component in favour of Page.Main and Page.WidthContainer?
const InnerContainer = styled('div')({
  maxWidth: SITE_WIDTH,
  marginLeft: SPACING.SCALE_3,
  marginRight: SPACING.SCALE_3,
  textAlign: 'left',
  [MEDIA_QUERIES.LARGESCREEN]: {
    marginLeft: SPACING.SCALE_5,
    marginRight: SPACING.SCALE_5,
  },
  // no 1020px breakpoint in constants yet, not sure why
  '@media only screen and (min-width:1020px)': {
    margin: '0 auto',
  },
});

/**
 *
 * Provides a container which aligns to the topNav component,
 * is centered, and provides top padding.

const StyledHeader = styled('div')(
  // Setting focus styles on header
  // so that summary that is not part of the button is included in focus
  ({ focused }) =>
    (focused
      ? {
        outline: `${FOCUS_WIDTH} solid ${YELLOW}`,
        outlineOffset: 0,
      }
      : undefined),
  {
    position: 'relative',
    // Safe area on the right to avoid clashing with icon
    paddingRight: '40px',
    paddingBottom: SPACING.SCALE_3,

    // Section headers have a pointer cursor as an additional affordance
    cursor: 'pointer',
    // Section headers have a grey background on hover as an additional affodance
    ':hover': {
      backgroundColor: GREY_4,
      '@media (hover: none)': {
        backgroundColor: 'initial',
      },
    },
  },
);

const SectionHeader = ({ children, focused, ...props }) => (
  
    {children}

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

const StyledButton = styled('button')(
  typography.font({ size: 24, weight: 'bold' }),
  link.common(),
  {
    width: '100%',
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    paddingTop: SPACING.SCALE_3,
    paddingBottom: 0,
    paddingLeft: 0,
    borderWidth: 0,
    // Headings in section headers have link colours as an additional affodance
    color: LINK_COLOUR,
    background: 'none',
    textAlign: 'left',
    cursor: 'pointer',
    ':focus': {
      outline: 'none',
      background: 'none',
    },
    ':after': {
      content: '""',
      position: 'absolute',
      top: 0,

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;