@bigbinary/neeto-molecules 3.3.18 → 3.3.19

package/dist/MobilePreviewHeader.js

@@ -0,0 +1,25 @@
+import classnames from 'classnames';
+import Typography from '@bigbinary/neetoui/Typography';
+import { useTranslation } from 'react-i18next';
+import { jsx } from 'react/jsx-runtime';
+
+var MobilePreviewHeader = function MobilePreviewHeader(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(["neeto-ui-bg-gray-200 px-6 py-5", className]),
+    "data-cy": "mobile-preview-header",
+    children: /*#__PURE__*/jsx(Typography, {
+      lineHeight: "normal",
+      style: "body2",
+      children: message || t("neetoMolecules.mobilePreview.message")
+    })
+  });
+};
+
+export { MobilePreviewHeader as default };
+//# sourceMappingURL=MobilePreviewHeader.js.map

package/dist/MobilePreviewHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobilePreviewHeader.js","sources":["../src/components/MobilePreviewHeader/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\n// Had to disable this to populate content in description column.\n// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation\nconst MobilePreviewHeader = ({ className = \"\", message = \"\" }) => {\n  const { t } = useTranslation();\n\n  return (\n    <div\n      className={classnames([\"neeto-ui-bg-gray-200 px-6 py-5\", className])}\n      data-cy=\"mobile-preview-header\"\n    >\n      <Typography lineHeight=\"normal\" style=\"body2\">\n        {message || t(\"neetoMolecules.mobilePreview.message\")}\n      </Typography>\n    </div>\n  );\n};\n\nMobilePreviewHeader.propTypes = {\n  /**\n   * To provide additional classes\n   */\n  className: PropTypes.string,\n  /**\n   * To provide custom message.\n   */\n  message: PropTypes.node,\n};\n\nexport default MobilePreviewHeader;\n"],"names":["MobilePreviewHeader","_ref","_ref$className","className","_ref$message","message","_useTranslation","useTranslation","t","_jsx","classnames","children","Typography","lineHeight","style"],"mappings":";;;;;AAOA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAyC;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CAAnCE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IAAAE,YAAA,GAAAH,IAAA,CAAEI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,YAAA,CAAA;AACzD,EAAA,IAAAE,eAAA,GAAcC,cAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC,CAAA;AAET,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IACEN,SAAS,EAAEO,UAAU,CAAC,CAAC,gCAAgC,EAAEP,SAAS,CAAC,CAAE;AACrE,IAAA,SAAA,EAAQ,uBAAuB;IAAAQ,QAAA,eAE/BF,GAAA,CAACG,UAAU,EAAA;AAACC,MAAAA,UAAU,EAAC,QAAQ;AAACC,MAAAA,KAAK,EAAC,OAAO;AAAAH,MAAAA,QAAA,EAC1CN,OAAO,IAAIG,CAAC,CAAC,sCAAsC,CAAA;KAC1C,CAAA;AAAC,GACV,CAAC,CAAA;AAEV;;;;"}

package/dist/cjs/MobilePreviewHeader.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var classnames = require('classnames');
+var Typography = require('@bigbinary/neetoui/Typography');
+var reactI18next = require('react-i18next');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+
+var MobilePreviewHeader = function MobilePreviewHeader(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classnames__default["default"](["neeto-ui-bg-gray-200 px-6 py-5", className]),
+    "data-cy": "mobile-preview-header",
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      lineHeight: "normal",
+      style: "body2",
+      children: message || t("neetoMolecules.mobilePreview.message")
+    })
+  });
+};
+
+module.exports = MobilePreviewHeader;
+//# sourceMappingURL=MobilePreviewHeader.js.map

package/dist/cjs/MobilePreviewHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobilePreviewHeader.js","sources":["../../src/components/MobilePreviewHeader/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\n// Had to disable this to populate content in description column.\n// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation\nconst MobilePreviewHeader = ({ className = \"\", message = \"\" }) => {\n  const { t } = useTranslation();\n\n  return (\n    <div\n      className={classnames([\"neeto-ui-bg-gray-200 px-6 py-5\", className])}\n      data-cy=\"mobile-preview-header\"\n    >\n      <Typography lineHeight=\"normal\" style=\"body2\">\n        {message || t(\"neetoMolecules.mobilePreview.message\")}\n      </Typography>\n    </div>\n  );\n};\n\nMobilePreviewHeader.propTypes = {\n  /**\n   * To provide additional classes\n   */\n  className: PropTypes.string,\n  /**\n   * To provide custom message.\n   */\n  message: PropTypes.node,\n};\n\nexport default MobilePreviewHeader;\n"],"names":["MobilePreviewHeader","_ref","_ref$className","className","_ref$message","message","_useTranslation","useTranslation","t","_jsx","classnames","children","Typography","lineHeight","style"],"mappings":";;;;;;;;;;;;AAOA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAyC;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CAAnCE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IAAAE,YAAA,GAAAH,IAAA,CAAEI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,YAAA,CAAA;AACzD,EAAA,IAAAE,eAAA,GAAcC,2BAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC,CAAA;AAET,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEN,SAAS,EAAEO,8BAAU,CAAC,CAAC,gCAAgC,EAAEP,SAAS,CAAC,CAAE;AACrE,IAAA,SAAA,EAAQ,uBAAuB;IAAAQ,QAAA,eAE/BF,cAAA,CAACG,8BAAU,EAAA;AAACC,MAAAA,UAAU,EAAC,QAAQ;AAACC,MAAAA,KAAK,EAAC,OAAO;AAAAH,MAAAA,QAAA,EAC1CN,OAAO,IAAIG,CAAC,CAAC,sCAAsC,CAAA;KAC1C,CAAA;AAAC,GACV,CAAC,CAAA;AAEV;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "3.3.18",
+  "version": "3.3.19",
   "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

@@ -738,6 +738,9 @@
     },
     "deviceIncompatibility": {
       "description": "The design tab is currently not supported in this screen size. Please switch to a screen larger than 768px wide."
+    },
+    "mobilePreview": {
+      "message": "The following section is a preview based on the changes you have made above."
     }
   }
 }

package/types/MobilePreviewHeader.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+/**
+ *
+ * Can be used to show preview message for smaller viewports.
+ *
+ * @example 
+ *
+ * import MobilePreviewHeader from "@bigbinary/neeto-molecules/MobilePreviewHeader";
+ * 
+ * const App = () => <MobilePreviewHeader />;
+ * @endexample
+*/
+const MobilePreviewHeader: React.FC<{
+  message?: React.ReactNode;
+  className?: string;
+}>;
+export default MobilePreviewHeader;