@kiwicom/orbit-components/es/Checkbox/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../defaultTokens";
import TOKENS from "./consts";
import Check from "../icons/Check";

const getToken = name => ({ theme, hasError, disabled, checked }) => {
  const tokens = {
    [TOKENS.borderColor]: hasError && !disabled && !checked ? theme.orbit.borderColorCheckboxRadioError : theme.orbit.borderColorCheckboxRadio,
    [TOKENS.iconColor]: disabled ? theme.orbit.colorIconCheckboxRadioDisabled : theme.orbit.colorIconCheckboxRadio
  };

  return tokens[name];
};

const IconContainer = styled.div.withConfig({
  displayName: "Checkbox__IconContainer"
})(["position:relative;box-sizing:border-box;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background-color:", ";height:", ";width:", ";border-radius:", ";transform:scale(1);transition:all ", " ease-in-out;& > svg{visibility:hidden;display:flex;align-items:center;justify-content:center;width:16px;height:16px;}"], ({ theme }) => theme.orbit.backgroundInput, ({ theme }) => theme.orbit.heightCheckbox, ({ theme }) => theme.orbit.widthCheckbox, ({ theme }) => theme.orbit.borderRadiusNormal, ({ theme }) => theme.orbit.durationFast);

IconContainer.defaultProps = {
  theme: defaultTokens
};

const TextContainer = styled.div.withConfig({
  displayName: "Checkbox__TextContainer"
})(["display:flex;flex-direction:column;margin-left:", ";"], ({ theme }) => theme.orbit.spaceXSmall);

TextContainer.defaultProps = {
  theme: defaultTokens
};

const Info = styled.span.withConfig({
  displayName: "Checkbox__Info"
})(["font-size:", ";color:", ";line-height:", ";"], ({ theme }) => theme.orbit.fontSizeFormFeedback, ({ theme }) => theme.orbit.colorInfoCheckBoxRadio, ({ theme }) => theme.orbit.lineHeightText);

Info.defaultProps = {
  theme: defaultTokens
};

const LabelText = styled.span.withConfig({
  displayName: "Checkbox__LabelText"
})(["font-weight:", ";font-size:", ";color:", ";height:", ";line-height:", ";"], ({ theme }) => theme.orbit.fontWeightNormal, ({ theme }) => theme.orbit.fontSizeFormLabel, ({ theme }) => theme.orbit.colorFormLabel, ({ theme }) => theme.orbit.heightCheckbox, ({ theme }) => theme.orbit.heightCheckbox);

LabelText.defaultProps = {
  theme: defaultTokens
};

const Input = styled.input.withConfig({
  displayName: "Checkbox__Input"
})(["visibility:hidden;display:none;&:checked ~ ", " > ", "{font-weight:", ";}&:checked + ", " > svg{visibility:visible;}"], TextContainer, LabelText, ({ theme }) => theme.orbit.fontWeightMedium, IconContainer);

Input.defaultProps = {
  theme: defaultTokens
};

const Label = styled(({ className, children, dataTest }) => React.createElement(
  "label",
  { className: className, "data-test": dataTest },
  children
)).withConfig({
  displayName: "Checkbox__Label"
})(["font-family:", ";display:flex;flex-direction:row;align-items:self-start;opacity:", ";cursor:", ";position:relative;", "{color:", ";border:1px solid ", ";}&:hover ", "{border-color:", ";}&:active ", "{border-color:", ";transform:", ";}&:focus{outline:0;& ", "{border:", ";}}"], ({ theme }) => theme.orbit.fontFamily, ({ disabled, theme }) => disabled ? theme.orbit.opacityCheckboxDisabled : "1", ({ disabled }) => disabled ? "default" : "pointer", IconContainer, getToken(TOKENS.iconColor), getToken(TOKENS.borderColor), IconContainer, ({ disabled, theme }) => !disabled && theme.orbit.borderColorCheckboxRadioHover, IconContainer, ({ disabled, theme }) => disabled ? getToken(TOKENS.borderColor) : theme.orbit.borderColorCheckboxRadioActive, ({ disabled, theme }) => !disabled && `scale(${theme.orbit.modifierScaleCheckboxRadioActive})`, IconContainer, ({ theme }) => `2px ${theme.orbit.borderStyleInput} ${theme.orbit.borderColorCheckboxRadioFocus}`);

Label.defaultProps = {
  theme: defaultTokens
};

const Checkbox = props => {
  const {
    label,
    value,
    hasError = false,
    disabled = false,
    checked = false,
    onChange,
    dataTest,
    info
  } = props;

  return React.createElement(
    Label,
    { disabled: disabled, hasError: hasError, checked: checked, dataTest: dataTest },
    React.createElement(Input, {
      value: value,
      type: "checkbox",
      disabled: disabled,
      checked: checked,
      onChange: onChange
    }),
    React.createElement(
      IconContainer,
      null,
      React.createElement(Check, null)
    ),
    React.createElement(
      TextContainer,
      null,
      label && React.createElement(
        LabelText,
        null,
        label
      ),
      info && React.createElement(
        Info,
        null,
        info
      )
    )
  );
};

export default Checkbox;