@ably/ui 8.7.0-dev.3963261 → 8.7.0-dev.3fee7c0

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 (21) hide show
  1. package/README.md +7 -3
  2. package/core/Footer/component.css +11 -1
  3. package/core/Footer.jsx +38 -38
  4. package/core/Meganav.jsx +24 -24
  5. package/core/MeganavContentPlatform.jsx +8 -8
  6. package/core/MeganavContentUseCases.jsx +16 -16
  7. package/core/MeganavContentWhyAbly/component.js +22 -0
  8. package/core/MeganavContentWhyAbly.jsx +3279 -0
  9. package/package.json +1 -1
  10. package/src/core/Footer/component.css +11 -1
  11. package/src/core/Footer/component.html.erb +38 -38
  12. package/src/core/Footer/component.jsx +39 -39
  13. package/src/core/MeganavContentPlatform/component.html.erb +6 -6
  14. package/src/core/MeganavContentPlatform/component.jsx +6 -6
  15. package/src/core/MeganavContentUseCases/component.html.erb +16 -16
  16. package/src/core/MeganavContentUseCases/component.jsx +16 -16
  17. package/core/.DS_Store +0 -0
  18. package/core/DropdownMenuPreview/component.js +0 -6
  19. package/core/DropdownMenuPreview.jsx +0 -6
  20. package/src/.DS_Store +0 -0
  21. package/src/core/.DS_Store +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "8.7.0-dev.3963261",
3
+ "version": "8.7.0-dev.3fee7c0",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/core/Footer/component.css CHANGED
@@ -8,13 +8,23 @@
8
8
  }
9
9
 
10
10
  .ui-footer-link {
11
- @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
12
12
  }
13
13
 
14
14
  .ui-footer-compliance-text {
15
15
  font-size: 12px;
16
16
  }
17
17
 
