@storybook/design-system/dist/components/Radio.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Radio = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _theming = require("@storybook/theming");

var _polished = require("polished");

var _styles = require("./shared/styles");

var _excluded = ["id", "appearance", "label", "description", "error", "hideLabel", "value", "className"];

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var Label = (0, _theming.styled)("label", process.env.NODE_ENV === "production" ? {
  target: "evn1gft6"
} : {
  target: "evn1gft6",
  label: "Label"
})("cursor:pointer;font-size:", _styles.typography.size.s2, "px;font-weight:", _styles.typography.weight.bold, ";position:relative;height:1em;display:flex;align-items:center;");

var _ref = process.env.NODE_ENV === "production" ? {
  name: "1ed4kgp",
  styles: "border:0px!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(100%)!important;clip-path:inset(100%)!important;height:1px!important;overflow:hidden!important;padding:0px!important;position:absolute!important;white-space:nowrap!important;width:1px!important"
} : {
  name: "1ya2p99-OptionalText",
  styles: "border:0px!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(100%)!important;clip-path:inset(100%)!important;height:1px!important;overflow:hidden!important;padding:0px!important;position:absolute!important;white-space:nowrap!important;width:1px!important;label:OptionalText;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

var OptionalText = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "evn1gft5"
} : {
  target: "evn1gft5",
  label: "OptionalText"
})(function (props) {
  return props.hideLabel && _ref;
}, ";");
var Error = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "evn1gft4"
} : {
  target: "evn1gft4",
  label: "Error"
})("font-weight:", _styles.typography.weight.regular, ";font-size:", _styles.typography.size.s2, "px;color:", _styles.color.negative, ";margin-left:6px;height:1em;display:flex;align-items:center;");
var LabelText = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "evn1gft3"
} : {
  target: "evn1gft3",
  label: "LabelText"
})();
var Description = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "evn1gft2"
} : {
  target: "evn1gft2",
  label: "Description"
})("font-size:", _styles.typography.size.s1, "px;font-weight:", _styles.typography.weight.regular, ";color:", _styles.color.mediumdark, ";margin-top:4px;margin-left:calc(", _styles.typography.size.s2, "px + 0.4em);width:100%;");
var Input = (0, _theming.styled)("input", process.env.NODE_ENV === "production" ? {
  target: "evn1gft1"
} : {
  target: "evn1gft1",
  label: "Input"
})("margin:0 0.4em 0 0;font-size:initial;opacity:0;&+", LabelText, "{&:before,&:after{position:absolute;top:0;left:0;height:1em;width:1em;content:'';display:block;border-radius:3em;}}&+", LabelText, ":before{box-shadow:", _styles.color.mediumdark, " 0 0 0 1px inset;}&:focus+", LabelText, ":before{box-shadow:", function (props) {
  return props.radioColor;
}, " 0 0 0 1px inset;}&:checked+", LabelText, ":before{box-shadow:", function (props) {
  return props.radioColor;
}, " 0 0 0 1px inset;}&:checked:focus+", LabelText, ":before{box-shadow:", function (props) {
  return props.radioColor;
}, " 0 0 0 1px inset,", function (props) {
  return (0, _polished.rgba)(props.radioColor, 0.3);
}, " 0 0 5px 2px;}&+", LabelText, ":after{transition:all 150ms ease-out;transform:scale3d(0, 0, 1);height:10px;margin-left:2px;margin-top:2px;width:10px;opacity:0;}&:checked+", LabelText, ":after{transform:scale3d(1, 1, 1);background:", function (props) {
  return props.radioColor;
}, ";opacity:1;}");
var RadioWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "evn1gft0"
} : {
  target: "evn1gft0",
  label: "RadioWrapper"
})(process.env.NODE_ENV === "production" ? {
  name: "1o7d3sk",
  styles: "display:flex;align-items:center;flex-wrap:wrap"
} : {
  name: "1o7d3sk",
  styles: "display:flex;align-items:center;flex-wrap:wrap",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

var Radio = function Radio(_ref2) {
  var id = _ref2.id,
      _ref2$appearance = _ref2.appearance,
      appearance = _ref2$appearance === void 0 ? 'primary' : _ref2$appearance,
      label = _ref2.label,
      description = _ref2.description,
      error = _ref2.error,
      _ref2$hideLabel = _ref2.hideLabel,
      hideLabel = _ref2$hideLabel === void 0 ? false : _ref2$hideLabel,
      _ref2$value = _ref2.value,
      value = _ref2$value === void 0 ? '' : _ref2$value,
      className = _ref2.className,
      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
  var radioColor = _styles.color[appearance];
  var errorId;
  var descriptionId;
  var ariaDescribedBy;

  if (error) {
    errorId = "".concat(id, "-error");
    ariaDescribedBy = errorId;
  }

  if (description) {
    descriptionId = "".concat(id, "-description");
    ariaDescribedBy = "".concat(ariaDescribedBy, " ").concat(descriptionId);
  }

  return /*#__PURE__*/_react["default"].createElement(RadioWrapper, null, /*#__PURE__*/_react["default"].createElement(Label, {
    className: className
  }, /*#__PURE__*/_react["default"].createElement(Input, (0, _extends2["default"])({}, props, {
    id: id,
    "aria-describedby": ariaDescribedBy,
    "aria-invalid": !!error,
    radioColor: radioColor,
    type: "radio",
    value: value
  })), /*#__PURE__*/_react["default"].createElement(LabelText, null, /*#__PURE__*/_react["default"].createElement(OptionalText, {
    hideLabel: hideLabel
  }, label))), error && /*#__PURE__*/_react["default"].createElement(Error, {
    id: errorId
  }, error), description && /*#__PURE__*/_react["default"].createElement(Description, {
    id: descriptionId
  }, description));
};

exports.Radio = Radio;