@bigbinary/neeto-molecules 1.0.50 → 1.0.52

package/package.json

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

@@ -243,15 +243,19 @@
       }
     },
     "browserSupport": {
-      "unsupportedBrowserVersion": "You are using {{browserName}} {{browserVersion}}. neeto requires {{browserName}} {{requiredMinBrowserVersion}} or later to perform reliably. <downloadLink></downloadLink><contactUs></contactUs>",
-      "unsupportedBrowser": "You are using {{browserName}} {{browserVersion}}. neeto requires a modern browser to perform reliably. <contactUs></contactUs>",
+      "unsupportedBrowserVersion": {
+        "title": "Unsupported Version",
+        "description": "You are using {{browserName}} {{browserVersion}}. neeto requires {{browserName}} {{requiredMinBrowserVersion}} or later to perform reliably. <downloadLink></downloadLink><contactUs></contactUs>"
+      },
+      "unsupportedBrowser": {
+        "title": "Unsupported Browser",
+        "description": "You are using {{browserName}} {{browserVersion}}. neeto requires a modern browser to perform reliably.<contactUs></contactUs>"
+      },
       "downloadLink": {
-        "main": "Please <button></button> the latest browser.",
-        "buttonLabel": "download and install"
+        "main": "Please <button>download and install</button> the latest browser."
       },
       "contactUs": {
-        "main": "<button></button> if you need any help.",
-        "buttonLabel": "Contact us"
+        "main": "<button>Contact us</button> if you need any help."
       },
       "unknownBrowserMsg": "an unknown browser"
     },

package/types/BrowserSupport.d.ts

@@ -1,14 +1,22 @@
 import React from "react";
+type VersionLimits = {
+  softLimit?: number;
+  hardLimit?: number;
+};
 /**
  *
- * A common component that displays a callout message for unsupported browsers.
+ * A wrapper that displays a callout message for partially supported browsers (below a soft limit) along with the site content. If the browser is an unsupported version (below a hard limit), it shows a full-page message to update the browser and does not display the site content. If the browser is in the list of unsupported browsers, it displays
+ *
+ * a full-page message that the browser is unsupported and does not display the site content.
  *
  * @example 
  *
- * import  BrowserSupport  from "@bigbinary/neeto-molecules/BrowserSupport";
+ * import BrowserSupport from "@bigbinary/neeto-molecules/BrowserSupport";
  * 
  * const App = () => (
- *   <BrowserSupport />
+ *   <BrowserSupport>
+ *     {children}
+ *   </BrowserSupport>
  *   <Main />
  * )
  * @endexample
@@ -20,38 +28,51 @@ import React from "react";
  *
  * <BrowserSupport
  *   overrides={{
- *     Chrome: 60,
- *     Safari: 14.1,
+ *     Chrome: { softLimit: 80, hardLimit: 60 },
+ *     Safari: { softLimit: 14.1, hardLimit: 13.5 },
  *   }}
+ *   unsupportedBrowsers={["Firefox"]}
  * />
  * @endexample
  * In the above code we have changed the minimum supported versions of Chrome &
  *
- * Safari. Now if a user has accessed the site using Chrome < 60 or Safari < 14.1
+ * Safari. Now if a user has accessed the site using Chrome < 80 or Safari < 14.1
+ *
+ * the callout message will be displayed. If a user has accessed the site using
+ *
+ * Chrome < 60 or Safari < 13.5, a message will be displayed to update the browser
  *
- * the callout message will be displayed.
+ * and page contents will not be shown. If a user has accessed the site using any
+ *
+ * version of Firefox, a message will be displayed that the browser is unsupported
+ *
+ * and page contents will not be shown.
  *
  * The default supported browser names and their versions are given below:
  *
- * Any other browser which is not in the above table will be considered as
+ * The default unsupported browsers are given below:
+ *
+ * Any other browser which is not in the above lists will be considered as
  *
- * unsupported.
+ * unknown and a corresponding callout will be shown.
  *
 */
 const BrowserSupport: React.FC<{
   overrides?: {
-    Chrome?: number;
-    MicrosoftEdge?: number;
-    Firefox?: number;
-    IE?: number;
-    Opera?: number;
-    Safari?: number;
-    AndroidBrowser?: number;
-    OperaMini?: number;
-    ChromeMobile?: number;
-    FirefoxMobile?: number;
-    UCBrowser?: number;
-    SamsungInternet?: number;
+    Chrome?: VersionLimits;
+    MicrosoftEdge?: VersionLimits;
+    Firefox?: VersionLimits;
+    IE?: VersionLimits;
+    Opera?: VersionLimits;
+    Safari?: VersionLimits;
+    AndroidBrowser?: VersionLimits;
+    OperaMini?: VersionLimits;
+    ChromeMobile?: VersionLimits;
+    FirefoxMobile?: VersionLimits;
+    UCBrowser?: VersionLimits;
+    SamsungInternet?: VersionLimits;
   };
+  unsupportedBrowsers?: string[];
+  children?: React.ReactNode | React.ReactNode[];
 }>;
 export default BrowserSupport;