@bigbinary/neeto-molecules 1.0.83 → 1.0.84

package/dist/ShareViaLink.js

@@ -1,9 +1,9 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { slugify, noop } from '@bigbinary/neeto-commons-frontend/pure';
 import { buildUrl, copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils';
-import { Facebook, Linkedin, Twitter, Copy, ExternalLink, MenuHorizontal, QrCode } from '@bigbinary/neeto-icons';
-import { Modal, Typography, Input as Input$1, Button as Button$1, Dropdown, Tooltip } from '@bigbinary/neetoui';
-import { useTranslation } from 'react-i18next';
+import { Facebook, Linkedin, Twitter, Copy, ExternalLink, MenuHorizontal } from '@bigbinary/neeto-icons';
+import { Modal, Typography, Input as Input$1, Button as Button$1, Dropdown } from '@bigbinary/neetoui';
+import { useTranslation, Trans } from 'react-i18next';
 import { Formik, Form } from 'formik';
 import { Input, Button } from '@bigbinary/neetoui/formik';
 import { t as t$1 } from 'i18next';
@@ -1195,7 +1195,7 @@ function QRCodeSVG(props) {
     shapeRendering: "crispEdges"
   }), image);
 }
-var QRCode = (props) => {
+var QRCode$1 = (props) => {
   const _a = props, { renderAs } = _a, otherProps = __objRest(_a, ["renderAs"]);
   if (renderAs === "svg") {
     return /* @__PURE__ */ React.createElement(QRCodeSVG, __spreadValues({}, otherProps));
@@ -1203,14 +1203,9 @@ var QRCode = (props) => {
   return /* @__PURE__ */ React.createElement(QRCodeCanvas, __spreadValues({}, otherProps));
 };
 
-var QRCodeModal = function QRCodeModal(_ref) {
+var QRCode = function QRCode(_ref) {
   var entity = _ref.entity,
-    entityName = _ref.entityName,
-    isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
     url = _ref.url;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   if (!entity) return null;
   var id = entity.id,
     name = entity.name;
@@ -1221,58 +1216,50 @@ var QRCodeModal = function QRCodeModal(_ref) {
       name: slugify(name)
     });
   };
-  return /*#__PURE__*/React.createElement(Modal, {
-    "data-testid": "qr-code-modal",
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Modal.Header, {
-    description: t("neetoMolecules.shareViaLink.socialMediaShare.qrCodeInfo", {
-      entity: entityName
-    })
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col space-y-4"
   }, /*#__PURE__*/React.createElement(Typography, {
-    className: "mb-0.5",
     lineHeight: "normal",
-    style: "h3",
-    weight: "semibold"
-  }, t("neetoMolecules.shareViaLink.socialMediaShare.qrCodeDownload"))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(QRCode, {
+    style: "body2",
+    weight: "medium"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMolecules.shareViaLink.socialMediaShare.qrCodeInfo",
+    components: {
+      button: /*#__PURE__*/React.createElement(Button$1, {
+        "data-testid": "qr-code-download-button",
+        style: "link",
+        onClick: handleDownload
+      })
+    }
+  })), /*#__PURE__*/React.createElement(QRCode$1, {
     "data-testid": canvasId,
     id: canvasId,
     value: url
-  })), /*#__PURE__*/React.createElement(Modal.Footer, {
-    className: "space-x-2"
-  }, /*#__PURE__*/React.createElement(Button$1, {
-    "data-testid": "qr-code-download-button",
-    label: t("neetoMolecules.shareViaLink.socialMediaShare.qrCodeDownload"),
-    onClick: handleDownload
-  }), /*#__PURE__*/React.createElement(Button$1, {
-    label: t("neetoMolecules.common.actions.cancel"),
-    style: "text",
-    onClick: onClose
-  })));
+  }));
 };
 
 var SocialMedia = function SocialMedia(_ref) {
   var entity = _ref.entity,
-    entityName = _ref.entityName,
     postTitle = _ref.postTitle,
     url = _ref.url;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isQRCodeModalOpen = _useState2[0],
-    setIsQRCodeModalOpen = _useState2[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var socialMediaButtonClasses = "neeto-ui-bg-gray-200 hover:neeto-ui-bg-gray-300 flex h-12 w-12 cursor-pointer items-center justify-center neeto-ui-rounded-md transition-colors duration-300 ease-in-out";
   return /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4",
+    className: "flex space-x-4 divide-x"
+  }, /*#__PURE__*/React.createElement(QRCode, {
+    entity: entity,
+    url: url
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4 pl-4",
     "data-testid": "social-media-block"
   }, /*#__PURE__*/React.createElement(Typography, {
     className: "neeto-ui-text-gray-800",
-    lineHeight: "snug",
+    lineHeight: "normal",
     style: "body2",
     weight: "medium"
   }, t("neetoMolecules.shareViaLink.socialMediaShare.title")), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-4"
+    className: "flex gap-4"
   }, Object.entries(SOCIAL_MEDIA_OPTIONS).map(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
       key = _ref3[0],
@@ -1294,23 +1281,7 @@ var SocialMedia = function SocialMedia(_ref) {
     }, /*#__PURE__*/React.createElement(Icon, {
       size: 24
     }));
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    content: t("neetoMolecules.shareViaLink.socialMediaShare.qrCode")
-  }, /*#__PURE__*/React.createElement("button", {
-    className: socialMediaButtonClasses,
-    "data-testid": "qr-code-button",
-    onClick: function onClick() {
-      return setIsQRCodeModalOpen(true);
-    }
-  }, /*#__PURE__*/React.createElement(QrCode, null)))), /*#__PURE__*/React.createElement(QRCodeModal, {
-    entity: entity,
-    entityName: entityName,
-    isOpen: isQRCodeModalOpen,
-    url: url,
-    onClose: function onClose() {
-      return setIsQRCodeModalOpen(false);
-    }
-  }));
+  }))));
 };
 
 var ShareViaLink = function ShareViaLink(_ref) {
@@ -1350,9 +1321,8 @@ var ShareViaLink = function ShareViaLink(_ref) {
     url: url
   }), /*#__PURE__*/React.createElement(SocialMedia, {
     entity: entity,
-    entityName: entityName,
-    postTitle: socialMediaPostTitle,
-    url: url
+    url: url,
+    postTitle: socialMediaPostTitle
   }));
 };