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

Storybook design system

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Checkbox = 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 = ["appearance", "id", "label", "error", "hideLabel"];

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: "e12k4rek5"
} : {
  target: "e12k4rek5",
  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: "e12k4rek4"
} : {
  target: "e12k4rek4",
  label: "OptionalText"
})(function (props) {
  return props.hideLabel && _ref;
}, ";");
var Error = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "e12k4rek3"
} : {
  target: "e12k4rek3",
  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: "e12k4rek2"
} : {
  target: "e12k4rek2",
  label: "LabelText"
})();
var Input = (0, _theming.styled)("input", process.env.NODE_ENV === "production" ? {
  target: "e12k4rek1"
} : {
  target: "e12k4rek1",
  label: "Input"
})("margin:0 0.4em 0 0;font-size:initial;opacity:0;vertical-align:text-top;&+", LabelText, "{&:before,&:after{position:absolute;top:0;left:0;height:1em;width:1em;content:'';display:block;}&:before{border-radius:4px;}&:after{border-radius:3px;}}&+", LabelText, ":before{box-shadow:", _styles.color.mediumdark, " 0 0 0 1px inset;}&:focus+", LabelText, ":before{box-shadow:", function (props) {
  return props.checkboxColor;
}, " 0 0 0 1px inset;}&:checked+", LabelText, ":before{box-shadow:", function (props) {
  return props.checkboxColor;
}, " 0 0 0 1px inset;}&:checked:focus+", LabelText, ":before{box-shadow:", function (props) {
  return props.checkboxColor;
}, " 0 0 0 1px inset,", function (props) {
  return (0, _polished.rgba)(props.checkboxColor, 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.checkboxColor;
}, ";opacity:1;}");
var CheckboxWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e12k4rek0"
} : {
  target: "e12k4rek0",
  label: "CheckboxWrapper"
})(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 Checkbox = function Checkbox(_ref2) {
  var _ref2$appearance = _ref2.appearance,
      appearance = _ref2$appearance === void 0 ? 'primary' : _ref2$appearance,
      id = _ref2.id,
      label = _ref2.label,
      error = _ref2.error,
      hideLabel = _ref2.hideLabel,
      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
  var errorId = "".concat(id, "-error");
  var checkboxColor = _styles.color[appearance];
  return /*#__PURE__*/_react["default"].createElement(CheckboxWrapper, null, /*#__PURE__*/_react["default"].createElement(Label, null, /*#__PURE__*/_react["default"].createElement(Input, (0, _extends2["default"])({}, props, {
    id: id,
    "aria-describedby": errorId,
    "aria-invalid": !!error,
    checkboxColor: checkboxColor,
    type: "checkbox"
  })), /*#__PURE__*/_react["default"].createElement(LabelText, null, /*#__PURE__*/_react["default"].createElement(OptionalText, {
    hideLabel: hideLabel
  }, label))), /*#__PURE__*/_react["default"].createElement(Error, {
    id: errorId
  }, error));
};

exports.Checkbox = Checkbox;