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

Nav's Pattern Library

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

export const AsideContentCallout = styled(Copy)`
  position: absolute;
  background-color: ${({ theme }) => theme.greenSheen200};
  padding: 4px 8px;
  border-radius: 12px;
`

const ToggleContainer = styled.div`
  display: flex;
  padding: 16px 0;
  justify-content: space-between;
  position: relative;

  & > ${AsideContentCallout} {
    right: 55px;
    top: 45px;
  }
`

export default ({ toggleA, toggleB, toggleCondition, toggleCallback, asideContent, ...props }) => (
  <ToggleContainer>
    <Radio
      data-testid={`change-plan:${toggleA}-radio-toggle`}
      checked={!toggleCondition}
      label={toggleA}
      onChange={() => {
        toggleCallback(!toggleCondition)
      }}
      {...props}
    />
    <Radio
      data-testid={`change-plan:${toggleB}-radio-toggle`}
      checked={toggleCondition}
      label={toggleB}
      onChange={() => {
        toggleCallback(!toggleCondition)
      }}
      {...props}
    />
    <AsideContentCallout size="xs">{asideContent}</AsideContentCallout>
  </ToggleContainer>
)