ably-ui 8.2.1 → 8.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/lib/ably_ui/core/core.rb +4 -0
- data/lib/ably_ui/core/footer/footer.html.erb +1 -1
- data/lib/ably_ui/core/images/icon-tech-aws.svg +4 -0
- data/lib/ably_ui/core/meganav/component.css +11 -1
- data/lib/ably_ui/core/meganav/component.js +1 -1
- data/lib/ably_ui/core/meganav/component.json +4 -4
- data/lib/ably_ui/core/meganav/meganav.rb +8 -4
- data/lib/ably_ui/core/meganav_blog_posts_list/component.js +1 -1
- data/lib/ably_ui/core/meganav_blog_posts_list/meganav_blog_posts_list.html.erb +4 -4
- data/lib/ably_ui/core/{meganav_content_why_ably → meganav_content_company}/component.js +1 -1
- data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +81 -0
- data/lib/ably_ui/core/{meganav_content_why_ably/meganav_content_why_ably.rb → meganav_content_company/meganav_content_company.rb} +2 -1
- data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +101 -80
- data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +95 -91
- data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +112 -83
- data/lib/ably_ui/core/meganav_control/component.js +1 -1
- data/lib/ably_ui/core/meganav_control/meganav_control.html.erb +1 -1
- data/lib/ably_ui/core/meganav_control/meganav_control.rb +8 -2
- data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.html.erb +4 -2
- data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.rb +4 -1
- data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.html.erb +4 -3
- data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.rb +8 -0
- data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.html.erb +1 -1
- data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.rb +4 -0
- data/lib/ably_ui/core/meganav_items_signed_in/meganav_items_signed_in.html.erb +1 -1
- data/lib/ably_ui/core/sprites.svg +150 -0
- data/lib/ably_ui/core/styles.css +4 -0
- data/lib/ably_ui/version.rb +1 -1
- metadata +6 -8
- data/lib/ably_ui/core/images/blog-thumb1.jpg +0 -0
- data/lib/ably_ui/core/images/blog-thumb2.jpg +0 -0
- data/lib/ably_ui/core/images/blog-thumb3.jpg +0 -0
- data/lib/ably_ui/core/meganav_content_why_ably/meganav_content_why_ably.html.erb +0 -70
@@ -1,84 +1,113 @@
|
|
1
|
-
<
|
2
|
-
<div>
|
3
|
-
|
4
|
-
<
|
5
|
-
<
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
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
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
</
|
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:()=>
|
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 #{
|
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(
|
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
|
data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.html.erb
CHANGED
@@ -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:
|
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
|
-
|
9
|
+
<% if display_hr %>
|
10
|
+
<hr class="ui-meganav-hr" />
|
11
|
+
<% end %>
|
10
12
|
</div>
|
data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.rb
CHANGED
@@ -1,8 +1,11 @@
|
|
1
1
|
module AblyUi
|
2
2
|
module Core
|
3
3
|
class MeganavControlMobilePanelClose < ViewComponent::Base
|
4
|
-
|
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
|
-
|
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:
|
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>
|
@@ -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>
|
@@ -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
|
|