How to use the @govuk-react/constants.MEDIA_QUERIES.DESKTOP function in @govuk-react/constants

import PropTypes from 'prop-types';
import { GUTTER_HALF, MEDIA_QUERIES, WIDTHS } from '@govuk-react/constants';
import { spacing } from '@govuk-react/lib';

const colValues = {
  columnOneQuarter: '25%',
  columnOneThird: '33.3333%',
  columnOneHalf: '50%',
  columnTwoThirds: '66.6667%',
  columnThreeQuarters: '75%',
  columnFull: '100%',
};

const widthFromProps = spacing.withWidth({ noDefault: true });
const desktopWidthFromProps =
  spacing.withWidth({ mediaQuery: MEDIA_QUERIES.DESKTOP, noDefault: true });

function setGrowShrink(style) {
  const hasAutoWidth = [undefined, 'auto'].includes(style.width);

  // No explicit width means auto, so grow/shrink should be set
  return Object.assign(
    {},
    style,
    {
      flexGrow: hasAutoWidth ? 1 : 0,
      flexShrink: hasAutoWidth ? 1 : 0,
    },
  );
}

const StyledColumn = styled('div')(

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,
    );
  },
);

({ grow }) =>
    grow && {
      flex: 1,
      flexBasis: '320px',
      [MEDIA_QUERIES.DESKTOP]: {
        flexBasis: 0,
      },
    }
);

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 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>