@telia/styleguide/es/molecules/RadioButtonList/RadioButtonWithLabel.js

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

import React from 'react';
import PropTypes from 'prop-types';
import Label from '../../atoms/Label/Label';

var _ref = React.createElement("span", {
  className: "radio-button-with-label__svg-container"
}, React.createElement("svg", {
  className: "radio-button-with-label__svg",
  width: "20px",
  height: "20px",
  viewBox: "0 0 20 20"
}, React.createElement("circle", {
  className: "radio-button-with-label__frame",
  cx: "10",
  cy: "10",
  r: "9"
}), React.createElement("circle", {
  className: "radio-button-with-label__check-mark",
  cx: "10",
  cy: "10",
  r: "5"
})));

const RadioButtonWithLabel = ({
  label,
  checked,
  name,
  value,
  hasRichContent,
  children
}) => React.createElement(Label, {
  className: "radio-button-with-label"
}, React.createElement("input", {
  className: "radio-button-with-label__input",
  type: "radio",
  name: name,
  defaultChecked: checked,
  value: value
}), _ref, React.createElement("span", {
  className: "radio-button-with-label__label-text"
}, hasRichContent ? children : label));

RadioButtonWithLabel.propTypes = process.env.NODE_ENV !== "production" ? {
  label: PropTypes.string,
  checked: PropTypes.bool,
  name: PropTypes.string,
  value: PropTypes.any,

  /** Decides whenever should render label or children. */
  hasRichContent: PropTypes.bool,
  children: PropTypes.node
} : {};
export default RadioButtonWithLabel;