@navinc/base-react-components/src/wrapped-ab-content-toggle.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import Copy from './copy'
import Radio from './radio.js'

const AsidePill = styled(Copy)`
  background-color: ${({ theme }) => theme.greenSheen200};
  padding: 4px 8px;
  border-radius: 12px;
  display: inline-block;
`
const Toggles = styled.div`
  display: flex;
  flex-wrap: wrap;

  & > ${Radio} {
    min-width: 240px;
    margin: 8px;
    padding: 0 16px;
  }
`

export default ({ asideContent, toggleA, toggleB, toggleCondition, toggleCallback }) => (
  <Toggles>
    <Radio
      data-testid={`upgrade-plan-page:${toggleA}-radio-toggle`}
      checked={!toggleCondition}
      label={toggleA}
      onChange={() => {
        toggleCallback(!toggleCondition)
      }}
      checkedBackgroundColor={({ theme }) => theme.neutral100}
      hasBorder
    />
    <Radio
      data-testid={`upgrade-plan-page:${toggleB}-radio-toggle`}
      checked={toggleCondition}
      label={toggleB}
      hasBorder
      onChange={() => {
        toggleCallback(!toggleCondition)
      }}
      checkedBackgroundColor={({ theme }) => theme.neutral100}
      asideContent={<AsidePill size="xs">{asideContent}</AsidePill>}
    />
  </Toggles>
)