react-common/packages/react-common-docs/src/components/NavLink/NavLink.tsx

import * as React from 'react'
import * as PropTypes from 'prop-types'
import styled from 'styled-components'
import { Icon } from '../../../../react-common/src'
import MenuGraphics, { propTypes as menuGraphicsPropTypes } from '../MenuGraphics/MenuGraphics'

const Link = styled('a')({
  display: 'block',
  height: 'var(--size-link, 4rem)',
  textDecoration: 'none',
  position: 'relative',
  '::before': {
    display: 'block',
    content: "''",
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'currentColor',
    opacity: 0,
    zIndex: -1,
  },
  '::after': {
    display: 'block',
    content: "''",
    position: 'absolute',
    top: 0,
    left: 0,
    width: '0.25rem',
    height: '100%',
    backgroundColor: 'currentColor',
    opacity: 0,
    zIndex: -1,
  },
  ':hover::before': {
    opacity: 0.25,
  },
  ':hover::after': {
    opacity: 0.5,
  },
})

const LinkText = styled('span')({
  alignSelf: 'center',
  display: 'block',
  lineHeight: 1.25,
  gridColumnStart: 2,
  ':first-child': {
    gridColumnStart: 1,
  },
  ':last-child': {
    gridColumnEnd: 4,
  },
})

const LinkTitle = styled('strong')({
  display: 'block',
})

const LinkSubtitle = styled('span')({
  display: 'block',
})

const IndicatorContainer = styled('span')({
  alignSelf: 'center',
  lineHeight: 0,
})

const MenuGraphicsContainer = styled('span')({
  display: 'block',
  padding: '0.5rem',
  lineHeight: 0,
})

export const basePropTypes = {
  as: PropTypes.string,
  href: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  graphics: PropTypes.shape(menuGraphicsPropTypes),
  indicator: PropTypes.string,
  onClick: PropTypes.func,
}

const propTypes = {
  ...basePropTypes,
  enclosingComponent: PropTypes.elementType,
  as: PropTypes.elementType,
}

type Props = PropTypes.InferProps<typeof propTypes>

const NavLink = React.forwardRef<HTMLAnchorElement, Props>((
  {
    enclosingComponent: EnclosingComponent = React.Fragment,
    href,
    title,
    graphics,
    subtitle,
    indicator,
    onClick,
  },
  ref
) => (
  <Link
    ref={ref}
    href={href}
    onClick={onClick}
  >
    <EnclosingComponent>
      {
        graphics as object
        && (
          <MenuGraphicsContainer>
            <MenuGraphics
              {...graphics}
            />
          </MenuGraphicsContainer>
        )
      }
      <LinkText>
        <LinkTitle>
          {title}
        </LinkTitle>
        {
          subtitle as string
          && (
            <LinkSubtitle>
              {subtitle}
            </LinkSubtitle>
          )
        }
      </LinkText>
      {
        indicator as string
        && (
          <IndicatorContainer>
            <Icon
              name={indicator!}
            />
          </IndicatorContainer>
        )
      }
    </EnclosingComponent>
  </Link>
))

NavLink.propTypes = propTypes

export default NavLink