@bigbinary/neeto-molecules 1.0.34 → 1.0.35

package/README.md

@@ -20,6 +20,7 @@ https://neeto-molecules.neeto.com/
 - [EmailPreview](./docs/components.md#emailpreview)
 - [ErrorPage](./docs/components.md#errorpage)
 - [IntegrationCard](./docs/components.md#integrationscard)
+- [IntegrationWalkthroughModal](./docs/components.md#integrationwalkthroughmodal)
 - [IpRestriction](./docs/components.md#iprestriction)
 - [KeyboardShortcuts](./docs/components.md#keyboardshortcuts)
 - [LoginPage](./docs/components.md#loginpage)

package/dist/IntegrationWalkthroughModal.cjs.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+var neetoui = require('@bigbinary/neetoui');
+var reactI18next = require('react-i18next');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var IntegrationWalkthroughModal = function IntegrationWalkthroughModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    videoUrl = _ref.videoUrl,
+    children = _ref.children;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
+    isOpen: isOpen,
+    size: "large",
+    onClose: onClose
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMolecules.integrationWalkthroughModal.header"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full py-10"
+  }, /*#__PURE__*/React__default["default"].createElement("video", {
+    autoPlay: true,
+    controls: true,
+    muted: true,
+    className: "cursor-pointer",
+    id: "walkthrough-video"
+  }, /*#__PURE__*/React__default["default"].createElement("source", {
+    src: videoUrl
+  })), children)), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    label: t("neetoMolecules.integrationWalkthroughModal.continue"),
+    onClick: onClose
+  })));
+};
+
+module.exports = IntegrationWalkthroughModal;
+//# sourceMappingURL=IntegrationWalkthroughModal.cjs.js.map

