<commit_before>import React from "react"
import styled from "styled-components"

import * as fonts from "../../Assets/Fonts"
import Icon from "../Icon"

interface SelectableToggleProps {
  href?: string
  text?: string
  onSelect: (selected: boolean) => void
  selected: boolean
}

const IconContainer = styled.div`
width: 15px;
height: 15px;
background-color: black;
display: none;
border-radius: 50%;
float: right;
margin-right: 15px;
`

const Link = styled.a`
display: block;
font-size: 14px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-family: ${fonts.primary.fontFamily};
padding: 30px 0 30px 15px;
border-top: 1px solid #e5e5e5;
&:hover {
  background-color: #f8f8f8;
}
&:hover .collector-intent-checked {
  display: inline;
}
& .collector-intent-checked.is-selected {
  display: inline;
}
`

class SelectableToggle extends React.Component<SelectableToggleProps, null> {
  constructor(props) {
    super(props)
    this.onSelect = this.onSelect.bind(this)
  }

  onSelect() {
    if (this.props.onSelect) {
      this.props.onSelect(this.props.selected)
    }
  }

  render() {
    return (
      <div>
        <Link href={this.props.href} onClick={() => this.onSelect()}>
          {this.props.text}

          <IconContainer className={`collector-intent-checked ${this.props.selected ? "is-selected" : ""}`}>
            <Icon name="check" color="white" fontSize="8px" />
          </IconContainer>
        </Link>
      </div><commit_msg>[Onboarding] used dynamic style for select option<commit_after>import React from "react"
import styled, { StyledFunction } from "styled-components"

import * as fonts from "../../Assets/Fonts"
import Icon from "../Icon"

interface SelectableToggleProps {
  href?: string
  text?: string
  onSelect: (selected: boolean) => void
  selected: boolean
}

interface IconContainerProps extends React.HTMLProps<HTMLIFrameElement> {
  isSelected: boolean
}

const iconContainer: StyledFunction<IconContainerProps> = styled.div

const IconContainer = iconContainer`
  width: 18px;
  height: 18px;
  background-color: black;
  border-radius: 50%;
  float: right;
  margin-right: 15px;
  display: ${props => (props.isSelected ? "inline-flex;" : "none;")}
  justify-content: ${props => (props.isSelected ? "center;" : "none;")}
`

const Link = styled.a`
  display: block;
  font-size: 14px;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-family: ${fonts.primary.fontFamily};
  padding: 30px 0 30px 15px;
  border-top: 1px solid #e5e5e5;
  &:hover {
    background-color: #f8f8f8;
  }
  &:hover ${IconContainer} {
    display: inline-flex;
    justify-content: center;
  }
`

class SelectableToggle extends React.Component<SelectableToggleProps, null> {
  constructor(props) {
    super(props)
    this.onSelect = this.onSelect.bind(this)
  }

  onSelect() {
    if (this.props.onSelect) {
      this.props.onSelect(this.props.selected)
    }
  }

  render() {
    return (
      <div>
        <Link href={this.props.href} onClick={() => this.onSelect()}>
          {this.props.text}

          <IconContainer isSelected={this.props.selected}>
            <Icon name="follow-circle.is-following" color="white" fontSize="39px" style={{ alignSelf: "center" }} />
          </IconContainer>
        </Link>
      </div>
{'fraction_non_alphanumeric': 0.1440677966101695, 'fraction_numerical': 0.015435835351089588, 'mean_word_length': 3.521203830369357, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5555298', 'n_tokens_mistral': 1124, 'n_tokens_neox': 1077, 'n_words': 248}