@ably/ui 8.2.1-dev.ade9a3d → 8.2.1-dev.db8f789

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 (51) hide show
  1. package/core/Footer.jsx +1 -3
  2. package/core/Meganav/component.css +4 -0
  3. package/core/Meganav/component.js +1 -1
  4. package/core/Meganav.jsx +47 -27
  5. package/core/MeganavBlogPostsList.jsx +2 -1
  6. package/core/MeganavContentCompany.jsx +5 -4
  7. package/core/MeganavContentDevelopers.jsx +3 -3
  8. package/core/MeganavContentPlatform.jsx +17 -10
  9. package/core/MeganavContentUseCases.jsx +5 -5
  10. package/core/MeganavContentWhyAbly/component.js +21 -5
  11. package/core/MeganavContentWhyAbly.jsx +3276 -3
  12. package/core/MeganavControl/component.js +1 -1
  13. package/core/MeganavControl.jsx +3 -1
  14. package/core/MeganavItemsDesktop.jsx +7 -3
  15. package/core/MeganavItemsSignedIn.jsx +4 -1
  16. package/core/sprites.svg +9 -0
  17. package/package.json +1 -1
  18. package/src/core/Footer/component.html.erb +1 -1
  19. package/src/core/Footer/component.jsx +1 -6
  20. package/src/core/Meganav/component.css +4 -0
  21. package/src/core/MeganavBlogPostsList/component.html.erb +1 -1
  22. package/src/core/MeganavBlogPostsList/component.jsx +3 -1
  23. package/src/core/MeganavContentCompany/component.html.erb +5 -5
  24. package/src/core/MeganavContentCompany/component.jsx +3 -3
  25. package/src/core/MeganavContentDevelopers/component.html.erb +5 -5
  26. package/src/core/MeganavContentDevelopers/component.jsx +3 -3
  27. package/src/core/MeganavContentPlatform/component.html.erb +11 -11
  28. package/src/core/MeganavContentPlatform/component.jsx +17 -11
  29. package/src/core/MeganavContentUseCases/component.html.erb +5 -5
  30. package/src/core/MeganavContentUseCases/component.jsx +5 -5
  31. package/src/core/MeganavControl/component.html.erb +1 -1
  32. package/src/core/MeganavControl/component.js +9 -1
  33. package/src/core/MeganavControl/component.jsx +3 -2
  34. package/src/core/MeganavControl/component.rb +8 -2
  35. package/src/core/MeganavItemsDesktop/component.html.erb +2 -2
  36. package/src/core/MeganavItemsDesktop/component.jsx +3 -2
  37. package/src/core/MeganavItemsDesktop/component.rb +8 -0
  38. package/src/core/MeganavItemsSignedIn/component.html.erb +1 -1
  39. package/src/core/MeganavItemsSignedIn/component.jsx +1 -1
  40. package/src/core/icons/icon-gui-copy.svg +10 -0
  41. package/core/.DS_Store +0 -0
  42. package/core/fonts/.DS_Store +0 -0
  43. package/core/images/.DS_Store +0 -0
  44. package/preview/vendor/bundle/ruby/3.0.0/bundler/gems/ably-ui-abffd210ec0f/preview/log/.keep +0 -0
  45. package/preview/vendor/bundle/ruby/3.0.0/bundler/gems/ably-ui-abffd210ec0f/preview/tmp/.keep +0 -0
  46. package/preview/vendor/bundle/ruby/3.0.0/bundler/gems/ably-ui-abffd210ec0f/preview/tmp/pids/.keep +0 -0
  47. package/src/.DS_Store +0 -0
  48. package/src/core/.DS_Store +0 -0
  49. package/src/core/fonts/.DS_Store +0 -0
  50. package/src/core/images/.DS_Store +0 -0
  51. package/src/reset/.DS_Store +0 -0
package/core/Meganav.jsx CHANGED
@@ -3951,7 +3951,8 @@ var MeganavBlogPostsList = function MeganavBlogPostsList(_ref) {
3951
3951
  className: "ui-meganav-media-copy"
3952
3952
  }, post.pubDate)));
3953
3953
  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
3954
- url: absUrl("/blog")
3954
+ url: absUrl("/blog"),
3955
+ textSize: "text-p3"
3955
3956
  }, "More from our Blog")) : null;
3956
3957
  };
3957
3958
 
