ably-ui 8.2.1.dev.611f3bd → 8.2.1

data/lib/ably_ui/core/meganav_content_why_ably/meganav_content_why_ably.html.erb

@@ -0,0 +1,70 @@
+<section class="ui-meganav-content ui-grid-gap md:grid-cols-3">
+  <div>
+    <h3 class="ui-meganav-overline" id="meganav-why-ably-panel-list-why-companies">Why companies choose Ably</h3>
+    <ul aria-labelledby="meganav-why-ably-panel-list-why-companies">
+      <li>
+        <%= link_to abs_url("/customers"), class: "group ui-meganav-media py-12" do %>
+          <p class="ui-meganav-media-heading">Customers</p>
+        <% end %>
+      </li>
+
+      <li>
+        <%= link_to abs_url("/case-studies"), class: "group ui-meganav-media py-12" do %>
+          <p class="ui-meganav-media-heading">Case studies</p>
+        <% end %>
+      </li>
+
+      <li>
+        <%= link_to abs_url("/compare"), class: "group ui-meganav-media py-12" do %>
+          <p class="ui-meganav-media-heading">Compare our tech</p>
+        <% end %>
+      </li>
+
+      <li>
+        <%= link_to abs_url("/aws"), class: "group ui-meganav-media py-12" do %>
+          <p class="ui-meganav-media-heading">Ably & AWS</p>
+        <% end %>
+      </li>
+
+      <li>
+        <%= link_to abs_url("/resources"), class: "group ui-meganav-media py-12" do %>
+          <p class="ui-meganav-media-heading">Resources</p>
+        <% end %>
+      </li>
+    </ul>
+  </div>
+
+  <div>
+    <h3 class="ui-meganav-overline" id="meganav-why-ably-panel-list-four-pillars">Four pillars of dependability</h3>
+    <ul class="mb-8" aria-labelledby="meganav-why-ably-panel-list-four-pillars">
+      <li>
+        <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Predictable performance</p>
+          <p class="ui-meganav-media-copy">A low-latency global edge network across 200+ PoPs.</p>
+        <% end %>
+      </li>
+      <li>
+        <%= link_to abs_url("/four-pillars-of-dependability#integrity"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
+          <p class="ui-meganav-media-copy">We guarantee in-order data delivery, even after disconnections.</p>
+        <% end %>
+      </li>
+      <li>
+        <%= link_to abs_url("/four-pillars-of-dependability#reliability"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Fault tolerant infrastructure</p>
+          <p class="ui-meganav-media-copy">Redundant at regional and global levels with 99.999% uptime SLAs.</p>
+        <% end %>
+      </li>
+      <li>
+        <%= link_to abs_url("/four-pillars-of-dependability#availability"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">High scalability & availability</p>
+          <p class="ui-meganav-media-copy">Elastic, battle-tested global infrastructure for massive scale.</p>
+        <% end %>
+      </li>
+    </ul>
+
+    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"))) do %>Explore our Four Pillars of Dependability<% end %>
+  </div>
+
+  <%= render(AblyUi::Core::MeganavBlogPostsList.new(url_base: url_base)) %>
+</section>

data/lib/ably_ui/core/{meganav_content_company/meganav_content_company.rb → meganav_content_why_ably/meganav_content_why_ably.rb}

@@ -1,8 +1,7 @@
 module AblyUi
   module Core
-    class MeganavContentCompany < ViewComponent::Base
+    class MeganavContentWhyAbly < ViewComponent::Base
       include Util
-      include SharedAssets
 
       attr_reader :url_base
 

data/lib/ably_ui/core/meganav_control/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>o});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},o=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>o});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const o=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),o=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),a=function(e){return"search"===e.dataset.control},i=function(e,n,a){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(o,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var i,c=["invisible","visible"];(i=n.classList).replace.apply(i,function(e){if(Array.isArray(e))return t(e)}(u=a?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",a),e.dataset.hover=a}var u};return r.map((function(t){var o,c,u=t.parentNode,s=document.querySelector("#".concat(t.getAttribute("aria-controls"))),l=function(t,o){return function(){r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==o&&e.classList.replace("visible","invisible")}));var i=t.getAttribute("aria-expanded"),c="true"===t.dataset.hover;if("true"!==i||c?(t.setAttribute("aria-expanded",!0),o.classList.replace("invisible","visible")):(t.setAttribute("aria-expanded",!1),o.classList.replace("visible","invisible")),c&&(t.dataset.hover=!1),a(t)){var u=(0,e.A)("meganav-search-input",o);if(!u)return;u.focus()}else t.focus()}}(t,s);return t.addEventListener("click",l),a(t)||(o=function(e,t){return function(){return i(e,t,!0)}}(t,s),c=function(e,t){return function(){return i(e,t,!1)}}(t,s),u.addEventListener("mouseenter",o),u.addEventListener("mouseleave",c)),[{teardown:function(){o&&c&&(u.removeEventListener("mouseenter",o),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",l)},clear:function(){t.setAttribute("aria-expanded",!1),s.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>i});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var i=t[n];if(void 0!==i)return i.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>i});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const i=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),i=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),o=function(e){return"search"===e.dataset.control},a=function(e,n,o){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(i,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var a,c=["invisible","visible"];(a=n.classList).replace.apply(a,function(e){if(Array.isArray(e))return t(e)}(u=o?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",o)}var u};return r.map((function(t){var i,c,u=t.parentNode,l=document.querySelector("#".concat(t.getAttribute("aria-controls"))),s=function(t,i){return function(){if(r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==i&&e.classList.replace("visible","invisible")})),"true"===t.getAttribute("aria-expanded")?(t.setAttribute("aria-expanded",!1),i.classList.replace("visible","invisible")):(t.setAttribute("aria-expanded",!0),i.classList.replace("invisible","visible")),o(t)){var a=(0,e.A)("meganav-search-input",i);if(!a)return;a.focus()}else t.focus()}}(t,l);return t.addEventListener("click",s),o(t)||(i=function(e,t){return function(){return a(e,t,!0)}}(t,l),c=function(e,t){return function(){return a(e,t,!1)}}(t,l),u.addEventListener("mouseenter",i),u.addEventListener("mouseleave",c)),[{teardown:function(){i&&c&&(u.removeEventListener("mouseenter",i),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",s)},clear:function(){t.setAttribute("aria-expanded",!1),l.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));

data/lib/ably_ui/core/meganav_control/meganav_control.html.erb

@@ -1,6 +1,6 @@
 <%= button_tag(type: "button",
                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 #{aria_label} panel" }) 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 %>

data/lib/ably_ui/core/meganav_control/meganav_control.rb

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

data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.html.erb

@@ -2,11 +2,9 @@
   <%= button_tag(type: "button",
                  class: "ui-meganav-mobile-link text-gui-default mb-16",
                  data: { id: "meganav-control-mobile-panel-close" },
-                 aria: { expanded: false, controls: aria_controls, label: "Hide panel" }) do -%>
+                 aria: { expanded: false, controls: @aria_controls, label: "Hide panel" }) do -%>
     <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 transform rotate-180")) %>
     Back
   <% end %>
-  <% if display_hr %>
-    <hr class="ui-meganav-hr" />
-  <% end %>
+  <hr class="ui-meganav-hr" />
 </div>

data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.rb

@@ -1,11 +1,8 @@
 module AblyUi
   module Core
     class MeganavControlMobilePanelClose < ViewComponent::Base
-      attr_reader :aria_controls, :display_hr
-
-      def initialize(aria_controls:, display_hr: true)
+      def initialize(aria_controls:)
         @aria_controls = aria_controls
-        @display_hr = display_hr
       end
     end
   end

data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.html.erb

@@ -1,12 +1,11 @@
 <ul class="hidden md:flex" data-id="meganav-items-desktop">
   <% panels.each do |panel| %>
     <li class="ui-meganav-item">
-      <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], aria_label: panel[:label], theme_name: @theme_name)) do %>
-        <span class="hidden lg:inline"><%= panel[:label] %></span>
-        <span class="lg:hidden"><%= panel[:short_label] %></span>
+      <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], theme_name: @theme_name)) do %>
+        <%= panel[:label] %>
       <% end %>
 
