@ably/ui 6.2.1-dev.f80f9d0 → 6.4.0-dev.04fa1c1

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/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/sprites.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg"><symbol fill="none" id="sprite-facebook" viewBox="0 0 24 25"><title>sprite-facebook</title>
-<path d="M24 13C24 6.37258 18.6274 1 12 1C5.37258 1 0 6.37258 0 13C0 18.9895 4.3882 23.954 10.125 24.8542V16.4688H7.07812V13H10.125V10.3563C10.125 7.34875 11.9166 5.6875 14.6576 5.6875C15.9701 5.6875 17.3438 5.92188 17.3438 5.92188V8.875H15.8306C14.34 8.875 13.875 9.80008 13.875 10.75V13H17.2031L16.6711 16.4688H13.875V24.8542C19.6118 23.954 24 18.9895 24 13Z" fill="#1877F2"/>
-<path d="M16.6711 16.4688L17.2031 13H13.875V10.75C13.875 9.80102 14.34 8.875 15.8306 8.875H17.3438V5.92188C17.3438 5.92188 15.9705 5.6875 14.6576 5.6875C11.9166 5.6875 10.125 7.34875 10.125 10.3563V13H7.07812V16.4688H10.125V24.8542C11.3674 25.0486 12.6326 25.0486 13.875 24.8542V16.4688H16.6711Z" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg"><symbol id="sprite-facebook" viewBox="0 0 24 25"><title>sprite-facebook</title>
+<path d="M24 13C24 6.37258 18.6274 1 12 1C5.37258 1 0 6.37258 0 13C0 18.9895 4.3882 23.954 10.125 24.8542V16.4688H7.07812V13H10.125V10.3563C10.125 7.34875 11.9166 5.6875 14.6576 5.6875C15.9701 5.6875 17.3438 5.92188 17.3438 5.92188V8.875H15.8306C14.34 8.875 13.875 9.80008 13.875 10.75V13H17.2031L16.6711 16.4688H13.875V24.8542C19.6118 23.954 24 18.9895 24 13Z" fill="currentColor"/>
+<path d="M16.6711 16.4688L17.2031 13H13.875V10.75C13.875 9.80102 14.34 8.875 15.8306 8.875H17.3438V5.92188C17.3438 5.92188 15.9705 5.6875 14.6576 5.6875C11.9166 5.6875 10.125 7.34875 10.125 10.3563V13H7.07812V16.4688H10.125V24.8542C11.3674 25.0486 12.6326 25.0486 13.875 24.8542V16.4688H16.6711Z" fill="none"/>
 </symbol><symbol id="sprite-github" viewBox="0 0 24 24"><title>sprite-github</title>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.4 0 0 5.41945 0 12.0432C0 17.3623 3.4 21.8785 8.2 23.4843C8.8 23.5846 9 23.1832 9 22.8821C9 22.581 9 21.8785 9 20.8749C5.7 21.5774 5 19.2692 5 19.2692C4.5 17.8641 3.7 17.4627 3.7 17.4627C2.6 16.7601 3.8 16.7602 3.8 16.7602C5 16.8605 5.6 17.9645 5.6 17.9645C6.7 19.771 8.4 19.2692 9.1 18.9681C9.2 18.1652 9.5 17.6634 9.9 17.3623C7.1 17.0612 4.3 16.0576 4.3 11.4411C4.3 10.1364 4.8 9.03242 5.5 8.22953C5.5 7.82809 5 6.62377 5.7 5.01801C5.7 5.01801 6.7 4.71693 9 6.22233C10 5.92125 11 5.82089 12 5.82089C13 5.82089 14 5.92125 15 6.22233C17.3 4.71693 18.3 5.01801 18.3 5.01801C19 6.72413 18.5 7.92845 18.4 8.22953C19.2 9.03242 19.6 10.1364 19.6 11.4411C19.6 16.0576 16.8 17.0612 14.1 17.3623C14.5 17.7638 14.9 18.4663 14.9 19.5702C14.9 21.176 14.9 22.4807 14.9 22.8821C14.9 23.1832 15.1 23.5846 15.7 23.4843C20.6 21.8785 24 17.3623 24 12.0432C24 5.41945 18.6 0 12 0Z"/>
 </symbol><symbol id="sprite-glassdoor" viewBox="0 0 18 24"><title>sprite-glassdoor</title>
