How to use the @govuk-react/lib.link.common function in @govuk-react/lib

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

const Anchor = styled('a')(
  typography.font({ size: 16 }),
  link.common(),
  link.styleText,
  {
    display: 'inline-block',
    position: 'relative',
    // margins here are not responsive, hence why they're not specified using withWhiteSpace
    marginTop: SPACING_POINTS[3],
    marginBottom: SPACING_POINTS[3],
    paddingLeft: '14px',
    borderBottom: `1px solid ${BLACK}`,
    textDecoration: 'none',
    '::before': {
      ...shape.arrow({ direction: 'left', base: 10, height: 6 }),

      content: "''",
      position: 'absolute',
      top: '-1px',

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

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

const StyledHyperLink = styled('a')(
  typography.font({ size: 19 }),
  link.common(),
  link.styleDefault,
  {
    display: 'inline-block',
    paddingTop: spacingSimple2,
    paddingBottom: spacingSimple2,
  },
  ({ selected }) => ({
    color: selected && BLACK,
    textDecoration: selected ? 'none' : undefined,
    [MEDIA_QUERIES.TABLET]: {
      marginRight: spacingSimple1,
      float: 'left',
      textAlign: 'center',
      textDecoration: 'none',
      color: BLACK,
      ':link,:visited': {

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

const Link = styled('a')(
  link.common(),
  link.styleDefault,
  link.printFriendly,
  ({ muted }) => (muted ? link.styleMuted : undefined),
  ({ textColour }) => (textColour ? link.styleText : undefined),
  ({ noVisitedState }) => (noVisitedState ? link.styleNoVisitedState : undefined)
);

/**
 *
 * ### Usage
 *
 * Simple
 * ```jsx
 * Example
 * ```
 *