-      <%= content_tag :div, class: "ui-meganav-panel invisible #{bg_css(panel[:id])}", data: { id: "meganav-panel" }, id: panel[:id] do %>
+      <%= content_tag :div, class: 'ui-meganav-panel invisible', data: { id: "meganav-panel" }, id: panel[:id] do %>
         <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
       <% end %>
     </li>

data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.rb

@@ -10,14 +10,6 @@ module AblyUi
         @theme_name = theme_name
         @url_base = url_base
       end
-
-      def bg_css(panel_id)
-        if %w[platform-panel use-cases-panel].include?(panel_id)
-          'ui-meganav-panel-split-bg'
-        else
-          ''
-        end
-      end
     end
   end
 end

data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.html.erb

@@ -48,7 +48,7 @@
               <% end %>
 
               <%= content_tag(:div, class: "ui-meganav-panel-mobile hidden", id: "#{panel[:id]}-mobile", data: { scroll_lock_scrollable: true }) do %>
-                <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile", display_hr: display_hr(panel[:id]))) %>
+                <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile")) %>
                 <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
               <% end %>
             </li>

data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.rb

@@ -12,10 +12,6 @@ module AblyUi
         @login_link = login_link
         @url_base = url_base
       end
-
-      def display_hr(panel_id)
-        %w[company-panel developers-panel].include?(panel_id)
-      end
     end
   end
 end

data/lib/ably_ui/core/meganav_items_signed_in/meganav_items_signed_in.html.erb

@@ -1,6 +1,6 @@
 <ul class="hidden md:flex items-center">
   <li class="ui-meganav-item relative">
-    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", aria_label: "Account", theme_name: @theme_name, additional_css: "mr-0")) do %>
+    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", theme_name: @theme_name, additional_css: "mr-0")) do %>
       <%= account_name %>
     <% end %>