"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Contact = exports.Login = exports.DetailedForm = exports.Default = exports.default = void 0;

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

var _Checkbox = _interopRequireDefault(require("../Checkbox"));

var _Form = _interopRequireDefault(require("./Form"));

var _FormGroup = _interopRequireDefault(require("../FormGroup"));

var _FileUploader = _interopRequireDefault(require("../FileUploader"));

var _reactDropzone = _interopRequireDefault(require("react-dropzone"));

var _NumberInput = _interopRequireDefault(require("../NumberInput"));

var _RadioButton = _interopRequireDefault(require("../RadioButton"));

var _InputGroup = _interopRequireDefault(require("../InputGroup"));

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

var _Search = _interopRequireDefault(require("../Search"));

var _Select = _interopRequireDefault(require("../Select"));

var _SelectItem = _interopRequireDefault(require("../SelectItem"));

var _TextArea = _interopRequireDefault(require("../TextArea"));

var _TextInput = _interopRequireDefault(require("../TextInput"));

var _Toggle = _interopRequireDefault(require("../Toggle"));

var _README = _interopRequireDefault(require("./README.mdx"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _default = {
  title: 'Components/Forms/Form',
  component: _Form.default,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: _README.default
  }
};
exports.default = _default;

var Default = function Default(args) {
  return /*#__PURE__*/_react.default.createElement(_Form.default, args, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    id: "testinput",
    labelText: "Text Input label",
    placeholder: "Placeholder text"
  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_TextArea.default, {
    labelText: "Text Area label",
    placeholder: "Placeholder text",
    id: "textarea5",
    cols: 50,
    rows: 3
  }), /*#__PURE__*/_react.default.createElement(_Select.default, {
    id: "select-12",
    defaultValue: "placeholder-item"
  }, /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    disabled: true,
    hidden: true,
    value: "placeholder-item",
    text: "Choose an option"
  }), /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "option-1",
    text: "Option 1"
  }), /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "option-2",
    text: "Option 2"
  }), /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "option-3",
    text: "Option 3"
  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
    type: "submit",
    className: "some-class"
  }, "Submit"));
};

exports.Default = Default;
Default.args = {
  children: 'Form',
  className: 'some-class',
  longForm: true
};

