@ably/ui 11.7.1 → 12.0.0-dev.31bc8d9

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 (128) hide show
  1. package/README.md +6 -9
  2. package/core/.DS_Store +0 -0
  3. package/core/Code/component.css +2 -0
  4. package/core/ContactFooter.jsx +8 -8
  5. package/core/DropdownMenu.jsx +1 -1
  6. package/core/FeaturedLink/component.css +0 -15
  7. package/core/FeaturedLink/component.js +1 -1
  8. package/core/FeaturedLink.jsx +17 -6
  9. package/core/Flash/component.css +0 -4
  10. package/core/Flash.jsx +1 -1
  11. package/core/Footer/component.css +3 -3
  12. package/core/Footer.jsx +14 -14
  13. package/core/Meganav/component.css +6 -6
  14. package/core/Meganav.jsx +23 -12
  15. package/core/MeganavBlogPostsList.jsx +17 -6
  16. package/core/MeganavContentCompany.jsx +17 -6
  17. package/core/MeganavContentProducts.jsx +19 -8
  18. package/core/MeganavItemsMobile.jsx +17 -6
  19. package/core/MeganavItemsSignedIn.jsx +17 -6
  20. package/core/MeganavSearch.jsx +17 -6
  21. package/core/MeganavSearchPanel.jsx +17 -6
  22. package/core/MeganavSearchSuggestions.jsx +17 -6
  23. package/core/Notice/component.js +1 -1
  24. package/core/Notice.jsx +4 -4
  25. package/core/Showcase/component.css +2 -0
  26. package/core/Showcase/component.js +6 -1
  27. package/core/Showcase.jsx +3 -0
  28. package/core/Uptime/component.css +4 -3
  29. package/core/Uptime/component.js +6 -1
  30. package/core/Uptime.jsx +65 -28
  31. package/core/fonts/jetBrains-mono.css +3 -0
  32. package/core/fonts/manrope.css +3 -0
  33. package/core/scripts.js +1 -1
  34. package/core/styles.css +232 -124
  35. package/package.json +2 -5
  36. package/src/core/.DS_Store +0 -0
  37. package/src/core/ContactFooter/component.jsx +8 -8
  38. package/src/core/DropdownMenu/component.jsx +1 -1
  39. package/src/core/FeaturedLink/component.js +0 -1
  40. package/src/core/FeaturedLink/component.jsx +27 -4
  41. package/src/core/Flash/component.css +0 -4
  42. package/src/core/Flash/component.jsx +1 -1
  43. package/src/core/Footer/component.css +3 -3
  44. package/src/core/Footer/component.jsx +14 -14
  45. package/src/core/Meganav/component.css +6 -6
  46. package/src/core/MeganavContentProducts/component.jsx +2 -2
  47. package/src/core/Notice/component.jsx +3 -3
  48. package/src/core/fonts/jetBrains-mono.css +3 -0
  49. package/src/core/fonts/manrope.css +3 -0
  50. package/src/core/react-renderer.js +7 -4
  51. package/src/core/styles/buttons.css +5 -5
  52. package/src/core/styles/forms.css +5 -5
  53. package/src/core/styles/properties.css +153 -52
  54. package/src/core/styles/text.css +68 -61
  55. package/src/core/styles.components.css +1 -1
  56. package/src/core/utils/syntax-highlighter.css +2 -0
  57. package/tailwind.config.js +194 -69
  58. package/tailwind.extend.js +1 -4
  59. package/src/core/Code/component.html.erb +0 -3
  60. package/src/core/Code/component.rb +0 -12
  61. package/src/core/ContactFooter/component.html.erb +0 -32
  62. package/src/core/ContactFooter/component.rb +0 -13
  63. package/src/core/CustomerLogos/component.html.erb +0 -9
  64. package/src/core/CustomerLogos/component.rb +0 -14
  65. package/src/core/FeatureFooter/component.html.erb +0 -54
  66. package/src/core/FeatureFooter/component.rb +0 -30
  67. package/src/core/FeaturedLink/component.css +0 -15
  68. package/src/core/FeaturedLink/component.html.erb +0 -6
  69. package/src/core/FeaturedLink/component.rb +0 -19
  70. package/src/core/Footer/component.html.erb +0 -256
  71. package/src/core/Footer/component.rb +0 -14
  72. package/src/core/Icon/component.html.erb +0 -3
  73. package/src/core/Icon/component.rb +0 -25
  74. package/src/core/Loader/component.html.erb +0 -18
  75. package/src/core/Loader/component.rb +0 -19
  76. package/src/core/Logo/component.html.erb +0 -3
  77. package/src/core/Logo/component.rb +0 -31
  78. package/src/core/Meganav/component.html.erb +0 -31
  79. package/src/core/Meganav/component.rb +0 -60
  80. package/src/core/MeganavBlogPostsList/component.html.erb +0 -5
  81. package/src/core/MeganavBlogPostsList/component.rb +0 -13
  82. package/src/core/MeganavContentCompany/component.html.erb +0 -90
  83. package/src/core/MeganavContentCompany/component.rb +0 -14
  84. package/src/core/MeganavContentDevelopers/component.html.erb +0 -129
  85. package/src/core/MeganavContentDevelopers/component.rb +0 -13
  86. package/src/core/MeganavContentProducts/component.html.erb +0 -83
  87. package/src/core/MeganavContentProducts/component.rb +0 -14
  88. package/src/core/MeganavContentUseCases/component.html.erb +0 -135
  89. package/src/core/MeganavContentUseCases/component.rb +0 -13
  90. package/src/core/MeganavControl/component.html.erb +0 -6
  91. package/src/core/MeganavControl/component.rb +0 -20
  92. package/src/core/MeganavControlMobileDropdown/component.html.erb +0 -7
  93. package/src/core/MeganavControlMobileDropdown/component.rb +0 -11
  94. package/src/core/MeganavControlMobilePanelClose/component.html.erb +0 -12
  95. package/src/core/MeganavControlMobilePanelClose/component.rb +0 -12
  96. package/src/core/MeganavControlMobilePanelOpen/component.html.erb +0 -7
  97. package/src/core/MeganavControlMobilePanelOpen/component.rb +0 -9
  98. package/src/core/MeganavItemsDesktop/component.html.erb +0 -17
  99. package/src/core/MeganavItemsDesktop/component.rb +0 -23
  100. package/src/core/MeganavItemsMobile/component.html.erb +0 -75
  101. package/src/core/MeganavItemsMobile/component.rb +0 -21
  102. package/src/core/MeganavItemsSignedIn/component.html.erb +0 -53
  103. package/src/core/MeganavItemsSignedIn/component.rb +0 -33
  104. package/src/core/MeganavSearch/component.html.erb +0 -15
  105. package/src/core/MeganavSearch/component.rb +0 -13
  106. package/src/core/MeganavSearchAutocomplete/component.html.erb +0 -6
  107. package/src/core/MeganavSearchAutocomplete/component.rb +0 -6
  108. package/src/core/MeganavSearchPanel/component.html.erb +0 -22
  109. package/src/core/MeganavSearchPanel/component.rb +0 -13
  110. package/src/core/MeganavSearchSuggestions/component.html.erb +0 -22
  111. package/src/core/MeganavSearchSuggestions/component.rb +0 -18
  112. package/src/core/Notice/component.html.erb +0 -16
  113. package/src/core/Notice/component.rb +0 -29
  114. package/src/core/Showcase/component.css +0 -30
  115. package/src/core/Showcase/component.html.erb +0 -76
  116. package/src/core/Showcase/component.js +0 -180
  117. package/src/core/Showcase/component.jsx +0 -0
  118. package/src/core/Showcase/component.rb +0 -190
  119. package/src/core/SignOutLink/component.html.erb +0 -1
  120. package/src/core/SignOutLink/component.rb +0 -17
  121. package/src/core/Slider/component.html.erb +0 -28
  122. package/src/core/Slider/component.rb +0 -38
  123. package/src/core/Uptime/component.css +0 -128
  124. package/src/core/Uptime/component.html.erb +0 -0
  125. package/src/core/Uptime/component.js +0 -1
  126. package/src/core/Uptime/component.jsx +0 -186
  127. package/src/core/Uptime/component.rb +0 -7
  128. package/src/core/core.rb +0 -81
