ably-ui 8.2.1 → 8.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/lib/ably_ui/core/core.rb +4 -0
  4. data/lib/ably_ui/core/images/icon-tech-aws.svg +4 -0
  5. data/lib/ably_ui/core/meganav/component.css +11 -1
  6. data/lib/ably_ui/core/meganav/component.js +1 -1
  7. data/lib/ably_ui/core/meganav/component.json +4 -4
  8. data/lib/ably_ui/core/meganav/meganav.rb +8 -4
  9. data/lib/ably_ui/core/meganav_blog_posts_list/component.js +1 -1
  10. data/lib/ably_ui/core/meganav_blog_posts_list/meganav_blog_posts_list.html.erb +4 -4
  11. data/lib/ably_ui/core/{meganav_content_why_ably → meganav_content_company}/component.js +1 -1
  12. data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +81 -0
  13. data/lib/ably_ui/core/{meganav_content_why_ably/meganav_content_why_ably.rb → meganav_content_company/meganav_content_company.rb} +2 -1
  14. data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +101 -80
  15. data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +95 -91
  16. data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +112 -83
  17. data/lib/ably_ui/core/meganav_control/component.js +1 -1
  18. data/lib/ably_ui/core/meganav_control/meganav_control.html.erb +1 -1
  19. data/lib/ably_ui/core/meganav_control/meganav_control.rb +8 -2
  20. data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.html.erb +4 -2
  21. data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.rb +4 -1
  22. data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.html.erb +4 -3
  23. data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.rb +8 -0
  24. data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.html.erb +1 -1
  25. data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.rb +4 -0
  26. data/lib/ably_ui/core/meganav_items_signed_in/meganav_items_signed_in.html.erb +1 -1
  27. data/lib/ably_ui/core/sprites.svg +150 -0
  28. data/lib/ably_ui/core/styles.css +4 -0
  29. data/lib/ably_ui/version.rb +1 -1
  30. metadata +6 -8
  31. data/lib/ably_ui/core/images/blog-thumb1.jpg +0 -0
  32. data/lib/ably_ui/core/images/blog-thumb2.jpg +0 -0
  33. data/lib/ably_ui/core/images/blog-thumb3.jpg +0 -0
  34. data/lib/ably_ui/core/meganav_content_why_ably/meganav_content_why_ably.html.erb +0 -70
@@ -1,84 +1,113 @@
1
- <section class="ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32">
2
- <div>
3
- <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">By use case</h3>
4
- <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
5
- <li>
6
- <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
7
- <p class="ui-meganav-media-heading">EdTech</p>
8
- <p class="ui-meganav-media-copy">Deliver interactive learning experiences like multi-user classrooms with chat.</p>
9
- <% end %>
10
- </li>
11
- <li>
12
- <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media group" do %>
13
- <p class="ui-meganav-media-heading">Virtual Events</p>
14
- <p class="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</p>
15
- <% end %>
16
- </li>
17
- <li>
18
- <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
19
- <p class="ui-meganav-media-heading">Sports & Media</p>
20
- <p class="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
21
- <% end %>
22
- </li>
23
- <li>
24
- <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
25
- <p class="ui-meganav-media-heading">Fintech</p>
26
- <p class="ui-meganav-media-copy">Deliver fast, personalised fintech data in realtime to mobile & web customers.</p>
27
- <% end %>
28
- </li>
29
- <li>
30
- <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
31
- <p class="ui-meganav-media-heading">Gaming</p>
32
- <p class="ui-meganav-media-copy">Power interactive gaming experiences that are wicked fast and utterly reliable.</p>
33
- <% end %>
34
- </li>
35
- <li>
36
- <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
37
- <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
38
- <p class="ui-meganav-media-copy">Power asset tracking, live transit updates, race-critical diagnostics, and more.</p>
39
- <% end %>
40
- </li>
41
- </ul>
42
- </div>
1
+ <div class="flex max-w-screen-xl mx-auto">
2
+ <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
3
+ <section class="grid grid-cols-12 ui-grid-gap-x w-full">
4
+ <div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
5
+ <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
6
+ Use cases
7
+ </h3>
8
+ <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
9
+ <li>
10
+ <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
11
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
12
+ <div class="flex flex-col justify-center">
13
+ <p class="ui-meganav-media-heading">Chat</p>
14
+ <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
15
+ </div>
16
+ <% end %>
17
+ </li>
18
+ <li>
19
+ <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %>
20
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
21
+ <div class="flex flex-col justify-center">
22
+ <p class="ui-meganav-media-heading">Virtual Events</p>
23
+ <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
24
+ </div>
25
+ <% end %>
26
+ </li>
27
+ </ul>
28
+ </div>
43
29
 
