@ably/ui - npm Package Compare versions

Comparing version 8.2.1-dev.ade9a3d to 8.2.1-dev.db8f789

core/Footer.jsx

@@ -512,5 +512,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: "https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7",
-    rel: "noopener noreferrer",
-    target: "_blank",
+    href: absUrl("/press-center"),
     className: "ui-footer-menu-row-link"
@@ -517,0 +515,0 @@ }, "Press & Media")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {

core/MeganavBlogPostsList.jsx

@@ -344,3 +344,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/blog")
+    url: absUrl("/blog"),
+    textSize: "text-p3"
   }, "More from our Blog")) : null;
@@ -347,0 +348,0 @@ };

core/MeganavContentCompany.jsx

@@ -245,3 +245,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/blog")
+    url: absUrl("/blog"),
+    textSize: "text-p3"
   }, "More from our Blog")) : null;
@@ -1394,7 +1395,7 @@ };
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("section", {
-    className: "grid grid-cols-12 ui-grid-gap-x"
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
@@ -1431,3 +1432,3 @@ className: "col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"
     className: "ui-meganav-media-copy"
-  }, "Discover how customers are benefitting from Ably.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+  }, "Discover how customers are benefiting from Ably.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/compare"),
@@ -1434,0 +1435,0 @@ className: "ui-meganav-media-with-image group"

core/MeganavContentDevelopers.jsx

@@ -274,7 +274,7 @@ (function webpackUniversalModuleDefinition(root, factory) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
-    className: "grid grid-cols-12 ui-grid-gap-x"
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -323,3 +323,3 @@ className: "col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"
     className: "ui-meganav-media-copy"
-  }, "Documentation to help you get up and running quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, "Documentation to help you get started quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"
@@ -326,0 +326,0 @@ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {

core/MeganavContentPlatform.jsx

@@ -325,9 +325,9 @@ (function webpackUniversalModuleDefinition(root, factory) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer bg-extra-light-grey"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
-    className: "grid grid-cols-12 ui-grid-gap-x"
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"
+    className: "col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -341,7 +341,11 @@ className: "flex mb-20"
   }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "text-p2 font-medium text-cool-black mb-8"
+    className: "text-p2 font-medium text-cool-black mb-24",
+    style: {
+      maxWidth: "330px"
+    }
   }, "Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/platform")
+    url: absUrl("/platform"),
+    textSize: "text-p2"
   }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"
+    className: "col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -351,2 +355,3 @@ className: "ui-meganav-overline",
   }, "Our Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "mb-16",
     "aria-labelledby": "meganav-platform-panel-list-examples"
@@ -396,5 +401,6 @@ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
   }, "See when a user is typing a message.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/examples")
+    url: absUrl("/examples"),
+    textSize: "text-p3"
   }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"
+    className: "col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -404,3 +410,3 @@ className: "ui-meganav-overline",
   }, "Our technology"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "mb-8",
+    className: "mb-16",
     "aria-labelledby": "meganav-platform-panel-list-our-technology"
@@ -443,3 +449,4 @@ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
   }, "An edge network of 15 core routing datacenters and 205+ PoPs.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/four-pillars-of-dependability")
+    url: absUrl("/four-pillars-of-dependability"),
+    textSize: "text-p3"
   }, "Explore Four Pillars of Dependability"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -446,0 +453,0 @@ className: "ui-meganav-content-spacer"

core/MeganavContentUseCases.jsx

@@ -274,9 +274,9 @@ (function webpackUniversalModuleDefinition(root, factory) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer bg-extra-light-grey"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
-    className: "grid grid-cols-12 ui-grid-gap-x"
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"
+    className: "col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -312,3 +312,3 @@ className: "ui-meganav-overline",
   }, "Power engaging virtual events with realtime features.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"
+    className: "col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -383,3 +383,3 @@ className: "ui-meganav-overline",
   }, "Monitor and control global IoT deployments in realtime."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"
+    className: "col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -386,0 +386,0 @@ className: "ui-meganav-overline",