@@ -4114,11 +4115,11 @@ var MeganavContentCompany = function MeganavContentCompany(_ref) {
4114
4115
  recentBlogPosts: selectRecentBlogPosts
4115
4116
  });
4116
4117
  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
4117
- className: "flex"
4118
+ className: "flex max-w-screen-xl mx-auto"
4118
4119
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
4119
4120
  className: "ui-meganav-content-spacer"
4120
4121
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("section", {
4121
- className: "grid grid-cols-12 ui-grid-gap-x"
4122
+ className: "grid grid-cols-12 ui-grid-gap-x w-full"
4122
4123
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
4123
4124
  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"
4124
4125
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h3", {
@@ -4150,7 +4151,7 @@ var MeganavContentCompany = function MeganavContentCompany(_ref) {
4150
4151
  className: "ui-meganav-media-heading"
4151
4152
  }, "Case studies"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
4152
4153
  className: "ui-meganav-media-copy"
4153
- }, "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", {
4154
+ }, "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", {
4154
4155
  href: absUrl("/compare"),
4155
4156
  className: "ui-meganav-media-with-image group"
4156
4157
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
@@ -4251,11 +4252,11 @@ MeganavContentCompany.propTypes = {
4251
4252
  var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
4252
4253
  var absUrl = _ref.absUrl;
4253
4254
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4254
- className: "flex"
4255
+ className: "flex max-w-screen-xl mx-auto"
4255
4256
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4256
4257
  className: "ui-meganav-content-spacer"
4257
4258
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
4258
- className: "grid grid-cols-12 ui-grid-gap-x"
4259
+ className: "grid grid-cols-12 ui-grid-gap-x w-full"
4259
4260
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4260
4261
  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"
4261
4262
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -4299,7 +4300,7 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
4299
4300
  className: "ui-meganav-media-heading"
4300
4301
  }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4301
4302
  className: "ui-meganav-media-copy"
4302
- }, "Documentation to help you get up and running quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4303
+ }, "Documentation to help you get started quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4303
4304
  className: "col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"
4304
4305
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
4305
4306
  className: "md:mt-40",
@@ -4398,13 +4399,13 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
4398
4399
  var paths = _ref.paths,
4399
4400
  absUrl = _ref.absUrl;
4400
4401
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4401
- className: "flex"
4402
+ className: "flex max-w-screen-xl mx-auto"
4402
4403
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4403
4404
  className: "ui-meganav-content-spacer bg-extra-light-grey"
4404
4405
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
4405
- className: "grid grid-cols-12 ui-grid-gap-x"
4406
+ className: "grid grid-cols-12 ui-grid-gap-x w-full"
4406
4407
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4407
- 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"
4408
+ 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"
4408
4409
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4409
4410
  className: "flex mb-20"
4410
4411
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
@@ -4413,15 +4414,20 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
4413
4414
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
4414
4415
  className: "ui-meganav-overline ml-24"
4415
4416
  }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4416
- className: "text-p2 font-medium text-cool-black mb-8"
4417
+ className: "text-p2 font-medium text-cool-black mb-24",
4418
+ style: {
4419
+ maxWidth: "330px"
4420
+ }
4417
4421
  }, "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, {
4418
- url: absUrl("/platform")
4422
+ url: absUrl("/platform"),
4423
+ textSize: "text-p2"
4419
4424
  }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4420
- 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"
4425
+ 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"
4421
4426
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
4422
4427
  className: "ui-meganav-overline",
4423
4428
  id: "meganav-platform-panel-list-examples"
4424
4429
  }, "Our Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
4430
+ className: "mb-16",
4425
4431
  "aria-labelledby": "meganav-platform-panel-list-examples"
4426
4432
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4427
4433
  href: absUrl("/examples/avatar-stack"),
@@ -4466,14 +4472,15 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
4466
4472
  }, "Typing Indicator"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4467
4473
  className: "ui-meganav-media-copy"
4468
4474
  }, "See when a user is typing a message.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
4469
- url: absUrl("/examples")
4475
+ url: absUrl("/examples"),
4476
+ textSize: "text-p3"
4470
4477
  }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4471
- 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"
4478
+ 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"
4472
4479
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
4473
4480
  className: "ui-meganav-overline",
4474
4481
  id: "meganav-platform-panel-list-our-technology"
4475
4482
  }, "Our technology"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
4476
- className: "mb-8",
4483
+ className: "mb-16",
4477
4484
  "aria-labelledby": "meganav-platform-panel-list-our-technology"