44
- <div>
45
- <ul class="md:mt-40" aria-labelledby="meganav-use-cases-panel-industry-use-cases">
46
- <li>
47
- <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
48
- <p class="ui-meganav-media-heading">B2B Platforms</p>
49
- <p class="ui-meganav-media-copy">Empower customers with realtime technology that gives them a competitive edge.</p>
50
- <% end %>
51
- </li>
52
- <li>
53
- <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
54
- <p class="ui-meganav-media-heading">Healthcare</p>
55
- <p class="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
56
- <% end %>
57
- </li>
58
- <li>
59
- <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
60
- <p class="ui-meganav-media-heading">eCommerce & Retail</p>
61
- <p class="ui-meganav-media-copy">Enable realtime pricing, inventory, and transactions to enrich user experiences.</p>
62
- <% end %>
63
- </li>
64
- <li>
65
- <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
66
- <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
67
- <p class="ui-meganav-media-copy">Monitor and control global IoT deployments of any kind in realtime.</p>
68
- <% end %>
69
- </li>
70
- <li>
71
- <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
72
- <p class="ui-meganav-media-heading">Asset Tracking</p>
73
- <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services.</p>
74
- <% end %>
75
- </li>
76
- <li>
77
- <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
78
- <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
79
- <p class="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
80
- <% end %>
81
- </li>
82
- </ul>
83
- </div>
84
- </section>
30
+ <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
31
+ <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
32
+ Industry
33
+ </h3>
34
+ <ul aria-labelledby="meganav-use-cases-panel-industry">
35
+ <li>
36
+ <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
37
+ <p class="ui-meganav-media-heading">EdTech</p>
38
+ <p class="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
39
+ <% end %>
40
+ </li>
41
+ <li>
42
+ <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
43
+ <p class="ui-meganav-media-heading">Fintech</p>
44
+ <p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
45
+ <% end %>
46
+ </li>
47
+ <li>
48
+ <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
49
+ <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
50
+ <p class="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
51
+ <% end %>
52
+ </li>
53
+ <li>
54
+ <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
55
+ <p class="ui-meganav-media-heading">B2B Platforms</p>
56
+ <p class="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
57
+ <% end %>
58
+ </li>
59
+ <li>
60
+ <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
61
+ <p class="ui-meganav-media-heading">Healthcare (HIPAA)</p>
62
+ <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
63
+ <% end %>
64
+ </li>
65
+ <li>
66
+ <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
67
+ <p class="ui-meganav-media-heading">eCommerce & Retail</p>
68
+ <p class="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
69
+ <% end %>
70
+ </li>
71
+ <li>
72
+ <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
73
+ <p class="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
74
+ <p class="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
75
+ <% end %>
76
+ </li>
77
+ <li>
78
+ <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
79
+ <p class="ui-meganav-media-heading">Gaming</p>
80
+ <p class="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
81
+ <% end %>
82
+ </li>
83
+ <li>
84
+ <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
85
+ <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
86
+ <p class="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
87
+ <% end %>
88
+ </li>
89
+ </ul>
90
+ </div>
91
+
92
+ <div class="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 bg-white">
93
+ <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
94
+ Solutions
95
+ </h3>
96
+ <ul aria-labelledby="meganav-use-cases-panel-solutions">
97
+ <li>
98
+ <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
99
+ <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
100
+ <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
101
+ <% end %>
102
+ </li>
103
+ <li>
104
+ <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
105
+ <p class="ui-meganav-media-heading">Asset Tracking</p>
106
+ <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
107
+ <% end %>
108
+ </li>
109
+ </ul>
110
+ </div>
111
+ </section>
112
+ <div class="ui-meganav-content-spacer"></div>
113
+ </div>
@@ -1 +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:()=>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})()}));
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})()}));
@@ -1,6 +1,6 @@
1
1
  <%= button_tag(type: "button",
2
2
  class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color), additional_css],
3
3
  data: { id: "meganav-control" },
4
- aria: { expanded: false, controls: aria_controls, label: "Show #{content}" }) do -%>
4
+ aria: { expanded: false, controls: aria_controls, label: "Show #{aria_label} panel" }) do -%>
5
5
  <%= 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")) %>
6
6
  <% end %>
@@ -2,10 +2,16 @@ module AblyUi
2
2
  module Core
