"use strict";

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

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

var _react = require("@storybook/react");

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

var _ = require(".");

var _Box = require("../Box");

var _Icon = require("../Icon");

var _VisuallyHidden = require("../VisuallyHidden");

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('ControlBox', module);

var Checkbox = function Checkbox(props) {
  return __jsx(_Box.Box, {
    as: "label",
    display: "flex",
    alignItems: "center",
    cursor: "pointer"
  }, __jsx(_VisuallyHidden.VisuallyHidden, (0, _extends2["default"])({
    type: "checkbox",
    as: "input"
  }, props)), __jsx(_.ControlBox, {
    size: "16px",
    bg: "white",
    border: "2px",
    rounded: "md",
    color: "white",
    borderColor: "inherit",
    _focus: {
      boxShadow: 'outline'
    },
    _hover: {
      borderColor: 'gray.300'
    },
    _disabled: {
      opacity: 0.4
    },
    _checked: {
      bg: 'green.500',
      borderColor: 'green.500'
    }
  }, __jsx(_Icon.Icon, {
    name: "check",
    size: "10px"
  })), __jsx(_Box.Box, {
    as: "span",
    ml: "spacing-sm",
    verticalAlign: "center",
    userSelect: "none"
  }, "This is a Checkbox"));
};

var Radio = function Radio(props) {
  return __jsx(_Box.Box, {
    as: "label",
    display: "flex",
    alignItems: "center",
    cursor: "pointer"
  }, __jsx(_VisuallyHidden.VisuallyHidden, (0, _extends2["default"])({
    type: "radio",
    as: "input"
  }, props)), __jsx(_.ControlBox, {
    size: "16px",
    bg: "white",
    border: "2px",
    rounded: "full",
    type: "radio",
    borderColor: "inherit",
    _focus: {
      boxShadow: 'outline'
    },
    _hover: {
      borderColor: 'gray.300'
    },
    _disabled: {
      opacity: 0.4
    },
    _checked: {
      bg: 'green.500',
      borderColor: 'green.500'
    }
  }, __jsx(_Box.Box, {
    size: "8px",
    bg: "white",
    rounded: "full"
  })), __jsx(_Box.Box, {
    as: "span",
    ml: "spacing-sm",
    verticalAlign: "center",
    userSelect: "none"
  }, "This is a Radio"));
};

stories.add('Sample', function () {
  return __jsx(_Box.Box, {
    maxWidth: "md",
    mx: "auto",
    mt: 9
  }, __jsx(Checkbox, null), __jsx("br", null), __jsx(Radio, {
    name: "id"
  }), __jsx(Radio, {
    name: "id"
  }));
});
//# sourceMappingURL=examples.js.map