package/dist/IntegrationWalkthroughModal.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationWalkthroughModal.cjs.js","sources":["../src/components/IntegrationWalkthroughModal/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { Modal, Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nconst IntegrationWalkthroughModal = ({\n  isOpen,\n  onClose,\n  videoUrl,\n  children,\n}) => {\n  const { t } = useTranslation();\n\n  return (\n    <Modal isOpen={isOpen} size=\"large\" onClose={onClose}>\n      <Modal.Header>\n        <Typography style=\"h2\" weight=\"semibold\">\n          {t(\"neetoMolecules.integrationWalkthroughModal.header\")}\n        </Typography>\n      </Modal.Header>\n      <Modal.Body>\n        <div className=\"w-full py-10\">\n          <video\n            autoPlay\n            controls\n            muted\n            className=\"cursor-pointer\"\n            id=\"walkthrough-video\"\n          >\n            <source src={videoUrl} />\n          </video>\n          {children}\n        </div>\n      </Modal.Body>\n      <Modal.Footer>\n        <Button\n          label={t(\"neetoMolecules.integrationWalkthroughModal.continue\")}\n          onClick={onClose}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n};\n\nIntegrationWalkthroughModal.propTypes = {\n  /**\n   * To specify video URL of integration walkthrough that will be embedded.\n   */\n  videoUrl: PropTypes.string,\n  /**\n   * To specify whether the integration modal should be opened or closed.\n   */\n  isOpen: PropTypes.boolean,\n  /**\n   * Handler function that is triggered when the continue or close button is clicked.\n   */\n  onClose: PropTypes.func,\n};\n\nexport default IntegrationWalkthroughModal;\n"],"names":["IntegrationWalkthroughModal","_ref","isOpen","onClose","videoUrl","children","_useTranslation","useTranslation","t","React","createElement","Modal","size","Header","Typography","style","weight","Body","className","autoPlay","controls","muted","id","src","Footer","Button","label","onClick"],"mappings":";;;;;;;;;;AAMA,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAK3B;AAAA,EAAA,IAJJC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IACPC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAER,IAAAC,eAAA,GAAcC,2BAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC,CAAA;AAET,EAAA,oBACEC,yBAAA,CAAAC,aAAA,CAACC,aAAK,EAAA;AAACT,IAAAA,MAAM,EAAEA,MAAO;AAACU,IAAAA,IAAI,EAAC,OAAO;AAACT,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GAAA,eACnDM,yBAAA,CAAAC,aAAA,CAACC,aAAK,CAACE,MAAM,EAAA,IAAA,eACXJ,yBAAA,CAAAC,aAAA,CAACI,kBAAU,EAAA;AAACC,IAAAA,KAAK,EAAC,IAAI;AAACC,IAAAA,MAAM,EAAC,UAAA;AAAU,GAAA,EACrCR,CAAC,CAAC,mDAAmD,CAAC,CAC5C,CACA,eACfC,yBAAA,CAAAC,aAAA,CAACC,aAAK,CAACM,IAAI,EACTR,IAAAA,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,cAAA;GACbT,eAAAA,yBAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACES,QAAQ,EAAA,IAAA;IACRC,QAAQ,EAAA,IAAA;IACRC,KAAK,EAAA,IAAA;AACLH,IAAAA,SAAS,EAAC,gBAAgB;AAC1BI,IAAAA,EAAE,EAAC,mBAAA;GAEHb,eAAAA,yBAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQa,IAAAA,GAAG,EAAEnB,QAAAA;AAAS,GAAA,CAAG,CACnB,EACPC,QAAQ,CACL,CACK,eACbI,yBAAA,CAAAC,aAAA,CAACC,aAAK,CAACa,MAAM,EAAA,IAAA,eACXf,yBAAA,CAAAC,aAAA,CAACe,cAAM,EAAA;AACLC,IAAAA,KAAK,EAAElB,CAAC,CAAC,qDAAqD,CAAE;AAChEmB,IAAAA,OAAO,EAAExB,OAAAA;AAAQ,GAAA,CACjB,CACW,CACT,CAAA;AAEZ;;;;"}

package/dist/IntegrationWalkthroughModal.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Modal, Typography, Button } from '@bigbinary/neetoui';
+import { useTranslation } from 'react-i18next';
+
+var IntegrationWalkthroughModal = function IntegrationWalkthroughModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    videoUrl = _ref.videoUrl,
+    children = _ref.children;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: isOpen,
+    size: "large",
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMolecules.integrationWalkthroughModal.header"))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full py-10"
+  }, /*#__PURE__*/React.createElement("video", {
+    autoPlay: true,
+    controls: true,
+    muted: true,
+    className: "cursor-pointer",
+    id: "walkthrough-video"
+  }, /*#__PURE__*/React.createElement("source", {
+    src: videoUrl
+  })), children)), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
+    label: t("neetoMolecules.integrationWalkthroughModal.continue"),
+    onClick: onClose
+  })));
+};
+
+export { IntegrationWalkthroughModal as default };
+//# sourceMappingURL=IntegrationWalkthroughModal.js.map

