"use strict";

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

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

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

var _ = require(".");

var _2 = require("..");

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

var _FormHelperText = require("../FormHelperText");

var _FormLabel = require("../FormLabel");

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

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('FormControl', module).addDecorator(function (story) {
  return __jsx(_Box.Box, {
    maxWidth: "sm",
    mx: "auto",
    mt: 5
  }, story());
});
stories.add('Default', function () {
  return __jsx(_.FormControl, {
    isRequired: true
  }, __jsx(_FormLabel.FormLabel, {
    htmlFor: "fname"
  }, "First name"), __jsx(_2.Input, {
    id: "fname",
    placeholder: "First name"
  }));
});
stories.add('with select', function () {
  return __jsx(_.FormControl, {
    isInvalid: true
  }, __jsx(_FormLabel.FormLabel, {
    htmlFor: "fname"
  }, "First name"), __jsx(_2.Select, {
    id: "fname",
    name: "fname",
    placeholder: "First name"
  }));
});
stories.add('with helper text', function () {
  return __jsx(_.FormControl, null, __jsx(_FormLabel.FormLabel, {
    htmlFor: "lname"
  }, "Last name"), __jsx(_2.Input, {
    id: "lname",
    "aria-describedby": "lname-help",
    placeholder: "Last name"
  }), __jsx(_FormHelperText.FormHelperText, {
    id: "lname-help"
  }, "Ensure it's up to 7 characters"));
});
stories.add('with input group', function () {
  return __jsx(_.FormControl, null, __jsx(_FormLabel.FormLabel, null, "Portfolio url"), __jsx(_2.InputGroup, null, __jsx(_InputAddon.InputLeftAddon, null, "https://"), __jsx(_2.Input, {
    roundedLeft: "0",
    placeholder: "Welcome"
  })), __jsx(_FormHelperText.FormHelperText, null, "Add your website here"));
});
stories.add('with error', function () {
  return __jsx(_.FormControl, {
    isInvalid: true
  }, __jsx(_FormLabel.FormLabel, {
    htmlFor: "url"
  }, "Website"), __jsx(_2.InputGroup, null, __jsx(_InputAddon.InputLeftAddon, null, "https://"), __jsx(_2.Input, {
    type: "url",
    id: "url",
    "aria-describedby": "url-error",
    roundedLeft: "0",
    placeholder: "awesomesite.com"
  })), __jsx(_2.FormErrorMessage, {
    id: "url-error"
  }, "Website is invalid"));
});
//# sourceMappingURL=examples.js.map