"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InlineHeightComparisonExternalLargeLabel = exports.InlineHeightComparisonExternalLabel = exports.InlineHeightComparisonFloatingLabel = exports.MixinsStackee = exports.MixinsSpacing = exports.WithExtendedStyles = exports.LongLabelWithValue = exports.LongLabel = exports.LongValueWithIcon = exports.LongValue = exports.LongPlaceholder = exports.DisabledWithValue = exports.Disabled = exports.DeprecatedHiddenLabel = exports.CurrencyPoundSterling = exports.CurrencyFourDecimals = exports.FocusOnMount = exports.CustomFontSize = exports.ExternalLargeLabel = exports.ExternalLabel = exports.GroupedCode = exports.Currency = exports.Password = exports.Number = exports.Date = exports.PasswordMessaging = exports.Error = exports.ReadOnly = exports.Default = exports.InvalidEmail = exports.Preview = exports["default"] = void 0;

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _addonActions = require("@storybook/addon-actions");

var _textInput = require("./text-input.component");

var _box = require("../../../primitives/box");

var _paddingChecker = require("../../../mixins/spacing/story-support/padding-checker");

var _marginChecker = require("../../../mixins/spacing/story-support/margin-checker");

var _stackeeChecker = require("../../../mixins/stackee/story-support/stackee-checker");

var _textInput2 = _interopRequireDefault(require("./text-input.mdx"));

var _button = require("../../actions/button");

var _secondaryButton = require("../../actions/secondary-button");

var _tertiaryButton = require("../../actions/tertiary-button");

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var _default = {
  component: _textInput.TextInput,
  title: 'Components/Inputs/TextInput',
  parameters: {
    docs: {
      page: _textInput2["default"]
    }
  }
};
exports["default"] = _default;

var Preview = function Preview() {
  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Enter some text",
    placeholder: "example text",
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.Preview = Preview;

var InvalidEmail = function InvalidEmail() {
  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Enter some text",
    value: "iAmNotAnEmailAddress",
    type: "email",
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.InvalidEmail = InvalidEmail;

var Default = function Default() {
  var _useState = (0, _react.useState)(),
      _useState2 = _slicedToArray(_useState, 2),
      demoValue = _useState2[0],
      setDemoValue = _useState2[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Enter some text",
    placeholder: "example text",
    onChange: setDemoValue,
    value: demoValue,
    type: "text"
  });
};

exports.Default = Default;

var ReadOnly = function ReadOnly() {
  var _useState3 = (0, _react.useState)('ACDBEFGHIJKLMNOP'),
      _useState4 = _slicedToArray(_useState3, 2),
      demoValue = _useState4[0],
      setDemoValue = _useState4[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Enter some text",
    placeholder: "example text",
    onChange: setDemoValue,
    value: demoValue,
    type: "grouped_code",
    readOnly: true
  });
};

exports.ReadOnly = ReadOnly;

var Error = function Error() {
  var _useState5 = (0, _react.useState)('no, not this text'),
      _useState6 = _slicedToArray(_useState5, 2),
      demoValue = _useState6[0],
      setDemoValue = _useState6[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Enter some text",
    onChange: setDemoValue,
    value: demoValue,
    type: "text",
    error: true
  });
};

exports.Error = Error;

var PasswordMessaging = function PasswordMessaging() {
  var _useState7 = (0, _react.useState)(),
      _useState8 = _slicedToArray(_useState7, 2),
      demoValue = _useState8[0],
      setDemoValue = _useState8[1];

  var errorMessage = demoValue != null && demoValue !== '' && demoValue.length < 8 ? 'Your password is too short' : undefined;
  var successMessage = demoValue != null && demoValue !== '' && demoValue.length >= 8 ? 'Good job' : undefined;
  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Choose a password",
    onChange: setDemoValue,
    value: demoValue,
    type: "password",
    hideValueButtonLabel: "hide",
    revealValueButtonLabel: "show",
    error: errorMessage,
    success: successMessage,
    description: "Password must contain at least 8 characters"
  });
};

exports.PasswordMessaging = PasswordMessaging;

var Date = function Date() {
  var _useState9 = (0, _react.useState)(),
      _useState10 = _slicedToArray(_useState9, 2),
      rawValue = _useState10[0],
      setRawValue = _useState10[1];

  var _useState11 = (0, _react.useState)(),
      _useState12 = _slicedToArray(_useState11, 2),
      formattedValue = _useState12[0],
      setFormattedValue = _useState12[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Enter a date",
    onChange: function onChange(r, f) {
      setRawValue(r);
      setFormattedValue(f);
    },
    value: rawValue,
    type: "date",
    placeholder: "DD / MM / YYYY",
    description: rawValue ? "Raw value: ".concat(rawValue, "; formatted value: ").concat(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '') : undefined
  });
};

exports.Date = Date;

