ably-ui 8.2.1 → 8.3.0

Sign up to get free protection for your applications and to get access to all the features.
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