4478
4485
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
4479
4486
  href: absUrl("/four-pillars-of-dependability#performance"),
@@ -4511,7 +4518,8 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
4511
4518
  }, "Global edge network"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4512
4519
  className: "ui-meganav-media-copy"
4513
4520
  }, "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, {
4514
- url: absUrl("/four-pillars-of-dependability")
4521
+ url: absUrl("/four-pillars-of-dependability"),
4522
+ textSize: "text-p3"
4515
4523
  }, "Explore Four Pillars of Dependability"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4516
4524
  className: "ui-meganav-content-spacer"
4517
4525
  }));
@@ -4547,13 +4555,13 @@ MeganavContentPlatform.propTypes = {
4547
4555
  var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
4548
4556
  var absUrl = _ref.absUrl;
4549
4557
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4550
- className: "flex"
4558
+ className: "flex max-w-screen-xl mx-auto"
4551
4559
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4552
4560
  className: "ui-meganav-content-spacer bg-extra-light-grey"
4553
4561
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
4554
- className: "grid grid-cols-12 ui-grid-gap-x"
4562
+ className: "grid grid-cols-12 ui-grid-gap-x w-full"
4555
4563
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4556
- 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"
4564
+ 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"
4557
4565
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
4558
4566
  className: "ui-meganav-overline",
4559
4567
  id: "meganav-use-cases-panel-use-cases"
@@ -4584,7 +4592,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
4584
4592
  }, "Virtual Events"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4585
4593
  className: "ui-meganav-media-copy"
4586
4594
  }, "Power engaging virtual events with realtime features.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4587
- 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"
4595
+ 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"
4588
4596
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
4589
4597
  className: "ui-meganav-overline",
4590
4598
  id: "meganav-use-cases-panel-industry"
@@ -4654,7 +4662,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
4654
4662
  }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
4655
4663
  className: "ui-meganav-media-copy"
4656
4664
  }, "Monitor and control global IoT deployments in realtime."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4657
- 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"
4665
+ 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"
4658
4666
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
4659
4667
  className: "ui-meganav-overline",
4660
4668
  id: "meganav-use-cases-panel-solutions"
