@navinc/base-react-components/src/link.js

Nav's Pattern Library

import React, { useEffect } from 'react'
import { func, node, shape, string, bool, oneOfType, object } from 'prop-types'
import styled from 'styled-components'
import { Link as ReactRouterLink } from 'react-router-dom'
import { deprecationWarning, track } from '@navinc/utils'
import Text from './text'

const StyledLink = styled(Text)`
  font-size: inherit;
  color: ${({ theme }) => theme.bubbleBlue500};
  text-decoration: none;

  &:hover {
    color: ${({ theme }) => theme.oceanBoat};
  }

  &:active {
    color: ${({ theme }) => theme.oceanBoat};
  }
`
StyledLink.displayName = 'StyledLink'

const Link = ({
  to = '',
  href = to,
  target = '',
  onClick = () => {},
  className = '',
  children,
  bold,
  trackingContext: { context = 'link', category = 'link', type = `interaction_${context}`, options, ...payload } = {},
  ...props
}) => {
  useEffect(
    () =>
      deprecationWarning(
        to,
        `
The \`to\` prop on BRC Link component is deprecated and support will be removed in a future version. Please use \`href\` instead.
If you need to bypass React Router, add a \`target="_self"\` prop to your link.`
      ),
    [to]
  )
  return (
    <StyledLink
      target={target}
      {...(target ? { href } : { to: href })}
      as={target ? 'a' : href ? ReactRouterLink : 'span'}
      className={className}
      onClick={(event) => {
        event.persist()
        const { target = {} } = event
        track({
          type,
          payload: {
            category,
            label: target.innerText,
            name: target.innerText,
            target: target.href,
            ...payload,
          },
          options,
        })
        onClick(event)
      }}
      rel={target === '_blank' ? 'noopener noreferrer' : undefined}
      $bold={bold}
      {...props}
    >
      {children}
    </StyledLink>
  )
}

Link.propTypes = {
  href: oneOfType([string, object]),
  target: string,
  onClick: func,
  className: string,
  children: node,
  trackingContext: shape({
    type: string,
    context: string,
    category: string,

    payload: shape({
      category: string,
      label: string,
      name: string,
    }),

    options: shape({
      integrations: shape({
        Salesforce: bool,
      }),
    }),
  }),
}

Link.displayName = 'Link'
export default styled(Link)``