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

package/core/MeganavContentDevelopers.jsx

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"), require("prop-types"));
+		module.exports = factory(require("prop-types"), require("react"));
 	else if(typeof define === 'function' && define.amd)
 		define([, ], factory);
 	else {
-		var a = typeof exports === 'object' ? factory(require("react"), require("prop-types")) : factory(root[undefined], root[undefined]);
+		var a = typeof exports === 'object' ? factory(require("prop-types"), require("react")) : factory(root[undefined], root[undefined]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(this, function(__WEBPACK_EXTERNAL_MODULE__9281__, __WEBPACK_EXTERNAL_MODULE__3474__) {
+})(this, (__WEBPACK_EXTERNAL_MODULE__6073__, __WEBPACK_EXTERNAL_MODULE__5225__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
@@ -18,9 +18,9 @@ return /******/ (() => { // webpackBootstrap
 /* 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__ = __webpack_require__(5225);
 /* 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__(3474);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6073);
 /* 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"];
 
@@ -64,17 +64,17 @@ Icon.propTypes = {
 
 /***/ }),
 
-/***/ 3474:
+/***/ 6073:
 /***/ ((module) => {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__3474__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__6073__;
 
 /***/ }),
 
-/***/ 9281:
+/***/ 5225:
 /***/ ((module) => {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__9281__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__5225__;
 
 /***/ })
 
@@ -149,158 +149,454 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__9281__;
 var __webpack_exports__ = {};
 // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
 (() => {
+// ESM COMPAT FLAG
 __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__(3474);
-/* 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);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ MeganavContentDevelopers_component)
+});
+
+// EXTERNAL MODULE: external {"commonjs":"prop-types","commonjs2":"prop-types"}
+var external_commonjs_prop_types_commonjs2_prop_types_ = __webpack_require__(6073);
+var external_commonjs_prop_types_commonjs2_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_prop_types_commonjs2_prop_types_);
+// EXTERNAL MODULE: external {"commonjs":"react","commonjs2":"react"}
+var external_commonjs_react_commonjs2_react_ = __webpack_require__(5225);
+var external_commonjs_react_commonjs2_react_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_react_commonjs2_react_);
+;// CONCATENATED MODULE: ./src/core/HeadwayWidget/HeadwayWidget.jsx
+var _excluded = ["id", "account", "children", "widgetPosition", "badgePosition", "component", "trigger", "onWidgetReady", "onShowWidget", "onShowDetails", "onReadMore", "onHideWidget", "styles", "options", "translations"];
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 HeadwayWidgetClassName = "HW_widget_component";
+var HeadwayWidgetSelector = "." + HeadwayWidgetClassName;
+var HeadwayWidgetTriggerClassName = "HW_trigger";
+var HeadwayWidgetTriggerSelector = "." + HeadwayWidgetTriggerClassName;
+
+var HeadwayWidgetTrigger = function HeadwayWidgetTrigger(_ref) {
+  var widgetId = _ref.widgetId,
+      component = _ref.component,
+      children = _ref.children;
+  var Component = component || "div";
+  var className = HeadwayWidgetTriggerClassName + "_".concat(widgetId);
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Component, {
+    className: className
+  }, children);
+};
+
+HeadwayWidgetTrigger.defaultProps = {
+  widgetId: "widget-1"
+};
+
+var HeadwayWidget = function HeadwayWidget(_ref2) {
+  var id = _ref2.id,
+      account = _ref2.account,
+      children = _ref2.children,
+      widgetPosition = _ref2.widgetPosition,
+      badgePosition = _ref2.badgePosition,
+      component = _ref2.component,
+      trigger = _ref2.trigger,
+      onWidgetReady = _ref2.onWidgetReady,
+      onShowWidget = _ref2.onShowWidget,
+      onShowDetails = _ref2.onShowDetails,
+      onReadMore = _ref2.onReadMore,
+      onHideWidget = _ref2.onHideWidget,
+      styles = _ref2.styles,
+      options = _ref2.options,
+      translations = _ref2.translations,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var onWidgetReadyRef = (0,external_commonjs_react_commonjs2_react_.useRef)(onWidgetReady);
+  var onShowWidgetRef = (0,external_commonjs_react_commonjs2_react_.useRef)(onShowWidget);
+  var onShowDetailsRef = (0,external_commonjs_react_commonjs2_react_.useRef)(onShowDetails);
+  var onReadMoreRef = (0,external_commonjs_react_commonjs2_react_.useRef)(onReadMore);
+  var onHideWidgetRef = (0,external_commonjs_react_commonjs2_react_.useRef)(onHideWidget);
+  var optionsRef = (0,external_commonjs_react_commonjs2_react_.useRef)(options);
+  (0,external_commonjs_react_commonjs2_react_.useEffect)(function () {
+    onWidgetReadyRef.current = onWidgetReady || options.callbacks && options.callbacks.onWidgetReady;
+    onShowWidgetRef.current = onShowWidget || options.callbacks && options.callbacks.onShowWidget;
+    onShowDetailsRef.current = onShowDetails || options.callbacks && options.callbacks.onShowDetails;
+    onReadMoreRef.current = onReadMore || options.callbacks && options.callbacks.onReadMore;
+    onHideWidgetRef.current = onHideWidget || options.callbacks && options.callbacks.onHideWidget;
+    optionsRef.current = options;
+  });
+  var handleWidgetReady = (0,external_commonjs_react_commonjs2_react_.useCallback)(function () {
+    return onWidgetReadyRef.current && onWidgetReadyRef.current();
+  }, []);
+  var handleShowWidget = (0,external_commonjs_react_commonjs2_react_.useCallback)(function () {
+    return onShowWidgetRef.current && onShowWidgetRef.current();
+  }, []);
+  var handleShowDetails = (0,external_commonjs_react_commonjs2_react_.useCallback)(function () {
+    return onShowDetailsRef.current && onShowDetailsRef.current();
+  }, []);
+  var handleReadMore = (0,external_commonjs_react_commonjs2_react_.useCallback)(function () {
+    return onReadMoreRef.current && onReadMoreRef.current();
+  }, []);
+  var handleHideWidget = (0,external_commonjs_react_commonjs2_react_.useCallback)(function () {
+    return onHideWidgetRef.current && onHideWidgetRef.current();
+  }, []);
+  var initHeadway = (0,external_commonjs_react_commonjs2_react_.useCallback)(function () {
+    var hwConfig = _objectSpread({
+      selector: HeadwayWidgetSelector + "_".concat(id),
+      account: account || options.account,
+      trigger: trigger ? HeadwayWidgetSelector + "_".concat(id) : options.trigger || HeadwayWidgetTriggerSelector + "_".concat(id),
+      callbacks: {
+        onWidgetReady: handleWidgetReady,
+        onShowWidget: handleShowWidget,
+        onShowDetails: handleShowDetails,
+        onReadMore: handleReadMore,
+        onHideWidget: handleHideWidget
+      },
+      translations: translations,
+      widgetPosition: widgetPosition,
+      badgePosition: badgePosition,
+      __component: true,
+      styles: styles
+    }, options);
+
+    var widget = window.Headway.getNewWidget();
+    widget.init(hwConfig);
+    return function () {
+      widget.destroy();
+    };
+  }, [account, trigger, handleWidgetReady, handleShowWidget, handleShowDetails, handleReadMore, handleHideWidget, badgePosition, widgetPosition, translations]);
+  console.log(window.Headway);
+  (0,external_commonjs_react_commonjs2_react_.useEffect)(function () {
+    console.log("test");
+    var destroy;
+
+    if (window.Headway) {
+      console.log("destroy");
+      destroy = initHeadway();
+    } else {
+      console.log("else");
+      var head = document.getElementsByTagName("head")[0];
+      var script = document.createElement("script");
+      script.type = "text/javascript";
+      var p = new Promise(function (resolve) {
+        script.onload = function () {
+          var d = initHeadway();
+          resolve(d);
+        };
+      });
+
+      destroy = function destroy() {
+        p.then(function (d) {
+          return d();
+        });
+      };
+
+      script.src = "https://cdn.headwayapp.co/widget.js"; // "https://cdn.headwaystaging.com/widget.js"; //;
+
+      head.appendChild(script);
+    }
+
+    return destroy;
+  }, [initHeadway]);
+  var Component = component || "div";
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Component, _extends({
+    className: HeadwayWidgetClassName + "_".concat(id)
+  }, rest, {
+    style: {
+      position: "relative",
+      display: "inline-block"
+    }
+  }), children);
+};
+
+/* harmony default export */ const HeadwayWidget_HeadwayWidget = (HeadwayWidget);
+HeadwayWidget.propTypes = {
+  /**
+   * account of your Headway.
+   */
+  account: (external_commonjs_prop_types_commonjs2_prop_types_default()).string.isRequired,
+
+  /**
+   * id of the Widget. It is required if you have more than one widget instance on the page.
+   */
+  id: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+
+  /**
+   * position of a badge
+   */
+  badgePosition: external_commonjs_prop_types_commonjs2_prop_types_default().oneOf(["top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right"]),
+
+  /**
+   * badge relative widget position
+   */
+  widgetPosition: external_commonjs_prop_types_commonjs2_prop_types_default().oneOf(["top-left", "top-right", "center-left", "center-right", "bottom-left", "bottom-right"]),
+
+  /**
+   * callback fired when widget has loaded
+   */
+  onWidgetReady: (external_commonjs_prop_types_commonjs2_prop_types_default()).func,
+
+  /**
+   * callback fired when widget is shown
+   */
+  onShowWidget: (external_commonjs_prop_types_commonjs2_prop_types_default()).func,
+
+  /**
+   * callback fired when an item in the widget is clicked
+   */
+  onShowDetails: (external_commonjs_prop_types_commonjs2_prop_types_default()).func,
+
+  /**
+   * callback fired when user clicks on readMore link
+   */
+  onReadMore: (external_commonjs_prop_types_commonjs2_prop_types_default()).func,
+
+  /**
+   * callback fired when user closes the widget
+   */
+  onHideWidget: (external_commonjs_prop_types_commonjs2_prop_types_default()).func,
+
+  /**
+   * Translating the text inside of the widget
+   * */
+  translations: external_commonjs_prop_types_commonjs2_prop_types_default().shape({
+    title: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+    labels: external_commonjs_prop_types_commonjs2_prop_types_default().shape({
+      "new": (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+      update: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+      improvement: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
+    }),
+    readMore: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+    footer: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
+  }),
+
+  /**
+   * options defined in classic object format. Read more at https://docs.headwayapp.co/widget
+   */
+  options: external_commonjs_prop_types_commonjs2_prop_types_default().shape({
+    account: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+    callbacks: external_commonjs_prop_types_commonjs2_prop_types_default().shape({
+      onWidgetReady: (external_commonjs_prop_types_commonjs2_prop_types_default()).func,
+      onShowWidget: (external_commonjs_prop_types_commonjs2_prop_types_default()).func,
+      onShowDetails: (external_commonjs_prop_types_commonjs2_prop_types_default()).func,
+      onReadMore: (external_commonjs_prop_types_commonjs2_prop_types_default()).func,
+      onHideWidget: (external_commonjs_prop_types_commonjs2_prop_types_default()).func
+    }),
+    translations: external_commonjs_prop_types_commonjs2_prop_types_default().shape({
+      title: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+      labels: external_commonjs_prop_types_commonjs2_prop_types_default().shape({
+        "new": (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+        update: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+        improvement: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
+      }),
+      readMore: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+      footer: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
+    }),
+    trigger: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
+  }),
+  component: external_commonjs_prop_types_commonjs2_prop_types_default().oneOfType([(external_commonjs_prop_types_commonjs2_prop_types_default()).string, (external_commonjs_prop_types_commonjs2_prop_types_default()).func]),
+  children: (external_commonjs_prop_types_commonjs2_prop_types_default()).node,
+  trigger: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+  styles: (external_commonjs_prop_types_commonjs2_prop_types_default()).object
+};
+HeadwayWidget.defaultProps = {
+  account: "",
+  id: "widget-1",
+  badgePosition: "bottom-right",
+  widgetPosition: "bottom-right",
+  styles: {},
+  translations: {},
+  options: {}
+};
+HeadwayWidgetTrigger.propTypes = {
+  widgetId: (external_commonjs_prop_types_commonjs2_prop_types_default()).string.isRequired,
+  component: external_commonjs_prop_types_commonjs2_prop_types_default().oneOfType([(external_commonjs_prop_types_commonjs2_prop_types_default()).string, (external_commonjs_prop_types_commonjs2_prop_types_default()).func]),
+  children: (external_commonjs_prop_types_commonjs2_prop_types_default()).node
+};
+
+// EXTERNAL MODULE: ./src/core/Icon/component.jsx
+var component = __webpack_require__(9008);
+;// CONCATENATED MODULE: ./src/core/MeganavContentDevelopers/component.jsx
+
 
 
 
 
 var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
   var absUrl = _ref.absUrl;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  console.log("render MeganavContentDevelopers");
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex max-w-screen-xl mx-auto"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_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 w-full"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("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"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
-    className: "ui-meganav-overline uppercase",
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("section", {
+    className: "grid w-full grid-cols-12 ui-grid-gap-x"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "px-24 pt-24 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:pl-0 md:pr-24"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h3", {
+    className: "uppercase ui-meganav-overline",
     id: "meganav-developers-panel-explore"
-  }, "Explore"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+  }, "Explore"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
     "aria-labelledby": "meganav-developers-panel-explore"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/docs"),
     className: "ui-meganav-media-with-image group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
     name: "icon-display-docs-col",
     size: "2.5rem"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex flex-col justify-center"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Documentation"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Documentation"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Technical guides to help you build with Ably.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Technical guides to help you build with Ably.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/docs/quick-start-guide"),
     className: "ui-meganav-media-with-image group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
     name: "icon-display-quickstart-guides-col",
     size: "2.5rem"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex flex-col justify-center"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Quickstart guides"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Documentation to help you get started quickly.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Documentation to help you get started quickly.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/integrations"),
     className: "ui-meganav-media-with-image group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
     name: "icon-display-integrations-col",
     size: "2.5rem"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex flex-col justify-center"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Integrations"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Integrations"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Find out more about Ably integrations. ")))))), /*#__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"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+  }, "Find out more about Ably integrations. ")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/examples"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
+    name: "icon-display-examples-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col justify-center"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Live examples"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Discover our features and their use cases.")))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "px-24 pb-8 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:px-0"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
     className: "md:mt-40",
     "aria-labelledby": "meganav-developers-panel-explore"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/download"),
     className: "ui-meganav-media-with-image group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
     name: "icon-display-sdks-col",
     size: "2.5rem"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex flex-col justify-center"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "SDKs"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "SDKs"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Download an SDK to help you build realtime apps faster.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Download an SDK to help you build realtime apps faster.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/tutorials"),
     className: "ui-meganav-media-with-image group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
     name: "icon-display-tutorials-demos-col",
     size: "2.5rem"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex flex-col justify-center"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Tutorials & Demos"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Tutorials & Demos"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Get stuck in with our hands-on resources. ")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Get stuck in with our hands-on resources.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/reference-guide-chat"),
     className: "ui-meganav-media-with-image group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
     name: "icon-display-chat-col",
     size: "2.5rem"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col justify-center"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Chat apps reference guide"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Learn how to build chat apps with Ably.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/reference-guide-multiplayer"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
+    name: "icon-multi-user-spaces-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex flex-col justify-center"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Chat apps reference guide"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Multiplayer reference guide"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Learn how to build chat apps with Ably.")))))), /*#__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"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
-    className: "ui-meganav-overline uppercase",
+  }, "Learn how to build collaborative features with Ably.")))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "px-24 pt-8 pb-24 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:px-0"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h3", {
+    className: "uppercase ui-meganav-overline",
     id: "meganav-developers-panel-quick-links"
-  }, "Quick links"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+  }, "Quick links"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
     "aria-labelledby": "meganav-developers-panel-quick-links"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: "https://discord.gg/jwBPhEZ9g5",
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "py-12 group ui-meganav-media"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Discord"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Discord"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: "https://github.com/ably",
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "py-12 group ui-meganav-media"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "GitHub"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "GitHub"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: "https://changelog.ably.com/",
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "py-12 group ui-meganav-media"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
     className: "ui-meganav-media-heading"
-  }, "Changelog"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Changelog"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(HeadwayWidget_HeadwayWidget, {
+    account: "yZ1rmJ",
+    badgePosition: "center-right"
+  }))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: "https://status.ably.com/",
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "py-12 group ui-meganav-media"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Status", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("iframe", {
+  }, "Status", /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("iframe", {
+    title: "Ably status",
     src: "https://status.ably.com/embed/icon",
     allowtransparency: "true",
     frameBorder: "0",
     scrolling: "no",
-    className: "w-24 h-24 ml-4 border-none pointer-events-none align-middle"
-  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    className: "w-24 h-24 ml-4 align-middle border-none pointer-events-none"
+  })))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/support"),
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "py-12 group ui-meganav-media"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Support & FAQs")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, "Support & FAQs")))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }));
 };
 
 MeganavContentDevelopers.propTypes = {
-  absUrl: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)
+  absUrl: (external_commonjs_prop_types_commonjs2_prop_types_default()).func
 };
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavContentDevelopers);
+/* harmony default export */ const MeganavContentDevelopers_component = (MeganavContentDevelopers);
 })();
 
 /******/ 	return __webpack_exports__;

package/core/MeganavContentPlatform/component.js

@@ -1 +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.MeganavContentPlatform=o())}(this,(function(){return{}.default}));
+!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.MeganavContentPlatform=o())}(this,(()=>({}.default)));