@stokr/components-library 2.3.41-beta.8 → 2.3.42-beta

package/dist/components/Chips/Chip.js

@@ -24,7 +24,7 @@ var Chip = function Chip(_ref) {
     isActive: isActive
   }, props), /*#__PURE__*/_react.default.createElement(_ChipStyles.ChipText, null, children), tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
     title: tooltip,
-    position: "right",
+    position: "top",
     noIcon: true,
     noMarginLeft: true,
     noMarginRight: true

package/dist/components/Footer/FooterMenu.js

@@ -17,6 +17,7 @@ var _LIInBug = _interopRequireDefault(require("../../static/images/social/LI-In-
 var _XLogoBlack = _interopRequireDefault(require("../../static/images/social/X-logo-black.png"));
 var _youtube_social_circle_red = _interopRequireDefault(require("../../static/images/social/youtube_social_circle_red.png"));
 var _TelegramLogo = _interopRequireDefault(require("../../static/images/social/Telegram-Logo.png"));
+var _Header = require("components/Header/Header.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -89,18 +90,36 @@ var FooterMenu = function FooterMenu(_ref2) {
     _ref2$jobOpeningsNumb = _ref2.jobOpeningsNumber,
     jobOpeningsNumber = _ref2$jobOpeningsNumb === void 0 ? 0 : _ref2$jobOpeningsNumb,
     dropdownCollapsed = _ref2.dropdownCollapsed;
-  var _React$useState = _react.default.useState(groups.map(function () {
-      return !dropdownCollapsed;
-    })),
+  var isMobile = (0, _customHooks.useMobileView)(_rwd.sizes.MLarge);
+
+  // "New to STOKR" needs to be open by default
+  var _React$useState = _react.default.useState(function () {
+      return groups.map(function (group, index) {
+        if (isMobile) {
+          return group.name === 'New to STOKR';
+        }
+        // for desktop, use the dropdownCollapsed prop
+        return !dropdownCollapsed;
+      });
+    }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeGroups = _React$useState2[0],
     setactiveGroups = _React$useState2[1];
-  var isMobile = (0, _customHooks.useMobileView)(_rwd.sizes.MLarge);
   var toggleGroup = function toggleGroup(key) {
     var activeGroupsCopy = _toConsumableArray(activeGroups);
     activeGroupsCopy[key] = !activeGroupsCopy[key];
     setactiveGroups(activeGroupsCopy);
   };
+
+  // persist on screen size changes
+  (0, _react.useEffect)(function () {
+    setactiveGroups(groups.map(function (group, index) {
+      if (isMobile) {
+        return group.name === 'New to STOKR';
+      }
+      return !dropdownCollapsed;
+    }));
+  }, [isMobile, groups, dropdownCollapsed]);
   return /*#__PURE__*/_react.default.createElement(_FooterMenu.Container, null, /*#__PURE__*/_react.default.createElement(_FooterMenu.Groups, null, groups.map(function (group, groupKey) {
     return /*#__PURE__*/_react.default.createElement(_FooterMenu.Group, {
       key: group.name,
@@ -116,7 +135,7 @@ var FooterMenu = function FooterMenu(_ref2) {
       isOpened: activeGroups[groupKey]
     }, /*#__PURE__*/_react.default.createElement(_FooterMenu.Items, {
       social: group.social
-    }, group.social ? group.items.map(function (item) {
+    }, group.social ? /*#__PURE__*/_react.default.createElement(_Header.SocialLinksContainer, null, group.items.map(function (item) {
       return /*#__PURE__*/_react.default.createElement(_FooterMenu.Item, {
         key: item.name,
         social: true
@@ -126,7 +145,7 @@ var FooterMenu = function FooterMenu(_ref2) {
         target: "_blank",
         rel: "noopener noreferrer"
       }, socialSvg[item.name]));
-    }) : group.items.map(function (item) {
+    })) : group.items.map(function (item) {
       return /*#__PURE__*/_react.default.createElement(_FooterMenu.Item, {
         key: item.name
       }, /*#__PURE__*/_react.default.createElement(_FooterMenu.Link, {

package/dist/components/Footer/FooterMenu.styles.js

@@ -36,7 +36,7 @@ exports.Title = Title;
 var Items = _styledComponents.default.ul.withConfig({
   displayName: "FooterMenustyles__Items",
   componentId: "sc-40ddqf-4"
-})(["display:block;list-style:none;padding:0 24px;padding-bottom:24px;@media screen and (min-width:992px){padding:0;margin-top:22px;margin:0 -8px;width:224px;", "}@media screen and (max-width:992px){padding-top:15px;padding-left:0;padding-bottom:0;}"], function (props) {
+})(["display:block;list-style:none;padding:0 24px;padding-bottom:24px;@media screen and (min-width:992px){display:block;padding:0;margin-top:22px;margin:0 -8px;width:224px;", "}@media screen and (max-width:992px){padding-top:15px;padding-left:0;padding-bottom:0;}"], function (props) {
   return props.social && "\n      margin-top: 14px;\n    ";
 });
 exports.Items = Items;

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.js

@@ -15,6 +15,7 @@ var _Input = _interopRequireDefault(require("../Input/Input"));
 var _Button = _interopRequireDefault(require("../Button/Button.styles"));
 var _Grid = require("../Grid/Grid.styles");
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _globalVariables = require("../../constants/globalVariables");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -46,7 +47,7 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
       email: ''
     });
     _defineProperty(_assertThisInitialized(_this), "validationSchema", Yup.object().shape({
-      email: Yup.string().email("Oops, that's not a valid address").required('Oops, this can‘t be blank')
+      email: Yup.string().matches(_globalVariables.emailRegex, "Oops, that's not a valid address").required('Oops, this can‘t be blank')
     }));
     return _this;
   }
@@ -61,7 +62,15 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
         popupError = _this$props.popupError,
         popupSuccess = _this$props.popupSuccess,
         isActionLoading = _this$props.isActionLoading,
-        background = _this$props.background;
+        background = _this$props.background,
+        isResettingExpiredToken = _this$props.isResettingExpiredToken;
+
+      // since the logic for handling expired tokens requires a modal which happens to be exactly
+      // the same as the Forgot Password modal (except for the content of 3 text elements),
+      // instead of creating a new dedicated modal, we just handle the text diffs here.
+      var headerTextContent = isResettingExpiredToken ? 'This Invite Link Has Expired' : 'Reset Your password';
+      var mainTextContent = isResettingExpiredToken ? 'To continue, request a new one using your email, and access will be sent shortly.' : 'No hints. No nudges. Just a nice, easy reset link direct to your inbox.';
+      var footerTextContent = isResettingExpiredToken ? 'Already have an account? ' : 'Remember your password? ';
       return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
         isOpen: isModalOpen,
         onClose: onModalClose,
@@ -70,9 +79,9 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
         part: 8
       }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
         modalTop: true
-      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Reset Your password"), /*#__PURE__*/_react.default.createElement("p", null, "No hints. No nudges. Just a nice, easy reset link direct to your inbox."))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, headerTextContent), /*#__PURE__*/_react.default.createElement("p", null, mainTextContent))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
         modalBot: true
-      }, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, 'Remember your password? ', /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
+      }, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, footerTextContent, /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
         to: "#",
         as: "button",
         onClick: onModalSwitch
@@ -88,15 +97,9 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
         var values = _ref.values,
           errors = _ref.errors,
           touched = _ref.touched,
-          handleBlur = _ref.handleBlur,
-          setFieldValue = _ref.setFieldValue,
-          setFieldTouched = _ref.setFieldTouched;
-        var onChangeWithTouch = function onChangeWithTouch(e) {
-          var field = e.target;
-          setFieldValue(field.name, field.value, false);
-          setFieldTouched(field.name);
-        };
-        var submitDisabled = !touched.email || !!errors.email || isActionLoading === 'forgot';
+          handleChange = _ref.handleChange,
+          handleBlur = _ref.handleBlur;
+        var submitDisabled = !values.email || !!errors.email || isActionLoading === 'forgot';
         return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
           noPadding: true
         }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
@@ -105,10 +108,12 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
           type: "email",
           label: "Your email",
           value: values.email,
-          onChange: onChangeWithTouch,
-          onBlur: handleBlur,
           error: !!errors.email,
-          touched: !!touched.email
+          touched: !!touched.email,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          validateOnChange: true,
+          validateOnBlur: true
         }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
           show: errors.email && touched.email
         }, errors.email))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
@@ -124,14 +129,7 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
         }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
           show: popupError.popup === 'forgot'
         }, popupError.message)));
-      }) :
-      /*#__PURE__*/
-      // <ComponentWrapper paddingVeticalHalf noPaddingHorizontal>
-      //   <FormError show={popupSuccess.popup === 'forgot'}>
-      //     {popupSuccess.message}
-      //   </FormError>
-      // </ComponentWrapper>
-      _react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, popupSuccess.message))))));
+      }) : /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, popupSuccess.message))))));
     }
   }]);
   return ForgotPasswordModal;

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.stories.js

