@navinc/base-react-components/src/plan-item.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import Button from './button'
import Copy from './copy'
import Header from './header.js'

const CurrentPlan = styled.div`
  display: flex;
  align-items: center;
  padding: 6px 4px 8px;

  & > ${Copy} {
    margin-left: 8px;
  }
`
const Dot = styled.span`
  min-width: 10px;
  min-height: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: ${({ theme }) => theme.azure};
`

const CurrentPlanIndicator = ({ text, size }) => (
  <CurrentPlan>
    <Dot />
    <Copy size={size} bold>
      {text}
    </Copy>
  </CurrentPlan>
)

export const Flag = styled.div`
  display: inline-block;
  background-color: ${({ theme }) => theme.greenSheen400};
  padding: 4px 8px;
  border-radius: 6px;
  width: max-content;

  & > ${Copy} {
    color: ${({ theme }) => theme.white};
    text-align: center;
  }
`
export const FlagBorder = styled.div`
  display: none;

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    display: block;
    top: 0;
    width: 80%;
    margin: 0 auto;
    border-top: 5px solid ${({ theme }) => theme.greenSheen400};
  }
`

const DetailsLink = styled(Button).attrs(() => ({ variation: 'noOutline' }))`
  padding: 8px 0;
  & > ${Copy} {
    color: ${({ theme }) => theme.neutral400};
  }
`

const PlanItem = styled.div`
  display: grid;
  padding: 0 4px 16px 4px;
  justify-items: center;
  text-align: center;
  grid-gap: 8px;

  & > ${Header} {
    padding-top: 8px;
  }

  & > ${DetailsLink} {
    &:hover {
      background-color: ${({ theme }) => theme.white};
    }
  }
`

export default ({ action, actionHref, actionTarget, name, isActivePlanCode, planCode, price, isMostPopular }) => (
  <PlanItem>
    {isMostPopular && (
      <>
        <Flag data-testid="pricing-card:is_most_popular">
          <Copy size="sm">Most popular</Copy>
        </Flag>
      </>
    )}
    <Copy size="sm" key={`${name}-${planCode}`}>
      {name}
    </Copy>
    <Copy>{price}</Copy>
    {action && (
      <DetailsLink onClick={action}>
        <Copy size="sm">More details</Copy>
      </DetailsLink>
    )}
    {isActivePlanCode ? (
      <CurrentPlanIndicator text="Current plan" size="sm" />
    ) : (
      <Button href={actionHref} target={actionTarget} variation="outline">
        Select
      </Button>
    )}
  </PlanItem>
)