@@ -91,8 +91,8 @@
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M24 13H0V11H24V13Z" fill="currentColor"/>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6H0V4H24V6Z" fill="currentColor"/>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M24 20H0V18H24V20Z" fill="currentColor"/>
-</symbol><symbol fill="none" id="sprite-icon-gui-clock" viewBox="0 0 16 16"><title>sprite-icon-gui-clock</title>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8ZM8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM8.66667 3.33333C8.66667 2.96514 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.96514 7.33333 3.33333V7.38675C7.33333 7.9706 7.58846 8.5253 8.03175 8.90527L9.89947 10.5062C10.179 10.7458 10.5999 10.7134 10.8395 10.4339C11.0791 10.1543 11.0467 9.73344 10.7672 9.49383L8.89947 7.89292C8.75171 7.76627 8.66667 7.58137 8.66667 7.38675V3.33333Z" fill="#03020D"/>
+</symbol><symbol id="sprite-icon-gui-clock" viewBox="0 0 16 16"><title>sprite-icon-gui-clock</title>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8ZM8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM8.66667 3.33333C8.66667 2.96514 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.96514 7.33333 3.33333V7.38675C7.33333 7.9706 7.58846 8.5253 8.03175 8.90527L9.89947 10.5062C10.179 10.7458 10.5999 10.7134 10.8395 10.4339C11.0791 10.1543 11.0467 9.73344 10.7672 9.49383L8.89947 7.89292C8.75171 7.76627 8.66667 7.58137 8.66667 7.38675V3.33333Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-close" viewBox="0 0 24 24"><title>sprite-icon-gui-close</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4142 12L22.7071 21.2929L21.2929 22.7071L12 13.4142L2.70711 22.7071L1.29289 21.2929L10.5858 12L1.29289 2.70712L2.70711 1.29291L12 10.5858L21.2929 1.29291L22.7071 2.70712L13.4142 12Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-disclosure-arrow" viewBox="0 0 24 24"><title>sprite-icon-gui-disclosure-arrow</title>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "6.2.1-dev.f80f9d0",
+  "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/src/core/icons/facebook.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24 13C24 6.37258 18.6274 1 12 1C5.37258 1 0 6.37258 0 13C0 18.9895 4.3882 23.954 10.125 24.8542V16.4688H7.07812V13H10.125V10.3563C10.125 7.34875 11.9166 5.6875 14.6576 5.6875C15.9701 5.6875 17.3438 5.92188 17.3438 5.92188V8.875H15.8306C14.34 8.875 13.875 9.80008 13.875 10.75V13H17.2031L16.6711 16.4688H13.875V24.8542C19.6118 23.954 24 18.9895 24 13Z" fill="#1877F2"/>
-<path d="M16.6711 16.4688L17.2031 13H13.875V10.75C13.875 9.80102 14.34 8.875 15.8306 8.875H17.3438V5.92188C17.3438 5.92188 15.9705 5.6875 14.6576 5.6875C11.9166 5.6875 10.125 7.34875 10.125 10.3563V13H7.07812V16.4688H10.125V24.8542C11.3674 25.0486 12.6326 25.0486 13.875 24.8542V16.4688H16.6711Z" fill="white"/>
+<svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 13C24 6.37258 18.6274 1 12 1C5.37258 1 0 6.37258 0 13C0 18.9895 4.3882 23.954 10.125 24.8542V16.4688H7.07812V13H10.125V10.3563C10.125 7.34875 11.9166 5.6875 14.6576 5.6875C15.9701 5.6875 17.3438 5.92188 17.3438 5.92188V8.875H15.8306C14.34 8.875 13.875 9.80008 13.875 10.75V13H17.2031L16.6711 16.4688H13.875V24.8542C19.6118 23.954 24 18.9895 24 13Z" fill="currentColor"/>
+<path d="M16.6711 16.4688L17.2031 13H13.875V10.75C13.875 9.80102 14.34 8.875 15.8306 8.875H17.3438V5.92188C17.3438 5.92188 15.9705 5.6875 14.6576 5.6875C11.9166 5.6875 10.125 7.34875 10.125 10.3563V13H7.07812V16.4688H10.125V24.8542C11.3674 25.0486 12.6326 25.0486 13.875 24.8542V16.4688H16.6711Z" fill="none"/>
 </svg>

package/src/core/icons/icon-gui-clock.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8ZM8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM8.66667 3.33333C8.66667 2.96514 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.96514 7.33333 3.33333V7.38675C7.33333 7.9706 7.58846 8.5253 8.03175 8.90527L9.89947 10.5062C10.179 10.7458 10.5999 10.7134 10.8395 10.4339C11.0791 10.1543 11.0467 9.73344 10.7672 9.49383L8.89947 7.89292C8.75171 7.76627 8.66667 7.58137 8.66667 7.38675V3.33333Z" fill="#03020D"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8ZM8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM8.66667 3.33333C8.66667 2.96514 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.96514 7.33333 3.33333V7.38675C7.33333 7.9706 7.58846 8.5253 8.03175 8.90527L9.89947 10.5062C10.179 10.7458 10.5999 10.7134 10.8395 10.4339C11.0791 10.1543 11.0467 9.73344 10.7672 9.49383L8.89947 7.89292C8.75171 7.76627 8.66667 7.58137 8.66667 7.38675V3.33333Z" fill="currentColor"/>
 </svg>

package/tailwind.config.js

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