@@ -4704,6 +4712,7 @@ MeganavContentUseCases.propTypes = {
4704
4712
 
4705
4713
  var MeganavControl = function MeganavControl(_ref) {
4706
4714
  var ariaControls = _ref.ariaControls,
4715
+ ariaLabel = _ref.ariaLabel,
4707
4716
  children = _ref.children,
4708
4717
  theme = _ref.theme,
4709
4718
  additionalCSS = _ref.additionalCSS;
@@ -4713,7 +4722,7 @@ var MeganavControl = function MeganavControl(_ref) {
4713
4722
  className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
4714
4723
  "aria-expanded": "false",
4715
4724
  "aria-controls": ariaControls,
4716
- "aria-label": "Show ".concat(children)
4725
+ "aria-label": "Show ".concat(ariaLabel, " panel")
4717
4726
  }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
4718
4727
  name: "icon-gui-disclosure-arrow",
4719
4728
  color: "text-cool-black",
@@ -4724,6 +4733,7 @@ var MeganavControl = function MeganavControl(_ref) {
4724
4733
 
4725
4734
  MeganavControl.propTypes = {
4726
4735
  ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
4736
+ ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
4727
4737
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
4728
4738
  theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
4729
4739
  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
@@ -4895,18 +4905,20 @@ var MeganavDesktopItems = function MeganavDesktopItems(_ref) {
4895
4905
  "data-id": "meganav-items-desktop"
4896
4906
  }, _Meganav_component_json__WEBPACK_IMPORTED_MODULE_2__/* .panels.map */ .h.map(function (panel) {
4897
4907
  var PanelComponent = panels[panel.component];
4908
+ var bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
4898
4909
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
4899
4910
  className: "ui-meganav-item",
4900
4911
  key: panel.id
4901
4912
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
4902
4913
  theme: theme,
4903
- ariaControls: panel.id
4914
+ ariaControls: panel.id,
4915
+ ariaLabel: panel.label
4904
4916
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
4905
4917
  className: "hidden lg:inline"
4906
4918
  }, panel.label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
4907
4919
  className: "lg:hidden"
4908
4920
  }, panel.shortLabel)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
4909
- className: "ui-meganav-panel invisible",
4921
+ className: "ui-meganav-panel invisible ".concat(bgCSS),
4910
4922
  id: panel.id,
4911
4923
  "data-id": "meganav-panel"
4912
4924
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PanelComponent, {
@@ -5151,6 +5163,7 @@ var MeganavItemsSignedIn = function MeganavItemsSignedIn(_ref) {
5151
5163
  className: "ui-meganav-item relative"
5152
5164
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
5153
5165
  ariaControls: "account-panel",
5166
+ ariaLabel: "Account",
5154
5167
  theme: theme,
5155
5168
  additionalCSS: "mr-0"
5156
5169
  }, accountName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -10918,6 +10931,7 @@ var MeganavControl = function MeganavControl() {
10918
10931
  (_panel$classList = panel.classList).replace.apply(_panel$classList, _toConsumableArray(open ? classes : classes.reverse()));
10919
10932
 
10920
10933
  control.setAttribute("aria-expanded", open);
10934
+ control.dataset.hover = open;
10921
10935
  }
10922
10936
  };
10923
10937
 
@@ -10941,9 +10955,11 @@ var MeganavControl = function MeganavControl() {
10941
10955
  panels.forEach(function (node) {
10942
10956
  return node !== panel && node.classList.replace("visible", "invisible");
10943
10957
  });
10944
- var ariaExpanded = control.getAttribute("aria-expanded");
10958
+ var ariaExpanded = control.getAttribute("aria-expanded"); // Prevent closing of the panel if it was already opened by hovering
10945
10959
 
10946
- if (ariaExpanded === "true") {
10960
+ var openedByHover = control.dataset.hover === "true";
10961
+
10962
+ if (ariaExpanded === "true" && !openedByHover) {
10947
10963
  control.setAttribute("aria-expanded", false);
10948
10964
  panel.classList.replace("visible", "invisible");
10949
10965
  } else {
@@ -10951,6 +10967,10 @@ var MeganavControl = function MeganavControl() {
10951
10967
  panel.classList.replace("invisible", "visible");
10952
10968
  }
10953
10969
 
10970
+ if (openedByHover) {
10971
+ control.dataset.hover = false;
10972
+ }
10973
+
10954
10974
  if (isSearchControl(control)) {
10955
10975
  var searchInput = (0,dom_query/* queryId */.A)("meganav-search-input", panel);
10956
10976
  if (!searchInput) return;
package/core/MeganavBlogPostsList.jsx CHANGED
@@ -341,7 +341,8 @@ var MeganavBlogPostsList = function MeganavBlogPostsList(_ref) {
341
341
  className: "ui-meganav-media-copy"
342
342
  }, post.pubDate)));
343
343
  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
344
- url: absUrl("/blog")
344
+ url: absUrl("/blog"),
345
+ textSize: "text-p3"
345
346
  }, "More from our Blog")) : null;
346
347
  };
347
348
 
package/core/MeganavContentCompany.jsx CHANGED
@@ -242,7 +242,8 @@ var MeganavBlogPostsList = function MeganavBlogPostsList(_ref) {
242
242
  className: "ui-meganav-media-copy"
243
243
  }, post.pubDate)));
244
244
  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
245
- url: absUrl("/blog")
245
+ url: absUrl("/blog"),
246
+ textSize: "text-p3"
246
247
  }, "More from our Blog")) : null;
247
248
  };
248
249
 
@@ -1390,11 +1391,11 @@ var MeganavContentCompany = function MeganavContentCompany(_ref) {
1390
1391
  recentBlogPosts: selectRecentBlogPosts
1391
1392
  });
1392
1393
  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
1393
- className: "flex"
1394
+ className: "flex max-w-screen-xl mx-auto"
1394
1395
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
1395
1396
  className: "ui-meganav-content-spacer"