@@ -1,9 +0,0 @@
1
- <section class="w-full bg-white">
2
- <%= tag.ul class: "py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center #{@additional_css}" do %>
3
- <% companies.each do |company| %>
4
- <li class="flex-auto text-center sm:w-1/3 w-1/2">
5
- <%= image_tag company[:logo], alt: "#{company[:label]} logo", class: 'mx-auto' %>
6
- </li>
7
- <% end %>
8
- <% end %>
9
- </section>
@@ -1,14 +0,0 @@
1
- require 'json'
2
-
3
- module AblyUi
4
- module Core
5
- class CustomerLogos < ViewComponent::Base
6
- attr_reader :companies
7
-
8
- def initialize(companies:, additional_css: '')
9
- @companies = companies
10
- @additional_css = additional_css
11
- end
12
- end
13
- end
14
- end
@@ -1,54 +0,0 @@
1
- <%- @image_url ||= asset_path('ably_ui/core/images/technical-support-01-800x533.jpg') %>
2
- <div class="ui-feature-footer" data-id="feature-footer">
3
- <div class="w-full bp-lg max-w-screen-xl mx-auto py-64 md:grid grid-cols-3 ui-grid-gap ui-grid-px">
4
- <div class="col-span-2 bg-cool-black text-white rounded-lg overflow-hidden sm:flex flex-row mb-24 md:mb-0">
5
- <%= tag.div class: 'ui-feature-image flex-0 bg-center bg-cover w-full h-256 sm:w-1/2 sm:h-auto', style: "background-image:url(#{@image_url})" %>
6
- <div class="p-24 sm:p-32 flex-1 h-full">
7
- <div class="flex flex-col h-full space-between">
8
- <span class="flex-1">
9
- <div class="text-h3 mb-24 flex-1"><%= @title %> </div>
10
- <p class="text-p1 font-light"><%= @subtitle %></p>
11
- <%= tag.button type: "button", class: "ui-btn-secondary-invert self-start mt-24", data: { id: "open-chat-widget", enabled_label: live_chat_label, disabled_label: live_chat_disabled_label }, disabled: true do %>
12
- <%= live_chat_disabled_label %>
13
- <% end %>
14
- </span>
15
- <span class="flex-0 mt-24 md:mt-0">
16
- <p class="text-p1 font-light">
17
- Don’t want to chat?
18
- <%= link_to 'Get in touch via our contact page', abs_url("/contact"), class: "text-white underline font-medium hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus" %>
19
- </p>
20
- </span>
21
- </div>
22
- </div>
23
- </div>
24
- <div class="bg-white rounded-lg p-24 sm:p-32 w-auto">
25
- <div class="flex flex-col h-full space-between">
26
- <span class="flex-1">
27
- <div class="text-h3 mb-24">Try our APIs for free</div>
28
- <p class="text-p1 font-medium mb-16">Our free plan includes</p>
29
- <ul class="relative ml-24 text-p1 font-light leading-8">
30
- <li>
31
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
32
- 6m messages per month
33
- </li>
34
- <li>
35
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
36
- 200 peak connections
37
- </li>
38
- <li>
39
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
40
- 200 peak channels
41
- </li>
42
- <li>
43
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
44
- Loads of features
45
- </li>
46
- </ul>
47
- </span>
48
- <span class="flex-0">
49
- <%= link_to 'Start building', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
50
- </span>
51
- </div>
52
- </div>
53
- </div>
54
- </div>
@@ -1,30 +0,0 @@
1
- module AblyUi
2
- module Core
3
- class FeatureFooter < ViewComponent::Base
4
- include AblyUi::Core::Util
5
-
6
- attr_reader :url_base,
7
- :image_url,
8
- :title,
9
- :subtitle,
10
- :live_chat_label,
11
- :live_chat_disabled_label
12
-
13
- def initialize(
14
- url_base: AblyUi::Core::Util::DEFAULT_URL_BASE,
15
- image_url: nil,
16
- title: 'Talk to our technical team',
17
- subtitle: "If you're having technical or account issues just get in touch.",
18
- live_chat_label: 'Start a live chat',
19
- live_chat_disabled_label: 'Live chat unavailable'
20
- )
21
- @url_base = url_base
22
- @image_url = image_url
23
- @title = title
24
- @subtitle = subtitle
25
- @live_chat_label = live_chat_label
26
- @live_chat_disabled_label = live_chat_disabled_label
27
- end
28
- end
29
- end
30
- end
@@ -1,15 +0,0 @@
1
- @layer components {
2
- .ui-featured-link {
3
- @apply font-sans font-medium block;
4
- @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
- }
6
-
7
- .ui-featured-link:hover svg {
8
- @apply left-0;
9
- }
10
-
11
- .ui-featured-link-icon {
12
- transition: left 100ms ease-in-out;
13
- @apply align-middle ml-8 relative -top-1 -left-4;
14
- }
15
- }
@@ -1,6 +0,0 @@
1
- <%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
2
- <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
3
- size: "calc(var(--featured-link-icon-size) * 1.25)",
4
- color: @icon_color,
5
- additional_css: "ui-featured-link-icon")) %>
6
- <% end %>
@@ -1,19 +0,0 @@
1
- module AblyUi
2
- module Core
3
- class FeaturedLink < ViewComponent::Base
4
- def initialize(
5
- url:,
6
- text_size: 'text-menu3',
7
- icon_color: 'text-cool-black',
8
- flush: false,
9
- additional_css: ''
10
- )
11
- @url = url
12
- @text_size = text_size
13
- @icon_color = icon_color
14
- @flush = flush
15
- @additional_css = additional_css
16
- end
17
- end
18
- end
19
- end
@@ -1,256 +0,0 @@
1
- <footer class="bg-light-grey font-sans antialiased" data-id="footer">
2
- <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
3
- <div class="col-span-full md:col-span-2">
4
- <div class="flex flex-row p-menu-row-snug">
5
- <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
6
- <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
7
- </div>
8
- <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
9
- <p class="text-p3 py-16 font-medium p-menu-row-snug">
10
- Easily power any realtime experience in your application via a simple API that handles everything realtime.
11
- </p>
12
- </div>
13
- <ul class="grid grid-cols-1">
14
- <li class="p-menu-row-snug">
15
- <%= link_to 'Pub/sub messaging', abs_url("/solutions/channels"), class: "ui-footer-menu-row-link" %>
16
- </li>
17
- <li class="p-menu-row-snug">
18
- <%= link_to 'Push notifications', abs_url("/push-notifications"), class: "ui-footer-menu-row-link" %>
19
- </li>
20
- <li class="p-menu-row-snug">
21
- <%= link_to 'Third-party integrations', abs_url("/integrations"), class: "ui-footer-menu-row-link" %>
22
- </li>
23
- <li class="p-menu-row-snug">
24
- <%= link_to 'Multiple protocol messaging', abs_url("/protocols"), class: "ui-footer-menu-row-link" %>
25
- </li>
26
- </ul>
27
- </div>
28
- <div class="col-span-full xs:col-span-3 md:col-span-1">
29
- <h2 class="ui-footer-col-title">Ably is for</h2>
30
- <ul>
31
- <li class="p-menu-row-snug">
32
- <%= link_to 'Ably Asset Tracking', abs_url("/solutions/asset-tracking"), class: "ui-footer-menu-row-link" %>
33
- </li>
34
- <li class="p-menu-row-snug">
35
- <%= link_to 'Extend Kafka to the edge', abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-footer-menu-row-link" %>
36
- </li>
37
- <li class="p-menu-row-snug">
38
- <%= link_to 'EdTech', abs_url("/solutions/edtech"), class: "ui-footer-menu-row-link" %>
39
- </li>
40
- <li class="p-menu-row-snug">
41
- <%= link_to 'Automotive, Logistics, & Mobility', abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-footer-menu-row-link" %>
42
- </li>
43
- <li class="p-menu-row-snug">
44
- <%= link_to 'B2B Platforms', abs_url("/solutions/b2b-platforms"), class: "ui-footer-menu-row-link" %>
45
- </li>
46
- <li class="p-menu-row-snug">
47
- <%= link_to 'Healthcare', abs_url("/solutions/healthcare"), class: "ui-footer-menu-row-link" %>
48
- </li>
49
- <li class="p-menu-row-snug">
50
- <%= link_to 'eCommerce & Retail', abs_url("/solutions/ecommerce-and-retail"), class: "ui-footer-menu-row-link" %>
51
- </li>
52
- <li class="p-menu-row-snug">
53
- <%= link_to 'Sports & Media', abs_url("/solutions/sports-and-media"), class: "ui-footer-menu-row-link" %>
54
- </li>
55
- <li class="p-menu-row-snug">
56
- <%= link_to 'Gaming', abs_url("/solutions/gaming"), class: "ui-footer-menu-row-link" %>
57
- </li>
58
- <li class="p-menu-row-snug">
59
- <%= link_to 'IoT & Connected Devices', abs_url("/solutions/iot-and-connected-devices"), class: "ui-footer-menu-row-link" %>
60
- </li>
61
- </ul>
62
- </div>
63
- <div class="col-span-full xs:col-span-3 md:col-span-1">
64
- <h2 class="ui-footer-col-title">Developers</h2>
65
- <ul>
66
- <li class="p-menu-row-snug">
67
- <%= link_to 'Start in 5 minutes', abs_url("/docs/quick-start-guide"), class: "ui-footer-menu-row-link" %>
68
- </li>
69
- <li class="p-menu-row-snug">
70
- <%= link_to 'Documentation', abs_url("/docs"), class: "ui-footer-menu-row-link" %>
71
- </li>
72
- <li class="p-menu-row-snug">
73
- <%= link_to 'Tutorials', abs_url("/tutorials"), class: "ui-footer-menu-row-link" %>
74
- </li>
75
- <li class="p-menu-row-snug">
76
- <a href="https://changelog.ably.com/" class="ui-footer-menu-row-link">Changelog</a>
77
- </li>
78
- <li class="p-menu-row-snug">
79
- <%= link_to 'Support & FAQs', abs_url("/support"), class: "ui-footer-menu-row-link" %>
80
- </li>
81
- <li class="p-menu-row-snug">
82
- <%= link_to 'SDKs', abs_url("/docs/sdks"), class: "ui-footer-menu-row-link" %>
83
- </li>
84
- <li class="p-menu-row-snug flex items-center -mt-4">
85
- <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
86
- <iframe class="w-20 h-20 mb-2" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
87
- </li>
88
- </ul>
89
- </div>
90
- <div class="col-span-full xs:col-span-3 md:col-span-1">
91
- <h2 class="ui-footer-col-title">WHY ABLY</h2>
92
- <ul>
93
- <li class="p-menu-row-snug">
94
- <%= link_to 'Customers', abs_url("/customers"), class: "ui-footer-menu-row-link" %>
95
- </li>
96
- <li class="p-menu-row-snug">
97
- <%= link_to 'Case Studies', abs_url("/case-studies"), class: "ui-footer-menu-row-link" %>
98
- </li>
99
- <li class="p-menu-row-snug">
100
- <%= link_to 'Four Pillars of Dependability', abs_url("/four-pillars-of-dependability"), class: "ui-footer-menu-row-link" %>
101
- </li>
102
- <li class="p-menu-row-snug">
103
- <%= link_to 'Compare our tech', abs_url("/compare"), class: "ui-footer-menu-row-link" %>
104
- </li>
105
- <li class="p-menu-row-snug">
106
- <%= link_to 'Multi protocol support', abs_url("/protocols"), class: "ui-footer-menu-row-link" %>
107
- </li>
108
- <li class="p-menu-row-snug">
109
- <%= link_to 'Third-party integrations', abs_url("/integrations"), class: "ui-footer-menu-row-link" %>
110
- </li>
111
- </ul>
112
- </div>
113
- <div class="col-span-full xs:col-span-3 md:col-span-1">
114
- <h2 class="ui-footer-col-title">ABOUT</h2>
115
- <ul>
116
- <li class="p-menu-row-snug">
117
- <%= link_to 'About Ably', abs_url("/about"), class: "ui-footer-menu-row-link" %>
118
- </li>
119
- <li class="p-menu-row-snug">
120
- <%= link_to 'Pricing', abs_url("/pricing"), class: "ui-footer-menu-row-link" %>
121
- </li>
122
- <li class="p-menu-row-snug">
123
- <%= link_to 'Blog', abs_url("/blog"), class: "ui-footer-menu-row-link" %>
124
- </li>
125
- <li class="p-menu-row-snug">
126
- <%= link_to 'Careers', abs_url("/careers"), class: "ui-footer-menu-row-link" %>
127
- </li>
128
- <li class="p-menu-row-snug">
129
- <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
130
- </li>
131
- <li class="p-menu-row-snug">
132
- <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
133
- </li>
134
- <li class="p-menu-row-snug">
135
- <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>
136
- </li>
137
- </ul>
138
- </div>
139
- </div>
140
- <div class="max-w-screen-xl ui-grid-px mx-auto">
141
- <hr class="border-t border-mid-grey my-0"/>
142
- </div>
143
- <%# Twitter + Glassdoor SM * above + Glassdoor XS + Badges %>
144
- <div class="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
145
- <div class="md:flex md:items-center">
146
- <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
147
- <div class="">
148
- <div class="flex pb-24">
149
- <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on X">
150
- <%= render(AblyUi::Core::Icon.new(name: "icon-social-x", size: "1.5rem")) %>
151
- </a>
152
- <a
153
- class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
154
- href="https://www.linkedin.com/company/ably-realtime"
155
- title="Ably on LinkedIn"
156
- >
157
- <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
158
- </a>
159
- <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/" title="Ably on Github">
160
- <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
161
- </a>
162
- <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord">
163
- <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
164
- </a>
165
- </div>
166
- </div>
167
- <%# GLASSDOOR on SM and Above %>
168
- <div class="xs:hidden sm:block ui-footer-glassdoor">
169
- <div class="flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24">
170
- <a
171
- href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
172
- class="h-24 text-cool-black hover:text-icon-glassdoor"
173
- title="Ably reviews on glassdoor"
174
- >
175
- <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
176
- </a>
177
- <div class="pl-16 text-menu3 font-light">
178
- <strong class="block font-medium">We&apos;re hiring!</strong>
179
- <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
180
- Learn more at Glassdoor
181
- </a>
182
- </div>
183
- </div>
184
- </div>
185
- </div>
186
- <%# GlassDoor on XS ONLY %>
187
- <div class="xs:block sm:hidden">
188
- <div class="border-t border-mid-grey w-full"></div>
189
- <div class="flex py-24">
190
- <a
191
- class="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
192
- href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
193
- title="Ably reviews on glassdoor"
194
- >
195
- <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
196
- </a>
197
- <div class="text-menu3 font-light">
198
- <strong class="block font-medium">We&apos;re hiring!</strong>
199
- <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
200
- Learn more at Glassdoor
201
- </a>
202
- </div>
203
- </div>
204
- </div>
205
- </div>
206
- <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
207
- <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2023", class: "mr-24 h-80") %>
208
- <%= image_tag(best_support, alt: "Best Support 2023", class: "mr-24 h-80") %>
209
- <%= image_tag(fastest_implementation, alt: "Fastest Implementation 2023", class: "mr-24 h-80") %>
210
- <%= image_tag(highest_performer, alt: "High Performer 2023", class: "mr-24 h-80") %>
211
- </div>
212
- </div>
213
- <div class="max-w-screen-xl ui-grid-px mx-auto">
214
- <hr class="border-t border-mid-grey my-0"/>
215
- </div>
216
- <div class="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
217
- <div class="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
218
- <div class="flex">
219
- <%= link_to 'Cookies', abs_url("/privacy"), class: "pr-24 ui-footer-link" %>
220
- <%= link_to 'Legals', abs_url("/legals"), class: "pr-24 ui-footer-link" %>
221
- <%= link_to 'Data Protection', abs_url("/data-protection"), class: "pr-24 ui-footer-link" %>
222
- <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
223
- </div>
224
- </div>
225
- <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
226
- <div class="flex mr-24">
227
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
228
- <div>
229
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
230
- <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
231
- </div>
232
- </div>
233
- <div class="flex mr-24 md:col-start-2">
234
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
235
- <div>
236
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
237
- <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
238
- </div>
239
- </div>
240
- <div class="flex mr-24 md:col-start-3">
241
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
242
- <div>
243
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
244
- <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
245
- </div>
246
- </div>
247
- <div class="flex mr-24 md:col-start-4">
248
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
249
- <div>
250
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
251
- <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
252
- </div>
253
- </div>
254
- </div>
255
- </div>
256
- </footer>
@@ -1,14 +0,0 @@
1
- module AblyUi
2
- module Core
3
- class Footer < ViewComponent::Base
4
- include AblyUi::Core::SharedAssets
5
- include AblyUi::Core::Util
6
-
7
- attr_reader :url_base
8
-
9
- def initialize(url_base: AblyUi::Core::Util::DEFAULT_URL_BASE)
10
- @url_base = url_base
11
- end
12
- end
13
- end
14
- end
@@ -1,3 +0,0 @@
1
- <%= tag.svg class: "#{color} #{additional_css}", style: "width: #{size}; height: #{size}", **additional_attributes do %>
2
- <%= tag.use "xlink:href": "#sprite-#{name}" %>
3
- <% end %>
@@ -1,25 +0,0 @@
1
- module AblyUi
2
- module Core
3
- class Icon < ViewComponent::Base
4
- attr_reader :name
5
- attr_reader :size
6
- attr_reader :color
7
- attr_reader :additional_css
8
- attr_reader :additional_attributes
9
-
10
- def initialize(
11
- name:,
12
- size: '0.75rem',
13
- color: '',
14
- additional_css: '',
15
- **additional_attributes
16
- )
17
- @name = name
18
- @size = size
19
- @color = color
20
- @additional_css = additional_css
21
- @additional_attributes = additional_attributes
22
- end
23
- end
24
- end
25
- end
@@ -1,18 +0,0 @@
1
- <%= tag.svg class: "#{ring_color} #{additional_css}", style: "width: #{size}; height: #{size}", width: "24", height: "24", view_box: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" do %>
2
- <style>
3
- @keyframes chunk-animation {
4
- to {
5
- transform: rotate(360deg);
6
- }
7
- }
8
-
9
- .chunk {
10
- transform: rotate(0deg);
11
- transform-origin: center;
12
- animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;
13
- }
14
- </style>
15
-
16
- <path fill="currentColor" d="m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z" opacity=".5"/>
17
- <path className="chunk" d="m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z" fill="#ff5416"/>
18
- <% end %>
@@ -1,19 +0,0 @@
1
- module AblyUi
2
- module Core
3
- class Loader < ViewComponent::Base
4
- attr_reader :size
5
- attr_reader :ring_color
6
- attr_reader :additional_css
7
-
8
- def initialize(
9
- size: '1.5rem',
10
- ring_color: 'text-dark-grey',
11
- additional_css: ''
12
- )
13
- @size = size
14
- @ring_color = ring_color
15
- @additional_css = additional_css
16
- end
17
- end
18
- end
19
- end
@@ -1,3 +0,0 @@
1
- <%= link_to logo_href, class: 'block', style: "height: 2.125rem", data: { id: data_id }, **additional_link_attrs do %>
2
- <%= tag.img src: logo_url, width: "108px", alt: "Ably logo", **additional_img_attrs %>
3
- <% end %>
@@ -1,31 +0,0 @@
1
- module AblyUi
2
- module Core
3
- class Logo < ViewComponent::Base
4
- include AblyUi::Core::MeganavConfig
5
-
6
- attr_reader :href,
7
- :logo_url,
8
- :data_id,
9
- :additional_img_attrs,
10
- :additional_link_attrs
11
-
12
- def initialize(
13
- href:,
14
- logo_url:,
15
- data_id: '',
16
- additional_img_attrs: {},
17
- additional_link_attrs: {}
18
- )
19
- @data_id = data_id
20
- @href = href
21
- @logo_url = logo_url
22
- @additional_img_attrs = additional_img_attrs
23
- @additional_link_attrs = additional_link_attrs
24
- end
25
-
26
- def logo_href
27
- href.blank? ? '/' : href
28
- end
29
- end
30
- end
31
- end
@@ -1,31 +0,0 @@
1
- <%= tag.nav(class: ["ui-meganav-wrapper", theme(:background_color), theme(:bar_shadow)], data: { id: "meganav" }, aria: { label: "Main" }) do %>
2
- <%= notice %>
3
-
4
- <div class="ui-meganav ui-grid-px">
5
- <div className="mr-24">
6
- <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link, logo_url: ably_logo)) %>
7
- </div>
8
- <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
9
-
10
- <% if @session_data[:signedIn] %>
11
- <%= render(AblyUi::Core::MeganavItemsSignedIn.new(session_data: @session_data, theme_name: @theme_name, url_base: url_base)) %>
12
- <% else %>
13
- <ul class="hidden md:flex items-center">
14
- <li class="ui-meganav-item">
15
- <%= link_to "Contact us", abs_url("/contact"), data: { id: "meganav-link" }, class: ["ui-meganav-link", theme(:text_color)] %>
16
- </li>
17
- <li class="ui-meganav-item">
18
- <%= link_to "Login", abs_url(login_link), data: { id: "meganav-link" }, class: ["ui-meganav-link", "mr-0", theme(:text_color)] %>
19
- </li>
20
- <li class="ui-meganav-item">
21
- <%= render(AblyUi::Core::MeganavSearch.new(url_base: url_base)) %>
22
- </li>
23
- <li class="ui-meganav-item">
24
- <%= link_to "Sign up free", abs_url("/sign-up"), data: { id: "meganav-sign-up-btn" }, class: ["ui-btn", "p-btn-small", theme(:button_background_color), theme(:button_text_color)] %>
25
- </li>
26
- </ul>
27
- <% end %>
28
-
29
- <%= render(AblyUi::Core::MeganavItemsMobile.new(session_data: @session_data, theme_name: @theme_name, login_link: login_link, url_base: url_base)) %>
30
- </div>
31
- <% end %>
@@ -1,60 +0,0 @@
1
- require 'json'
2
- require_relative '../notice/notice.rb'
3
-
4
- module AblyUi
5
- module Core
6
- class Meganav < ViewComponent::Base
7
- include MeganavConfig
8
- include Util
9
- include SharedAssets
10
- attr_reader :options, :login_link, :logo_link, :url_base
11
-
12
- renders_one :notice, AblyUi::Core::Notice
13
-
14
- def initialize(
15
- session_data: {},
16
- theme_name: :white,
17
- login_link: '/login',
18
- logo_link: '',
19
- url_base: AblyUi::Core::Util::DEFAULT_URL_BASE
20
- )
21
- @session_data = session_data
22
- @theme_name = theme_name
23
- @options = options
24
- @login_link = login_link
25
- @url_base = url_base
26
- @logo_link = logo_link || url_base
27
- theme_setup(theme_name)
28
- end
29
-
30
- def panels
31
- [
32
- {
33
- label: 'Products',
34
- short_label: 'Products',
35
- id: 'products-panel',
36
- class: 'AblyUi::Core::MeganavContentProducts'
37
- },
38
- {
39
- label: 'Solutions',
40
- short_label: 'Solutions',
41
- id: 'use-cases-panel',
42
- class: 'AblyUi::Core::MeganavContentUseCases'
43
- },
44
- {
45
- label: 'Company',
46
- short_label: 'Company',
47
- id: 'company-panel',
48
- class: 'AblyUi::Core::MeganavContentCompany'
49
- },
50
- {
51
- label: 'Developers',
52
- short_label: 'Developers',
53
- id: 'developers-panel',
54
- class: 'AblyUi::Core::MeganavContentDevelopers'
55
- }
56
- ]
57
- end
58
- end
59
- end
60
- end
@@ -1,5 +0,0 @@
1
- <div class="hidden 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" data-id="meganav-company-panel-blog-section">
2
- <h3 class="ui-meganav-overline" id="meganav-company-panel-recent-blog-posts">Blog</h3>
3
- <ul class="mb-8" aria-labelledby="meganav-company-panel-recent-blog-posts" data-id="meganav-company-panel-recent-blog-posts"></ul>
4
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/blog"), text_size: 'text-p3')) do %>More from our Blog<% end %>
5
- </div>
@@ -1,13 +0,0 @@
1
- module AblyUi
2
- module Core
3
- class MeganavBlogPostsList < ViewComponent::Base
4
- include AblyUi::Core::Util
5
-
6
- attr_reader :url_base
7
-
8
- def initialize(url_base:)
9
- @url_base = url_base
10
- end
11
- end
12
- end
13
- end