@ably/ui 7.9.4 → 7.10.0-dev.45e131a

package/core/MeganavSearchSuggestions.jsx

@@ -0,0 +1,366 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("react"));
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else {
+		var a = typeof exports === 'object' ? factory(require("react")) : factory(root[undefined]);
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(this, function(__WEBPACK_EXTERNAL_MODULE__9281__) {
+return /******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 5751:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9281);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9008);
+
+
+
+
+var FeaturedLink = function FeaturedLink(_ref) {
+  var url = _ref.url,
+      _ref$textSize = _ref.textSize,
+      textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
+      _ref$iconColor = _ref.iconColor,
+      iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
+      _ref$flush = _ref.flush,
+      flush = _ref$flush === void 0 ? false : _ref$flush,
+      children = _ref.children;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: url,
+    className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
+    style: {
+      "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
+    }
+  }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    name: "icon-gui-link-arrow",
+    size: "calc(var(--featured-link-icon-size) * 1.25)",
+    color: iconColor,
+    additionalCSS: "ui-featured-link-icon"
+  }));
+};
+
+FeaturedLink.propTypes = {
+  url: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
+
+/***/ }),
+
+/***/ 9008:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9281);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+var _excluded = ["name", "size", "color", "additionalCSS"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+var Icon = function Icon(_ref) {
+  var name = _ref.name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "0.75rem" : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "" : _ref$color,
+      _ref$additionalCSS = _ref.additionalCSS,
+      additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
+      additionalAttributes = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", _extends({
+    className: "".concat(color, " ").concat(additionalCSS),
+    style: {
+      width: size,
+      height: size
+    }
+  }, additionalAttributes), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("use", {
+    xlinkHref: "#sprite-".concat(name)
+  }));
+};
+
+Icon.propTypes = {
+  name: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string.isRequired),
+  size: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  color: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);
+
+/***/ }),
+
+/***/ 2703:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+var ReactPropTypesSecret = __webpack_require__(414);
+
+function emptyFunction() {}
+function emptyFunctionWithReset() {}
+emptyFunctionWithReset.resetWarningCache = emptyFunction;
+
+module.exports = function() {
+  function shim(props, propName, componentName, location, propFullName, secret) {
+    if (secret === ReactPropTypesSecret) {
+      // It is still safe when called from React.
+      return;
+    }
+    var err = new Error(
+      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+      'Use PropTypes.checkPropTypes() to call them. ' +
+      'Read more at http://fb.me/use-check-prop-types'
+    );
+    err.name = 'Invariant Violation';
+    throw err;
+  };
+  shim.isRequired = shim;
+  function getShim() {
+    return shim;
+  };
+  // Important!
+  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+  var ReactPropTypes = {
+    array: shim,
+    bool: shim,
+    func: shim,
+    number: shim,
+    object: shim,
+    string: shim,
+    symbol: shim,
+
+    any: shim,
+    arrayOf: getShim,
+    element: shim,
+    elementType: shim,
+    instanceOf: getShim,
+    node: shim,
+    objectOf: getShim,
+    oneOf: getShim,
+    oneOfType: getShim,
+    shape: getShim,
+    exact: getShim,
+
+    checkPropTypes: emptyFunctionWithReset,
+    resetWarningCache: emptyFunction
+  };
+
+  ReactPropTypes.PropTypes = ReactPropTypes;
+
+  return ReactPropTypes;
+};
+
+
+/***/ }),
+
+/***/ 5697:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+if (false) { var throwOnDirectAccess, ReactIs; } else {
+  // By explicitly using `prop-types` you are opting into new production behavior.
+  // http://fb.me/prop-types-in-prod
+  module.exports = __webpack_require__(2703)();
+}
+
+
+/***/ }),
+
+/***/ 414:
+/***/ ((module) => {
+
+"use strict";
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+module.exports = ReactPropTypesSecret;
+
+
+/***/ }),
+
+/***/ 9281:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__9281__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be in strict mode.
+(() => {
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9281);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5751);
+
+
+
+
+var MeganavSearchSuggestions = function MeganavSearchSuggestions(_ref) {
+  var absUrl = _ref.absUrl,
+      displaySupportLink = _ref.displaySupportLink;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-text-overline2 text-cool-black py-12"
+  }, "Popular pages"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "flex justify-between items-center overflow-x-scroll"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "flex"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "py-12 pr-8 flex-shrink-0"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/docs/how-ably-works"),
+    className: "ui-text-p2 ui-link"
+  }, "How does Ably work?")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "py-12 px-8 flex-shrink-0"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/docs/quick-start-guide"),
+    className: "ui-text-p2 ui-link"
+  }, "Quickstart guide")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "py-12 px-8 flex-shrink-0"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/docs/core-features/pubsub"),
+    className: "ui-text-p2 ui-link"
+  }, "Publish/Subscribe Messaging")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "py-12 pl-8 flex-shrink-0"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/platform"),
+    className: "ui-text-p2 ui-link"
+  }, "Platform"))), displaySupportLink ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    url: absUrl("/support"),
+    textSize: "text-p2"
+  }, "Support") : null));
+};
+
+MeganavSearchSuggestions.propTypes = {
+  absUrl: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  displaySupportLink: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavSearchSuggestions);
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/core/styles.css

