@ably/ui 6.3.1 → 6.4.0-dev.04fa1c1

package/core/FeatureFooter.jsx

@@ -0,0 +1,17 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else {
+		var a = factory();
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(this, function() {
+return /******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/core/Footer.jsx

@@ -345,6 +345,16 @@ function Footer(_ref) {
     className: "ui-footer-col-title"
   }, "Ably is for"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__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/asset-tracking"),
+    className: "ui-footer-menu-row-link"
+  }, "Ably Asset Tracking")), /*#__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/extend-kafka-to-the-edge"),
+    className: "ui-footer-menu-row-link"
+  }, "Extend Kafka to the edge")), /*#__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/edtech"),
     className: "ui-footer-menu-row-link"

package/core/Icon/component.css

@@ -0,0 +1 @@
+

package/core/Meganav.jsx

@@ -886,9 +886,16 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-use-cases-panel-industry-use-cases"
-  }, "By industry use case"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+  }, "By use case"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     "aria-labelledby": "meganav-use-cases-panel-industry-use-cases"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/extend-kafka-to-the-edge"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Enhance and reliably expand Kafka's event streaming capabilities beyond your private network."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/edtech"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {

package/core/MeganavContentUseCases.jsx

@@ -220,9 +220,16 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-use-cases-panel-industry-use-cases"
-  }, "By industry use case"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+  }, "By use case"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     "aria-labelledby": "meganav-use-cases-panel-industry-use-cases"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/extend-kafka-to-the-edge"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Enhance and reliably expand Kafka's event streaming capabilities beyond your private network."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/edtech"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {

package/core/Test/component.js

@@ -0,0 +1,59 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["AblyUi"] = factory();
+	else
+		root["AblyUi"] = root["AblyUi"] || {}, root["AblyUi"]["Core"] = root["AblyUi"]["Core"] || {}, root["AblyUi"]["Core"]["Test"] = factory();
+})(this, function() {
+return /******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./src/core/Test/component.js":
+/*!************************************!*\
+  !*** ./src/core/Test/component.js ***!
+  \************************************/
+/*! unknown exports (runtime-defined) */
+/*! runtime requirements:  */
+/***/ (() => {
+
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].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;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	// module exports must be returned from runtime so entry inlining is disabled
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__("./src/core/Test/component.js");
+/******/ })()
+.default;
+});
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9BYmx5VWkuQ29yZS5bbmFtZV0vd2VicGFjay91bml2ZXJzYWxNb2R1bGVEZWZpbml0aW9uIiwid2VicGFjazovL0FibHlVaS5Db3JlLltuYW1lXS93ZWJwYWNrL2Jvb3RzdHJhcCIsIndlYnBhY2s6Ly9BYmx5VWkuQ29yZS5bbmFtZV0vd2VicGFjay9zdGFydHVwIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSx1Q0FBdUMsdURBQXVEO0FBQzlGLENBQUM7QUFDRCxPOzs7Ozs7Ozs7Ozs7Ozs7OztVQ1ZBO1VBQ0E7O1VBRUE7VUFDQTtVQUNBO1VBQ0E7VUFDQTtVQUNBO1VBQ0E7VUFDQTtVQUNBO1VBQ0E7VUFDQTtVQUNBOztVQUVBO1VBQ0E7O1VBRUE7VUFDQTtVQUNBOzs7VUNyQkE7VUFDQTtVQUNBO1VBQ0EiLCJmaWxlIjoiY29yZS9UZXN0L2NvbXBvbmVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiB3ZWJwYWNrVW5pdmVyc2FsTW9kdWxlRGVmaW5pdGlvbihyb290LCBmYWN0b3J5KSB7XG5cdGlmKHR5cGVvZiBleHBvcnRzID09PSAnb2JqZWN0JyAmJiB0eXBlb2YgbW9kdWxlID09PSAnb2JqZWN0Jylcblx0XHRtb2R1bGUuZXhwb3J0cyA9IGZhY3RvcnkoKTtcblx0ZWxzZSBpZih0eXBlb2YgZGVmaW5lID09PSAnZnVuY3Rpb24nICYmIGRlZmluZS5hbWQpXG5cdFx0ZGVmaW5lKFtdLCBmYWN0b3J5KTtcblx0ZWxzZSBpZih0eXBlb2YgZXhwb3J0cyA9PT0gJ29iamVjdCcpXG5cdFx0ZXhwb3J0c1tcIkFibHlVaVwiXSA9IGZhY3RvcnkoKTtcblx0ZWxzZVxuXHRcdHJvb3RbXCJBYmx5VWlcIl0gPSByb290W1wiQWJseVVpXCJdIHx8IHt9LCByb290W1wiQWJseVVpXCJdW1wiQ29yZVwiXSA9IHJvb3RbXCJBYmx5VWlcIl1bXCJDb3JlXCJdIHx8IHt9LCByb290W1wiQWJseVVpXCJdW1wiQ29yZVwiXVtcIlRlc3RcIl0gPSBmYWN0b3J5KCk7XG59KSh0aGlzLCBmdW5jdGlvbigpIHtcbnJldHVybiAiLCIvLyBUaGUgbW9kdWxlIGNhY2hlXG52YXIgX193ZWJwYWNrX21vZHVsZV9jYWNoZV9fID0ge307XG5cbi8vIFRoZSByZXF1aXJlIGZ1bmN0aW9uXG5mdW5jdGlvbiBfX3dlYnBhY2tfcmVxdWlyZV9fKG1vZHVsZUlkKSB7XG5cdC8vIENoZWNrIGlmIG1vZHVsZSBpcyBpbiBjYWNoZVxuXHRpZihfX3dlYnBhY2tfbW9kdWxlX2NhY2hlX19bbW9kdWxlSWRdKSB7XG5cdFx0cmV0dXJuIF9fd2VicGFja19tb2R1bGVfY2FjaGVfX1ttb2R1bGVJZF0uZXhwb3J0cztcblx0fVxuXHQvLyBDcmVhdGUgYSBuZXcgbW9kdWxlIChhbmQgcHV0IGl0IGludG8gdGhlIGNhY2hlKVxuXHR2YXIgbW9kdWxlID0gX193ZWJwYWNrX21vZHVsZV9jYWNoZV9fW21vZHVsZUlkXSA9IHtcblx0XHQvLyBubyBtb2R1bGUuaWQgbmVlZGVkXG5cdFx0Ly8gbm8gbW9kdWxlLmxvYWRlZCBuZWVkZWRcblx0XHRleHBvcnRzOiB7fVxuXHR9O1xuXG5cdC8vIEV4ZWN1dGUgdGhlIG1vZHVsZSBmdW5jdGlvblxuXHRfX3dlYnBhY2tfbW9kdWxlc19fW21vZHVsZUlkXShtb2R1bGUsIG1vZHVsZS5leHBvcnRzLCBfX3dlYnBhY2tfcmVxdWlyZV9fKTtcblxuXHQvLyBSZXR1cm4gdGhlIGV4cG9ydHMgb2YgdGhlIG1vZHVsZVxuXHRyZXR1cm4gbW9kdWxlLmV4cG9ydHM7XG59XG5cbiIsIi8vIG1vZHVsZSBleHBvcnRzIG11c3QgYmUgcmV0dXJuZWQgZnJvbSBydW50aW1lIHNvIGVudHJ5IGlubGluaW5nIGlzIGRpc2FibGVkXG4vLyBzdGFydHVwXG4vLyBMb2FkIGVudHJ5IG1vZHVsZSBhbmQgcmV0dXJuIGV4cG9ydHNcbnJldHVybiBfX3dlYnBhY2tfcmVxdWlyZV9fKFwiLi9zcmMvY29yZS9UZXN0L2NvbXBvbmVudC5qc1wiKTtcbiJdLCJzb3VyY2VSb290IjoiIn0=