18
+ .ui-footer-tick-icon {
19
+ min-width: 1.5rem;
20
+ }
21
+
22
+ @media (max-width: 1040px) {
23
+ .ui-footer-bottom-links {
24
+ @apply pb-40;
25
+ }
26
+ }
27
+
18
28
  @media screen {
19
29
  .ui-footer-glassdoor {
20
30
  display: none;
package/src/core/Footer/component.html.erb CHANGED
@@ -1,16 +1,16 @@
1
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 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
3
- <div class="col-span-full lg:col-span-2">
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
4
  <div class="flex flex-row p-menu-row-snug">
5
5
  <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
6
6
  <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
7
7
  </div>
8
- <div class="grid grid-cols-4 lg:col-span-2">
9
- <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
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
10
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
11
11
  </p>
12
12
  </div>
13
- <ul class="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
13
+ <ul class="grid grid-cols-1">
14
14
  <li class="p-menu-row-snug">
15
15
  <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
16
16
  </li>
@@ -28,7 +28,7 @@
28
28
  </li>
29
29
  </ul>
30
30
  </div>
31
- <div class="col-span-full xs:col-span-3 lg:col-span-1">
31
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
32
32
  <h2 class="ui-footer-col-title">Ably is for</h2>
33
33
  <ul>
34
34
  <li class="p-menu-row-snug">
@@ -66,7 +66,7 @@
66
66
  </li>
67
67
  </ul>
68
68
  </div>
69
- <div class="col-span-full xs:col-span-3 lg:col-span-1">
69
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
70
70
  <h2 class="ui-footer-col-title">Developers</h2>
71
71
  <ul>
72
72
  <li class="p-menu-row-snug">
@@ -87,13 +87,13 @@
87
87
  <li class="p-menu-row-snug">
88
88
  <%= link_to 'SDKs', abs_url("/download"), class: "ui-footer-menu-row-link" %>
89
89
  </li>
90
- <li class="p-menu-row-snug flex items-center">
90
+ <li class="p-menu-row-snug flex items-center -mt-4">
91
91
  <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
92
- <iframe class="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
92
+ <iframe class="w-20 h-20 mb-2" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
93
93
  </li>
94
94
  </ul>
95
95
  </div>
96
- <div class="col-span-full xs:col-span-3 lg:col-span-1">
96
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
97
97
  <h2 class="ui-footer-col-title">WHY ABLY</h2>
98
98
  <ul>
99
99
  <li class="p-menu-row-snug">
@@ -116,7 +116,7 @@
116
116
  </li>
117
117
  </ul>
118
118
  </div>
119
- <div class="col-span-full xs:col-span-3 lg:col-span-1">
119
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
120
120
  <h2 class="ui-footer-col-title">ABOUT</h2>
121
121
  <ul>
122
122
  <li class="p-menu-row-snug">
@@ -144,14 +144,14 @@
144
144
  </div>
145
145
  </div>
146
146
  <div class="max-w-screen-xl ui-grid-px mx-auto">
147
- <hr class="border-t border-mid-grey" />
147
+ <hr class="border-t border-mid-grey my-0"/>
148
148
  </div>
149
149
  <%# Twitter + Glassdoor SM * above + Glassdoor XS + Badges %>
150
- <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
151
- <div class="">
152
- <div class="flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2">
150
+ <div class="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
151
+ <div class="md:flex md:items-center">
152
+ <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
153
153
  <div class="">
154
- <div class="flex items-center pb-24">
154
+ <div class="flex pb-24">
155
155
  <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
156
156
  <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
157
157
  </a>
@@ -172,7 +172,7 @@
172
172
  </div>
173
173
  <%# GLASSDOOR on SM and Above %>
174
174
  <div class="xs:hidden sm:block ui-footer-glassdoor">
175
- <div class="flex sm:pt-24 lg:pt-0 sm:border-t sm:border-l-0 lg:border-t-0 lg:border-l sm:border-mid-grey sm:w-3/4 lg:w-full lg:pl-24">
175
+ <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">
176
176
  <a
177
177
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
178
178
  class="h-24 text-cool-black hover:text-icon-glassdoor"
@@ -194,7 +194,7 @@
194
194
  <div class="border-t border-mid-grey w-full"></div>
195
195
  <div class="flex py-24">
196
196
  <a
197
- class="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
197
+ class="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
198
198
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
199
199
  title="Ably reviews on glassdoor"
200
200
  >
@@ -209,50 +209,50 @@
209
209
  </div>
210
210
  </div>
211
211
  </div>
212
- <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
213
- <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 w-96 h-96") %>
214
- <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 w-96 h-96") %>
215
- <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 w-96 h-96") %>
212
+ <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
213
+ <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 h-80") %>
214
+ <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 h-80") %>
215
+ <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 h-80") %>
216
216
  </div>
217
217
  </div>
218
218
  <div class="max-w-screen-xl ui-grid-px mx-auto">
219
- <hr class="border-t border-mid-grey" />
219
+ <hr class="border-t border-mid-grey my-0"/>
220
220
  </div>
221
- <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px ">
222
- <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
223
- <div class="inline-flex">
221
+ <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">
222
+ <div class="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
223
+ <div class="flex">
224
224
  <%= link_to 'Cookies', abs_url("/privacy"), class: "pr-24 ui-footer-link" %>
225
225
  <%= link_to 'Legals', abs_url("/legals"), class: "pr-24 ui-footer-link" %>
226
226
  <%= link_to 'Data Protection', abs_url("/data-protection"), class: "pr-24 ui-footer-link" %>
227
227
  <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
228
228
  </div>
229
229
  </div>
230
- <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
230
+ <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
231
231
  <div class="flex mr-24">
232
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
232
+ <%= 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")) %>
233
233
  <div>
234
- <p class="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
234
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
235
235
  <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
236
236
  </div>
237
237
  </div>
238
- <div class="flex mr-24 sm:col-start-2">
239
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
238
+ <div class="flex mr-24 md:col-start-2">
239
+ <%= 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")) %>
240
240
  <div>
241
- <p class="ui-footer-compliance-text font-medium">HIPAA</p>
241
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
242
242
  <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
243
243
  </div>
244
244
  </div>
245
- <div class="flex mr-24 sm:col-start-3">
246
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
245
+ <div class="flex mr-24 md:col-start-3">
246
+ <%= 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")) %>
247
247
  <div>
248
- <p class="ui-footer-compliance-text font-medium">EU GDPR</p>
248
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
249
249
  <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
250
250
  </div>
251
251
  </div>
252
- <div class="flex mr-24 sm:col-start-4">
253
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
252
+ <div class="flex mr-24 md:col-start-4">
253
+ <%= 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")) %>
254
254
  <div>
255
- <p class="ui-footer-compliance-text font-medium">256-bit AES</p>
255
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
256
256
  <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
257
257
  </div>
258
258
  </div>
package/src/core/Footer/component.jsx CHANGED
@@ -9,19 +9,19 @@ export default function Footer({ paths, urlBase }) {
9
9
 
10
10
  return (
11
11
  <footer className="bg-light-grey font-sans antialiased" data-id="footer">
12
- <div className="max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
13
- <div className="col-span-full lg:col-span-2">
12
+ <div className="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
13
+ <div className="col-span-full md:col-span-2">
14
14
  <div className="flex flex-row p-menu-row-snug">
15
15
  <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
16
16
  <h2 className="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
17
17
  </div>
18
- <div className="grid grid-cols-4 lg:col-span-2">
19
- <p className="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
18
+ <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
19
+ <p className="text-p3 py-16 font-medium p-menu-row-snug">
20
20
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
21
21
  </p>
22
22
  </div>
23
23
 
24
- <ul className="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
24
+ <ul className="grid grid-cols-1">
25
25
  <li className="p-menu-row-snug">
26
26
  <a href={absUrl("/pub-sub-messaging")} className="ui-footer-menu-row-link">
27
27
  Pub/sub messaging
@@ -50,7 +50,7 @@ export default function Footer({ paths, urlBase }) {
50
50
  </ul>
51
51
  </div>
52
52
 
53
- <div className="col-span-full xs:col-span-3 lg:col-span-1">
53
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
54
54
  <h2 className="ui-footer-col-title">Ably is for</h2>
55
55
  <ul>
56
56
  <li className="p-menu-row-snug">
@@ -111,7 +111,7 @@ export default function Footer({ paths, urlBase }) {
111
111
  </ul>
112
112
  </div>
113
113
 
114
- <div className="col-span-full xs:col-span-3 lg:col-span-1">
114
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
115
115
  <h2 className="ui-footer-col-title">Developers</h2>
116
116
  <ul>
117
117
  <li className="p-menu-row-snug">
@@ -144,12 +144,12 @@ export default function Footer({ paths, urlBase }) {
144
144
  SDKs
145
145
  </a>
146
146
  </li>
147
- <li className="p-menu-row-snug flex items-center">
147
+ <li className="p-menu-row-snug flex items-center -mt-4">
148
148
  <a className="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">
149
149
  System status
150
150
  </a>
151
151
  <iframe
152
- className="w-24 h-24 mt-4"
152
+ className="w-20 h-20 mb-2"
153
153
  src="https://status.ably.com/embed/icon"
154
154
  allowtransparency="true"
155
155
  frameBorder="0"
@@ -160,7 +160,7 @@ export default function Footer({ paths, urlBase }) {
160
160
  </ul>
161
161
  </div>
162
162
 
163
- <div className="col-span-full xs:col-span-3 lg:col-span-1">
163
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
164
164
  <h2 className="ui-footer-col-title">WHY ABLY</h2>
165
165
  <ul>
166
166
  <li className="p-menu-row-snug">
@@ -196,7 +196,7 @@ export default function Footer({ paths, urlBase }) {
196
196
  </ul>
197
197
  </div>
198
198
 
199
- <div className="col-span-full xs:col-span-3 lg:col-span-1">
199
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
200
200
  <h2 className="ui-footer-col-title">ABOUT</h2>
201
201
  <ul>
202
202
  <li className="p-menu-row-snug">
@@ -238,14 +238,14 @@ export default function Footer({ paths, urlBase }) {
238
238
  </div>
239
239
  </div>
240
240
  <div className="max-w-screen-xl ui-grid-px mx-auto">
241
- <hr className="border-t border-mid-grey" />
241
+ <hr className="border-t border-mid-grey my-0" />
242
242
  </div>
243
- {/* Twitter + Glassdoor SM * above + Glassdoor XS + Badges*/}
244
- <div className="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
245
- <div className="">
246
- <div className="flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2">
243
+ {/* Twitter + Glassdoor SM & above + Glassdoor XS + Badges*/}
244
+ <div className="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
245
+ <div className="md:flex md:items-center">
246
+ <div className="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
247
247
  <div className="">
248
- <div className="flex items-center pb-24">
248
+ <div className="flex pb-24">
249
249
  <a className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
250
250
  <Icon name="twitter" size="1.5rem" />
251
251
  </a>
@@ -266,7 +266,7 @@ export default function Footer({ paths, urlBase }) {
266
266
  </div>
267
267
  {/* GLASSDOOR on SM and Above */}
268
268
  <div className="xs:hidden sm:block ui-footer-glassdoor">
269
- <div className="flex sm:pt-24 lg:pt-0 sm:border-t sm:border-l-0 lg:border-t-0 lg:border-l sm:border-mid-grey sm:w-3/4 lg:w-full lg:pl-24">
269
+ <div className="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">
270
270
  <a
271
271
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
272
272
  className="h-24 text-cool-black hover:text-icon-glassdoor"
@@ -288,7 +288,7 @@ export default function Footer({ paths, urlBase }) {
288
288
  <div className="border-t border-mid-grey w-full"></div>
289
289
  <div className="flex py-24">
290
290
  <a
291
- className="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
291
+ className="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
292
292
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
293
293
  title="Ably reviews on glassdoor"
294
294
  >
@@ -304,19 +304,19 @@ export default function Footer({ paths, urlBase }) {
304
304
  </div>
305
305
  </div>
306
306
 
307
- <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
308
- <img className="mr-24 w-96 h-96" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
309
- <img className="mr-24 w-96 h-96" src={paths.usersLoveUs} alt="Users Love Us" />
310
- <img className="mr-24 w-96 h-96" src={paths.highestPerformer} alt="High Performer 2022" />
307
+ <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
308
+ <img className="mr-24 h-80" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
309
+ <img className="mr-24 h-80" src={paths.usersLoveUs} alt="Users Love Us" />
310
+ <img className="mr-24 h-80" src={paths.highestPerformer} alt="High Performer 2022" />
311
311
  </div>
312
312
  </div>
313
313
 
314
314
  <div className="max-w-screen-xl ui-grid-px mx-auto">
315
- <hr className="border-t border-mid-grey" />
315
+ <hr className="border-t border-mid-grey my-0" />
316
316
  </div>
317
- <div className="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px ">
318
- <div className="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
319
- <div className="inline-flex">
317
+ <div className="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">
318
+ <div className="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
319
+ <div className="flex">
320
320
  <a href={absUrl("/privacy")} className="pr-24 ui-footer-link">
321
321
  Cookies
322
322
  </a>
@@ -331,32 +331,32 @@ export default function Footer({ paths, urlBase }) {
331
331
  </a>
332
332
  </div>
333
333
  </div>
334
- <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
334
+ <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
335
335
  <div className="flex mr-24">
336
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
336
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
337
337
  <div>
338
- <p className="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
338
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
339
339
  <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
340
340
  </div>
341
341
  </div>
342
- <div className="flex mr-24 sm:col-start-2">
343
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
342
+ <div className="flex mr-24 md:col-start-2">
343
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
344
344
  <div>
345
- <p className="ui-footer-compliance-text font-medium">HIPAA</p>
345
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
346
346
  <p className="ui-footer-compliance-text font-light mb-24">Compliant</p>
347
347
  </div>
348
348
  </div>
349
- <div className="flex mr-24 sm:col-start-3">
350
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
349
+ <div className="flex mr-24 md:col-start-3">
350
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
351
351
  <div>
352
- <p className="ui-footer-compliance-text font-medium">EU GDPR</p>
352
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
353
353
  <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
354
354
  </div>
355
355
  </div>
356
- <div className="flex mr-24 sm:col-start-4">
357
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
356
+ <div className="flex mr-24 md:col-start-4">
357
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
358
358
  <div>
359
- <p className="ui-footer-compliance-text font-medium">256-bit AES</p>
359
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
360
360
  <p className="ui-footer-compliance-text font-light mb-24">Encryption</p>
361
361
  </div>
362
362
  </div>
package/src/core/MeganavContentPlatform/component.html.erb CHANGED
@@ -36,12 +36,6 @@
36
36
  <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
37
37
  <% end %>
38
38
  </li>
39
- <li>
40
- <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %>
41
- <p class="ui-meganav-media-heading">Live Charts</p>
42
- <p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
43
- <% end %>
44
- </li>
45
39
  <li>
46
40
  <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
47
41
  <p class="ui-meganav-media-heading">Live Cursors</p>
@@ -54,6 +48,12 @@
54
48
  <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
55
49
  <% end %>
56
50
  </li>
51
+ <li>
52
+ <%= link_to abs_url("/examples/chat-admin-privileges"), class: "ui-meganav-media group" do %>
53
+ <p class="ui-meganav-media-heading">Chat Admin Privileges</p>
54
+ <p class="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
55
+ <% end %>
56
+ </li>
57
57
  </ul>
58
58
 
59
59
  <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>
package/src/core/MeganavContentPlatform/component.jsx CHANGED
@@ -45,12 +45,6 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
45
45
  <p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
46
46
  </a>
47
47
  </li>
48
- <li>
49
- <a href={absUrl("/examples/live-charts")} className="ui-meganav-media group">
50
- <p className="ui-meganav-media-heading">Live Charts</p>
51
- <p className="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
52
- </a>
53
- </li>
54
48
  <li>
55
49
  <a href={absUrl("/examples/live-cursors")} className="ui-meganav-media group">
56
50
  <p className="ui-meganav-media-heading">Live Cursors</p>
@@ -63,6 +57,12 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
63
57
  <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
64
58
  </a>
65
59
  </li>
60
+ <li>
61
+ <a href={absUrl("/examples/chat-admin-privileges")} className="ui-meganav-media group">
62
+ <p className="ui-meganav-media-heading">Chat Admin Privileges</p>
63
+ <p className="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
64
+ </a>
65
+ </li>
66
66
  </ul>
67
67
  <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
68
68
  Explore all live examples
package/src/core/MeganavContentUseCases/component.html.erb CHANGED
@@ -7,38 +7,38 @@
7
7
  </h3>
8
8
  <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
9
9
  <li>
10
- <%= link_to abs_url("/solutions/live-updates-results-metrics"), class: "ui-meganav-media-with-image group" do %>
11
- <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
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
12
  <div class="flex flex-col justify-center">
13
- <p class="ui-meganav-media-heading">Live updates, results & metrics</p>
14
- <p class="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
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
15
  </div>
16
16
  <% end %>
17
17
  </li>
18
18
  <li>
19
- <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
20
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
19
+ <%= link_to abs_url("/solutions/multiplayer-collaboration"), class: "ui-meganav-media-with-image group" do %>
20
+ <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
21
21
  <div class="flex flex-col justify-center">
22
- <p class="ui-meganav-media-heading">Chat</p>
23
- <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
22
+ <p class="ui-meganav-media-heading">Multiplayer Collaboration</p>
23
+ <p class="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
24
24
  </div>
25
25
  <% end %>
26
26
  </li>
27
27
  <li>
28
- <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %>
29
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
28
+ <%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
29
+ <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
30
30
  <div class="flex flex-col justify-center">
31
- <p class="ui-meganav-media-heading">Virtual Events</p>
32
- <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
31
+ <p class="ui-meganav-media-heading">Data Broadcast</p>
32
+ <p class="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
33
33
  </div>
34
34
  <% end %>
35
35
  </li>
36
36
  <li>
37
- <%= link_to abs_url("/solutions/multi-user-virtual-spaces"), class: "ui-meganav-media-with-image group" do %>
38
- <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
37
+ <%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
38
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events", size: "2.5rem")) %>
39
39
  <div class="flex flex-col justify-center">
40
- <p class="ui-meganav-media-heading">Multi-user virtual spaces</p>
41
- <p class="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
40
+ <p class="ui-meganav-media-heading">Data Synchronization</p>
41
+ <p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
42
42
  </div>
43
43
  <% end %>
44
44
  </li>
package/src/core/MeganavContentUseCases/component.jsx CHANGED
@@ -13,38 +13,38 @@ const MeganavContentUseCases = ({ absUrl }) => (
13
13
  </h3>
14
14
  <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
15
15
  <li>
16
- <a href={absUrl("/solutions/live-updates-results-metrics")} className="ui-meganav-media-with-image group">
17
- <Icon name="icon-live-updates-results-metrics-col" size="2.5rem" />
16
+ <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
17
+ <Icon name="icon-display-chat-stack-col" size="2.5rem" />
18
18
  <div className="flex flex-col justify-center">
19
- <p className="ui-meganav-media-heading">Live updates, results & metrics</p>
20
- <p className="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
19
+ <p className="ui-meganav-media-heading">Chat</p>
20
+ <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
21
21
  </div>
22
22
  </a>
23
23
  </li>
24
24
  <li>
25
- <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
26
- <Icon name="icon-display-chat-stack-col" size="2.5rem" />
25
+ <a href={absUrl("/solutions/multiplayer-collaboration")} className="ui-meganav-media-with-image group">
26
+ <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
27
27
  <div className="flex flex-col justify-center">
28
- <p className="ui-meganav-media-heading">Chat</p>
29
- <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
28
+ <p className="ui-meganav-media-heading">Multiplayer Collaboration</p>
29
+ <p className="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
30
30
  </div>
31
31
  </a>
32
32
  </li>
33
33
  <li>
34
- <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media-with-image group">
35
- <Icon name="icon-display-virtual-events-col" size="2.5rem" />
34
+ <a href={absUrl("/solutions/data-broadcast")} className="ui-meganav-media-with-image group">
35
+ <Icon name="icon-live-updates-results-metrics-col" size="2.5rem" />
36
36
  <div className="flex flex-col justify-center">
37
- <p className="ui-meganav-media-heading">Virtual Events</p>
38
- <p className="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
37
+ <p className="ui-meganav-media-heading">Data Broadcast</p>
38
+ <p className="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
39
39
  </div>
40
40
  </a>
41
41
  </li>
42
42
  <li>
43
- <a href={absUrl("/solutions/multi-user-virtual-spaces")} className="ui-meganav-media-with-image group">
44
- <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
43
+ <a href={absUrl("/solutions/data-synchronization")} className="ui-meganav-media-with-image group">
44
+ <Icon name="icon-display-virtual-events" size="2.5rem" />
45
45
  <div className="flex flex-col justify-center">
46
- <p className="ui-meganav-media-heading">Multi-user virtual spaces</p>
47
- <p className="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
46
+ <p className="ui-meganav-media-heading">Data Synchronization</p>
47
+ <p className="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
48
48
  </div>
49
49
  </a>
50
50
  </li>
package/core/.DS_Store DELETED
Binary file
package/core/DropdownMenuPreview/component.js DELETED
@@ -1,6 +0,0 @@
1
- /******/ (() => { // webpackBootstrap
2
- /******/ "use strict";
3
- /******/
4
- /******/
5
- /******/ })()
6
- ;
package/core/DropdownMenuPreview.jsx DELETED
@@ -1,6 +0,0 @@
1
- /******/ (() => { // webpackBootstrap
2
- /******/ "use strict";
3
- /******/
4
- /******/
5
- /******/ })()
6
- ;
package/src/.DS_Store DELETED
Binary file
package/src/core/.DS_Store DELETED
Binary file