@@ -31,6 +31,29 @@ var _default = {
       type: 'function',
       action: 'onModalSwitch',
       required: true
+    },
+    isActionLoading: {
+      control: {
+        type: 'select',
+        options: [false, 'forgot']
+      },
+      description: 'Loading state for the form submission'
+    },
+    background: {
+      control: 'text',
+      description: 'Background style for the modal'
+    },
+    isResettingExpiredToken: {
+      control: 'boolean',
+      description: 'Changes modal content for expired token reset'
+    },
+    popupError: {
+      control: 'object',
+      description: 'Error object to display form errors'
+    },
+    popupSuccess: {
+      control: 'object',
+      description: 'Success object to display success messages'
     }
   }
 };
@@ -41,6 +64,10 @@ var Template = function Template(args) {
 var ForgotPasswordModalOverview = Template.bind({});
 exports.ForgotPasswordModalOverview = ForgotPasswordModalOverview;
 ForgotPasswordModalOverview.args = {
+  isModalOpen: true,
   popupError: {},
-  popupSuccess: {}
+  popupSuccess: {},
+  isActionLoading: false,
+  background: '',
+  isResettingExpiredToken: false
 };

package/dist/components/Header/Header.js

@@ -391,7 +391,9 @@ var Header = function Header(_ref3) {
   }, /*#__PURE__*/_react.default.createElement(_Header.SignupButton, {
     onClick: onSignUpClick,
     isMobile: true
-  }, "Sign Up"))), socialLinks.length > 0 && /*#__PURE__*/_react.default.createElement(_Header.CTAContainer, null, /*#__PURE__*/_react.default.createElement("span", null, "FOLLOW US"), /*#__PURE__*/_react.default.createElement("div", null, socialLinks.map(function (item) {
+  }, "Sign Up"))), socialLinks.length > 0 && /*#__PURE__*/_react.default.createElement(_Header.CTAContainer, null, /*#__PURE__*/_react.default.createElement("span", null, "FOLLOW US"), /*#__PURE__*/_react.default.createElement(_Header.SocialLinksContainer, {
+    isHeader: true
+  }, socialLinks.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_FooterMenu.SocialLink, {
       key: item.name,
       href: item.url,

package/dist/components/Header/Header.styles.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserName = exports.UserButton = exports.UserAvatar = exports.UserAccount = exports.StyledSubMenu = exports.StyledHeader = exports.SignupButton = exports.SidebarToggle = exports.QuickNavWrap = exports.ProgressWrap = exports.MobileMenuWrapper = exports.MobileMenuToggler = exports.MobileMenuPart = exports.MobileMenuLink = exports.MobileMenuItem = exports.MobileMenu = exports.MainNavWrap = exports.Logo = exports.LoginButton = exports.HeaderQuickNav = exports.HeaderMainNav = exports.HeaderInner = exports.HamburgerIcon = exports.CTAContainer = void 0;
+exports.UserName = exports.UserButton = exports.UserAvatar = exports.UserAccount = exports.StyledSubMenu = exports.StyledHeader = exports.SocialLinksContainer = exports.SignupButton = exports.SidebarToggle = exports.QuickNavWrap = exports.ProgressWrap = exports.MobileMenuWrapper = exports.MobileMenuToggler = exports.MobileMenuPart = exports.MobileMenuLink = exports.MobileMenuItem = exports.MobileMenu = exports.MainNavWrap = exports.Logo = exports.LoginButton = exports.HeaderQuickNav = exports.HeaderMainNav = exports.HeaderInner = exports.HamburgerIcon = exports.CTAContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _rwd = _interopRequireWildcard(require("../../styles/rwd"));
 var _colors = _interopRequireDefault(require("../../styles/colors"));
@@ -191,4 +191,11 @@ var CTAContainer = _styledComponents.default.div.withConfig({
   displayName: "Headerstyles__CTAContainer",
   componentId: "sc-hifrdy-23"
 })(["align-items:center;border-top:1px solid ", ";display:flex;flex-direction:column;justify-content:center;padding:56px 0;width:100%;span{color:1px solid ", ";font-size:10px;letter-spacing:2.1px;margin-bottom:14px;}div{display:flex;flex-wrap:wrap;}", " ", "{display:flex;justify-content:center;background:transparent;margin:12px;svg{fill:rgb(32,32,32);height:18px !important;width:18px !important;}}"], sc.GRAY_BASE_HEX, sc.GRAY_BASE_HEX, _rwd.rwdMax.Medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    div{\n        width: 192px; /* Fit exactly 3 icons */\n    }\n  "]))), _FooterMenu.SocialLink);
-exports.CTAContainer = CTAContainer;
+exports.CTAContainer = CTAContainer;
+var SocialLinksContainer = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__SocialLinksContainer",
+  componentId: "sc-hifrdy-24"
+})(["display:flex !important;flex-wrap:nowrap !important;justify-content:", ";"], function (props) {
+  return props.isHeader ? 'center' : null;
+});
+exports.SocialLinksContainer = SocialLinksContainer;

package/dist/components/Input/Input.js

@@ -51,20 +51,29 @@ var Input = function Input(props) {
   (0, _react.useEffect)(function () {
     if (value && !labelUp) setLabelUp(true);
   }, [value, labelUp]);
-  var onFocus = function onFocus(e, field) {
-    var onFocus = props.onFocus;
-    onFocus && onFocus(e, field);
-    checkLabel(true);
-  };
   var onBlur = function onBlur(e, field) {
     var onBlur = props.onBlur;
+
+    // formik handler MUST be called before our logic !
     onBlur && onBlur(e, field);
+
+    // our logic follows
     checkLabel(false);
   };
+  var onFocus = function onFocus(e, field) {
+    var onFocus = props.onFocus;
+
+    // formik handler MUST be called before our logic !
+    onFocus && onFocus(e, field);
+
+    // our logic follows
+    checkLabel(true);
+  };
   var onChange = function onChange(e, field) {
     var onChange = props.onChange;
-    onChange && onChange(e, field);
+    onChange && onChange(e, field); // formik handler
   };
+
   var checkLabel = function checkLabel(focus) {
     setHasFocus(focus);
     setLabelUp(focus || !!value);

package/dist/components/LoginModal/LoginModal.js

@@ -10,7 +10,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
 var _formik = require("formik");
 var Yup = _interopRequireWildcard(require("yup"));
-var _formikPersist = require("formik-persist");
 var _Modal = require("../Modal/Modal");
 var _Form = _interopRequireWildcard(require("../Form/Form"));
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));
@@ -20,6 +19,7 @@ var _Button = _interopRequireDefault(require("../Button/Button.styles"));
 var _TextLink = _interopRequireDefault(require("../TextLink/TextLink.styles"));
 var _Grid = require("../Grid/Grid.styles");
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _globalVariables = require("../../constants/globalVariables");
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,21 +33,20 @@ var LoginModal = function LoginModal(props) {
   var _React$useState = _react.default.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     email = _React$useState2[0],
-    setemail = _React$useState2[1];
+    setEmail = _React$useState2[1];
   var location = (0, _reactRouterDom.useLocation)();
-  var emailSetRef = _react.default.useRef(false);
   _react.default.useEffect(function () {
     //the URL will look like this: /login?email=some.email@email.com
     var search = location.search;
     var query = new URLSearchParams(search);
     var email = query.get('email');
     if (email) {
-      setemail(email);
+      setEmail(email);
     }
   }, []);
   var validationSchema = Yup.object().shape({
-    email: Yup.string().email("Oops, that's not a valid address").required('Oops, this can‘t be blank'),
-    password: Yup.string().required('Oops, this can‘t be blank')
+    email: Yup.string().matches(_globalVariables.emailRegex, "Oops, that's not a valid address").required("Oops, this can't be blank"),
+    password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required')
   });
   var popupError = props.popupError,
     isModalOpen = props.isModalOpen,
@@ -77,9 +76,9 @@ var LoginModal = function LoginModal(props) {
     initialValues: {
       email: email || '',
       password: ''
-    }
-    // initialTouched={{ email: false, password: false }}
-    ,
+    },
+    validateOnChange: true,
+    validateOnBlur: true,
     validationSchema: validationSchema,
     onSubmit: function onSubmit(values) {
       onFormSend(values);
@@ -89,26 +88,8 @@ var LoginModal = function LoginModal(props) {
       errors = _ref.errors,
       touched = _ref.touched,
       handleChange = _ref.handleChange,
-      handleBlur = _ref.handleBlur,
-      setFieldValue = _ref.setFieldValue,
-      setFieldTouched = _ref.setFieldTouched,
-      setErrors = _ref.setErrors;
-    var onChangeWithTouch = function onChangeWithTouch(e) {
-      var field = e.target;
-      setFieldValue(field.name, field.value, false);
-      setFieldTouched(field.name);
-    };
-    if (email && values.email !== email && !emailSetRef.current) {
-      setFieldValue('email', email);
-      emailSetRef.current = true;
-    }
-
-    //hack to avoid error when autofill from browser
-    if (values.password && errors.password && values.email && !errors.email) {
-      setErrors({});
-      setFieldValue('password', values.password, false);
-    }
-    var submitDisabled = !touched.email || !touched.password || !!errors.email || !!errors.password || isActionLoading === 'login';
+      handleBlur = _ref.handleBlur;
+    var submitDisabled = !values.email || !values.password || !!errors.email || !!errors.password || isActionLoading === 'login';
     return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
       noPadding: true
     }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
@@ -117,7 +98,7 @@ var LoginModal = function LoginModal(props) {
       type: "email",
       label: "Your email",
       value: values.email,
-      onChange: onChangeWithTouch,
+      onChange: handleChange,
       onBlur: handleBlur,
       error: !!errors.email,
       touched: !!touched.email
@@ -132,7 +113,7 @@ var LoginModal = function LoginModal(props) {
       type: "password",
       label: "Password",
       value: values.password,
-      onChange: onChangeWithTouch,
+      onChange: handleChange,
       onBlur: handleBlur,
       error: !!errors.password,
       touched: !!touched.password

package/dist/components/LoginModal/LoginModal.stories.js

@@ -13,37 +13,35 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var _default = {
   title: 'Components Library/LoginModal',
   component: _LoginModal.default,
+  parameters: {
+    layout: 'fullscreen'
+  },
   argTypes: {
     popupError: {
-      type: 'object',
-      defaultValue: {
-        message: null,
-        popup: null
-      },
-      required: true
+      control: 'object'
     },
     isActionLoading: {
-      type: 'boolean',
-      defaultValue: false
+      control: {
+        type: 'select'
+      },
+      options: [false, 'login']
     },
     isModalOpen: {
-      type: 'boolean',
-      defaultValue: true
+      control: 'boolean'
+    },
+    background: {
+      control: 'text'
     },
     onFormSend: {
-      type: 'function',
       action: 'onFormSend'
     },
     onModalSwitch: {
-      type: 'function',
       action: 'onModalSwitch'
     },
     onForgotPassword: {
-      type: 'function',
       action: 'onForgotPassword'
     },
     onModalClose: {
-      type: 'function',
       action: 'onModalClose'
     }
   }
@@ -55,6 +53,7 @@ var Template = function Template(args) {
 var LoginModalOpen = Template.bind({});
 exports.LoginModalOpen = LoginModalOpen;
 LoginModalOpen.args = {
+  isModalOpen: true,
   popupError: {
     message: null,
     popup: null
@@ -74,5 +73,6 @@ LoginModalOpen.args = {
   },
   onForgotPassword: function onForgotPassword(data) {
     console.log('forgot password');
-  }
+  },
+  isActionLoading: false
 };

package/dist/components/RegisterModal/RegisterModal.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emailRegex = exports.default = exports.RegisterModal = void 0;
+exports.default = exports.RegisterModal = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
@@ -24,6 +24,7 @@ var _Button = _interopRequireDefault(require("../Button/Button.styles"));
 var _Grid = require("../Grid/Grid.styles");
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
 var _fetchDataPublic = _interopRequireDefault(require("../../api/fetchDataPublic"));
+var _globalVariables = require("../../constants/globalVariables");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -45,8 +46,6 @@ var TermsStyled = _styledComponents.styled.span.withConfig({
   displayName: "RegisterModal__TermsStyled",
   componentId: "sc-18f337m-0"
 })(["cursor:pointer;font-size:12px;text-decoration:underline;&:hover{opacity:0.7;}"]);
-var emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
-exports.emailRegex = emailRegex;
 var RegisterModal = function RegisterModal(props) {
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -133,7 +132,7 @@ var RegisterModal = function RegisterModal(props) {
     };
   }();
   var validationSchema = Yup.object().shape({
-    email: Yup.string().email("Oops, that's not a valid address").required('Oops, this can‘t be blank'),
+    email: Yup.string().matches(_globalVariables.emailRegex, "Oops, that's not a valid address").required('Oops, this can‘t be blank'),
     password: Yup.string().required('Oops, this can‘t be blank'),
     terms: Yup.bool().oneOf([true], 'Please agree to continue'),
     newsletter: Yup.bool() // .oneOf([true], 'Newsletter accept is required'),
@@ -212,7 +211,7 @@ var RegisterModal = function RegisterModal(props) {
         handleChange(e);
       }
     };
-    var submitDisabled = !!errors.email || !!errors.terms || values.password.length <= 5 || isActionLoading === 'signUp' || popupError.popup === 'register';
+    var submitDisabled = !values.email || !!errors.email || !!errors.terms || values.password.length <= 5 || isActionLoading === 'signUp' || popupError.popup === 'register';
     return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
       noPadding: true
     }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
@@ -244,16 +243,9 @@ var RegisterModal = function RegisterModal(props) {
       error: !!errors.password,
       touched: !!touched.password,
       info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters."
-      // showStrength
     }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
       show: errors.password && touched.password
-    }, errors.password), /*#__PURE__*/_react.default.createElement(_Form.FormError
-    // show={
-    //   !errors.password &&
-    //   touched.password &&
-    //   passwordStrengthMeter(values.password) !== 5
-    // }
-    , {
+    }, errors.password), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
       show: !errors.password && touched.password && values.password.length <= 5
     }, "The password must be at least 6 characters long"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
       noPaddingBottom: true,