@stokr/components-library 1.0.9 → 1.1.0

package/dist/components/LearnMoreSection/LearnMoreItem.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LearnMoreItemVideo = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LearnMoreItem = require("./LearnMoreItem");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
+var _default = {
+  title: 'Components Library/LearnMoreSection/LearnMoreItem',
+  component: _LearnMoreItem.LearnMoreItem,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    content: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    link: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    coverSrc: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    postType: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    onClick: {
+      type: 'function',
+      action: 'onClick navigate to link'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_LearnMoreItem.LearnMoreItem, args));
+};
+var LearnMoreItemVideo = Template.bind({});
+exports.LearnMoreItemVideo = LearnMoreItemVideo;
+LearnMoreItemVideo.args = {
+  title: 'A Title',
+  content: 'Some Content',
+  link: 'www.link.com',
+  coverSrc: 'https://www.videoconverterfactory.com/glossary/imgs/video.jpg',
+  postType: 'video'
+};
+
+// doublecheck:
+// add video to coverSrc
+//ad version with text to coverSrc

package/dist/components/LearnMoreSection/LearnMoreItem.styles.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.PlayIcon = exports.Play = exports.Cover = exports.Content = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactRouterDom = require("react-router-dom");
+var _Background = require("../Background/Background.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "LearnMoreItemstyles__Container",
+  componentId: "sc-mqjc7z-0"
+})(["height:100%;"]);
+exports.Container = Container;
+var Cover = _styledComponents.default.div.withConfig({
+  displayName: "LearnMoreItemstyles__Cover",
+  componentId: "sc-mqjc7z-1"
+})(["width:100%;", "{width:100%;padding-top:56.25%;}", "{position:absolute;top:50%;left:50%;width:auto;transform:translateY(-50%) translateX(-50%);}"], _Background.Container, _Background.Content);
+exports.Cover = Cover;
+var Play = (0, _styledComponents.default)(_reactRouterDom.Link).withConfig({
+  displayName: "LearnMoreItemstyles__Play",
+  componentId: "sc-mqjc7z-2"
+})(["width:48px;height:48px;color:", ";background:", ";border-radius:50%;display:flex;align-items:center;justify-content:center;transition:0.3s background;&:hover{color:", ";background:", ";}"], function (props) {
+  return props.theme.cWhite;
+}, function (props) {
+  return props.theme.cWarning;
+}, function (props) {
+  return props.theme.cWhite;
+}, function (props) {
+  return props.theme.cWarningDark;
+});
+exports.Play = Play;
+var PlayIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-md-play'
+}).withConfig({
+  displayName: "LearnMoreItemstyles__PlayIcon",
+  componentId: "sc-mqjc7z-3"
+})(["font-size:16px;"]);
+exports.PlayIcon = PlayIcon;
+var Title = _styledComponents.default.div.withConfig({
+  displayName: "LearnMoreItemstyles__Title",
+  componentId: "sc-mqjc7z-4"
+})(["font-size:16px;font-weight:600;"]);
+exports.Title = Title;
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "LearnMoreItemstyles__Content",
+  componentId: "sc-mqjc7z-5"
+})(["font-size:16px;font-weight:300;line-height:1.5;letter-spacing:0.6px;min-height:100px;"]);
+exports.Content = Content;

package/dist/components/LoginModal/LoginModal.js

