"use strict";

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

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

var _ = require(".");

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

var _Button = require("../Button");

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

var _Input = require("../Input");

var _InputAddon = require("../InputAddon");

var _InputElement = require("../InputElement");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Input Group', module).addDecorator(function (story) {
  return __jsx(_Box.Box, {
    maxWidth: "sm",
    mx: "auto",
    mt: 5
  }, story());
});
var size = 'md';
stories.add('with addons', function () {
  return __jsx(_Box.Box, null, __jsx(_.InputGroup, {
    size: size,
    label: "Addon left",
    id: "left"
  }, __jsx(_InputAddon.InputLeftAddon, null, "+234"), __jsx(_Input.Input, {
    roundedLeft: "0",
    placeholder: "Welcome"
  })), __jsx(_.InputGroup, {
    size: size,
    label: "Addon right",
    id: "right"
  }, __jsx(_InputAddon.InputRightAddon, null, ".com"), __jsx(_Input.Input, {
    roundedRight: "0",
    placeholder: "Welcome"
  })), __jsx(_.InputGroup, {
    size: size,
    label: "Error",
    error: "This is an error",
    isInvalid: true
  }, __jsx(_InputAddon.InputLeftAddon, null, "https://"), __jsx(_Input.Input, {
    rounded: "0",
    placeholder: "mysite"
  }), __jsx(_InputAddon.InputRightAddon, null, ".com")));
});
stories.add('with icons', function () {
  return __jsx(_Box.Box, null, __jsx(_.InputGroup, {
    size: size
  }, __jsx(_InputElement.InputLeftElement, null, __jsx(_Icon.Icon, {
    name: "phone"
  })), __jsx(_Input.Input, {
    placeholder: "Welcome"
  })), __jsx(_.InputGroup, {
    size: size
  }, __jsx(_InputElement.InputRightElement, null, __jsx(_Icon.Icon, {
    name: "check"
  })), __jsx(_Input.Input, {
    placeholder: "Welcome"
  })), __jsx(_.InputGroup, null, __jsx(_InputElement.InputLeftElement, null, __jsx(_Icon.Icon, {
    name: "phone"
  })), __jsx(_InputElement.InputRightElement, null, __jsx(_Icon.Icon, {
    name: "check"
  })), __jsx(_Input.Input, {
    placeholder: "Welcome"
  })));
});

var PasswordInput = function PasswordInput() {
  var _useState = (0, _react2.useState)(false),
      show = _useState[0],
      setShow = _useState[1];

  return __jsx(_.InputGroup, {
    size: "md",
    label: "Password",
    id: "password"
  }, __jsx(_Input.Input, {
    pr: "72px",
    type: show ? 'text' : 'password',
    placeholder: "Enter password"
  }), __jsx(_InputElement.InputRightElement, {
    width: "72px"
  }, __jsx(_Button.Button, {
    size: "sm",
    variant: "unstyled",
    onClick: function onClick() {
      return setShow(!show);
    }
  }, show ? 'HIDE' : 'SHOW')));
};

stories.add('password input', function () {
  return __jsx(PasswordInput, null);
});
//# sourceMappingURL=examples.js.map