var Number = function Number() {
  var _useState13 = (0, _react.useState)(),
      _useState14 = _slicedToArray(_useState13, 2),
      rawValue = _useState14[0],
      setRawValue = _useState14[1];

  var _useState15 = (0, _react.useState)(),
      _useState16 = _slicedToArray(_useState15, 2),
      formattedValue = _useState16[0],
      setFormattedValue = _useState16[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Pick a number",
    onChange: function onChange(r, f) {
      setRawValue(r);
      setFormattedValue(f);
    },
    value: rawValue,
    type: "number",
    description: rawValue ? "Raw value: ".concat(rawValue, "; formatted value: ").concat(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '') : undefined
  });
};

exports.Number = Number;

var Password = function Password() {
  var _useState17 = (0, _react.useState)(),
      _useState18 = _slicedToArray(_useState17, 2),
      rawValue = _useState18[0],
      setRawValue = _useState18[1];

  var _useState19 = (0, _react.useState)(),
      _useState20 = _slicedToArray(_useState19, 2),
      formattedValue = _useState20[0],
      setFormattedValue = _useState20[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Password",
    onChange: function onChange(r, f) {
      setRawValue(r);
      setFormattedValue(f);
    },
    value: rawValue,
    type: "password",
    hideValueButtonLabel: "hide",
    revealValueButtonLabel: "show",
    description: rawValue ? "Raw value: ".concat(rawValue, "; formatted value: ").concat(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '') : undefined
  });
};

exports.Password = Password;

var Currency = function Currency() {
  var _useState21 = (0, _react.useState)(),
      _useState22 = _slicedToArray(_useState21, 2),
      rawValue = _useState22[0],
      setRawValue = _useState22[1];

  var _useState23 = (0, _react.useState)(),
      _useState24 = _slicedToArray(_useState23, 2),
      formattedValue = _useState24[0],
      setFormattedValue = _useState24[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Enter some text",
    onChange: function onChange(r, f) {
      setRawValue(r);
      setFormattedValue(f);
    },
    value: rawValue,
    type: "currency",
    placeholder: "$200.00",
    description: rawValue ? "Raw value: ".concat(rawValue, "; formatted value: ").concat(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '') : undefined
  });
};

exports.Currency = Currency;

var GroupedCode = function GroupedCode() {
  var _useState25 = (0, _react.useState)(),
      _useState26 = _slicedToArray(_useState25, 2),
      rawValue = _useState26[0],
      setRawValue = _useState26[1];

  var _useState27 = (0, _react.useState)(),
      _useState28 = _slicedToArray(_useState27, 2),
      formattedValue = _useState28[0],
      setFormattedValue = _useState28[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Recovery Code",
    onChange: function onChange(r, f) {
      setRawValue(r);
      setFormattedValue(f);
    },
    value: rawValue,
    type: "grouped_code",
    description: rawValue ? "Raw value: ".concat(rawValue, "; formatted value: ").concat(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '') : undefined
  });
};

exports.GroupedCode = GroupedCode;

var ExternalLabel = function ExternalLabel() {
  var _useState29 = (0, _react.useState)(),
      _useState30 = _slicedToArray(_useState29, 2),
      demoValue = _useState30[0],
      setDemoValue = _useState30[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "External Label",
    labelStyle: "external",
    onChange: setDemoValue,
    value: demoValue,
    type: "text",
    placeholder: "Placeholder"
  });
};

exports.ExternalLabel = ExternalLabel;

var ExternalLargeLabel = function ExternalLargeLabel() {
  var _useState31 = (0, _react.useState)(),
      _useState32 = _slicedToArray(_useState31, 2),
      demoValue = _useState32[0],
      setDemoValue = _useState32[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "External Label (Large)",
    labelStyle: "external-large",
    onChange: setDemoValue,
    value: demoValue,
    type: "text",
    placeholder: "Placeholder"
  });
};

exports.ExternalLargeLabel = ExternalLargeLabel;

var CustomFontSize = function CustomFontSize() {
  var _useState33 = (0, _react.useState)(),
      _useState34 = _slicedToArray(_useState33, 2),
      demoValue = _useState34[0],
      setDemoValue = _useState34[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Custom font size",
    onChange: setDemoValue,
    value: demoValue,
    type: "text",
    placeholder: "Placeholder",
    fontSize: "f5"
  });
};

exports.CustomFontSize = CustomFontSize;

var FocusOnMount = function FocusOnMount() {
  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Omg a label",
    placeholder: "Look a placeholder that's really long!",
    focusOnMount: true,
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.FocusOnMount = FocusOnMount;

var CurrencyFourDecimals = function CurrencyFourDecimals() {
  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "4 Decimal Currency",
    placeholder: "Enter some money",
    type: "currency",
    value: 1234.56789,
    decimalPlaces: 4,
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.CurrencyFourDecimals = CurrencyFourDecimals;

var CurrencyPoundSterling = function CurrencyPoundSterling() {
  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Pounds Sterling",
    placeholder: "Enter some money",
    type: "currency",
    value: 1234.56789,
    currencyCode: "GBP",
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.CurrencyPoundSterling = CurrencyPoundSterling;

var DeprecatedHiddenLabel = function DeprecatedHiddenLabel() {
  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Label",
    labelStyle: "hidden",
    placeholder: "Enter some money",
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.DeprecatedHiddenLabel = DeprecatedHiddenLabel;

var Disabled = function Disabled() {
  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Label",
    placeholder: "Disabled",
    onChange: (0, _addonActions.action)('onChange'),
    disabled: true
  });
};

exports.Disabled = Disabled;

var DisabledWithValue = function DisabledWithValue() {
  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: "Label",
    placeholder: "Disabled with value",
    onChange: (0, _addonActions.action)('onChange'),
    disabled: true,
    value: "Some value"
  });
};