3
3
  class MeganavControl < ViewComponent::Base
4
4
  include AblyUi::Core::MeganavConfig
5
- attr_reader :aria_controls, :additional_css
5
+ attr_reader :aria_controls, :aria_label, :additional_css
6
6
 
7
- def initialize(aria_controls:, theme_name:, additional_css: '')
7
+ def initialize(
8
+ aria_controls:,
9
+ aria_label:,
10
+ theme_name:,
11
+ additional_css: ''
12
+ )
8
13
  @aria_controls = aria_controls
14
+ @aria_label = aria_label
9
15
  @additional_css = additional_css
10
16
  theme_setup(theme_name)
11
17
  end
@@ -2,9 +2,11 @@
2
2
  <%= button_tag(type: "button",
3
3
  class: "ui-meganav-mobile-link text-gui-default mb-16",
4
4
  data: { id: "meganav-control-mobile-panel-close" },
5
- aria: { expanded: false, controls: @aria_controls, label: "Hide panel" }) do -%>
5
+ aria: { expanded: false, controls: aria_controls, label: "Hide panel" }) do -%>
6
6
  <%= 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")) %>
7
7
  Back
8
8
  <% end %>
9
- <hr class="ui-meganav-hr" />
9
+ <% if display_hr %>
10
+ <hr class="ui-meganav-hr" />
11
+ <% end %>
10
12
  </div>
@@ -1,8 +1,11 @@
1
1
  module AblyUi
2
2
  module Core
3
3
  class MeganavControlMobilePanelClose < ViewComponent::Base
4
- def initialize(aria_controls:)
4
+ attr_reader :aria_controls, :display_hr
5
+
6
+ def initialize(aria_controls:, display_hr: true)
5
7
  @aria_controls = aria_controls
8
+ @display_hr = display_hr
6
9
  end
7
10
  end
8
11
  end
@@ -1,11 +1,12 @@
1
1
  <ul class="hidden md:flex" data-id="meganav-items-desktop">
2
2
  <% panels.each do |panel| %>
3
3
  <li class="ui-meganav-item">
4
- <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], theme_name: @theme_name)) do %>
5
- <%= panel[:label] %>
4
+ <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], aria_label: panel[:label], theme_name: @theme_name)) do %>
5
+ <span class="hidden lg:inline"><%= panel[:label] %></span>
6
+ <span class="lg:hidden"><%= panel[:short_label] %></span>
6
7
  <% end %>
7
8
 
8
- <%= content_tag :div, class: 'ui-meganav-panel invisible', data: { id: "meganav-panel" }, id: panel[:id] do %>
9
+ <%= content_tag :div, class: "ui-meganav-panel invisible #{bg_css(panel[:id])}", data: { id: "meganav-panel" }, id: panel[:id] do %>
9
10
  <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
10
11
  <% end %>
11
12
  </li>
@@ -10,6 +10,14 @@ module AblyUi
10
10
  @theme_name = theme_name
11
11
  @url_base = url_base
12
12
  end
13
+
14
+ def bg_css(panel_id)
15
+ if %w[platform-panel use-cases-panel].include?(panel_id)
16
+ 'ui-meganav-panel-split-bg'
17
+ else
18
+ ''
19
+ end
20
+ end
13
21
  end
14
22
  end
15
23
  end
@@ -48,7 +48,7 @@
48
48
  <% end %>
49
49
 
50
50
  <%= content_tag(:div, class: "ui-meganav-panel-mobile hidden", id: "#{panel[:id]}-mobile", data: { scroll_lock_scrollable: true }) do %>
51
- <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile")) %>
51
+ <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile", display_hr: display_hr(panel[:id]))) %>
52
52
  <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
53
53
  <% end %>
54
54
  </li>
@@ -12,6 +12,10 @@ module AblyUi
12
12
  @login_link = login_link
13
13
  @url_base = url_base
14
14
  end
15
+
16
+ def display_hr(panel_id)
17
+ %w[company-panel developers-panel].include?(panel_id)
18
+ end
15
19
  end
16
20
  end
17
21
  end
@@ -1,6 +1,6 @@
1
1
  <ul class="hidden md:flex items-center">
2
2
  <li class="ui-meganav-item relative">
3
- <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", theme_name: @theme_name, additional_css: "mr-0")) do %>
3
+ <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", aria_label: "Account", theme_name: @theme_name, additional_css: "mr-0")) do %>
4
4
  <%= account_name %>
5
5
  <% end %>
6
6