core/MeganavContentWhyAbly/component.js

@@ -1,6 +0,22 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	
-/******/ 	
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["AblyUi"] = factory();
+	else
+		root["AblyUi"] = root["AblyUi"] || {}, root["AblyUi"]["Core"] = root["AblyUi"]["Core"] || {}, root["AblyUi"]["Core"]["MeganavContentWhyAbly"] = factory();
+})(this, function() {
+return /******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
+/*!*****************************************************!*\
+  !*** ./src/core/MeganavContentWhyAbly/component.js ***!
+  \*****************************************************/
+
+__webpack_exports__ = __webpack_exports__.default;
+/******/ 	return __webpack_exports__;
 /******/ })()
-;
+;
+});
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9BYmx5VWkuQ29yZS5bbmFtZV0vd2VicGFjay91bml2ZXJzYWxNb2R1bGVEZWZpbml0aW9uIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSx1Q0FBdUMsdURBQXVEO0FBQzlGLENBQUM7QUFDRCxPIiwiZmlsZSI6ImNvcmUvTWVnYW5hdkNvbnRlbnRXaHlBYmx5L2NvbXBvbmVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiB3ZWJwYWNrVW5pdmVyc2FsTW9kdWxlRGVmaW5pdGlvbihyb290LCBmYWN0b3J5KSB7XG5cdGlmKHR5cGVvZiBleHBvcnRzID09PSAnb2JqZWN0JyAmJiB0eXBlb2YgbW9kdWxlID09PSAnb2JqZWN0Jylcblx0XHRtb2R1bGUuZXhwb3J0cyA9IGZhY3RvcnkoKTtcblx0ZWxzZSBpZih0eXBlb2YgZGVmaW5lID09PSAnZnVuY3Rpb24nICYmIGRlZmluZS5hbWQpXG5cdFx0ZGVmaW5lKFtdLCBmYWN0b3J5KTtcblx0ZWxzZSBpZih0eXBlb2YgZXhwb3J0cyA9PT0gJ29iamVjdCcpXG5cdFx0ZXhwb3J0c1tcIkFibHlVaVwiXSA9IGZhY3RvcnkoKTtcblx0ZWxzZVxuXHRcdHJvb3RbXCJBYmx5VWlcIl0gPSByb290W1wiQWJseVVpXCJdIHx8IHt9LCByb290W1wiQWJseVVpXCJdW1wiQ29yZVwiXSA9IHJvb3RbXCJBYmx5VWlcIl1bXCJDb3JlXCJdIHx8IHt9LCByb290W1wiQWJseVVpXCJdW1wiQ29yZVwiXVtcIk1lZ2FuYXZDb250ZW50V2h5QWJseVwiXSA9IGZhY3RvcnkoKTtcbn0pKHRoaXMsIGZ1bmN0aW9uKCkge1xucmV0dXJuICJdLCJzb3VyY2VSb290IjoiIn0=

core/MeganavControl.jsx

@@ -273,2 +273,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
@@ -283,3 +284,3 @@ theme = _ref.theme,
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
@@ -295,2 +296,3 @@ name: "icon-gui-disclosure-arrow",
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
@@ -297,0 +299,0 @@ theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),