package/dist/IntegrationWalkthroughModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationWalkthroughModal.js","sources":["../src/components/IntegrationWalkthroughModal/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { Modal, Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nconst IntegrationWalkthroughModal = ({\n  isOpen,\n  onClose,\n  videoUrl,\n  children,\n}) => {\n  const { t } = useTranslation();\n\n  return (\n    <Modal isOpen={isOpen} size=\"large\" onClose={onClose}>\n      <Modal.Header>\n        <Typography style=\"h2\" weight=\"semibold\">\n          {t(\"neetoMolecules.integrationWalkthroughModal.header\")}\n        </Typography>\n      </Modal.Header>\n      <Modal.Body>\n        <div className=\"w-full py-10\">\n          <video\n            autoPlay\n            controls\n            muted\n            className=\"cursor-pointer\"\n            id=\"walkthrough-video\"\n          >\n            <source src={videoUrl} />\n          </video>\n          {children}\n        </div>\n      </Modal.Body>\n      <Modal.Footer>\n        <Button\n          label={t(\"neetoMolecules.integrationWalkthroughModal.continue\")}\n          onClick={onClose}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n};\n\nIntegrationWalkthroughModal.propTypes = {\n  /**\n   * To specify video URL of integration walkthrough that will be embedded.\n   */\n  videoUrl: PropTypes.string,\n  /**\n   * To specify whether the integration modal should be opened or closed.\n   */\n  isOpen: PropTypes.boolean,\n  /**\n   * Handler function that is triggered when the continue or close button is clicked.\n   */\n  onClose: PropTypes.func,\n};\n\nexport default IntegrationWalkthroughModal;\n"],"names":["IntegrationWalkthroughModal","_ref","isOpen","onClose","videoUrl","children","_useTranslation","useTranslation","t","React","createElement","Modal","size","Header","Typography","style","weight","Body","className","autoPlay","controls","muted","id","src","Footer","Button","label","onClick"],"mappings":";;;;AAMA,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAK3B;AAAA,EAAA,IAJJC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IACPC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAER,IAAAC,eAAA,GAAcC,cAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC,CAAA;AAET,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AAACT,IAAAA,MAAM,EAAEA,MAAO;AAACU,IAAAA,IAAI,EAAC,OAAO;AAACT,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GAAA,eACnDM,KAAA,CAAAC,aAAA,CAACC,KAAK,CAACE,MAAM,EAAA,IAAA,eACXJ,KAAA,CAAAC,aAAA,CAACI,UAAU,EAAA;AAACC,IAAAA,KAAK,EAAC,IAAI;AAACC,IAAAA,MAAM,EAAC,UAAA;AAAU,GAAA,EACrCR,CAAC,CAAC,mDAAmD,CAAC,CAC5C,CACA,eACfC,KAAA,CAAAC,aAAA,CAACC,KAAK,CAACM,IAAI,EACTR,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,cAAA;GACbT,eAAAA,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACES,QAAQ,EAAA,IAAA;IACRC,QAAQ,EAAA,IAAA;IACRC,KAAK,EAAA,IAAA;AACLH,IAAAA,SAAS,EAAC,gBAAgB;AAC1BI,IAAAA,EAAE,EAAC,mBAAA;GAEHb,eAAAA,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQa,IAAAA,GAAG,EAAEnB,QAAAA;AAAS,GAAA,CAAG,CACnB,EACPC,QAAQ,CACL,CACK,eACbI,KAAA,CAAAC,aAAA,CAACC,KAAK,CAACa,MAAM,EAAA,IAAA,eACXf,KAAA,CAAAC,aAAA,CAACe,MAAM,EAAA;AACLC,IAAAA,KAAK,EAAElB,CAAC,CAAC,qDAAqD,CAAE;AAChEmB,IAAAA,OAAO,EAAExB,OAAAA;AAAQ,GAAA,CACjB,CACW,CACT,CAAA;AAEZ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/src/translations/en.json

@@ -280,6 +280,10 @@
       "currentIpTitle": "Your current IP is",
       "currentIpDescription": "Your current IP will be added to the allowed IP range by default. You will not be able to save the IP settings without your current IP address on the list"
     },
+    "integrationWalkthroughModal": {
+      "header": "Check how it behaves",
+      "continue": "Continue"
+    },
     "publishBlock": {
       "viewDraftVersion": "View draft version",
       "deleteDraftVersion": "Delete draft version. It'll not impact the published version",

package/types/IntegrationWalkthroughModal.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+/**
+ *
+ * A component used to display walkthrough video of integration.
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * import IntegrationWalkthroughModal from "@bigbinary/neeto-molecules/IntegrationWalkthroughModal";
+ * 
+ * const Finish = () => {
+ *   const [isModalOpen, setIsModalOpen] = useState(true);
+ * 
+ *   return (
+ *     <IntegrationWalkthroughModal
+ *       isOpen={isModalOpen}
+ *       onClose={() => setIsModalOpen(false)}
+ *       videoUrl="https://user-images.githubusercontent.com/39831309/232906732-43e139ac-4af8-4a59-9f4f-e96ebf436f75.mov"
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+const IntegrationWalkthroughModal: React.FC<{
+  videoUrl: string;
+  isOpen: boolean;
+  onClose: Function;
+}>;
+export default IntegrationWalkthroughModal;