1396
1397
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("section", {
1397
- className: "grid grid-cols-12 ui-grid-gap-x"
1398
+ className: "grid grid-cols-12 ui-grid-gap-x w-full"
1398
1399
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
1399
1400
  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"
1400
1401
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h3", {
@@ -1426,7 +1427,7 @@ var MeganavContentCompany = function MeganavContentCompany(_ref) {
1426
1427
  className: "ui-meganav-media-heading"
1427
1428
  }, "Case studies"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
1428
1429
  className: "ui-meganav-media-copy"
1429
- }, "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", {
1430
+ }, "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", {
1430
1431
  href: absUrl("/compare"),
1431
1432
  className: "ui-meganav-media-with-image group"
1432
1433
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
package/core/MeganavContentDevelopers.jsx CHANGED
@@ -271,11 +271,11 @@ __webpack_require__.r(__webpack_exports__);
271
271
  var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
272
272
  var absUrl = _ref.absUrl;
273
273
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
274
- className: "flex"
274
+ className: "flex max-w-screen-xl mx-auto"
275
275
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
276
276
  className: "ui-meganav-content-spacer"
277
277
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
278
- className: "grid grid-cols-12 ui-grid-gap-x"
278
+ className: "grid grid-cols-12 ui-grid-gap-x w-full"
279
279
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
280
280
  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"
281
281
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -319,7 +319,7 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
319
319
  className: "ui-meganav-media-heading"
320
320
  }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
321
321
  className: "ui-meganav-media-copy"
322
- }, "Documentation to help you get up and running quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
322
+ }, "Documentation to help you get started quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
323
323
  className: "col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"
324
324
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
325
325
  className: "md:mt-40",
package/core/MeganavContentPlatform.jsx CHANGED
@@ -322,13 +322,13 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
322
322
  var paths = _ref.paths,
323
323
  absUrl = _ref.absUrl;
324
324
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
325
- className: "flex"
325
+ className: "flex max-w-screen-xl mx-auto"
326
326
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
327
327
  className: "ui-meganav-content-spacer bg-extra-light-grey"
328
328
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
329
- className: "grid grid-cols-12 ui-grid-gap-x"
329
+ className: "grid grid-cols-12 ui-grid-gap-x w-full"
330
330
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
331
- 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"
331
+ 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"
332
332
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
333
333
  className: "flex mb-20"
334
334
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
@@ -337,15 +337,20 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
337
337
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
338
338
  className: "ui-meganav-overline ml-24"
339
339
  }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
340
- className: "text-p2 font-medium text-cool-black mb-8"
340
+ className: "text-p2 font-medium text-cool-black mb-24",
341
+ style: {
342
+ maxWidth: "330px"
343
+ }
341
344
  }, "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, {
342
- url: absUrl("/platform")
345
+ url: absUrl("/platform"),
346
+ textSize: "text-p2"
343
347
  }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
344
- 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"
348
+ 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"
345
349
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
346
350
  className: "ui-meganav-overline",
347
351
  id: "meganav-platform-panel-list-examples"
348
352
  }, "Our Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
353
+ className: "mb-16",
349
354
  "aria-labelledby": "meganav-platform-panel-list-examples"
350
355
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
351
356
  href: absUrl("/examples/avatar-stack"),
@@ -390,14 +395,15 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
390
395
  }, "Typing Indicator"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
391
396
  className: "ui-meganav-media-copy"
392
397
  }, "See when a user is typing a message.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
393
- url: absUrl("/examples")
398
+ url: absUrl("/examples"),
399
+ textSize: "text-p3"
394
400
  }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
395
- 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"
401
+ 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"
396
402
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
397
403
  className: "ui-meganav-overline",
398
404
  id: "meganav-platform-panel-list-our-technology"
399
405
  }, "Our technology"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
400
- className: "mb-8",
406
+ className: "mb-16",
401
407
  "aria-labelledby": "meganav-platform-panel-list-our-technology"
402
408
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
403
409
  href: absUrl("/four-pillars-of-dependability#performance"),
@@ -435,7 +441,8 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
435
441
  }, "Global edge network"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
436
442
  className: "ui-meganav-media-copy"
437
443
  }, "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, {
438
- url: absUrl("/four-pillars-of-dependability")
444
+ url: absUrl("/four-pillars-of-dependability"),
445
+ textSize: "text-p3"
439
446
  }, "Explore Four Pillars of Dependability"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
440
447
  className: "ui-meganav-content-spacer"
441
448
  }));
package/core/MeganavContentUseCases.jsx CHANGED
@@ -271,13 +271,13 @@ __webpack_require__.r(__webpack_exports__);
271
271
  var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
272
272
  var absUrl = _ref.absUrl;
273
273
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
274
- className: "flex"
274
+ className: "flex max-w-screen-xl mx-auto"
275
275
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
276
276
  className: "ui-meganav-content-spacer bg-extra-light-grey"
277
277
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
278
- className: "grid grid-cols-12 ui-grid-gap-x"
278
+ className: "grid grid-cols-12 ui-grid-gap-x w-full"
279
279
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
280
- 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"
280
+ 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"
281
281
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
282
282
  className: "ui-meganav-overline",