core/MeganavControl/component.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>i});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var i=t[n];if(void 0!==i)return i.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>i});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const i=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),i=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),o=function(e){return"search"===e.dataset.control},a=function(e,n,o){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(i,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var a,c=["invisible","visible"];(a=n.classList).replace.apply(a,function(e){if(Array.isArray(e))return t(e)}(u=o?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",o)}var u};return r.map((function(t){var i,c,u=t.parentNode,l=document.querySelector("#".concat(t.getAttribute("aria-controls"))),s=function(t,i){return function(){if(r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==i&&e.classList.replace("visible","invisible")})),"true"===t.getAttribute("aria-expanded")?(t.setAttribute("aria-expanded",!1),i.classList.replace("visible","invisible")):(t.setAttribute("aria-expanded",!0),i.classList.replace("invisible","visible")),o(t)){var a=(0,e.A)("meganav-search-input",i);if(!a)return;a.focus()}else t.focus()}}(t,l);return t.addEventListener("click",s),o(t)||(i=function(e,t){return function(){return a(e,t,!0)}}(t,l),c=function(e,t){return function(){return a(e,t,!1)}}(t,l),u.addEventListener("mouseenter",i),u.addEventListener("mouseleave",c)),[{teardown:function(){i&&c&&(u.removeEventListener("mouseenter",i),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",s)},clear:function(){t.setAttribute("aria-expanded",!1),l.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>o});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},o=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>o});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const o=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),o=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),a=function(e){return"search"===e.dataset.control},i=function(e,n,a){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(o,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var i,c=["invisible","visible"];(i=n.classList).replace.apply(i,function(e){if(Array.isArray(e))return t(e)}(u=a?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",a),e.dataset.hover=a}var u};return r.map((function(t){var o,c,u=t.parentNode,s=document.querySelector("#".concat(t.getAttribute("aria-controls"))),l=function(t,o){return function(){r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==o&&e.classList.replace("visible","invisible")}));var i=t.getAttribute("aria-expanded"),c="true"===t.dataset.hover;if("true"!==i||c?(t.setAttribute("aria-expanded",!0),o.classList.replace("invisible","visible")):(t.setAttribute("aria-expanded",!1),o.classList.replace("visible","invisible")),c&&(t.dataset.hover=!1),a(t)){var u=(0,e.A)("meganav-search-input",o);if(!u)return;u.focus()}else t.focus()}}(t,s);return t.addEventListener("click",l),a(t)||(o=function(e,t){return function(){return i(e,t,!0)}}(t,s),c=function(e,t){return function(){return i(e,t,!1)}}(t,s),u.addEventListener("mouseenter",o),u.addEventListener("mouseleave",c)),[{teardown:function(){o&&c&&(u.removeEventListener("mouseenter",o),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",l)},clear:function(){t.setAttribute("aria-expanded",!1),s.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));

core/MeganavItemsDesktop.jsx

@@ -85,2 +85,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
@@ -95,3 +96,3 @@ theme = _ref.theme,
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
@@ -107,2 +108,3 @@ name: "icon-gui-disclosure-arrow",
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
@@ -340,2 +342,3 @@ theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
     var PanelComponent = panels[panel.component];
+    var bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
@@ -346,3 +349,4 @@ className: "ui-meganav-item",
       theme: theme,
-      ariaControls: panel.id
+      ariaControls: panel.id,
+      ariaLabel: panel.label
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
@@ -353,3 +357,3 @@ className: "hidden lg:inline"
     }, panel.shortLabel)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "ui-meganav-panel invisible",
+      className: "ui-meganav-panel invisible ".concat(bgCSS),
       id: panel.id,
@@ -356,0 +360,0 @@ "data-id": "meganav-panel"

core/MeganavItemsSignedIn.jsx

@@ -135,2 +135,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
@@ -145,3 +146,3 @@ theme = _ref.theme,
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
@@ -157,2 +158,3 @@ name: "icon-gui-disclosure-arrow",
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
@@ -650,2 +652,3 @@ theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
     ariaControls: "account-panel",
+    ariaLabel: "Account",
     theme: theme,
@@ -652,0 +655,0 @@ additionalCSS: "mr-0"

package.json

 {
   "name": "@ably/ui",
-  "version": "8.2.1-dev.ade9a3d",
+  "version": "8.2.1-dev.db8f789",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
@@ -5,0 +5,0 @@ "repository": {

src/core/Footer/component.jsx

@@ -222,8 +222,3 @@ import React from "react";
             <li className="p-menu-row-snug">
-              <a
-                href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7"
-                rel="noopener noreferrer"
-                target="_blank"
-                className="ui-footer-menu-row-link"
-              >
+              <a href={absUrl("/press-center")} className="ui-footer-menu-row-link">
                 Press & Media
@@ -230,0 +225,0 @@ </a>

src/core/MeganavBlogPostsList/component.jsx

@@ -23,3 +23,5 @@ import React from "react";
 
-      <FeaturedLink url={absUrl("/blog")}>More from our Blog</FeaturedLink>
+      <FeaturedLink url={absUrl("/blog")} textSize="text-p3">
+        More from our Blog
+      </FeaturedLink>
     </div>
@@ -26,0 +28,0 @@ ) : null;

src/core/MeganavContentCompany/component.jsx

@@ -15,5 +15,5 @@ import React from "react";
   return (
-    <div className="flex">
+    <div className="flex max-w-screen-xl mx-auto">
       <div className="ui-meganav-content-spacer"></div>
-      <section className="grid grid-cols-12 ui-grid-gap-x">
+      <section className="grid grid-cols-12 ui-grid-gap-x w-full">
         <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
@@ -38,3 +38,3 @@ <h3 className="ui-meganav-overline" id="meganav-company-panel-list-why-companies">
                   <p className="ui-meganav-media-heading">Case studies</p>
-                  <p className="ui-meganav-media-copy">Discover how customers are benefitting from Ably.</p>
+                  <p className="ui-meganav-media-copy">Discover how customers are benefiting from Ably.</p>
                 </div>
@@ -41,0 +41,0 @@ </a>

src/core/MeganavContentDevelopers/component.jsx

@@ -7,5 +7,5 @@ import React from "react";
 const MeganavContentDevelopers = ({ absUrl }) => (
-  <div className="flex">
+  <div className="flex max-w-screen-xl mx-auto">
     <div className="ui-meganav-content-spacer"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x">
+    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
       <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
@@ -39,3 +39,3 @@ <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
                 <p className="ui-meganav-media-heading">Quickstart guides</p>
-                <p className="ui-meganav-media-copy">Documentation to help you get up and running quickly.</p>
+                <p className="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
               </div>
@@ -42,0 +42,0 @@ </a>

src/core/MeganavContentPlatform/component.jsx

@@ -7,6 +7,6 @@ import React from "react";
 const MeganavContentPlatform = ({ paths, absUrl }) => (
-  <div className="flex">
+  <div className="flex max-w-screen-xl mx-auto">
     <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x">
-      <div className="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
+      <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
         <div className="flex mb-20">
@@ -16,3 +16,3 @@ <img src={paths.ablyStack} alt="Ably homepage" />
         </div>
-        <p className="text-p2 font-medium text-cool-black mb-8">
+        <p className="text-p2 font-medium text-cool-black mb-24" style={{ maxWidth: "330px" }}>
           Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
@@ -22,10 +22,12 @@ realtime, and lets you focus on your code.
 
-        <FeaturedLink url={absUrl("/platform")}>Explore how it works</FeaturedLink>
+        <FeaturedLink url={absUrl("/platform")} textSize="text-p2">
+          Explore how it works
+        </FeaturedLink>
       </div>
 
-      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
           Our Examples
         </h3>
-        <ul aria-labelledby="meganav-platform-panel-list-examples">
+        <ul className="mb-16" aria-labelledby="meganav-platform-panel-list-examples">
           <li>
@@ -68,10 +70,12 @@ <a href={absUrl("/examples/avatar-stack")} className="group ui-meganav-media">
         </ul>
-        <FeaturedLink url={absUrl("/examples")}>Explore all live examples</FeaturedLink>
+        <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
+          Explore all live examples
+        </FeaturedLink>
       </div>
 
-      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">
           Our technology
         </h3>
-        <ul className="mb-8" aria-labelledby="meganav-platform-panel-list-our-technology">
+        <ul className="mb-16" aria-labelledby="meganav-platform-panel-list-our-technology">
           <li>
@@ -109,3 +113,5 @@ <a href={absUrl("/four-pillars-of-dependability#performance")} className="ui-meganav-media group">
 
-        <FeaturedLink url={absUrl("/four-pillars-of-dependability")}>Explore Four Pillars of Dependability</FeaturedLink>
+        <FeaturedLink url={absUrl("/four-pillars-of-dependability")} textSize="text-p3">
+          Explore Four Pillars of Dependability
+        </FeaturedLink>
       </div>
@@ -112,0 +118,0 @@ </section>

src/core/MeganavContentUseCases/component.jsx

@@ -7,6 +7,6 @@ import React from "react";
 const MeganavContentUseCases = ({ absUrl }) => (
-  <div className="flex">
+  <div className="flex max-w-screen-xl mx-auto">
     <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x">
-      <div className="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
+      <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
         <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
@@ -37,3 +37,3 @@ Use cases
 
-      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry">
@@ -100,3 +100,3 @@ Industry
 
-      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
@@ -103,0 +103,0 @@ Solutions

src/core/MeganavControl/component.js

@@ -33,2 +33,3 @@ import { queryId, queryIdAll } from "../dom-query";
       control.setAttribute("aria-expanded", open);
+      control.dataset.hover = open;
     }
@@ -54,3 +55,6 @@ };
 
-    if (ariaExpanded === "true") {
+    // Prevent closing of the panel if it was already opened by hovering
+    const openedByHover = control.dataset.hover === "true";
+
+    if (ariaExpanded === "true" && !openedByHover) {
       control.setAttribute("aria-expanded", false);
@@ -63,2 +67,6 @@ panel.classList.replace("visible", "invisible");
 
+    if (openedByHover) {
+      control.dataset.hover = false;
+    }
+
     if (isSearchControl(control)) {
@@ -65,0 +73,0 @@ const searchInput = queryId("meganav-search-input", panel);

src/core/MeganavControl/component.jsx

@@ -6,3 +6,3 @@ import React from "react";
 
-const MeganavControl = ({ ariaControls, children, theme, additionalCSS }) => (
+const MeganavControl = ({ ariaControls, ariaLabel, children, theme, additionalCSS }) => (
   <button
@@ -14,3 +14,3 @@ type="button"
     aria-controls={ariaControls}
-    aria-label={`Show ${children}`}
+    aria-label={`Show ${ariaLabel} panel`}
   >
@@ -29,2 +29,3 @@ {children}
   ariaControls: T.string,
+  ariaLabel: T.string,
   children: T.node,
@@ -31,0 +32,0 @@ theme: T.object,

src/core/MeganavItemsDesktop/component.jsx

@@ -11,6 +11,7 @@ import React from "react";
       const PanelComponent = panels[panel.component];
+      const bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
 
       return (
         <li className="ui-meganav-item" key={panel.id}>
-          <MeganavControl theme={theme} ariaControls={panel.id}>
+          <MeganavControl theme={theme} ariaControls={panel.id} ariaLabel={panel.label}>
             <span className="hidden lg:inline">{panel.label}</span>
@@ -20,3 +21,3 @@ <span className="lg:hidden">{panel.shortLabel}</span>
 
-          <div className="ui-meganav-panel invisible" id={panel.id} data-id="meganav-panel">
+          <div className={`ui-meganav-panel invisible ${bgCSS}`} id={panel.id} data-id="meganav-panel">
             <PanelComponent paths={paths} absUrl={absUrl} />
@@ -23,0 +24,0 @@ </div>

src/core/MeganavItemsSignedIn/component.jsx

@@ -20,3 +20,3 @@ import React from "react";
       <li className="ui-meganav-item relative">
-        <MeganavControl ariaControls="account-panel" theme={theme} additionalCSS="mr-0">
+        <MeganavControl ariaControls="account-panel" ariaLabel="Account" theme={theme} additionalCSS="mr-0">
           {accountName}
@@ -23,0 +23,0 @@ </MeganavControl>

No alert changes

Improved metrics

Total package byte prevSize

6482551

1%

Lines of code

42839

7.21%

Worsened metrics

Number of package files

450

-2.17%

No dependency changes