var DetailedForm = function DetailedForm(args) {
  return /*#__PURE__*/_react.default.createElement(_Form.default, args, /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
    legendText: "Checkbox heading"
  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    defaultChecked: true,
    labelText: "Checkbox label",
    id: "checkbox-0"
  }), /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    labelText: "Checkbox label2",
    id: "checkbox-1"
  }), /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    disabled: true,
    labelText: "Checkbox label3",
    id: "checkbox-2"
  })), /*#__PURE__*/_react.default.createElement(_NumberInput.default, {
    id: "number-input-1",
    label: "Number Input",
    labelText: "Text Input label",
    min: 0,
    max: 100,
    value: 50,
    step: 10
  }), /*#__PURE__*/_react.default.createElement(_FormGroup.default, null, /*#__PURE__*/_react.default.createElement(_Toggle.default, {
    id: "toggle-1"
  }), /*#__PURE__*/_react.default.createElement(_Toggle.default, {
    disabled: true,
    id: "toggle-2"
  })), /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
    legendText: "File Upload Types"
  }, /*#__PURE__*/_react.default.createElement("p", null, "Legacy FileUploader"), /*#__PURE__*/_react.default.createElement(_FileUploader.default, {
    id: "file-1",
    labelDescription: "Choose Files...",
    buttonLabel: "Add files",
    labelText: "Legacy"
  }), /*#__PURE__*/_react.default.createElement("p", null, "Drag and Drop File Uploader"), /*#__PURE__*/_react.default.createElement(_reactDropzone.default, {
    onDrop: function onDrop(acceptedFiles) {
      return acceptedFiles;
    }
  }, function (_ref) {
    var getRootProps = _ref.getRootProps,
        getInputProps = _ref.getInputProps;
    return /*#__PURE__*/_react.default.createElement("section", {
      className: "wfp--dropzone"
    }, /*#__PURE__*/_react.default.createElement("div", getRootProps({
      className: 'wfp--dropzone__input'
    }), /*#__PURE__*/_react.default.createElement("input", getInputProps()), /*#__PURE__*/_react.default.createElement("div", null, "Drag 'n' drop some files here, or click to select files")));
  })), /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
    legendText: "Radio Button heading"
  }, /*#__PURE__*/_react.default.createElement(_InputGroup.default, {
    name: "input-group",
    defaultSelected: "default-selected"
  }, /*#__PURE__*/_react.default.createElement(_RadioButton.default, {
    value: "standard",
    id: "radio-1",
    labelText: "Standard Radio Button"
  }), /*#__PURE__*/_react.default.createElement(_RadioButton.default, {
    value: "default-selected",
    labelText: "Default Selected Radio Button",
    id: "radio-2"
  }), /*#__PURE__*/_react.default.createElement(_RadioButton.default, {
    value: "blue",
    labelText: "Standard Radio Button",
    id: "radio-3"
  }), /*#__PURE__*/_react.default.createElement(_RadioButton.default, {
    value: "disabled",
    labelText: "Disabled Radio Button",
    id: "radio-4",
    disabled: true
  }))), /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
    legendText: "Radio Button heading"
  }, /*#__PURE__*/_react.default.createElement(_Search.default, {
    id: "search-1",
    labelText: "Search",
    placeHolderText: "Search"
  })), /*#__PURE__*/_react.default.createElement(_Select.default, {
    id: "select-1",
    defaultValue: "placeholder-item"
  }, /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    disabled: true,
    hidden: true,
    value: "placeholder-item",
    text: "Choose an option"
  }), /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "option-1",
    text: "Option 1"
  }), /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "option-2",
    text: "Option 2"
  }), /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "option-3",
    text: "Option 3"
  })), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    id: "test2",
    labelText: "Text Input label",
    placeholder: "Placeholder text"
  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    type: "password",
    required: true,
    pattern: "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}",
    id: "test3",
    labelText: "Password"
  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    type: "password",
    required: true,
    pattern: "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}",
    id: "test4",
    labelText: "Password",
    invalid: true,
    invalidText: "Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_TextArea.default, {
    labelText: "Text Area label",
    placeholder: "Placeholder text",
    id: "test5",
    cols: 50,
    rows: 4
  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
    type: "submit",
    className: "some-class"
  }, "Submit"));
};

exports.DetailedForm = DetailedForm;
DetailedForm.args = {
  children: 'Form',
  className: 'some-class',
  longForm: true
};

var Login = function Login(args) {
  return /*#__PURE__*/_react.default.createElement(_Form.default, args, /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
    legendText: "Login Form Example"
  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    type: "email",
    id: "email1",
    labelText: "Email",
    placeholder: "c*****@wfp.org"
  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    type: "password",
    required: true,
    pattern: "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}",
    id: "password2",
    labelText: "Password"
  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Button.default, {
    type: "submit",
    className: "some-class"
  }, "Submit")));
};

exports.Login = Login;
Login.args = {
  longForm: false
};

var Contact = function Contact(args) {
  return /*#__PURE__*/_react.default.createElement(_Form.default, args, /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
    align: "horizontal",
    legendText: "Contact Form Example: name"
  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    type: "text",
    id: "firstname",
    labelText: "Firstname",
    placeholder: "Noami"
  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    type: "text",
    id: "lastname",
    labelText: "lastname",
    placeholder: "ADAMS"
  })), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    type: "email",
    id: "email4",
    labelText: "Email",
    placeholder: "c******@wfp.org"
  }), /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
    legendText: "Additional details"
  }, /*#__PURE__*/_react.default.createElement(_TextArea.default, {
    labelText: "Message",
    placeholder: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    id: "test5",
    cols: 50,
    rows: 5
  })), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
    type: "button",
    kind: "secondary"
  }, "cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    type: "submit",
    className: "some-class"
  }, "Send")));
};

exports.Contact = Contact;