@navinc/base-react-components/src/plans-table.js

Nav's Pattern Library

import styled from 'styled-components'
import Copy from './copy'
import Icon from './icon.js'

const PlanTableIcon = styled(Copy)`
  text-align: center;
`

export const FeatureName = styled(Copy)``

export const FeatureIcon = styled(PlanTableIcon)`
  & > ${Icon} {
    fill: ${({ theme }) => theme.greenSheen400};
  }
`

export const MissingFeatureIcon = styled(PlanTableIcon)`
  & > ${Icon} {
    fill: ${({ theme }) => theme.copperRed200};
  }
`

export const StyledHR = styled.hr`
  border-top: 1px solid ${({ theme }) => theme.neutral200};
`

export const PlansTable = styled.div`
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: flex-end;
  margin: 24px 0;

  & > ${StyledHR} {
    grid-column: 1 / -1;
  }

  & > ${FeatureIcon}, ${FeatureName}, ${MissingFeatureIcon} {
    border-top: 1px solid ${({ theme }) => theme.neutral200};
    align-self: flex-start;
  }

  & > ${FeatureIcon}, ${FeatureName}, ${MissingFeatureIcon} {
    padding: 16px 0;
  }
`

PlansTable.Divider = StyledHR
PlansTable.FeatureIcon = FeatureIcon
PlansTable.MissingFeatureIcon = MissingFeatureIcon
PlansTable.FeatureName = FeatureName

export default PlansTable