@ably/ui 8.7.0-dev.cbc127e → 8.7.0-dev.cf2bf50

package/core/Footer.jsx

@@ -211,7 +211,7 @@ function Footer(_ref) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
     className: "p-menu-row-snug"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/pub-sub-messaging"),
+    href: absUrl("/solutions/channels"),
     className: "ui-footer-menu-row-link"
   }, "Pub/sub messaging")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
     className: "p-menu-row-snug"
@@ -228,12 +228,7 @@ function Footer(_ref) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/protocols"),
     className: "ui-footer-menu-row-link"
-  }, "Multiple protocol messaging")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
-    className: "p-menu-row-snug"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/hub"),
-    className: "ui-footer-menu-row-link"
-  }, "Streaming data sources")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+  }, "Multiple protocol messaging")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "col-span-full xs:col-span-3 md:col-span-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "ui-footer-col-title"
@@ -269,11 +264,6 @@ function Footer(_ref) {
     className: "ui-footer-menu-row-link"
   }, "Healthcare")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
     className: "p-menu-row-snug"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/hub"),
-    className: "ui-footer-menu-row-link"
-  }, "Streaming data sources")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
-    className: "p-menu-row-snug"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/solutions/ecommerce-and-retail"),
     className: "ui-footer-menu-row-link"
@@ -428,9 +418,9 @@ function Footer(_ref) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-twitter",
     href: "https://twitter.com/ablyrealtime",
-    title: "Ably on Twitter"
+    title: "Ably on X"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
-    name: "twitter",
+    name: "icon-social-x",
     size: "1.5rem"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-linkedin",
@@ -496,15 +486,19 @@ function Footer(_ref) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
     className: "mr-24 h-80",
     src: paths.highestUserAdoption,
-    alt: "Highest User Adoption 2022"
+    alt: "Highest User Adoption 2023"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
+    className: "mr-24 h-80",
+    src: paths.bestSupport,
+    alt: "Best Support 2023"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
     className: "mr-24 h-80",
-    src: paths.usersLoveUs,
-    alt: "Users Love Us"
+    src: paths.fastestImplementation,
+    alt: "Fastest Implementation 2023"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
     className: "mr-24 h-80",
     src: paths.highestPerformer,
-    alt: "High Performer 2022"
+    alt: "High Performer 2023"
   }))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "max-w-screen-xl ui-grid-px mx-auto"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("hr", {
@@ -580,7 +574,8 @@ Footer.propTypes = {
     ablyStack: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
     highestPerformer: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
     highestUserAdoption: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
-    usersLoveUs: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
+    bestSupport: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+    fastestImplementation: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
   }),
   urlBase: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
 };

package/core/Meganav/component.css

@@ -7,13 +7,13 @@
     z-index: var(--stacking-context-page-meganav);
 
     @apply fixed top-0 w-full;
-    @apply antialiased font-sans transition-colors;
+    @apply font-sans antialiased transition-colors;
   }
 
   .ui-meganav {
     height: var(--ui-meganav-height);
 
-    @apply flex justify-between items-center max-w-screen-xl mx-auto;
+    @apply flex items-center justify-between max-w-screen-xl mx-auto;
   }
 
   .ui-meganav-panel,
@@ -22,7 +22,7 @@
     z-index: var(--stacking-context-meganav-dropdown);
 
     @apply absolute left-0 right-0;
-    @apply border-mid-grey border-t shadow-container;
+    @apply border-t border-mid-grey shadow-container;
   }
 
   .ui-meganav-panel {
@@ -35,9 +35,9 @@
     /* Prevents momentum-based scrolling https://devdocs.io/css/-webkit-overflow-scrolling */
     -webkit-overflow-scrolling: auto;
 
-    @apply bg-white pt-16 border-0;
-    @apply border-mid-grey border-t shadow-container;
-    @apply fixed top-64 left-0 right-0 overflow-y-auto;
+    @apply pt-16 bg-white border-0;
+    @apply border-t border-mid-grey shadow-container;
+    @apply fixed left-0 right-0 overflow-y-auto top-64;
   }
 
   .ui-meganav-panel-account {
@@ -51,8 +51,8 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-medium block;
-    @apply mr-12 lg:mr-24 px-0 py-20;
+    @apply block font-medium text-menu2;
+    @apply px-0 py-20 mr-12 lg:mr-24;
     @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
     @apply transition-colors;
   }
@@ -62,18 +62,18 @@
   }
 
   .ui-meganav-mobile-link {
-    @apply p-menu-row relative -left-8 w-extend-8;
-    @apply text-menu2 font-medium block text-cool-black text-left;
+    @apply relative p-menu-row -left-8 w-extend-8;
+    @apply block font-medium text-left text-menu2 text-cool-black;
     @apply flex items-center;
     @apply focus:text-gui-focus focus:outline-none;
   }
 
   .ui-meganav-account-link {
-    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
+    @apply relative block px-8 py-8 font-light rounded hover:bg-light-grey hover:text-gui-hover -left-8 text-menu3 w-extend-8;
   }
 
   .ui-meganav-content {
-    @apply max-w-screen-xl py-24 lg:py-32 mx-auto;
+    @apply max-w-screen-xl py-24 mx-auto lg:py-32;
     @apply grid grid-cols-1;
     @apply px-24 md:px-32 lg:px-32 xl:px-64;
   }
@@ -81,27 +81,27 @@
   /* This is implemented not as padding so we can change the color of just this space, while keeping the grid
      as close to the designs as possible */
   .ui-meganav-content-spacer {
-    @apply hidden md:block md:w-32 lg:w-32 xl:w-64 self-stretch flex-shrink-0 flex-grow-0;
+    @apply self-stretch flex-grow-0 flex-shrink-0 hidden md:block md:w-32 lg:w-32 xl:w-64;
   }
 
   .ui-meganav-media {
-    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+    @apply relative block px-8 py-8 rounded hover:bg-light-grey -left-8 w-extend-8;
   }
 
   .ui-meganav-media-with-image {
     grid-template-columns: max-content 1fr;
     grid-template-rows: min-content 1fr;
 
-    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+    @apply relative block px-8 py-8 rounded hover:bg-light-grey -left-8 w-extend-8;
     @apply grid gap-x-16;
   }
 
   .ui-meganav-media-heading {
-    @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
+    @apply font-medium text-menu3 text-cool-black group-hover:text-gui-hover group-focus:text-gui-focus;
   }
 
   .ui-meganav-media-copy {
-    @apply text-p3 text-dark-grey font-light;
+    @apply font-light text-p3 text-dark-grey;
   }
 
   .ui-meganav-overline {
@@ -113,3 +113,27 @@
   }
 }
 
+.HW_badge {
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  font-size: 14px !important;
+  top: 2px !important;
+  left: 20px !important;
+  transition: none !important;
+}
+
+.HW_animated {
+  animation: none !important;
+}
+
+.invisible .HW_badge {
+  visibility: hidden !important;
+}
+
+.invisible .HW_frame {
+  visibility: hidden !important;
+}
+

package/core/Meganav/component.json

@@ -29,7 +29,7 @@
     }
   },
   "panels": [
-    { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
+    { "label": "Products", "shortLabel": "Products", "id": "products-panel", "component": "MeganavContentProducts" },
     { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
     { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
     { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }