@kiwicom/orbit-components/es/Radio/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"

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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

import defaultTokens from "../defaultTokens";

const getBorderColor = () => ({ theme, hasError, disabled, checked }) => hasError && !disabled && !checked ? theme.orbit.borderColorCheckboxRadioError : theme.orbit.borderColorCheckboxRadio;

const Glyph = styled.span.withConfig({
  displayName: "Radio__Glyph"
})(["visibility:hidden;width:12px;height:12px;background-color:", ";border-radius:", ";flex-shrink:0;"], ({ theme, disabled }) => disabled ? theme.orbit.colorIconCheckboxRadioDisabled : theme.orbit.colorIconCheckboxRadio, ({ theme }) => theme.orbit.borderRadiusCircle);

Glyph.defaultProps = {
  theme: defaultTokens
};

const IconContainer = styled.div.withConfig({
  displayName: "Radio__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;}"], ({ theme }) => theme.orbit.backgroundInput, ({ theme }) => theme.orbit.heightCheckbox, ({ theme }) => theme.orbit.widthCheckbox, ({ theme }) => theme.orbit.borderRadiusCircle, ({ theme }) => theme.orbit.durationFast);

IconContainer.defaultProps = {
  theme: defaultTokens
};

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

TextContainer.defaultProps = {
  theme: defaultTokens
};

const Info = styled.span.withConfig({
  displayName: "Radio__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: "Radio__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: "Radio__Input"
})(["visibility:hidden;display:none;&:checked ~ ", " > ", "{font-weight:", ";}&:checked + ", " > ", "{visibility:visible;}"], TextContainer, LabelText, ({ theme }) => theme.orbit.fontWeightMedium, IconContainer, Glyph);

Input.defaultProps = {
  theme: defaultTokens
};

const Label = styled((_ref) => {
  let { disabled, theme, type, hasError } = _ref,
      props = _objectWithoutProperties(_ref, ["disabled", "theme", "type", "hasError"]);

  return React.createElement(
    "label",
    props,
    props.children
  );
}).withConfig({
  displayName: "Radio__Label"
})(["font-family:", ";display:flex;flex-direction:row;align-items:self-start;opacity:", ";cursor:", ";position:relative;", "{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, getBorderColor(), IconContainer, ({ disabled, theme }) => !disabled && theme.orbit.borderColorCheckboxRadioHover, IconContainer, ({ disabled, theme }) => disabled ? getBorderColor() : theme.orbit.borderColorCheckboxRadioActive, ({ disabled, theme }) => !disabled && `scale(${theme.orbit.modifierScaleCheckboxRadioActive})`, IconContainer, ({ theme }) => `2px ${theme.orbit.borderStyleInput} ${theme.orbit.borderColorCheckboxRadioFocus}`);

Label.defaultProps = {
  theme: defaultTokens
};

const Radio = ({
  label,
  value,
  hasError = false,
  disabled = false,
  checked = false,
  onChange,
  info,
  dataTest
}) => React.createElement(
  Label,
  { disabled: disabled, hasError: hasError, checked: checked, "data-test": dataTest },
  React.createElement(Input, { value: value, type: "radio", disabled: disabled, checked: checked, onChange: onChange }),
  React.createElement(
    IconContainer,
    null,
    React.createElement(Glyph, { disabled: disabled })
  ),
  React.createElement(
    TextContainer,
    null,
    label && React.createElement(
      LabelText,
      null,
      label
    ),
    info && React.createElement(
      Info,
      null,
      info
    )
  )
);

export default Radio;