@@ -117,7 +117,9 @@
 
     --spacing-0: 0px;
     --spacing-1: 1px;
+    --spacing-2: 0.125rem;
     --spacing-4: 0.25rem;
+    --spacing-6: 0.375rem;
     --spacing-8: 0.5rem;
     --spacing-12: 0.75rem;
     --spacing-14: 0.875rem;
@@ -576,21 +578,6 @@
     stroke: var(--color-dark-grey);
   }
 
-  /* Extend how tailwind does group hover for icons */
-  .group {
-    &:hover {
-      .group-hover\:icon-gui-hover {
-        stroke: var(--color-gui-hover);
-      }
-    }
-
-    &:focus {
-      .group-focus\:icon-gui-focus {
-        stroke: var(--color-gui-focus);
-      }
-    }
-  }
-
   .ui-version-tag {
     @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "7.9.4",
+  "version": "7.10.0-dev.45e131a",
   "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.",
   "repository": {
     "type": "git",

package/src/core/Meganav/component.css

@@ -48,11 +48,15 @@
 
   .ui-meganav-link {
     @apply text-menu2 font-medium block;
-    @apply mx-8 lg:mx-12 px-0 py-20;
+    @apply mr-12 lg:mr-24 px-0 py-20;
     @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
     @apply transition-colors;
   }
 
+  .ui-meganav-item {
+    flex: 1 0 auto;
+  }
+
   .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;

package/src/core/Meganav/component.html.erb

@@ -2,20 +2,25 @@
   <%= notice %>
 
   <div class="ui-meganav ui-grid-px">
-    <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
+    <div className="mr-24">
+      <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
+    </div>
     <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
 
     <% if @session_data[:signedIn] %>
       <%= render(AblyUi::Core::MeganavItemsSignedIn.new(session_data: @session_data, theme_name: @theme_name, url_base: url_base)) %>
     <% else %>
       <ul class="hidden md:flex items-center">
-        <li>
+        <li class="ui-meganav-item">
           <%= link_to "Contact us", abs_url("/contact"), data: { id: "meganav-link" }, class: ["ui-meganav-link", theme(:text_color)] %>
         </li>
-        <li>
-          <%= link_to "Login", abs_url(login_link), data: { id: "meganav-link" }, class: ["ui-meganav-link", theme(:text_color)] %>
+        <li class="ui-meganav-item">
+          <%= link_to "Login", abs_url(login_link), data: { id: "meganav-link" }, class: ["ui-meganav-link", "mr-0", theme(:text_color)] %>
         </li>
-        <li class="ml-16">
+        <li class="ui-meganav-item">
+          <%= render(AblyUi::Core::MeganavSearch.new(url_base: url_base)) %>
+        </li>
+        <li class="ui-meganav-item">
           <%= link_to "Sign up free", abs_url("/sign-up"), data: { id: "meganav-sign-up-btn" }, class: ["ui-btn", "p-btn-small", theme(:button_background_color), theme(:button_text_color)] %>
         </li>
       </ul>

package/src/core/Meganav/component.jsx

@@ -18,23 +18,27 @@ import MeganavContentPlatform from "../MeganavContentPlatform/component.jsx";
 import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx";
 import MeganavContentWhyAbly from "../MeganavContentWhyAbly/component.jsx";
 import MeganavContentDevelopers from "../MeganavContentDevelopers/component.jsx";
+import MeganavSearch from "../MeganavSearch/component.jsx";
 
 const SignIn = ({ sessionState, theme, loginLink, absUrl }) => {
   return sessionState.signedIn ? (
     <MeganavItemsSignedIn absUrl={absUrl} sessionState={sessionState} theme={theme} />
   ) : (
     <ul className="hidden md:flex items-center">
-      <li>
+      <li className="ui-meganav-item">
         <a href={absUrl("/contact")} className={`ui-meganav-link ${theme.textColor}`} data-id="meganav-link">
           Contact us
         </a>
       </li>
-      <li>
-        <a href={absUrl(loginLink)} className={`ui-meganav-link ${theme.textColor}`} data-id="meganav-link">
+      <li className="ui-meganav-item">
+        <a href={absUrl(loginLink)} className={`ui-meganav-link mr-0 ${theme.textColor}`} data-id="meganav-link">
           Login
         </a>
       </li>
-      <li className="ml-16">
+      <li className="ui-meganav-item">
+        <MeganavSearch absUrl={absUrl} />
+      </li>
+      <li className="ui-meganav-item">
         <a href={absUrl("/sign-up")} data-id="meganav-sign-up-btn" className={`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`}>
           Sign up free
         </a>
@@ -81,7 +85,10 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
     <nav className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`} data-id="meganav" aria-label="Main">
       {notice && <Notice {...notice.props} config={notice.config} />}
       <div className="ui-meganav ui-grid-px">
-        <Logo dataId="meganav-logo" href={urlBase} />
+        <div className="mr-24">
+          <Logo dataId="meganav-logo" href={urlBase} />
+        </div>
+
         <MeganavItemsDesktop panels={panels} paths={paths} theme={theme} absUrl={absUrl} />
 
         {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}

package/src/core/MeganavContentWhyAbly/component.html.erb

@@ -27,7 +27,7 @@
       </li>
 
       <li>
-        <%= link_to abs_url("/resources/datasheets"), class: "group ui-meganav-media py-12" do %>
+        <%= link_to abs_url("/resources"), class: "group ui-meganav-media py-12" do %>
           <p class="ui-meganav-media-heading">Resources</p>
         <% end %>
       </li>

package/src/core/MeganavContentWhyAbly/component.jsx

@@ -42,7 +42,7 @@ const MeganavContentWhyAbly = ({ absUrl }) => {
           </li>
 
           <li>
-            <a href={absUrl("/resources/datasheets")} className="group ui-meganav-media py-12">
+            <a href={absUrl("/resources")} className="group ui-meganav-media py-12">
               <p className="ui-meganav-media-heading">Resources</p>
             </a>
           </li>

package/src/core/MeganavControl/component.html.erb

@@ -1,6 +1,6 @@
 <%= button_tag(type: "button",
-               class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color)],
+               class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color), additional_css],
                data: { id: "meganav-control" },
-               aria: { expanded: false, controls: @aria_controls, label: "Show #{content}" }) do -%>
+               aria: { expanded: false, controls: aria_controls, label: "Show #{content}" }) do -%>
   <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "transform rotate-90 group-hover:text-gui-hover group-focus:text-gui-focus")) %>
 <% end %>

package/src/core/MeganavControl/component.jsx

@@ -3,11 +3,11 @@ import T from "prop-types";
 
 import Icon from "../Icon/component.jsx";
 
-const MeganavControl = ({ ariaControls, children, theme }) => (
+const MeganavControl = ({ ariaControls, children, theme, additionalCSS }) => (
   <button
     type="button"
     data-id="meganav-control"
-    className={`ui-meganav-link h-64 flex items-center group ${theme.textColor}`}
+    className={`ui-meganav-link h-64 flex items-center group ${additionalCSS} ${theme.textColor}`}
     aria-expanded="false"
     aria-controls={ariaControls}
     aria-label={`Show ${children}`}
@@ -26,6 +26,7 @@ MeganavControl.propTypes = {
   ariaControls: T.string,
   children: T.node,
   theme: T.object,
+  additionalCSS: T.string,
 };
 
 export default MeganavControl;

package/src/core/MeganavControl/component.rb

@@ -2,9 +2,11 @@ module AblyUi
   module Core
     class MeganavControl < ViewComponent::Base
       include AblyUi::Core::MeganavConfig
+      attr_reader :aria_controls, :additional_css
 
-      def initialize(aria_controls:, theme_name:)
+      def initialize(aria_controls:, theme_name:, additional_css: '')
         @aria_controls = aria_controls
+        @additional_css = additional_css
         theme_setup(theme_name)
       end
     end

package/src/core/MeganavControlMobileDropdown/component.js

@@ -7,6 +7,8 @@ const MeganavControlMobileDropdown = ({ clearPanels }) => {
   const dropdown = queryId("meganav-mobile-dropdown");
   const menuIcon = queryId("meganav-control-mobile-dropdown-menu");
   const closeIcon = queryId("meganav-control-mobile-dropdown-close");
+  const MeganavSearchSuggestionsToggle = queryId("meganav-mobile-search-input");
+  const MeganavSearchSuggestions = queryId("meganav-mobile-search-suggestions");
 
   const clickHandler = () => {
     const ariaExpanded = control.getAttribute("aria-expanded");
@@ -26,7 +28,27 @@ const MeganavControlMobileDropdown = ({ clearPanels }) => {
     closeIcon.classList.toggle("hidden");
   };
 
+  const focusSuggestionsHandler = () => {
+    MeganavSearchSuggestions.classList.add("max-h-96");
+  };
+  const blurSuggestionsHandler = (event) => {
+    if (
+      event.relatedTarget === MeganavSearchSuggestions.querySelectorAll("a")[0]
+    ) {
+      return;
+    }
+    MeganavSearchSuggestions.classList.remove("max-h-96");
+  };
+
   control.addEventListener("click", clickHandler);
+  MeganavSearchSuggestionsToggle.addEventListener(
+    "focus",
+    focusSuggestionsHandler
+  );
+  MeganavSearchSuggestionsToggle.addEventListener(
+    "blur",
+    blurSuggestionsHandler
+  );
 
   return {
     teardown: () => {

package/src/core/MeganavItemsMobile/component.html.erb

@@ -11,7 +11,18 @@
     <%= render(AblyUi::Core::MeganavControlMobileDropdown.new(theme_name: @theme_name)) %>
 
     <div class="ui-meganav-mobile-dropdown invisible" id="meganav-mobile-dropdown" data-id="meganav-mobile-dropdown">
-      <div class="py-16 ui-grid-px bg-white">
+      <div class="pt-24 pb-16 ui-grid-px bg-white">
+        <%= tag.form class: "mb-16", action: abs_url("/search"), method: "get" do %>
+          <div class="relative w-full">
+            <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "absolute top-12 left-16")) %>
+            <input type="search" name="q" class="ui-input pl-48 h-48" placeholder="Search" data-id="meganav-mobile-search-input" />
+          </div>
+        <% end %>
+
+        <div class="max-h-0 overflow-hidden transition-all" data-id="meganav-mobile-search-suggestions">
+           <%= render(AblyUi::Core::MeganavSearchSuggestions.new(url_base: url_base, display_support_link: false)) %>
+        </div>
+
         <ul class="mb-16">
           <% panels.each do |panel| %>
             <li class="ui-meganav-mobile-item">