ably-ui 8.7.0.dev.b870220 → 8.7.0.dev.98edac1

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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 85abaed0944db34d2635f2f2a9827d7e0dac5969809f3666341e4dbb44804689
4
- data.tar.gz: be11c96c38aa53a1f67766ccf5dd3d69c296f88ace924e26e99a8dbac81f72af
3
+ metadata.gz: 42f6b80b849f54650021e4f5ff8459340267f9390fcbe1ef7e2c666259287802
4
+ data.tar.gz: 10b721b4c0c36fd47e781e7b82d01aae11fd98268107efc549713ac376c0fcf6
5
5
  SHA512:
6
- metadata.gz: 93cfa0fa8a9975b6b28545ba8b3e195096e36774c2a18034d8b8f73dcc64d0455dbafa9c2cb0fb09ec5348013b468e6254da3d21a885d4260ece6e31bf950b5b
7
- data.tar.gz: 7533005f6a62f3ca2a4ab8602856247e1c2562a3c7f0847718b6babc7eeee5c2957d4402301d3a596c1a78b6adcdf0566b2bd634e61ffb1db93bbecd3b61fcc9
6
+ metadata.gz: 9aae72fde31b1dc36998f45ddd0b17af3a1dff306f7cfeee708c679f7866c5e57d17a3773f4dbc96b5d835ee090058150db8e65b97762fe02e3c4590a339b5e9
7
+ data.tar.gz: d1e06ba107ae7de5490db140526e0630f15ee5fa52a07e3231e9696517d61724ff662eaf297330e20540d842a9adb4637480ef4ae1ab2c82a363e67617583305
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- ably-ui (8.7.0.dev.28a63f9)
4
+ ably-ui (8.7.0.dev.afde810)
5
5
  view_component (>= 2.33, < 2.50)
6
6
 
7
7
  GEM
data/README.md CHANGED
@@ -239,7 +239,14 @@ yarn link @ably/ui
239
239
 
240
240
  For `ruby`:
241
241
 
242
- In `preview/Gemfile` replace `source: "https://rubygems.pkg.github.com/ably"` with `path: '../'` and run:
242
+ In `preview/Gemfile` replace the Ably UI gem version number with `path: '../'` like this:
243
+
244
+ ```bash
245
+ # in preview
246
+ gem 'ably-ui', path: '../', require: 'ably_ui'
247
+ ```
248
+
249
+ and run:
243
250
 
