@ably/ui 7.9.4 → 7.10.0-dev.e980a00

package/core/MeganavItemsSignedIn.jsx

@@ -11,6 +11,56 @@
 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__) => {
 
@@ -83,11 +133,12 @@ Icon.propTypes = {
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
       children = _ref.children,
-      theme = _ref.theme;
+      theme = _ref.theme,
+      additionalCSS = _ref.additionalCSS;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     type: "button",
     "data-id": "meganav-control",
-    className: "ui-meganav-link h-64 flex items-center group ".concat(theme.textColor),
+    className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
     "aria-label": "Show ".concat(children)
@@ -102,12 +153,209 @@ var MeganavControl = function MeganavControl(_ref) {
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)
+  theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavControl);
 
 /***/ }),
 
+/***/ 97:
+/***/ ((__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);
+/* harmony import */ var _MeganavSearchPanel_component_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6569);
+
+
+
+
+
+var MeganavSearch = function MeganavSearch(_ref) {
+  var absUrl = _ref.absUrl;
+  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("button", {
+    type: "button",
+    "data-id": "meganav-control",
+    "data-control": "search",
+    className: "h-64 w-24 px-24 pr-48 py-20",
+    "aria-expanded": "false",
+    "aria-controls": "panel-search",
+    "aria-label": "Show Search Panel"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    name: "icon-gui-search",
+    color: "text-cool-black",
+    size: "1.5rem",
+    additionalCSS: "hover:text-gui-hover"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "ui-meganav-panel invisible",
+    id: "panel-search",
+    "data-id": "meganav-panel"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavSearchPanel_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
+    absUrl: absUrl
+  })));
+};
+
+MeganavSearch.propTypes = {
+  absUrl: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavSearch);
+
+/***/ }),
+
+/***/ 3833:
+/***/ ((__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__);
+
+
+var MeganavSearchAutocomplete = function MeganavSearchAutocomplete() {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey",
+    "data-id": "meganav-search-autocomplete-container"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ol", {
+    className: "m-16",
+    "data-id": "meganav-search-autocomplete-list"
+  }));
+};
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavSearchAutocomplete);
+
+/***/ }),
+
+/***/ 6569:
+/***/ ((__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);
+/* harmony import */ var _MeganavSearchSuggestions_component_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8926);
+/* harmony import */ var _MeganavSearchAutocomplete_component_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3833);
+
+
+
+
+
+
+var MeganavSearchPanel = function MeganavSearchPanel(_ref) {
+  var absUrl = _ref.absUrl;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
+    className: "ui-meganav-content grid-cols-12"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "col-span-8"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "mb-32"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", {
+    className: "flex items-start",
+    action: absUrl("/search"),
+    method: "get"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "relative w-full"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    name: "icon-gui-search",
+    color: "text-cool-black",
+    size: "1.5rem",
+    additionalCSS: "absolute top-12 left-16"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    type: "search",
+    name: "q",
+    className: "ui-input pl-48 h-48",
+    placeholder: "Search",
+    "data-id": "meganav-search-input"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavSearchAutocomplete_component_jsx__WEBPACK_IMPORTED_MODULE_4__.default, null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    type: "submit",
+    className: "ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32"
+  }, "Search")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "col-span-12"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavSearchSuggestions_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
+    displaySupportLink: true,
+    absUrl: absUrl
+  })));
+};
+
+MeganavSearchPanel.propTypes = {
+  absUrl: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavSearchPanel);
+
+/***/ }),
+
+/***/ 8926:
+/***/ ((__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 _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 md:overflow-auto"
+  }, /*#__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"
+  }, "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"
+  }, "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"
+  }, "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"
+  }, "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);
+
+/***/ }),
+
 /***/ 1866:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -367,6 +615,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(140);
 /* harmony import */ var _SignOutLink_component_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1866);
+/* harmony import */ var _MeganavSearch_component_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(97);
 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); }
 
 
@@ -374,6 +623,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
+
 var truncate = function truncate(string, length) {
   return string !== null && string !== void 0 && string.length && string.length > length ? "".concat(string.slice(0, length - 1), "\u2026") : string;
 };
@@ -393,7 +643,8 @@ var MeganavItemsSignedIn = function MeganavItemsSignedIn(_ref) {
     className: "ui-meganav-item relative"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     ariaControls: "account-panel",
-    theme: theme
+    theme: theme,
+    additionalCSS: "mr-0"
   }, accountName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-panel-account invisible",
     id: "account-panel",
@@ -436,9 +687,9 @@ var MeganavItemsSignedIn = function MeganavItemsSignedIn(_ref) {
       href: absUrl(href),
       className: "ui-meganav-account-link"
     }, text);
-  })))), sessionState.account && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
-    className: "ml-16"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavSearch_component_jsx__WEBPACK_IMPORTED_MODULE_4__.default, {
+    absUrl: absUrl
+  })), sessionState.account && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl(sessionState.account.links.dashboard.href),
     className: "ui-btn-secondary p-btn-small"
   }, "Dashboard")));

package/core/MeganavSearch/component.js

@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavSearch=o())}(this,(function(){return{}.default}));