package/core/Test.jsx

@@ -0,0 +1,4 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ })()
+;

package/core/core.base.css

@@ -0,0 +1 @@
+@import "./styles/properties.css";

package/core/core.components.css

@@ -0,0 +1,49 @@
+@import "./styles/buttons.css";
+@import "./styles/layout.css";
+@import "./styles/text.css";
+
+@layer components {
+  .ui-input {
+    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+    @apply max-w-screen-sm;
+  }
+
+  /* Basis for icon component */
+  .ui-icon-cool-black {
+    stroke: var(--color-cool-black);
+  }
+
+  .ui-icon-white {
+    stroke: var(--color-white);
+  }
+
+  .ui-icon-dark-grey {
+    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;
+
+    position: relative;
+    vertical-align: super;
+    margin-left: 3px;
+    font-size: 8px;
+  }
+}

package/core/styles.base.css

@@ -0,0 +1 @@
+@import "./styles/properties.css";

package/core/styles.components.css

@@ -0,0 +1,49 @@
+@import "./styles/buttons.css";
+@import "./styles/layout.css";
+@import "./styles/text.css";
+
+@layer components {
+  .ui-input {
+    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+    @apply max-w-screen-sm;
+  }
+
+  /* Basis for icon component */
+  .ui-icon-cool-black {
+    stroke: var(--color-cool-black);
+  }
+
+  .ui-icon-white {
+    stroke: var(--color-white);
+  }
+
+  .ui-icon-dark-grey {
+    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;
+
+    position: relative;
+    vertical-align: super;
+    margin-left: 3px;
+    font-size: 8px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "6.3.1",
+  "version": "6.4.0-dev.04fa1c1",
   "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/Footer/component.html.erb

@@ -34,6 +34,12 @@
     <div class="col-span-full sm:col-span-3 md:col-span-1">
       <h2 class="ui-footer-col-title">Ably is for</h2>
       <ul>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Ably Asset Tracking', abs_url("/solutions/asset-tracking"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Extend Kafka to the edge', abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-footer-menu-row-link" %>
+        </li>
         <li class="p-menu-row-snug">
           <%= link_to 'EdTech', abs_url("/solutions/edtech"), class: "ui-footer-menu-row-link" %>
         </li>

package/src/core/Footer/component.jsx

@@ -54,6 +54,16 @@ export default function Footer({ paths, urlBase }) {
         <div className="col-span-full sm:col-span-3 md:col-span-1">
           <h2 className="ui-footer-col-title">Ably is for</h2>
           <ul>
+            <li className="p-menu-row-snug">
+              <a href={absUrl("/solutions/asset-tracking")} className="ui-footer-menu-row-link">
+                Ably Asset Tracking
+              </a>
+            </li>
+            <li className="p-menu-row-snug">
+              <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-footer-menu-row-link">
+                Extend Kafka to the edge
+              </a>
+            </li>
             <li className="p-menu-row-snug">
               <a href={absUrl("/solutions/edtech")} className="ui-footer-menu-row-link">
                 EdTech

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

@@ -2,7 +2,7 @@
   <%= notice %>
 
   <div class="ui-meganav ui-grid-px">
-    <%= render(AblyUi::Core::Logo.new(theme_name: @theme_name, data_id: "meganav-logo", href: url_base)) %>
+    <%= render(AblyUi::Core::Logo.new(theme_name: @theme_name, data_id: "meganav-logo", href: logo_link)) %>
     <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
 
     <% if @session_data[:signedIn] %>

package/src/core/Meganav/component.rb

@@ -6,7 +6,7 @@ module AblyUi
     class Meganav < ViewComponent::Base
       include MeganavConfig
       include Util
-      attr_reader :options, :login_link, :url_base
+      attr_reader :options, :login_link, :logo_link, :url_base
 
       renders_one :notice, AblyUi::Core::Notice
 
@@ -14,6 +14,7 @@ module AblyUi
         session_data: {},
         theme_name: :white,
         login_link: '/login',
+        logo_link: '',
         url_base: AblyUi::Core::Util::DEFAULT_URL_BASE
       )
         @session_data = session_data
@@ -21,6 +22,7 @@ module AblyUi
         @options = options
         @login_link = login_link
         @url_base = url_base
+        @logo_link = logo_link || url_base
         theme_setup(theme_name)
       end
 

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

@@ -1,7 +1,13 @@
 <section class="ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32">
   <div>
-    <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">By industry use case</h3>
+    <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">By use case</h3>
     <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
+      <li>
+        <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
+          <p class="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
+        <% end %>
+      </li>
       <li>
         <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
           <p class="ui-meganav-media-heading">EdTech</p>

package/src/core/MeganavContentUseCases/component.jsx

@@ -5,9 +5,15 @@ const MeganavContentUseCases = ({ absUrl }) => (
   <section className="ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32">
     <div>
       <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">
-        By industry use case
+        By use case
       </h3>
       <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
+        <li>
+          <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
+            <p className="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
+          </a>
+        </li>
         <li>
           <a href={absUrl("/solutions/edtech")} className="ui-meganav-media group">
             <p className="ui-meganav-media-heading">EdTech</p>

package/tailwind.config.js

@@ -133,6 +133,7 @@ module.exports = {
       0: "0",
       none: "none",
       unset: "unset",
+      ...theme("spacing"),
       ...breakpoints(theme("screens")),
     }),
     boxShadow: {