@@ -0,0 +1,182 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LoginModal = void 0;
+var _react = _interopRequireDefault(require("react"));
+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"));
+var _Input = _interopRequireDefault(require("../Input/Input"));
+var _InputPassword = _interopRequireDefault(require("../Input/InputPassword"));
+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"));
+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 }; }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var LoginModal = function LoginModal(props) {
+  var _React$useState = _react.default.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    email = _React$useState2[0],
+    setemail = _React$useState2[1];
+  var location = (0, _reactRouterDom.useLocation)();
+  _react.default.useEffect(function () {
+    //the URL will look like this: /login?email=some.email@email.com
+    var search = location.search;
+    if (search.includes('email=')) {
+      var emailFromURL = search.slice(search.indexOf('=') + 1);
+      if (emailFromURL) {
+        setemail(emailFromURL);
+      }
+    }
+  }, []);
+  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')
+  });
+  var popupError = props.popupError,
+    isModalOpen = props.isModalOpen,
+    onModalClose = props.onModalClose,
+    onFormSend = props.onFormSend,
+    onModalSwitch = props.onModalSwitch,
+    onForgotPassword = props.onForgotPassword,
+    isActionLoading = props.isActionLoading,
+    background = props.background;
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    isOpen: isModalOpen,
+    onClose: onModalClose,
+    background: background
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    modalTop: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Log in"), /*#__PURE__*/_react.default.createElement("p", null, 'Come on in to stoke up innovation...'))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    modalBot: true
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, "Don't have an account yet? ", /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
+    to: "#",
+    as: "button",
+    onClick: onModalSwitch
+  }, "Sign up")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      email: email || '',
+      password: ''
+    }
+    // initialTouched={{ email: false, password: false }}
+    ,
+    validationSchema: validationSchema,
+    onSubmit: function onSubmit(values) {
+      onFormSend(values);
+    }
+  }, function (_ref) {
+    var values = _ref.values,
+      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) {
+      setFieldValue('email', email);
+    }
+
+    //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';
+    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, {
+      id: "sign-up-email",
+      name: "email",
+      type: "email",
+      label: "Your email",
+      value: email || values.email,
+      onChange: onChangeWithTouch,
+      onBlur: handleBlur,
+      error: !!errors.email,
+      touched: !!touched.email
+    }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+      show: errors.email && touched.email
+    }, errors.email))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingBottom: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_formikPersist.Persist, {
+      name: "login-form",
+      isSessionStorage: true
+    }), /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
+      id: "sign-up-password",
+      name: "password",
+      type: "password",
+      label: "Password",
+      value: values.password,
+      onChange: onChangeWithTouch,
+      onBlur: handleBlur,
+      error: !!errors.password,
+      touched: !!touched.password
+    }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+      show: errors.password && touched.password
+    }, errors.password))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingBottom: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      type: "submit",
+      fluid: true,
+      disabled: submitDisabled
+    }, isActionLoading === 'login' ? 'Logging in' : 'Login')), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      paddingVeticalHalf: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+      show: popupError.popup === 'login'
+    }, popupError.message)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingBottom: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_TextLink.default, {
+      as: "button",
+      onClick: function onClick() {
+        values.password = '';
+        onForgotPassword.apply(void 0, arguments);
+      }
+    }, "Forgot password?")));
+  })))));
+};
+exports.LoginModal = LoginModal;
+LoginModal.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  onModalClose: _propTypes.default.func.isRequired,
+  onFormSend: _propTypes.default.func.isRequired,
+  onModalSwitch: _propTypes.default.func.isRequired,
+  onForgotPassword: _propTypes.default.func.isRequired,
+  isActionLoading: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  popupError: _propTypes.default.shape({
+    popup: _propTypes.default.string,
+    message: _propTypes.default.string
+  }).isRequired,
+  background: _propTypes.default.string
+};
+var _default = LoginModal;
+exports.default = _default;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LoginModalOpen = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _LoginModal = _interopRequireDefault(require("./LoginModal"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/LoginModal',
+  component: _LoginModal.default,
+  argTypes: {
+    popupError: {
+      type: 'object',
+      defaultValue: {
+        message: null,
+        popup: null
+      },
+      required: true
+    },
+    isActionLoading: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    isModalOpen: {
+      type: 'boolean',
+      defaultValue: true
+    },
+    onFormSend: {
+      type: 'function',
+      action: 'onFormSend'
+    },
+    onModalSwitch: {
+      type: 'function',
+      action: 'onModalSwitch'
+    },
+    onForgotPassword: {
+      type: 'function',
+      action: 'onForgotPassword'
+    },
+    onModalClose: {
+      type: 'function',
+      action: 'onModalClose'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_LoginModal.default, args)));
+};
+var LoginModalOpen = Template.bind({});
+exports.LoginModalOpen = LoginModalOpen;
+LoginModalOpen.args = {
+  onFormSend: function onFormSend(data) {
+    console.log(data);
+  },
+  onModalClose: function onModalClose(data) {
+    console.log('close modal');
+  },
+  onModalSwitch: function onModalSwitch(data) {
+    console.log('switch modal');
+  },
+  onForgotPassword: function onForgotPassword(data) {
+    console.log('forgot password');
+  }
+};

package/dist/components/MainMenu/DynamicMainMenu.js

@@ -0,0 +1,51 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactCollapse = require("react-collapse");
+var _MainMenu = require("./MainMenu.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; }
+//import ReactDOM from 'react-dom'
+
+var DynamicMainMenu = function DynamicMainMenu(props) {
+  var spanStyleForMenu = {
+    letterSpacing: '2px',
+    cursor: 'pointer'
+  };
+  var options = props.options,
+    isMenuActive = props.isMenuActive;
+  return /*#__PURE__*/_react.default.createElement(_MainMenu.StyledMainMenu, null, /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
+    isOpened: isMenuActive
+  }, /*#__PURE__*/_react.default.createElement(_MainMenu.MainMenuContainer, null, /*#__PURE__*/_react.default.createElement(_MainMenu.MainMenuOptions, null, options.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_MainMenu.MainMenuOption, {
+      key: item.name + index,
+      as: "button",
+      button: true,
+      onClick: item.onClick,
+      noBorder: true
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: spanStyleForMenu
+    }, item.name));
+  })))));
+};
+var optionsShape = _propTypes.default.shape({
+  name: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func.isRequired
+});
+DynamicMainMenu.propTypes = {
+  isMenuActive: _propTypes.default.bool.isRequired,
+  options: optionsShape
+};
+DynamicMainMenu.defaultProps = {
+  isMenuActive: false,
+  options: []
+};
+var _default = DynamicMainMenu;
+exports.default = _default;