exports.DisabledWithValue = DisabledWithValue;

var LongPlaceholder = function LongPlaceholder() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: 300,
    label: "Label",
    placeholder: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia.",
    onChange: (0, _addonActions.action)('onChange'),
    focusOnMount: true
  }));
};

exports.LongPlaceholder = LongPlaceholder;

var LongValue = function LongValue() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: 300,
    label: "Label",
    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia.",
    onChange: (0, _addonActions.action)('onChange')
  }));
};

exports.LongValue = LongValue;

var LongValueWithIcon = function LongValueWithIcon() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: 300,
    label: "Label",
    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia.",
    onChange: (0, _addonActions.action)('onChange'),
    error: true
  }));
};

exports.LongValueWithIcon = LongValueWithIcon;

var LongLabel = function LongLabel() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: 300,
    label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia.",
    onChange: (0, _addonActions.action)('onChange')
  }));
};

exports.LongLabel = LongLabel;

var LongLabelWithValue = function LongLabelWithValue() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: 300,
    label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia.",
    value: "some text",
    onChange: (0, _addonActions.action)('onChange')
  }));
};

exports.LongLabelWithValue = LongLabelWithValue;
var StyledTextInput = (0, _styledComponents["default"])(_textInput.TextInput).withConfig({
  displayName: "StyledTextInput",
  componentId: "edhsav-0"
})(["width:400px;padding-right:25px;border:5px solid red;"]);

var WithExtendedStyles = function WithExtendedStyles() {
  return /*#__PURE__*/_react["default"].createElement(StyledTextInput, {
    label: "Omg a label",
    placeholder: "Look a placeholder that's really long!",
    focusOnMount: true,
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.WithExtendedStyles = WithExtendedStyles;

var MixinsSpacing = function MixinsSpacing() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_paddingChecker.PaddingChecker, {
    Component: _textInput.TextInput,
    label: "Label",
    onChange: (0, _addonActions.action)('onChange')
  }), /*#__PURE__*/_react["default"].createElement(_marginChecker.MarginChecker, {
    Component: _textInput.TextInput,
    label: "Label",
    onChange: (0, _addonActions.action)('onChange')
  }));
};

exports.MixinsSpacing = MixinsSpacing;

var MixinsStackee = function MixinsStackee() {
  return /*#__PURE__*/_react["default"].createElement(_stackeeChecker.StackeeChecker, {
    Component: _textInput.TextInput,
    label: "Label",
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.MixinsStackee = MixinsStackee;

var InlineHeightComparisonFloatingLabel = function InlineHeightComparisonFloatingLabel() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    align: "end"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: 200,
    label: "Label"
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: 200,
    label: "Label",
    type: "search"
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: 200,
    label: "Label",
    error: true
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: 200,
    label: "Label",
    locked: true
  }), /*#__PURE__*/_react["default"].createElement(_button.Button, null, "Click me"), /*#__PURE__*/_react["default"].createElement(_secondaryButton.SecondaryButton, null, "Click me"));
};

exports.InlineHeightComparisonFloatingLabel = InlineHeightComparisonFloatingLabel;

var InlineHeightComparisonExternalLabel = function InlineHeightComparisonExternalLabel() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    align: "end"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    labelStyle: "external",
    basis: 200,
    label: "Label"
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    labelStyle: "external",
    basis: 200,
    label: "Label",
    type: "search"
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    labelStyle: "external",
    basis: 200,
    label: "Label",
    error: true
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    labelStyle: "external",
    basis: 200,
    label: "Label",
    locked: true
  }), /*#__PURE__*/_react["default"].createElement(_button.Button, {
    size: "sm"
  }, "Click me"), /*#__PURE__*/_react["default"].createElement(_tertiaryButton.TertiaryButton, null, "Click me"));
};

exports.InlineHeightComparisonExternalLabel = InlineHeightComparisonExternalLabel;

var InlineHeightComparisonExternalLargeLabel = function InlineHeightComparisonExternalLargeLabel() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    align: "end"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    labelStyle: "external-large",
    basis: 200,
    label: "Label"
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    labelStyle: "external-large",
    basis: 200,
    label: "Label",
    type: "search"
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    labelStyle: "external-large",
    basis: 200,
    label: "Label",
    error: true
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    labelStyle: "external-large",
    basis: 200,
    label: "Label",
    locked: true
  }), /*#__PURE__*/_react["default"].createElement(_button.Button, null, "Click me"), /*#__PURE__*/_react["default"].createElement(_secondaryButton.SecondaryButton, null, "Click me"));
};

exports.InlineHeightComparisonExternalLargeLabel = InlineHeightComparisonExternalLargeLabel;