244
251
  ```bash
245
252
  # in preview
@@ -42,12 +42,16 @@ module AblyUi
42
42
  asset_path 'ably_ui/core/images/icon-tech-aws.svg'
43
43
  end
44
44
 
45
- def rocket_list
46
- asset_path 'ably_ui/core/images/rocket-list-2021.png'
45
+ def highest_performer
46
+ asset_path 'ably_ui/core/images/high-performer-2022.png'
47
47
  end
48
48
 
49
- def flexible_companies
50
- asset_path 'ably_ui/core/images/flexible-companies.png'
49
+ def highest_user_adoption
50
+ asset_path 'ably_ui/core/images/highest-user-adoption-2022.png'
51
+ end
52
+
53
+ def users_love_us
54
+ asset_path 'ably_ui/core/images/users-love-us-2022.png'
51
55
  end
52
56
  end
53
57
 
@@ -13,7 +13,7 @@ module AblyUi
13
13
  def initialize(
14
14
  url_base: AblyUi::Core::Util::DEFAULT_URL_BASE,
15
15
  image_url: nil,
16
- title: 'Talk to our technical dsfdsfdsfdsf',
16
+ title: 'Talk to our technical team',
17
17
  subtitle: "If you're having technical or account issues just get in touch.",
18
18
  live_chat_label: 'Start a live chat',
19
19
  live_chat_disabled_label: 'Live chat unavailable'
@@ -10,5 +10,15 @@
10
10
  .ui-footer-link {
11
11
  @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
12
12
  }
13
+
14
+ .ui-footer-compliance-text {
15
+ font-size: 12px;
16
+ }
17
+
18
+ @media screen {
19
+ .ui-footer-glassdoor {
20
+ display: none;
21
+ }
22
+ }
13
23
  }
14
24
 
@@ -1,18 +1,16 @@
1
1
  <footer class="bg-light-grey font-sans antialiased" data-id="footer">
2
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 md:col-span-2">
3
+ <div class="col-span-full lg: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
-
9
- <div class="grid grid-cols-4">
8
+ <div class="grid grid-cols-4 lg:col-span-2">
10
9
  <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
11
10
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
12
11
  </p>
13
12
  </div>
14
-
15
- <ul class="grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1">
13
+ <ul class="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
16
14
  <li class="p-menu-row-snug">
17
15
  <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
18
16
  </li>
@@ -30,8 +28,7 @@
30
28
  </li>
31
29
  </ul>
32
30
  </div>
33
-
34
- <div class="col-span-full sm:col-span-3 md:col-span-1">
31
+ <div class="col-span-full xs:col-span-3 lg:col-span-1">
35
32
  <h2 class="ui-footer-col-title">Ably is for</h2>
36
33
  <ul>
37
34
  <li class="p-menu-row-snug">
@@ -69,8 +66,7 @@
69
66
  </li>
70
67
  </ul>
71
68
  </div>
72
-
73
- <div class="col-span-full sm:col-span-3 md:col-span-1">
69
+ <div class="col-span-full xs:col-span-3 lg:col-span-1">
74
70
  <h2 class="ui-footer-col-title">Developers</h2>
75
71
  <ul>
76
72
  <li class="p-menu-row-snug">
@@ -97,8 +93,7 @@
97
93
  </li>
98
94
  </ul>
99
95
  </div>
100
-
101
- <div class="col-span-full sm:col-span-3 md:col-span-1">
96
+ <div class="col-span-full xs:col-span-3 lg:col-span-1">
102
97
  <h2 class="ui-footer-col-title">WHY ABLY</h2>
103
98
  <ul>
104
99
  <li class="p-menu-row-snug">
@@ -121,8 +116,7 @@
121
116
  </li>
122
117
  </ul>
123
118
  </div>
124
-
125
- <div class="col-span-full sm:col-span-3 md:col-span-1">
119
+ <div class="col-span-full xs:col-span-3 lg:col-span-1">
126
120
  <h2 class="ui-footer-col-title">ABOUT</h2>
127
121
  <ul>
128
122
  <li class="p-menu-row-snug">
@@ -141,7 +135,7 @@
141
135
  <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
142
136
  </li>
143
137
  <li class="p-menu-row-snug">
144
- <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
138
+ <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
145
139
  </li>
146
140
  <li class="p-menu-row-snug">
147
141
  <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>
@@ -149,51 +143,119 @@
149
143
  </ul>
150
144
  </div>
151
145
  </div>
152
-
153
146
  <div class="max-w-screen-xl ui-grid-px mx-auto">
154
147
  <hr class="border-t border-mid-grey" />
155
148
  </div>
156
-
157
- <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2">
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">
153
+ <div class="">
154
+ <div class="flex items-center pb-24">
155
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
156
+ <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
157
+ </a>
158
+ <a
159
+ class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
160
+ href="https://www.linkedin.com/company/ably-realtime"
161
+ title="Ably on LinkedIn"
162
+ >
163
+ <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
164
+ </a>
165
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/" title="Ably on Github">
166
+ <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
167
+ </a>
168
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord">
169
+ <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
170
+ </a>
171
+ </div>
172
+ </div>
173
+ <%# GLASSDOOR on SM and Above %>
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">
176
+ <a
177
+ href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
178
+ class="h-24 text-cool-black hover:text-icon-glassdoor"
179
+ title="Ably reviews on glassdoor"
180
+ >
181
+ <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
182
+ </a>
183
+ <div class="pl-16 text-menu3 font-light">
184
+ <strong class="block font-medium">We&apos;re hiring!</strong>
185
+ <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
186
+ Learn more at Glassdoor
187
+ </a>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ <%# GlassDoor on XS ONLY %>
193
+ <div class="xs:block sm:hidden">
194
+ <div class="border-t border-mid-grey w-full"></div>
195
+ <div class="flex py-24">
196
+ <a
197
+ class="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
198
+ href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
199
+ title="Ably reviews on glassdoor"
200
+ >
201
+ <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
202
+ </a>
203
+ <div class="text-menu3 font-light">
204
+ <strong class="block font-medium">We&apos;re hiring!</strong>
205
+ <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
206
+ Learn more at Glassdoor
207
+ </a>
208
+ </div>
209
+ </div>
210
+ </div>
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: "w-96 h-96") %>
214
+ <%= image_tag(users_love_us, alt: "Users Love Us", class: "w-96 h-96") %>
215
+ <%= image_tag(highest_performer, alt: "High Performer 2022", class: "w-96 h-96") %>
216
+ </div>
217
+ </div>
218
+ <div class="max-w-screen-xl ui-grid-px mx-auto">
219
+ <hr class="border-t border-mid-grey" />
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 ">
158
222
  <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
159
- <div class="inline-flex">
223
+ <div class="pl-16 ">
160
224
  <%= link_to 'Cookies', abs_url("/privacy"), class: "ui-footer-link pr-24" %>
161
225
  <%= link_to 'Legals', abs_url("/legals"), class: "ui-footer-link pr-24" %>
162
226
  <%= link_to 'Data Protection', abs_url("/data-protection"), class: "ui-footer-link pr-24" %>
163
227
  <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
164
228
  </div>
165
-
166
- <div class="pt-32 flex items-center">
167
- <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime">
168
- <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
169
- </a>
170
- <a class="h-24 pr-24 text-cool-black hover:text-icon-linkedin" href="https://www.linkedin.com/company/ably-realtime">
171
- <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
172
- </a>
173
- <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
174
- <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
175
- </a>
176
- <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5">
177
- <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
178
- </a>
179
- <div class="border-l border-mid-grey h-40"></div>
180
- <a
181
- class="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
182
- href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
183
- >
184
- <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
185
- </a>
186
- <div class="pl-16 text-menu3 font-light">
187
- <strong class="block font-medium">We&apos;re hiring!</strong>
188
- <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">Learn more</a>
189
- at Glassdoor
229
+ </div>
230
+ <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
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")) %>
233
+ <div>
234
+ <p class="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
235
+ <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
236
+ </div>
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")) %>
240
+ <div>
241
+ <p class="ui-footer-compliance-text font-medium">HIPAA</p>
242
+ <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
243
+ </div>
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")) %>
247
+ <div>
248
+ <p class="ui-footer-compliance-text font-medium">EU GDPR</p>
249
+ <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
250
+ </div>
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")) %>
254
+ <div>
255
+ <p class="ui-footer-compliance-text font-medium">256-bit AES</p>
256
+ <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
190
257
  </div>
191
258
  </div>
192
- </div>
193
-
194
- <div class="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto">
195
- <%= image_tag(rocket_list, alt: "Rocket List 2021", class: "mr-24 w-96 h-96") %>
196
- <%= image_tag(flexible_companies, alt: "Flexible Companies 2021", class: "w-96 h-96") %>
197
259
  </div>
198
260
  </div>
199
261
  </footer>
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "panels": [
32
32
  { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
33
- { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
33
+ { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
34
34
  { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
35
35
  { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
36
36
  ]
@@ -36,8 +36,8 @@ module AblyUi
36
36
  class: 'AblyUi::Core::MeganavContentPlatform'
37
37
  },
38
38
  {
39
- label: 'Use Cases & Solutions',
40
- short_label: 'Use Cases',
39
+ label: 'Solutions',
40
+ short_label: 'Solutions',
41
41
  id: 'use-cases-panel',
42
42
  class: 'AblyUi::Core::MeganavContentUseCases'
43
43
  },
@@ -16,20 +16,20 @@
16
16
  <% end %>
17
17
  </li>
18
18
  <li>
19
- <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
20
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
19
+ <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
20
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
21
21
  <div class="flex flex-col justify-center">
22
- <p class="ui-meganav-media-heading">Integrations</p>
23
- <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
22
+ <p class="ui-meganav-media-heading">Quickstart guides</p>
23
+ <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
24
24
  </div>
25
25
  <% end %>
26
26
  </li>
27
27
  <li>
28
- <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
29
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
28
+ <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
29
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
30
30
  <div class="flex flex-col justify-center">
31
- <p class="ui-meganav-media-heading">Quickstart guides</p>
32
- <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
31
+ <p class="ui-meganav-media-heading">Integrations</p>
32
+ <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
33
33
  </div>
34
34
  <% end %>
35
35
  </li>
@@ -1,3 +1,3 @@
1
1
  module AblyUi
2
- VERSION = '8.7.0.dev.b870220'
2
+ VERSION = '8.7.0.dev.98edac1'
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ably-ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 8.7.0.dev.b870220
4
+ version: 8.7.0.dev.98edac1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dominik Piatek
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2022-11-28 00:00:00.000000000 Z
13
+ date: 2022-12-28 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component
@@ -129,10 +129,13 @@ files:
129
129
  - lib/ably_ui/core/images/cust-photo-split-pato-echague.jpg
130
130
  - lib/ably_ui/core/images/cust-photo-vitac-joe-antonio.jpg
131
131
  - lib/ably_ui/core/images/flexible-companies.png
132
+ - lib/ably_ui/core/images/high-performer-2022.png
133
+ - lib/ably_ui/core/images/highest-user-adoption-2022.png
132
134
  - lib/ably_ui/core/images/icon-tech-aws.svg
133
135
  - lib/ably_ui/core/images/rocket-list-2021.png
134
136
  - lib/ably_ui/core/images/scale-motif-open-empathetic.svg
135
137
  - lib/ably_ui/core/images/technical-support-01-800x533.jpg
138
+ - lib/ably_ui/core/images/users-love-us-2022.png
136
139
  - lib/ably_ui/core/loader/component.js
137
140
  - lib/ably_ui/core/loader/loader.html.erb
138
141
  - lib/ably_ui/core/loader/loader.rb