npm - @bigbinary/neeto-molecules - Versions diffs - 1.15.28 → 1.15.29 - Mend

@bigbinary/neeto-molecules 1.15.28 → 1.15.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/Onboarding.js +44 -2
package/dist/Onboarding.js.map +1 -1
package/dist/cjs/Onboarding.js +45 -1
package/dist/cjs/Onboarding.js.map +1 -1
package/package.json +1 -1
package/src/translations/en.json +6 -1
package/types/Onboarding.d.ts +47 -2

package/dist/Onboarding.js CHANGED Viewed

@@ -6,9 +6,11 @@ import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
 import { Typography, Button } from '@bigbinary/neetoui';
 import { p as propTypes } from './index-e5588516.js';
 import { n } from './inject-css-c86de496.js';
+import useBreakpoints from '@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints';
+import { useTranslation } from 'react-i18next';
 import { RightArrow } from '@bigbinary/neeto-icons';
-var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:15vh 32px 32px}";
+var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:15vh 32px 32px;width:100%}";
 n(css,{});
 var CompletedScreen = withT(function (_ref) {
@@ -70,6 +72,46 @@ CompletedScreen.propTypes = {
   buttonProps: propTypes.exports.object
 };
+var HelpScreen = function HelpScreen(_ref) {
+  var buttonProps = _ref.buttonProps,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames("neeto-molecules-onboarding__wrapper", className),
+    "data-testid": "onboarding-help-wrapper"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto w-full max-w-2xl space-y-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-3"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    component: "h1",
+    "data-cy": "onboarding-help-title",
+    "data-testid": "onboarding-help-title",
+    style: "h2"
+  }, t("neetoMolecules.onboarding.helpScreen.title")), /*#__PURE__*/React__default.createElement(Typography, {
+    "data-cy": "onboarding-help-description",
+    "data-testid": "onboarding-help-description",
+    lineHeight: "normal",
+    style: "body1"
+  }, t("neetoMolecules.onboarding.helpScreen.description")), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full overflow-hidden"
+  }, isSize("mobile") ? /*#__PURE__*/React__default.createElement("img", {
+    alt: "",
+    src: "https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg"
+  }) : /*#__PURE__*/React__default.createElement("img", {
+    alt: "",
+    src: "https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg"
+  }))), /*#__PURE__*/React__default.createElement(Button, _extends({
+    "data-cy": "onboarding-help-button",
+    "data-testid": "onboarding-help-button",
+    label: t("neetoMolecules.onboarding.helpScreen.continueButton")
+  }, buttonProps))));
+};
 var WelcomeScreen = withT(function (_ref) {
   var t = _ref.t,
     title = _ref.title,
@@ -119,5 +161,5 @@ WelcomeScreen.propTypes = {
   buttonProps: propTypes.exports.object
 };
-export { CompletedScreen, WelcomeScreen };
+export { CompletedScreen, HelpScreen, WelcomeScreen };
 //# sourceMappingURL=Onboarding.js.map

package/dist/Onboarding.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Onboarding.js","sources":["../src/components/Onboarding/CompletedScreen.jsx","../src/components/Onboarding/WelcomeScreen.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { isPresent } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst CompletedScreen = withT(\n ({ t, title, description, children, buttonProps, className = \"\" }) => (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-congratulations-wrapper\"\n >\n <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-emoji\"\n style=\"h1\"\n >\n 🎉\n </Typography>\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-title\"\n data-testid=\"onboarding-congratulations-title\"\n style=\"h1\"\n >\n <span className=\"neeto-ui-text-success-500\">\n {t(\"neetoMolecules.onboarding.congratulations\")}\n </span>\n <br />\n {title}\n </Typography>\n {description && (\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-description\"\n data-testid=\"onboarding-congratulations-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {description}\n </Typography>\n )}\n {children}\n </div>\n {isPresent(buttonProps) && (\n <Button\n data-cy=\"onboarding-congratulations-button\"\n data-testid=\"onboarding-congratulations-button\"\n label={t(\"neetoMolecules.onboarding.startUsing\")}\n {...buttonProps}\n />\n )}\n </div>\n )\n);\n\nCompletedScreen.propTypes = {\n /*\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Title of the completed screen\n /\n title: PropTypes.string,\n /\n Description of the completed screen\n /\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /\n Additional children elements to be rendered within the completed screen.\n /\n children: PropTypes.node,\n /\n Additional props that can be passed on to the button\n /\n buttonProps: PropTypes.object,\n};\n\nexport default CompletedScreen;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst WelcomeScreen = withT(\n ({ t, title, description, buttonProps, className = \"\" }) => (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-welcome-wrapper\"\n >\n <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-welcome-title\"\n data-testid=\"onboarding-welcome-title\"\n style=\"h1\"\n >\n {title}\n </Typography>\n {description && (\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-welcome-description\"\n data-testid=\"onboarding-welcome-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {description}\n </Typography>\n )}\n </div>\n <Button\n data-cy=\"onboarding-welcome-button\"\n data-testid=\"onboarding-welcome-button\"\n icon={RightArrow}\n label={t(\"neetoMolecules.onboarding.getStarted\")}\n {...buttonProps}\n />\n </div>\n )\n);\n\nWelcomeScreen.propTypes = {\n /\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Title of the welcome screen\n /\n title: PropTypes.string,\n /\n Description of the welcome screen\n /\n description: PropTypes.string,\n /\n Additional props that can be passed on to the button\n */\n buttonProps: PropTypes.object,\n};\n\nexport default WelcomeScreen;\n"],"names":["CompletedScreen","withT","_ref","t","title","description","children","buttonProps","_ref$className","className","React","createElement","classnames","Typography","style","lineHeight","isPresent","Button","_extends","label","propTypes","PropTypes","string","oneOfType","node","object","WelcomeScreen","icon","RightArrow"],"mappings":"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"}
1	+ {"version":3,"file":"Onboarding.js","sources":["../src/components/Onboarding/CompletedScreen.jsx","../src/components/Onboarding/HelpScreen.jsx","../src/components/Onboarding/WelcomeScreen.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { isPresent } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst CompletedScreen = withT(\n ({ t, title, description, children, buttonProps, className = \"\" }) => (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-congratulations-wrapper\"\n >\n <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-emoji\"\n style=\"h1\"\n >\n 🎉\n </Typography>\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-title\"\n data-testid=\"onboarding-congratulations-title\"\n style=\"h1\"\n >\n <span className=\"neeto-ui-text-success-500\">\n {t(\"neetoMolecules.onboarding.congratulations\")}\n </span>\n <br />\n {title}\n </Typography>\n {description && (\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-description\"\n data-testid=\"onboarding-congratulations-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {description}\n </Typography>\n )}\n {children}\n </div>\n {isPresent(buttonProps) && (\n <Button\n data-cy=\"onboarding-congratulations-button\"\n data-testid=\"onboarding-congratulations-button\"\n label={t(\"neetoMolecules.onboarding.startUsing\")}\n {...buttonProps}\n />\n )}\n </div>\n )\n);\n\nCompletedScreen.propTypes = {\n /*\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Title of the completed screen\n /\n title: PropTypes.string,\n /\n Description of the completed screen\n /\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /\n Additional children elements to be rendered within the completed screen.\n /\n children: PropTypes.node,\n /\n Additional props that can be passed on to the button\n /\n buttonProps: PropTypes.object,\n};\n\nexport default CompletedScreen;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport \"./onboarding.scss\";\n\nconst HelpScreen = ({ buttonProps, className = \"\" }) => {\n const { t } = useTranslation();\n const { isSize } = useBreakpoints();\n\n return (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-help-wrapper\"\n >\n <div className=\"mx-auto w-full max-w-2xl space-y-6\">\n <div className=\"space-y-3\">\n <Typography\n component=\"h1\"\n data-cy=\"onboarding-help-title\"\n data-testid=\"onboarding-help-title\"\n style=\"h2\"\n >\n {t(\"neetoMolecules.onboarding.helpScreen.title\")}\n </Typography>\n <Typography\n data-cy=\"onboarding-help-description\"\n data-testid=\"onboarding-help-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {t(\"neetoMolecules.onboarding.helpScreen.description\")}\n </Typography>\n <div className=\"w-full overflow-hidden\">\n {isSize(\"mobile\") ? (\n <img\n alt=\"\"\n src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg\"\n />\n ) : (\n <img\n alt=\"\"\n src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg\"\n />\n )}\n </div>\n </div>\n <Button\n data-cy=\"onboarding-help-button\"\n data-testid=\"onboarding-help-button\"\n label={t(\"neetoMolecules.onboarding.helpScreen.continueButton\")}\n {...buttonProps}\n />\n </div>\n </div>\n );\n};\n\nHelpScreen.propTypes = {\n /\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Additional props that can be passed on to the button\n /\n buttonProps: PropTypes.object,\n};\n\nexport default HelpScreen;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst WelcomeScreen = withT(\n ({ t, title, description, buttonProps, className = \"\" }) => (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-welcome-wrapper\"\n >\n <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-welcome-title\"\n data-testid=\"onboarding-welcome-title\"\n style=\"h1\"\n >\n {title}\n </Typography>\n {description && (\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-welcome-description\"\n data-testid=\"onboarding-welcome-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {description}\n </Typography>\n )}\n </div>\n <Button\n data-cy=\"onboarding-welcome-button\"\n data-testid=\"onboarding-welcome-button\"\n icon={RightArrow}\n label={t(\"neetoMolecules.onboarding.getStarted\")}\n {...buttonProps}\n />\n </div>\n )\n);\n\nWelcomeScreen.propTypes = {\n /\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Title of the welcome screen\n /\n title: PropTypes.string,\n /\n Description of the welcome screen\n /\n description: PropTypes.string,\n /\n Additional props that can be passed on to the button\n */\n buttonProps: PropTypes.object,\n};\n\nexport default WelcomeScreen;\n"],"names":["CompletedScreen","withT","_ref","t","title","description","children","buttonProps","_ref$className","className","React","createElement","classnames","Typography","style","lineHeight","isPresent","Button","_extends","label","propTypes","PropTypes","string","oneOfType","node","object","HelpScreen","_useTranslation","useTranslation","_useBreakpoints","useBreakpoints","isSize","component","alt","src","WelcomeScreen","icon","RightArrow"],"mappings":"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"}

package/dist/cjs/Onboarding.js CHANGED Viewed

@@ -10,6 +10,8 @@ var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
 var neetoui = require('@bigbinary/neetoui');
 var index = require('./index-248c4f4c.js');
 var injectCss = require('./inject-css-80a5faa3.js');
+var useBreakpoints = require('@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints');
+var reactI18next = require('react-i18next');
 var neetoIcons = require('@bigbinary/neeto-icons');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -17,8 +19,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var withT__default = /*#__PURE__*/_interopDefaultLegacy(withT);
+var useBreakpoints__default = /*#__PURE__*/_interopDefaultLegacy(useBreakpoints);
-var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:15vh 32px 32px}";
+var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:15vh 32px 32px;width:100%}";
 injectCss.n(css,{});
 var CompletedScreen = withT__default["default"](function (_ref) {
@@ -80,6 +83,46 @@ CompletedScreen.propTypes = {
   buttonProps: index.propTypes.exports.object
 };
+var HelpScreen = function HelpScreen(_ref) {
+  var buttonProps = _ref.buttonProps,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useBreakpoints = useBreakpoints__default["default"](),
+    isSize = _useBreakpoints.isSize;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("neeto-molecules-onboarding__wrapper", className),
+    "data-testid": "onboarding-help-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mx-auto w-full max-w-2xl space-y-6"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-3"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    component: "h1",
+    "data-cy": "onboarding-help-title",
+    "data-testid": "onboarding-help-title",
+    style: "h2"
+  }, t("neetoMolecules.onboarding.helpScreen.title")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "onboarding-help-description",
+    "data-testid": "onboarding-help-description",
+    lineHeight: "normal",
+    style: "body1"
+  }, t("neetoMolecules.onboarding.helpScreen.description")), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full overflow-hidden"
+  }, isSize("mobile") ? /*#__PURE__*/React__default["default"].createElement("img", {
+    alt: "",
+    src: "https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg"
+  }) : /*#__PURE__*/React__default["default"].createElement("img", {
+    alt: "",
+    src: "https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg"
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends._extends({
+    "data-cy": "onboarding-help-button",
+    "data-testid": "onboarding-help-button",
+    label: t("neetoMolecules.onboarding.helpScreen.continueButton")
+  }, buttonProps))));
+};
 var WelcomeScreen = withT__default["default"](function (_ref) {
   var t = _ref.t,
     title = _ref.title,
@@ -130,5 +173,6 @@ WelcomeScreen.propTypes = {
 };
 exports.CompletedScreen = CompletedScreen;
+exports.HelpScreen = HelpScreen;
 exports.WelcomeScreen = WelcomeScreen;
 //# sourceMappingURL=Onboarding.js.map

package/dist/cjs/Onboarding.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Onboarding.js","sources":["../../src/components/Onboarding/CompletedScreen.jsx","../../src/components/Onboarding/WelcomeScreen.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { isPresent } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst CompletedScreen = withT(\n ({ t, title, description, children, buttonProps, className = \"\" }) => (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-congratulations-wrapper\"\n >\n <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-emoji\"\n style=\"h1\"\n >\n 🎉\n </Typography>\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-title\"\n data-testid=\"onboarding-congratulations-title\"\n style=\"h1\"\n >\n <span className=\"neeto-ui-text-success-500\">\n {t(\"neetoMolecules.onboarding.congratulations\")}\n </span>\n <br />\n {title}\n </Typography>\n {description && (\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-description\"\n data-testid=\"onboarding-congratulations-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {description}\n </Typography>\n )}\n {children}\n </div>\n {isPresent(buttonProps) && (\n <Button\n data-cy=\"onboarding-congratulations-button\"\n data-testid=\"onboarding-congratulations-button\"\n label={t(\"neetoMolecules.onboarding.startUsing\")}\n {...buttonProps}\n />\n )}\n </div>\n )\n);\n\nCompletedScreen.propTypes = {\n /*\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Title of the completed screen\n /\n title: PropTypes.string,\n /\n Description of the completed screen\n /\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /\n Additional children elements to be rendered within the completed screen.\n /\n children: PropTypes.node,\n /\n Additional props that can be passed on to the button\n /\n buttonProps: PropTypes.object,\n};\n\nexport default CompletedScreen;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst WelcomeScreen = withT(\n ({ t, title, description, buttonProps, className = \"\" }) => (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-welcome-wrapper\"\n >\n <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-welcome-title\"\n data-testid=\"onboarding-welcome-title\"\n style=\"h1\"\n >\n {title}\n </Typography>\n {description && (\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-welcome-description\"\n data-testid=\"onboarding-welcome-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {description}\n </Typography>\n )}\n </div>\n <Button\n data-cy=\"onboarding-welcome-button\"\n data-testid=\"onboarding-welcome-button\"\n icon={RightArrow}\n label={t(\"neetoMolecules.onboarding.getStarted\")}\n {...buttonProps}\n />\n </div>\n )\n);\n\nWelcomeScreen.propTypes = {\n /\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Title of the welcome screen\n /\n title: PropTypes.string,\n /\n Description of the welcome screen\n /\n description: PropTypes.string,\n /\n Additional props that can be passed on to the button\n */\n buttonProps: PropTypes.object,\n};\n\nexport default WelcomeScreen;\n"],"names":["CompletedScreen","withT","_ref","t","title","description","children","buttonProps","_ref$className","className","React","createElement","classnames","Typography","style","lineHeight","isPresent","Button","_extends","label","propTypes","PropTypes","string","oneOfType","node","object","WelcomeScreen","icon","RightArrow"],"mappings":"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"}
1	+ {"version":3,"file":"Onboarding.js","sources":["../../src/components/Onboarding/CompletedScreen.jsx","../../src/components/Onboarding/HelpScreen.jsx","../../src/components/Onboarding/WelcomeScreen.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { isPresent } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst CompletedScreen = withT(\n ({ t, title, description, children, buttonProps, className = \"\" }) => (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-congratulations-wrapper\"\n >\n <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-emoji\"\n style=\"h1\"\n >\n 🎉\n </Typography>\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-title\"\n data-testid=\"onboarding-congratulations-title\"\n style=\"h1\"\n >\n <span className=\"neeto-ui-text-success-500\">\n {t(\"neetoMolecules.onboarding.congratulations\")}\n </span>\n <br />\n {title}\n </Typography>\n {description && (\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-congratulations-description\"\n data-testid=\"onboarding-congratulations-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {description}\n </Typography>\n )}\n {children}\n </div>\n {isPresent(buttonProps) && (\n <Button\n data-cy=\"onboarding-congratulations-button\"\n data-testid=\"onboarding-congratulations-button\"\n label={t(\"neetoMolecules.onboarding.startUsing\")}\n {...buttonProps}\n />\n )}\n </div>\n )\n);\n\nCompletedScreen.propTypes = {\n /*\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Title of the completed screen\n /\n title: PropTypes.string,\n /\n Description of the completed screen\n /\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /\n Additional children elements to be rendered within the completed screen.\n /\n children: PropTypes.node,\n /\n Additional props that can be passed on to the button\n /\n buttonProps: PropTypes.object,\n};\n\nexport default CompletedScreen;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport \"./onboarding.scss\";\n\nconst HelpScreen = ({ buttonProps, className = \"\" }) => {\n const { t } = useTranslation();\n const { isSize } = useBreakpoints();\n\n return (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-help-wrapper\"\n >\n <div className=\"mx-auto w-full max-w-2xl space-y-6\">\n <div className=\"space-y-3\">\n <Typography\n component=\"h1\"\n data-cy=\"onboarding-help-title\"\n data-testid=\"onboarding-help-title\"\n style=\"h2\"\n >\n {t(\"neetoMolecules.onboarding.helpScreen.title\")}\n </Typography>\n <Typography\n data-cy=\"onboarding-help-description\"\n data-testid=\"onboarding-help-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {t(\"neetoMolecules.onboarding.helpScreen.description\")}\n </Typography>\n <div className=\"w-full overflow-hidden\">\n {isSize(\"mobile\") ? (\n <img\n alt=\"\"\n src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg\"\n />\n ) : (\n <img\n alt=\"\"\n src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg\"\n />\n )}\n </div>\n </div>\n <Button\n data-cy=\"onboarding-help-button\"\n data-testid=\"onboarding-help-button\"\n label={t(\"neetoMolecules.onboarding.helpScreen.continueButton\")}\n {...buttonProps}\n />\n </div>\n </div>\n );\n};\n\nHelpScreen.propTypes = {\n /\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Additional props that can be passed on to the button\n /\n buttonProps: PropTypes.object,\n};\n\nexport default HelpScreen;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst WelcomeScreen = withT(\n ({ t, title, description, buttonProps, className = \"\" }) => (\n <div\n className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n data-testid=\"onboarding-welcome-wrapper\"\n >\n <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-welcome-title\"\n data-testid=\"onboarding-welcome-title\"\n style=\"h1\"\n >\n {title}\n </Typography>\n {description && (\n <Typography\n className=\"text-center\"\n data-cy=\"onboarding-welcome-description\"\n data-testid=\"onboarding-welcome-description\"\n lineHeight=\"normal\"\n style=\"body1\"\n >\n {description}\n </Typography>\n )}\n </div>\n <Button\n data-cy=\"onboarding-welcome-button\"\n data-testid=\"onboarding-welcome-button\"\n icon={RightArrow}\n label={t(\"neetoMolecules.onboarding.getStarted\")}\n {...buttonProps}\n />\n </div>\n )\n);\n\nWelcomeScreen.propTypes = {\n /\n To specify external classnames as overrides.\n /\n className: PropTypes.string,\n /\n Title of the welcome screen\n /\n title: PropTypes.string,\n /\n Description of the welcome screen\n /\n description: PropTypes.string,\n /\n Additional props that can be passed on to the button\n */\n buttonProps: PropTypes.object,\n};\n\nexport default WelcomeScreen;\n"],"names":["CompletedScreen","withT","_ref","t","title","description","children","buttonProps","_ref$className","className","React","createElement","classnames","Typography","style","lineHeight","isPresent","Button","_extends","label","propTypes","PropTypes","string","oneOfType","node","object","HelpScreen","_useTranslation","useTranslation","_useBreakpoints","useBreakpoints","isSize","component","alt","src","WelcomeScreen","icon","RightArrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,eAAe,GAAGC,yBAAK,CAC3B,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,CAAC,GAAAD,IAAA,CAADC,CAAC;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAEC,WAAW,GAAAL,IAAA,CAAXK,WAAW;IAAAC,cAAA,GAAAN,IAAA,CAAEO,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA,CAAA;EAAA,oBAC7DE,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,8BAAU,CAAC,qCAAqC,EAAEH,SAAS,CAAE;IACxE,aAAY,EAAA,oCAAA;GAEZC,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKF,IAAAA,SAAS,EAAC,yCAAA;AAAyC,GAAA,eACtDC,yBAAA,CAAAC,aAAA,CAACE,kBAAU,EAAA;AACTJ,IAAAA,SAAS,EAAC,aAAa;AACvB,IAAA,SAAA,EAAQ,kCAAkC;AAC1CK,IAAAA,KAAK,EAAC,IAAA;AAAI,GAAA,EACX,cAEW,CAAC,eACbJ,yBAAA,CAAAC,aAAA,CAACE,kBAAU,EAAA;AACTJ,IAAAA,SAAS,EAAC,aAAa;AACvB,IAAA,SAAA,EAAQ,kCAAkC;AAC1C,IAAA,aAAA,EAAY,kCAAkC;AAC9CK,IAAAA,KAAK,EAAC,IAAA;GAENJ,eAAAA,yBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMF,IAAAA,SAAS,EAAC,2BAAA;GACbN,EAAAA,CAAC,CAAC,2CAA2C,CAC1C,CAAC,eACPO,yBAAA,CAAAC,aAAA,CAAA,IAAA,EAAA,IAAK,CAAC,EACLP,KACS,CAAC,EACZC,WAAW,iBACVK,yBAAA,CAAAC,aAAA,CAACE,kBAAU,EAAA;AACTJ,IAAAA,SAAS,EAAC,aAAa;AACvB,IAAA,SAAA,EAAQ,wCAAwC;AAChD,IAAA,aAAA,EAAY,wCAAwC;AACpDM,IAAAA,UAAU,EAAC,QAAQ;AACnBD,IAAAA,KAAK,EAAC,OAAA;AAAO,GAAA,EAEZT,WACS,CACb,EACAC,QACE,CAAC,EACLU,mBAAS,CAACT,WAAW,CAAC,iBACrBG,yBAAA,CAAAC,aAAA,CAACM,cAAM,EAAAC,iBAAA,CAAA;AACL,IAAA,SAAA,EAAQ,mCAAmC;AAC3C,IAAA,aAAA,EAAY,mCAAmC;IAC/CC,KAAK,EAAEhB,CAAC,CAAC,sCAAsC,CAAA;GAC3CI,EAAAA,WAAW,CAChB,CAEA,CAAC,CAAA;AAAA,CAEV,EAAC;AAEDP,eAAe,CAACoB,SAAS,GAAG;AAC1B;AACF;AACA;EACEX,SAAS,EAAEY,uBAAS,CAACC,MAAM;AAC3B;AACF;AACA;EACElB,KAAK,EAAEiB,uBAAS,CAACC,MAAM;AACvB;AACF;AACA;AACEjB,EAAAA,WAAW,EAAEgB,uBAAS,CAACE,SAAS,CAAC,CAACF,uBAAS,CAACC,MAAM,EAAED,uBAAS,CAACG,IAAI,CAAC,CAAC;AACpE;AACF;AACA;EACElB,QAAQ,EAAEe,uBAAS,CAACG,IAAI;AACxB;AACF;AACA;EACEjB,WAAW,EAAEc,uBAAS,CAACI,MAAAA;AACzB,CAAC;;ACxED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAAxB,IAAA,EAAwC;AAAA,EAAA,IAAlCK,WAAW,GAAAL,IAAA,CAAXK,WAAW;IAAAC,cAAA,GAAAN,IAAA,CAAEO,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA,CAAA;AAC/C,EAAA,IAAAmB,eAAA,GAAcC,2BAAc,EAAE;IAAtBzB,CAAC,GAAAwB,eAAA,CAADxB,CAAC,CAAA;AACT,EAAA,IAAA0B,eAAA,GAAmBC,kCAAc,EAAE;IAA3BC,MAAM,GAAAF,eAAA,CAANE,MAAM,CAAA;EAEd,oBACErB,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,8BAAU,CAAC,qCAAqC,EAAEH,SAAS,CAAE;IACxE,aAAY,EAAA,yBAAA;GAEZC,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKF,IAAAA,SAAS,EAAC,oCAAA;GACbC,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKF,IAAAA,SAAS,EAAC,WAAA;AAAW,GAAA,eACxBC,yBAAA,CAAAC,aAAA,CAACE,kBAAU,EAAA;AACTmB,IAAAA,SAAS,EAAC,IAAI;AACd,IAAA,SAAA,EAAQ,uBAAuB;AAC/B,IAAA,aAAA,EAAY,uBAAuB;AACnClB,IAAAA,KAAK,EAAC,IAAA;GAELX,EAAAA,CAAC,CAAC,4CAA4C,CACrC,CAAC,eACbO,yBAAA,CAAAC,aAAA,CAACE,kBAAU,EAAA;AACT,IAAA,SAAA,EAAQ,6BAA6B;AACrC,IAAA,aAAA,EAAY,6BAA6B;AACzCE,IAAAA,UAAU,EAAC,QAAQ;AACnBD,IAAAA,KAAK,EAAC,OAAA;GAELX,EAAAA,CAAC,CAAC,kDAAkD,CAC3C,CAAC,eACbO,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKF,IAAAA,SAAS,EAAC,wBAAA;AAAwB,GAAA,EACpCsB,MAAM,CAAC,QAAQ,CAAC,gBACfrB,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEsB,IAAAA,GAAG,EAAC,EAAE;AACNC,IAAAA,GAAG,EAAC,oEAAA;AAAoE,GACzE,CAAC,gBAEFxB,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEsB,IAAAA,GAAG,EAAC,EAAE;AACNC,IAAAA,GAAG,EAAC,sEAAA;GACL,CAEA,CACF,CAAC,eACNxB,yBAAA,CAAAC,aAAA,CAACM,cAAM,EAAAC,iBAAA,CAAA;AACL,IAAA,SAAA,EAAQ,wBAAwB;AAChC,IAAA,aAAA,EAAY,wBAAwB;IACpCC,KAAK,EAAEhB,CAAC,CAAC,qDAAqD,CAAA;AAAE,GAAA,EAC5DI,WAAW,CAChB,CACE,CACF,CAAC,CAAA;AAEV;;AClDA,IAAM4B,aAAa,GAAGlC,yBAAK,CACzB,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,CAAC,GAAAD,IAAA,CAADC,CAAC;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IAAEE,WAAW,GAAAL,IAAA,CAAXK,WAAW;IAAAC,cAAA,GAAAN,IAAA,CAAEO,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA,CAAA;EAAA,oBACnDE,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,8BAAU,CAAC,qCAAqC,EAAEH,SAAS,CAAE;IACxE,aAAY,EAAA,4BAAA;GAEZC,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKF,IAAAA,SAAS,EAAC,yCAAA;AAAyC,GAAA,eACtDC,yBAAA,CAAAC,aAAA,CAACE,kBAAU,EAAA;AACTJ,IAAAA,SAAS,EAAC,aAAa;AACvB,IAAA,SAAA,EAAQ,0BAA0B;AAClC,IAAA,aAAA,EAAY,0BAA0B;AACtCK,IAAAA,KAAK,EAAC,IAAA;GAELV,EAAAA,KACS,CAAC,EACZC,WAAW,iBACVK,yBAAA,CAAAC,aAAA,CAACE,kBAAU,EAAA;AACTJ,IAAAA,SAAS,EAAC,aAAa;AACvB,IAAA,SAAA,EAAQ,gCAAgC;AACxC,IAAA,aAAA,EAAY,gCAAgC;AAC5CM,IAAAA,UAAU,EAAC,QAAQ;AACnBD,IAAAA,KAAK,EAAC,OAAA;GAELT,EAAAA,WACS,CAEX,CAAC,eACNK,yBAAA,CAAAC,aAAA,CAACM,cAAM,EAAAC,iBAAA,CAAA;AACL,IAAA,SAAA,EAAQ,2BAA2B;AACnC,IAAA,aAAA,EAAY,2BAA2B;AACvCkB,IAAAA,IAAI,EAAEC,qBAAW;IACjBlB,KAAK,EAAEhB,CAAC,CAAC,sCAAsC,CAAA;GAC3CI,EAAAA,WAAW,CAChB,CACE,CAAC,CAAA;AAAA,CAEV,EAAC;AAED4B,aAAa,CAACf,SAAS,GAAG;AACxB;AACF;AACA;EACEX,SAAS,EAAEY,uBAAS,CAACC,MAAM;AAC3B;AACF;AACA;EACElB,KAAK,EAAEiB,uBAAS,CAACC,MAAM;AACvB;AACF;AACA;EACEjB,WAAW,EAAEgB,uBAAS,CAACC,MAAM;AAC7B;AACF;AACA;EACEf,WAAW,EAAEc,uBAAS,CAACI,MAAAA;AACzB,CAAC;;;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.15.28",
+  "version": "1.15.29",
   "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 CHANGED Viewed

@@ -703,7 +703,12 @@
     "onboarding": {
       "congratulations": "Congratulations!",
       "getStarted": "Get started",
-      "startUsing": "Start using"
+      "startUsing": "Start using",
+      "helpScreen": {
+        "title": "Finding help articles & Chat support",
+        "description": "If you have any questions, neeto provides easily accessible help resources within the app. Simply hover over the floating menu button in the bottom left corner of your screen to reveal your options.",
+        "continueButton": "Continue"
+      }
     },
     "moreDropdown": {
       "tooltip": "Actions"

package/types/Onboarding.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ export
  * import {
  *   WelcomeScreen,
  *   CompletedScreen,
+ *   HelpScreen,
  * } from "@bigbinary/neeto-molecules/Onboarding";
  *
  * const Onboarding = () => {
@@ -39,6 +40,7 @@ export
  *           buttonProps={{ label: "Start using neetoDesk" }}
  *         />
  *       )}
+ *       {currentStep === ONBOARDING_STEPS.HELP && <HelpScreen />}
  *     </>
  *   );
  * };
@@ -57,10 +59,11 @@ export
  * import {
  *   WelcomeScreen,
  *   CompletedScreen,
+ *   HelpScreen,
  * } from "@bigbinary/neeto-molecules/Onboarding";
  *
  * const Onboarding = () => {
- *   const [currentStep, setCurrentStep] = useState(ONBOARDING_STEPS.WELCOME);
+ *   const [currentStep, setCurrentStep] = useState(ONBOARDING_STEPS.COMPLETED);
  *
  *   return (
  *     <>
@@ -77,6 +80,7 @@ export
  *           buttonProps={{ label: "Start using neetoDesk" }}
  *         />
  *       )}
+ *       {currentStep === ONBOARDING_STEPS.HELP && <HelpScreen />}
  *     </>
  *   );
  * };
@@ -84,4 +88,45 @@ export
 */
 const CompletedScreen: React.FC<{
   children: React.ReactNode;
-}> & OnboardingScreen;
+}> & OnboardingScreen;
+export
+/**
+ *
+ * HelpScreen is used to show a help screen in the onboarding flow of neeto.
+ *
+ * @example
+ *
+ * import {
+ *   WelcomeScreen,
+ *   CompletedScreen,
+ *   HelpScreen,
+ * } from "@bigbinary/neeto-molecules/Onboarding";
+ *
+ * const Onboarding = () => {
+ *   const [currentStep, setCurrentStep] = useState(ONBOARDING_STEPS.HELP);
+ *
+ *   return (
+ *     <>
+ *       {currentStep === ONBOARDING_STEPS.WELCOME && (
+ *         <WelcomeScreen
+ *           title="Welcome to neetoDesk"
+ *           description="Let's customize neetoDesk so that it meets your needs."
+ *         />
+ *       )}
+ *       {currentStep === ONBOARDING_STEPS.COMPLETED && (
+ *         <CompletedScreen
+ *           title="Your neetoDesk is ready."
+ *           description="If you have any question at any time you can click on the help icon on the left hand side and have a 'live chat' with us."
+ *           buttonProps={{ label: "Start using neetoDesk" }}
+ *         />
+ *       )}
+ *       {currentStep === ONBOARDING_STEPS.HELP && <HelpScreen />}
+ *     </>
+ *   );
+ * };
+ * @endexample
+*/
+const HelpScreen: React.FC<{
+  className?: string;
+  buttonProps: ButtonProps;
+}>;