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

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import Button from './button'
import Copy from './copy'
import Icon from './icon.js'
import Link from './link.js'

const getVariation = ({ variation = 'neutral', theme }) => {
  return {
    neutral: {
      backgroundColor: theme.bubbleBlue100,
      iconFill: theme.azure,
    },
    positive: {
      backgroundColor: theme.seaturtleGreen100,
      iconFill: theme.seaturtleGreen200,
    },
    improve: {
      backgroundColor: theme.flounderYellow100,
      iconFill: theme.flounderYellow200,
    },
    negative: {
      backgroundColor: theme.sebastianRed100,
      iconFill: theme.sebastianRed200,
    },
  }[variation]
}

const CalloutLink = styled.div`
  display: grid;
  grid-column-gap: 8px;
  grid-template-columns: 24px minmax(auto, max-content) minmax(auto, max-content);
  background: ${({ theme, variation }) => getVariation({ theme, variation }).backgroundColor};
  padding: 12px 16px;
  border-radius: 12px;

  & > ${Icon} {
    fill: ${({ theme, variation }) => getVariation({ theme, variation }).iconFill};
  }
`

export default ({ iconName = 'actions/circle-info', copy, linkCopy, linkHref, linkAction, variation }) => (
  <CalloutLink variation={variation}>
    <Icon name={iconName} />
    <Copy>{copy}</Copy>
    {linkHref ? (
      <Link href={linkHref}>{linkCopy}</Link>
    ) : (
      <Button variation="buttonLink" onClick={linkAction}>
        {linkCopy}
      </Button>
    )}
  </CalloutLink>
)