@navinc/base-react-components/src/card-insight.js

Nav's Pattern Library

import React from 'react'
import propTypes from 'prop-types'
import styled from 'styled-components'
import { Link as RRLink } from 'react-router-dom'
import Copy from './copy'
import Text from './text'
import Icon from './icon.js'

const Title = styled(Copy)`
  display: flex;
  align-items: center;
`

const StyledIcon = styled(Icon)`
  fill: ${({ type, theme: { mermaidGreen500, flounderYellow200, bubbleBlue500 } }) =>
    type === 'positive' ? mermaidGreen500 : type === 'improve' ? flounderYellow200 : bubbleBlue500};
`

export const Link = styled(Text).attrs(({ target }) => ({
  as: target ? 'a' : RRLink,
}))`
  color: ${({ theme }) => theme.azure};
  font-weight: bold;
  padding-top: 4px;
  text-decoration: none;

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

  &:active {
    color: ${({ theme }) => theme.azure};
  }

  &:visited {
    color: ${({ theme }) => theme.azure};
  }
`

const CardInsightContent = styled.div`
  display: flex;
  flex-direction: column;
`

export const StyledInsight = styled.aside`
  padding: 16px;
  border-radius: 4px;
  overflow: hidden;
  background-color: ${({ type, theme: { flounderYellow100, mermaidGreen100, bubbleBlue100 } = {} }) =>
    type === 'improve' ? flounderYellow100 : type === 'positive' ? mermaidGreen100 : bubbleBlue100};
  display: flex;
  flex-direction: row;

  & > ${StyledIcon} {
    min-width: 24px;
    margin-right: 8px;
  }
`

export const CardInsight = ({
  action,
  actionHref,
  actionLabel = '',
  className,
  copy,
  icon,
  shouldOpenNewTab,
  type = 'neutral',
  title,
}) => {
  const hasAction = !!(action || actionHref)
  return (
    <StyledInsight type={type} className={className}>
      {icon && <StyledIcon type={type} name={icon} />}
      <CardInsightContent>
        {title && <Title bold>{title}</Title>}
        {copy && <Copy>{copy}</Copy>}
        {hasAction && (
          <Link
            {...(shouldOpenNewTab ? { href: actionHref } : { to: actionHref })}
            target={shouldOpenNewTab && '_blank'}
            onClick={action}
          >
            {actionLabel}
          </Link>
        )}
      </CardInsightContent>
    </StyledInsight>
  )
}

CardInsight.propTypes = {
  action: propTypes.func,
  actionHref: propTypes.string,
  actionLabel: propTypes.string,
  type: propTypes.string,
  title: propTypes.node,
  copy: propTypes.node,
  shouldOpenNewTab: propTypes.bool,
}

const StyledCardInsight = styled(CardInsight)``
export default StyledCardInsight