283
283
  id: "meganav-use-cases-panel-use-cases"
@@ -308,7 +308,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
308
308
  }, "Virtual Events"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
309
309
  className: "ui-meganav-media-copy"
310
310
  }, "Power engaging virtual events with realtime features.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
311
- 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"
311
+ 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"
312
312
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
313
313
  className: "ui-meganav-overline",
314
314
  id: "meganav-use-cases-panel-industry"
@@ -378,7 +378,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
378
378
  }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
379
379
  className: "ui-meganav-media-copy"
380
380
  }, "Monitor and control global IoT deployments in realtime."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
381
- 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"
381
+ 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"
382
382
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
383
383
  className: "ui-meganav-overline",
384
384
  id: "meganav-use-cases-panel-solutions"
package/core/MeganavContentWhyAbly/component.js CHANGED
@@ -1,6 +1,22 @@
1
- /******/ (() => { // webpackBootstrap
2
- /******/ "use strict";
3
- /******/
4
- /******/
1
+ (function webpackUniversalModuleDefinition(root, factory) {
2
+ if(typeof exports === 'object' && typeof module === 'object')
3
+ module.exports = factory();
4
+ else if(typeof define === 'function' && define.amd)
5
+ define([], factory);
6
+ else if(typeof exports === 'object')
7
+ exports["AblyUi"] = factory();
8
+ else
9
+ root["AblyUi"] = root["AblyUi"] || {}, root["AblyUi"]["Core"] = root["AblyUi"]["Core"] || {}, root["AblyUi"]["Core"]["MeganavContentWhyAbly"] = factory();
10
+ })(this, function() {
11
+ return /******/ (() => { // webpackBootstrap
12
+ var __webpack_exports__ = {};
13
+ /*!*****************************************************!*\
14
+ !*** ./src/core/MeganavContentWhyAbly/component.js ***!
15
+ \*****************************************************/
16
+
17
+ __webpack_exports__ = __webpack_exports__.default;
18
+ /******/ return __webpack_exports__;
5
19
  /******/ })()
6
- ;
20
+ ;
21
+ });
22
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9BYmx5VWkuQ29yZS5bbmFtZV0vd2VicGFjay91bml2ZXJzYWxNb2R1bGVEZWZpbml0aW9uIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSx1Q0FBdUMsdURBQXVEO0FBQzlGLENBQUM7QUFDRCxPIiwiZmlsZSI6ImNvcmUvTWVnYW5hdkNvbnRlbnRXaHlBYmx5L2NvbXBvbmVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiB3ZWJwYWNrVW5pdmVyc2FsTW9kdWxlRGVmaW5pdGlvbihyb290LCBmYWN0b3J5KSB7XG5cdGlmKHR5cGVvZiBleHBvcnRzID09PSAnb2JqZWN0JyAmJiB0eXBlb2YgbW9kdWxlID09PSAnb2JqZWN0Jylcblx0XHRtb2R1bGUuZXhwb3J0cyA9IGZhY3RvcnkoKTtcblx0ZWxzZSBpZih0eXBlb2YgZGVmaW5lID09PSAnZnVuY3Rpb24nICYmIGRlZmluZS5hbWQpXG5cdFx0ZGVmaW5lKFtdLCBmYWN0b3J5KTtcblx0ZWxzZSBpZih0eXBlb2YgZXhwb3J0cyA9PT0gJ29iamVjdCcpXG5cdFx0ZXhwb3J0c1tcIkFibHlVaVwiXSA9IGZhY3RvcnkoKTtcblx0ZWxzZVxuXHRcdHJvb3RbXCJBYmx5VWlcIl0gPSByb290W1wiQWJseVVpXCJdIHx8IHt9LCByb290W1wiQWJseVVpXCJdW1wiQ29yZVwiXSA9IHJvb3RbXCJBYmx5VWlcIl1bXCJDb3JlXCJdIHx8IHt9LCByb290W1wiQWJseVVpXCJdW1wiQ29yZVwiXVtcIk1lZ2FuYXZDb250ZW50V2h5QWJseVwiXSA9IGZhY3RvcnkoKTtcbn0pKHRoaXMsIGZ1bmN0aW9uKCkge1xucmV0dXJuICJdLCJzb3VyY2VSb290IjoiIn0=