ably-ui 11.7.1 → 12.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/README.md +7 -7
  4. data/lib/ably_ui/core/code/component.css +2 -0
  5. data/lib/ably_ui/core/contact_footer/contact_footer.html.erb +8 -8
  6. data/lib/ably_ui/core/feature_footer/feature_footer.html.erb +6 -6
  7. data/lib/ably_ui/core/featured_link/component.js +1 -1
  8. data/lib/ably_ui/core/featured_link/featured_link.html.erb +14 -5
  9. data/lib/ably_ui/core/featured_link/featured_link.rb +3 -1
  10. data/lib/ably_ui/core/flash/component.css +0 -4
  11. data/lib/ably_ui/core/fonts/jetBrains-mono.css +3 -0
  12. data/lib/ably_ui/core/fonts/manrope.css +3 -0
  13. data/lib/ably_ui/core/footer/component.css +3 -3
  14. data/lib/ably_ui/core/footer/footer.html.erb +13 -13
  15. data/lib/ably_ui/core/meganav/component.css +6 -6
  16. data/lib/ably_ui/core/meganav_content_products/meganav_content_products.html.erb +1 -1
  17. data/lib/ably_ui/core/notice/component.js +1 -1
  18. data/lib/ably_ui/core/notice/notice.html.erb +3 -3
  19. data/lib/ably_ui/core/showcase/showcase.html.erb +7 -7
  20. data/lib/ably_ui/core/styles.css +226 -116
  21. data/lib/ably_ui/core/uptime/component.css +1 -1
  22. data/lib/ably_ui/version.rb +1 -1
  23. metadata +4 -3
  24. data/lib/ably_ui/core/featured_link/component.css +0 -16
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2afa7302e5340d5635d86b73c4902271191e9da6bd9fd22db0ed876cab957636
4
- data.tar.gz: dd26ea7b43f4b72375f9ba2ce831094bd66286a13d4d0747d48182e9a75afd62
3
+ metadata.gz: cca398ff13d7edf4e5ced9f8be01e72c3d8ce595d5ae893683a6c435423f94d0
4
+ data.tar.gz: 6db6d0fc760d106fef80f4afb7034d529c66aca125c4193edcf6baf30c94f651
5
5
  SHA512:
6
- metadata.gz: b36a930eafd6c384b55e60fa99328ffdbbe60200a83d5b7fc5589401040e5790d43b3cfc06557bd9a6b056fbfc4b256c955c39e258be746175b6e022bca35209
7
- data.tar.gz: 2f03873dfab2ad7de45d5783b1e426563a55f52ae4fe7aa97f0c66fe5565d7a8191a816b345b3156e562a75c58b04272dd1ecc6789ce4a5b448045cd5b794f78
6
+ metadata.gz: 9084f4d99ee95748e534ab9d080cb372a45a2e6d394b8d0c5c06e127d883654e896e490b01af09c446a04157d400e124214272f722dd4172d94f576ea3d32fa1
7
+ data.tar.gz: 432b99cc983d5ef901ea4f124e509af19993b37107eac4b2ccbe54491493325afc1ce1be69d13d80ed3ea66fd205e47c5ad2f89bdca7425738571124d8d95214
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- ably-ui (8.7.0.dev.827e917)
4
+ ably-ui (11.7.1.dev.2e09628)
5
5
  view_component (>= 2.33, < 2.50)
6
6
 
7
7
  GEM
data/README.md CHANGED
@@ -75,12 +75,12 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
75
75
  1. Add AblyUI to your project
76
76
  2. Add TailwindCSS to your project
77
77
  1. By project type:
78
- 1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
79
- 2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
80
- 1. Add postCSS import with `npm install postcss-import`
81
- 1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
82
- 2. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
83
- 3. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
78
+ 1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
79
+ 2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
80
+ 1. Add postCSS import with `npm install postcss-import`
81
+ 1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
82
+ 1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
83
+ 1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
84
84
  3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
85
85
  4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
86
86
 
@@ -233,7 +233,7 @@ For `npm`:
233
233
  ```bash
234
234
  # in the root directory
235
235
  yarn link
236
- # in the the "preview" directory
236
+ # in the "preview" directory
237
237
  yarn link @ably/ui
238
238
  ```
239
239
 
data/lib/ably_ui/core/code/component.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @layer base {
2
2
  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
3
+ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
4
+ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
3
5
  }
4
6
 
5
7
  @layer components {
data/lib/ably_ui/core/contact_footer/contact_footer.html.erb CHANGED
@@ -3,8 +3,8 @@
3
3
  <div class="ui-contact-footer-box">
4
4
  <%= render(AblyUi::Core::Icon.new(name: "icon-display-live-chat", size: "3rem", additional_css: "block mb-16")) %>
5
5
  <div>
6
- <div class="text-h3 mb-24">Live Chat</div>
7
- <p class="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
6
+ <div class="ui-text-h3 mb-24">Live Chat</div>
7
+ <p class="ui-text-p1">Reach out team of experts over chat powered by Ably.</p>
8
8
  </div>
9
9
  <%= tag.button type: "button", class: "ui-btn-secondary self-start mt-16", data: { id: "open-chat-widget", enabled_label: "Start a live chat", disabled_label: "Live chat unavailable" }, disabled: true do %>
10
10
  Live chat unavailable
@@ -13,18 +13,18 @@
13
13
  <div class="ui-contact-footer-box">
14
14
  <%= render(AblyUi::Core::Icon.new(name: "icon-display-call-mobile", size: "3rem", additional_css: "block mb-16")) %>
15
15
  <div class="flex-grow">
16
- <div class="text-h3 mb-24">Call us</div>
17
- <p class="text-p1 font-light">
18
- <span class="block"><strong class="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free) </span>
19
- <span class="block"><strong class="text-p1 font-medium">+44 20 3318 4689</strong> (UK) </span>
16
+ <div class="ui-text-h3 mb-24">Call us</div>
17
+ <p class="ui-text-p1">
18
+ <span class="block"><strong class="font-bold">+1 877 434 5287</strong> (USA, toll free) </span>
19
+ <span class="block"><strong class="font-bold">+44 20 3318 4689</strong> (UK) </span>
20
20
  </p>
21
21
  </div>
22
22
  </div>
23
23
  <div class="ui-contact-footer-box">
24
24
  <%= render(AblyUi::Core::Icon.new(name: "icon-display-tech-account-comms", size: "3rem", additional_css: "block mb-16")) %>
25
25
  <div>
26
- <div class="text-h3 mb-24">Technical and account support</div>
27
- <p class="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
26
+ <div class="ui-text-h3 mb-24">Technical and account support</div>
27
+ <p class="ui-text-p1">We&apos;re standing by to help with any questions or code.</p>
28
28
  </div>
29
29
  <%= link_to 'Get support now', abs_url("/support"), class: "ui-btn-secondary self-start p-btn mt-16" %>
30
30
  </div>
data/lib/ably_ui/core/feature_footer/feature_footer.html.erb CHANGED
@@ -6,14 +6,14 @@
6
6
  <div class="p-24 sm:p-32 flex-1 h-full">
7
7
  <div class="flex flex-col h-full space-between">
8
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>
9
+ <div class="ui-text-h3 text-white mb-24 flex-1"><%= @title %> </div>
10
+ <p class="ui-text-p1 text-white"><%= @subtitle %></p>
11
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
12
  <%= live_chat_disabled_label %>
13
13
  <% end %>
14
14
  </span>
15
15
  <span class="flex-0 mt-24 md:mt-0">
16
- <p class="text-p1 font-light">
16
+ <p class="ui-text-p1 text-white">
17
17
  Don’t want to chat?
18
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
19
  </p>
@@ -24,9 +24,9 @@
24
24
  <div class="bg-white rounded-lg p-24 sm:p-32 w-auto">
25
25
  <div class="flex flex-col h-full space-between">
26
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">
27
+ <div class="ui-text-h3 mb-24">Try our APIs for free</div>
28
+ <p class="ui-text-p1 mb-16">Our free plan includes</p>
29
+ <ul class="relative ml-24 ui-text-p1">
30
30
  <li>
31
31
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
32
32
  6m messages per month
data/lib/ably_ui/core/featured_link/component.js CHANGED
@@ -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.FeaturedLink=t())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
1
+ !function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=o())}(this,(()=>({}.default)));
data/lib/ably_ui/core/featured_link/featured_link.html.erb CHANGED
@@ -1,6 +1,15 @@
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")) %>
1
+ <%= link_to(@url, class: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-#{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
2
+ <% if @reverse %>
3
+ <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
4
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
5
+ color: @icon_color,
6
+ additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
7
+ <%= content -%>
8
+ <% else %>
9
+ <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
10
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
11
+ color: @icon_color,
12
+ additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
13
+ <% end %>
14
+
6
15
  <% end %>
data/lib/ably_ui/core/featured_link/featured_link.rb CHANGED
@@ -3,15 +3,17 @@ module AblyUi
3
3
  class FeaturedLink < ViewComponent::Base
4
4
  def initialize(
5
5
  url:,
6
- text_size: 'text-menu3',
6
+ text_size: 'text-p2',
7
7
  icon_color: 'text-cool-black',
8
8
  flush: false,
9
+ reverse: false,
9
10
  additional_css: ''
10
11
  )
11
12
  @url = url
12
13
  @text_size = text_size
13
14
  @icon_color = icon_color
14
15
  @flush = flush
16
+ @reverse = reverse
15
17
  @additional_css = additional_css
16
18
  end
17
19
  end
data/lib/ably_ui/core/flash/component.css CHANGED
@@ -13,10 +13,6 @@
13
13
  transform: translateY(-200%) rotateX(-90deg);
14
14
  }
15
15
 
16
- .ui-flash-text {
17
- @apply mr-16 text-p1;
18
- }
19
-
20
16
  /* dynamic content inside flash, can't add classes */
21
17
  .ui-flash-text a {
22
18
  @apply underline;
data/lib/ably_ui/core/fonts/jetBrains-mono.css ADDED
@@ -0,0 +1,3 @@
1
+ @layer base {
2
+ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
3
+ }
data/lib/ably_ui/core/fonts/manrope.css ADDED
@@ -0,0 +1,3 @@
1
+ @layer base {
2
+ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
3
+ }
data/lib/ably_ui/core/footer/component.css CHANGED
@@ -1,14 +1,14 @@
1
1
  @layer components {
2
2
  .ui-footer-col-title {
3
- @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
3
+ @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
4
4
  }
5
5
 
6
6
  .ui-footer-menu-row-link {
7
- @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
7
+ @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
8
8
  }
9
9
 
10
10
  .ui-footer-link {
11
- @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
12
12
  }
13
13
 
14
14
  .ui-footer-compliance-text {
data/lib/ably_ui/core/footer/footer.html.erb CHANGED
@@ -1,12 +1,12 @@
1
- <footer class="bg-light-grey font-sans antialiased" data-id="footer">
1
+ <footer class="bg-light-grey font-sans antialiased leading-normal" data-id="footer">
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
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
- <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
6
+ <h2 class="ui-text-overline2 col-span-full font-mono uppercase tracking-widen-0.16">The Ably Platform</h2>
7
7
  </div>
8
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">
9
+ <p class="ui-text-p3 font-bold py-16 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>
@@ -174,7 +174,7 @@
174
174
  >
175
175
  <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
176
176
  </a>
177
- <div class="pl-16 text-menu3 font-light">
177
+ <div class="pl-16 text-menu3 font-sans font-medium">
178
178
  <strong class="block font-medium">We&apos;re hiring!</strong>
179
179
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
180
180
  Learn more at Glassdoor
@@ -194,7 +194,7 @@
194
194
  >
195
195
  <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
196
196
  </a>
197
- <div class="text-menu3 font-light">
197
+ <div class="text-menu3 font-sans font-medium">
198
198
  <strong class="block font-medium">We&apos;re hiring!</strong>
199
199
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
200
200
  Learn more at Glassdoor
@@ -226,29 +226,29 @@
226
226
  <div class="flex mr-24">
227
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
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>
229
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
230
+ <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
231
231
  </div>
232
232
  </div>
233
233
  <div class="flex mr-24 md:col-start-2">
234
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
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>
236
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
237
+ <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
238
238
  </div>
239
239
  </div>
240
240
  <div class="flex mr-24 md:col-start-3">
241
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
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>
243
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
244
+ <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
245
245
  </div>
246
246
  </div>
247
247
  <div class="flex mr-24 md:col-start-4">
248
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
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>
250
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
251
+ <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
252
252
  </div>
253
253
  </div>
254
254
  </div>
data/lib/ably_ui/core/meganav/component.css CHANGED
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .ui-meganav-link {
54
- @apply text-menu2 font-medium block;
54
+ @apply text-menu2 font-bold block font-sans;
55
55
  @apply mr-12 lg:mr-24 px-0 py-20;
56
56
  @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
57
57
  @apply transition-colors;
@@ -63,13 +63,13 @@
63
63
 
64
64
  .ui-meganav-mobile-link {
65
65
  @apply p-menu-row relative -left-8 w-extend-8;
66
- @apply text-menu2 font-medium block text-cool-black text-left;
66
+ @apply text-menu2 font-bold font-mono font-medium block text-cool-black text-left;
67
67
  @apply flex items-center;
68
68
  @apply focus:text-gui-focus focus:outline-none;
69
69
  }
70
70
 
71
71
  .ui-meganav-account-link {
72
- @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
72
+ @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-mono;
73
73
  }
74
74
 
75
75
  .ui-meganav-content {
@@ -97,15 +97,15 @@
97
97
  }
98
98
 
99
99
  .ui-meganav-media-heading {
100
- @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
100
+ @apply text-menu3 text-cool-black font-bold font-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
101
101
  }
102
102
 
103
103
  .ui-meganav-media-copy {
104
- @apply text-p3 text-dark-grey font-light;
104
+ @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
105
105
  }
106
106
 
107
107
  .ui-meganav-overline {
108
- @apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
108
+ @apply text-overline2 text-cool-black uppercase font-medium font-mono tracking-widen-0.16 p-overline;
109
109
  }
110
110
 
111
111
  .ui-meganav-hr {
data/lib/ably_ui/core/meganav_content_products/meganav_content_products.html.erb CHANGED
@@ -7,7 +7,7 @@
7
7
  <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
8
8
  </div>
9
9
 
10
- <p class="text-p2 font-medium text-cool-black mb-24" style="max-width: 330px">
10
+ <p class="ui-text-p2 font-bold mb-24" style="max-width: 330px">
11
11
  Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
12
12
  realtime, and lets you focus on your code.
13
13
  </p>
data/lib/ably_ui/core/notice/component.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):"function"==typeof define&&define.amd?define([,,,,,],t):"object"==typeof exports?exports.AblyUi=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Notice=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,((e,t,r,n,o,i)=>(()=>{"use strict";var c={710:t=>{t.exports=e},4360:e=>{e.exports=t},7326:e=>{e.exports=r},6073:e=>{e.exports=n},5225:e=>{e.exports=o},5293:e=>{e.exports=i}},a={};function u(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return c[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var l={};return(()=>{u.d(l,{default:()=>R});var e=u(4360),t=u.n(e),r=u(7326),n=u.n(r),o=u(5225),i=u.n(o),c=u(710),a=u.n(c),s=u(6073),f=u.n(s);let p=(e=21)=>{let t="",r=e;for(;r--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[64*Math.random()|0];return t};u(5293);var d=["name","size","color","additionalCSS"];function y(){return y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},y.apply(this,arguments)}var m=function(e){var t=e.name,r=e.size,n=void 0===r?"0.75rem":r,o=e.color,c=void 0===o?"":o,a=e.additionalCSS,u=void 0===a?"":a,l=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,d);return i().createElement("svg",y({className:"".concat(c," ").concat(u),style:{width:n,height:n}},l),i().createElement("use",{xlinkHref:"#sprite-".concat(t)}))};m.propTypes={name:f().string.isRequired,size:f().string,color:f().string,additionalCSS:f().string};const b=m;function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},v.apply(this,arguments)}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=r){var n,o,i=[],c=!0,a=!1;try{for(r=r.call(e);!(c=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==r.return||r.return()}finally{if(a)throw o}}return i}}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||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.")}()}function x(e,t){if(e){if("string"==typeof e)return S(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?S(e,t):void 0}}function S(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}var E="flashes",P="ui-flashes",A={items:[]},k=(w({},E,(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:A,t=arguments.length>1?arguments[1]:void 0;if("flash/push"===t.type){var r=Array.isArray(t.payload)?t.payload:[t.payload];return{items:[].concat(j(e.items),j(r))}}return e})),{type:f().oneOf(["error","success","notice","info","alert"]),content:f().string}),q={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},T={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},C=["success","info","notice"],L=function(e){var t=e.id,r=e.type,n=e.content,c=e.removeFlash,u=(0,o.useRef)(null),l=O((0,o.useState)(!1),2),s=l[0],f=l[1],p=O((0,o.useState)(0),2),d=p[0],y=p[1],m=O((0,o.useState)(!1),2),v=m[0],h=m[1],g=function(){u.current&&y(u.current.getBoundingClientRect().height),f(!0),setTimeout((function(){c(t)}),100)};(0,o.useEffect)((function(){return h(!0)}),[]),function(e,t){var r=(0,o.useRef)(null);(0,o.useEffect)((function(){return C.includes(e)&&(r.current=setTimeout((function(){t()}),8e3)),function(){r.current&&clearTimeout(r.current)}}),[])}(r,g);var w,j=v&&!s;w=d&&!s?{height:"".concat(d,"px")}:s?{height:0,marginTop:0,zIndex:-1}:{};var x=a().sanitize(n,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]}),S={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"},E={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return i().createElement("div",{className:"ui-flash-message ui-grid-px ".concat(j?"ui-flash-message-enter":""),style:w,ref:u,"data-id":"ui-flash"},i().createElement("div",{className:"".concat(q[r]," p-32 flex align-center rounded shadow-container-subtle")},S[r]&&i().createElement(b,{name:S[r],color:E[r],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),i().createElement("p",{className:"ui-flash-text ".concat(T[r]),dangerouslySetInnerHTML:{__html:x}}),i().createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:g},i().createElement(b,{name:"icon-gui-close",color:E[r],size:"1.5rem",additionalCSS:"transition-colors"}))))};L.propTypes=g({},k);var z=function(e){var t=e.flashes,r=O((0,o.useState)([]),2),n=r[0],c=r[1],a=function(e){return c((function(t){return t.filter((function(t){return t.id!==e}))}))};return(0,o.useEffect)((function(){c((function(e){return[].concat(j(e),j(((null==t?void 0:t.items)||[]).map((function(e){return g(g({},e),{},{id:p(),removed:!1})}))))}))}),[t]),i().createElement("div",{className:"ui-flash","data-id":P},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(L,v({removeFlash:a,key:e.id},e))})))};z.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(k))})};function D(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function I(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}f().arrayOf(f().arrayOf(f().string));var N=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(P);t&&(t.style.marginTop=e?"4rem":null)},U=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},_=function(e){e.style.maxHeight=0,e.style.overflow="hidden",N(!1)},M=function(e){e.style.maxHeight=null,e.style.overflow=null,N(!0)};const R=function(e){var r=e.bannerContainer,o=e.cookieId,i=e.noticeId,c=e.options;if("undefined"==typeof window)return function(){};if(!r)return console.warn("A Notice component was initited but no notice container was found."),function(){};if(function(e,r){return(t().get(e)||"").includes(r)}(o,i))return function(){};U(r),M(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?D(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):D(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({collapse:!0},c),u=a.collapse?function(e){window.scrollY>5&&_(e);var t=n()((function(){window.scrollY>5?_(e):e.style.overflow&&M(e)}),100);return document.addEventListener("scroll",t),function(){return document.removeEventListener("scroll",t)}}(r):function(){},l=function(e,r,n,o){var i=e.querySelector("button");if(!i)return function(){};var c=function(){r&&n&&function(e,r){var n=t().get(e)||"";t().set(e,"".concat(n.replace("".concat(r,","),"")+r,","),{expires:90})}(r,n),_(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){U(e)}),100);return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}(r);return function(){[l,u,s].forEach((function(e){return e()}))}}})(),l.default})()));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):"function"==typeof define&&define.amd?define([,,,,,],t):"object"==typeof exports?exports.AblyUi=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Notice=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,((e,t,r,n,o,i)=>(()=>{"use strict";var c={710:t=>{t.exports=e},4360:e=>{e.exports=t},7326:e=>{e.exports=r},6073:e=>{e.exports=n},5225:e=>{e.exports=o},5293:e=>{e.exports=i}},a={};function u(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return c[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var l={};return(()=>{u.d(l,{default:()=>R});var e=u(4360),t=u.n(e),r=u(7326),n=u.n(r),o=u(5225),i=u.n(o),c=u(710),a=u.n(c),s=u(6073),f=u.n(s);let p=(e=21)=>{let t="",r=e;for(;r--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[64*Math.random()|0];return t};u(5293);var d=["name","size","color","additionalCSS"];function y(){return y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},y.apply(this,arguments)}var m=function(e){var t=e.name,r=e.size,n=void 0===r?"0.75rem":r,o=e.color,c=void 0===o?"":o,a=e.additionalCSS,u=void 0===a?"":a,l=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,d);return i().createElement("svg",y({className:"".concat(c," ").concat(u),style:{width:n,height:n}},l),i().createElement("use",{xlinkHref:"#sprite-".concat(t)}))};m.propTypes={name:f().string.isRequired,size:f().string,color:f().string,additionalCSS:f().string};const b=m;function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},v.apply(this,arguments)}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=r){var n,o,i=[],c=!0,a=!1;try{for(r=r.call(e);!(c=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==r.return||r.return()}finally{if(a)throw o}}return i}}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||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.")}()}function x(e,t){if(e){if("string"==typeof e)return S(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?S(e,t):void 0}}function S(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}var E="flashes",P="ui-flashes",A={items:[]},k=(w({},E,(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:A,t=arguments.length>1?arguments[1]:void 0;if("flash/push"===t.type){var r=Array.isArray(t.payload)?t.payload:[t.payload];return{items:[].concat(j(e.items),j(r))}}return e})),{type:f().oneOf(["error","success","notice","info","alert"]),content:f().string}),q={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},T={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},C=["success","info","notice"],L=function(e){var t=e.id,r=e.type,n=e.content,c=e.removeFlash,u=(0,o.useRef)(null),l=O((0,o.useState)(!1),2),s=l[0],f=l[1],p=O((0,o.useState)(0),2),d=p[0],y=p[1],m=O((0,o.useState)(!1),2),v=m[0],h=m[1],g=function(){u.current&&y(u.current.getBoundingClientRect().height),f(!0),setTimeout((function(){c(t)}),100)};(0,o.useEffect)((function(){return h(!0)}),[]),function(e,t){var r=(0,o.useRef)(null);(0,o.useEffect)((function(){return C.includes(e)&&(r.current=setTimeout((function(){t()}),8e3)),function(){r.current&&clearTimeout(r.current)}}),[])}(r,g);var w,j=v&&!s;w=d&&!s?{height:"".concat(d,"px")}:s?{height:0,marginTop:0,zIndex:-1}:{};var x=a().sanitize(n,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]}),S={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"},E={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return i().createElement("div",{className:"ui-flash-message ui-grid-px ".concat(j?"ui-flash-message-enter":""),style:w,ref:u,"data-id":"ui-flash"},i().createElement("div",{className:"".concat(q[r]," p-32 flex align-center rounded shadow-container-subtle")},S[r]&&i().createElement(b,{name:S[r],color:E[r],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),i().createElement("p",{className:"ui-text-p1 mr-16 ".concat(T[r]),dangerouslySetInnerHTML:{__html:x}}),i().createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:g},i().createElement(b,{name:"icon-gui-close",color:E[r],size:"1.5rem",additionalCSS:"transition-colors"}))))};L.propTypes=g({},k);var z=function(e){var t=e.flashes,r=O((0,o.useState)([]),2),n=r[0],c=r[1],a=function(e){return c((function(t){return t.filter((function(t){return t.id!==e}))}))};return(0,o.useEffect)((function(){c((function(e){return[].concat(j(e),j(((null==t?void 0:t.items)||[]).map((function(e){return g(g({},e),{},{id:p(),removed:!1})}))))}))}),[t]),i().createElement("div",{className:"ui-flash","data-id":P},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(L,v({removeFlash:a,key:e.id},e))})))};z.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(k))})};function D(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function I(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}f().arrayOf(f().arrayOf(f().string));var N=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(P);t&&(t.style.marginTop=e?"4rem":null)},U=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},_=function(e){e.style.maxHeight=0,e.style.overflow="hidden",N(!1)},M=function(e){e.style.maxHeight=null,e.style.overflow=null,N(!0)};const R=function(e){var r=e.bannerContainer,o=e.cookieId,i=e.noticeId,c=e.options;if("undefined"==typeof window)return function(){};if(!r)return console.warn("A Notice component was initited but no notice container was found."),function(){};if(function(e,r){return(t().get(e)||"").includes(r)}(o,i))return function(){};U(r),M(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?D(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):D(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({collapse:!0},c),u=a.collapse?function(e){window.scrollY>5&&_(e);var t=n()((function(){window.scrollY>5?_(e):e.style.overflow&&M(e)}),100);return document.addEventListener("scroll",t),function(){return document.removeEventListener("scroll",t)}}(r):function(){},l=function(e,r,n,o){var i=e.querySelector("button");if(!i)return function(){};var c=function(){r&&n&&function(e,r){var n=t().get(e)||"";t().set(e,"".concat(n.replace("".concat(r,","),"")+r,","),{expires:90})}(r,n),_(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){U(e)}),100);return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}(r);return function(){[l,u,s].forEach((function(e){return e()}))}}})(),l.default})()));
data/lib/ably_ui/core/notice/notice.html.erb CHANGED
@@ -1,15 +1,15 @@
1
1
  <%# Note the style attribute is used for entry animation %>
2
2
  <%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
3
3
  <div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
4
- <%= content_wrapper class: "font-light w-full pr-8 text-p3 self-center" do %>
5
- <strong class="font-medium whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
4
+ <%= content_wrapper class: "w-full pr-8 ui-text-p3 self-center" do %>
5
+ <strong class="font-bold whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
6
6
  <span class="pr-4"><%= @contents[:body_text] %></span>
7
7
  <span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
8
8
  <% end %>
9
9
 
10
10
  <% if close_btn? %>
11
11
  <%= button_tag type: 'button', class: 'h-20 w-20 mt-4 ml-auto border-none bg-none self-baseline' do %>
12
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.25rem", color: "text-white")) %>
12
+ <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.25rem", color: "text-cool-black")) %>
13
13
  <% end %>
14
14
  <% end %>
15
15
  </div>
data/lib/ably_ui/core/showcase/showcase.html.erb CHANGED
@@ -36,15 +36,15 @@
36
36
  <% if company[:layout] == "quotes" %>
37
37
  <%= render(AblyUi::Core::Icon.new(name: "quote", size: "1.25rem", color: "text-cool-black")) %>
38
38
 
39
- <p class="text-quote font-light mb-24"><%= company[:quote] %></p>
39
+ <p class="ui-text-quote mb-24"><%= company[:quote] %></p>
40
40
 
41
41
  <div class="flex items-center">
42
42
  <div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
43
43
  <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 filter-grayscale" %>
44
44
  </div>
45
45
  <div>
46
- <p class="text-p2 font-medium"><%= company[:author][:name] %></p>
47
- <p class="text-p3 font-light"><%= company[:author][:title] %></p>
46
+ <p class="ui-text-p2"><%= company[:author][:name] %></p>
47
+ <p class="ui-text-p3"><%= company[:author][:title] %></p>
48
48
  </div>
49
49
  </div>
50
50
  <% end %>
@@ -54,16 +54,16 @@
54
54
  <% company[:columns].each_with_index do |col, n| %>
55
55
  <% if company[:columns].last == col %>
56
56
  <div class="flex-1 mt-40 sm:mt-0 <%= col[:classname] %>" data-id="casestudy-column">
57
- <p class="text-h4 pb-24"><%= col[:heading] %></p>
58
- <p class="text-p1 font-light"><%= col[:text] %></p>
57
+ <p class="ui-text-h4 pb-24"><%= col[:heading] %></p>
58
+ <p class="ui-text-p1"><%= col[:text] %></p>
59
59
  <%- if col[:button] %>
60
60
  <a class="ui-btn self-start p-btn mt-24" href="<%= col[:button][:href] %>"><%= col[:button][:label] %></a>
61
61
  <% end %>
62
62
  </div>
63
63
  <% else %>
64
64
  <div class="flex-1 mt-40 sm:mt-0 mr-24 sm:mr-32 xl:mr-64 <%= col[:classname] %>" data-id="casestudy-column">
65
- <p class="text-title-xl font-extra-large"><%= col[:heading] %></p>
66
- <p class="text-p1 font-light mb-0 sm:mb-32"><%= col[:text] %></p>
65
+ <p class="ui-text-title-xl"><%= col[:heading] %></p>
66
+ <p class="ui-text-p1 mb-0 sm:mb-32"><%= col[:text] %></p>
67
67
  </div>
68
68
  <% end %>
69
69
  <% end %>
data/lib/ably_ui/core/styles.css CHANGED
@@ -1,34 +1,132 @@
1
1
  @layer base {
2
2
  :root {
3
- --color-cool-black: #03020d;
4
- --color-active-orange: #ff5416;
5
- --color-red-orange: #e40000;
6
- --color-white: #ffffff;
7
- --color-electric-cyan: #4af7ff;
8
- --color-zingy-green: #08ff13;
9
- --color-bright-red: #ff2739;
10
- --color-jazzy-pink: #ff17d2;
11
- --color-extra-light-grey: #fafafb;
12
- --color-light-grey: #f5f5f6;
13
- --color-mid-grey: #d9d9da;
14
- --color-dark-grey: #76767c;
15
- --color-charcoal-grey: #292831;
16
- --color-gui-default: #0073e6;
17
- --color-gui-hover: #0867c4;
18
- --color-gui-focus: #0073e6;
3
+ /* Neutral colors */
4
+ --color-neutral-000: #ffffff;
5
+ --color-neutral-100: #f8fafc;
6
+ --color-neutral-200: #f4f8fb;
7
+ --color-neutral-300: #edf1f7;
8
+ --color-neutral-400: #e2e7ef;
9
+ --color-neutral-500: #c6ced9;
10
+ --color-neutral-600: #adb6c2;
11
+ --color-neutral-700: #89929f;
12
+ --color-neutral-800: #667085;
13
+ --color-neutral-900: #39414e;
14
+ --color-neutral-1000: #2b303b;
15
+ --color-neutral-1100: #202531;
16
+ --color-neutral-1200: #141924;
17
+ --color-neutral-1300: #03020d;
18
+
19
+ /* Ably orange */
20
+ --color-orange-100: #fff5f1;
21
+ --color-orange-200: #ffe3d8;
22
+ --color-orange-300: #ffc4ae;
23
+ --color-orange-400: #ff9c79;
24
+ --color-orange-500: #ff723f;
25
+ --color-orange-600: #ff5416;
26
+ --color-orange-700: #ff2739;
27
+ --color-orange-800: #e40000;
28
+ --color-orange-900: #b82202;
29
+ --color-orange-1000: #751500;
30
+ --color-orange-1100: #2a0b00;
31
+
32
+ /* Secondary colours */
33
+ --color-yellow-100: #fffbef;
34
+ --color-yellow-200: #fff0ba;
35
+ --color-yellow-300: #ffe27c;
36
+ --color-yellow-400: #ffd43d;
37
+ --color-yellow-500: #f8c100;
38
+ --color-yellow-600: #e8a700;
39
+ --color-yellow-700: #ac8600;
40
+ --color-yellow-800: #654f00;
41
+ --color-yellow-900: #291c01;
42
+ --color-green-100: #f1fff1;
43
+ --color-green-200: #b8ffbb;
44
+ --color-green-300: #80ff85;
45
+ --color-green-400: #08ff13;
46
+ --color-green-500: #00e80b;
47
+ --color-green-600: #00c008;
48
+ --color-green-700: #008e06;
49
+ --color-green-800: #005303;
50
+ --color-green-900: #002a02;
51
+ --color-blue-100: #f1fbff;
52
+ --color-blue-200: #b8eaff;
53
+ --color-blue-300: #80d9ff;
54
+ --color-blue-400: #4ad4ff;
55
+ --color-blue-500: #2cc0ff;
56
+ --color-blue-600: #00a5ec;
57
+ --color-blue-700: #0284cd;
58
+ --color-blue-800: #004b75;
59
+ --color-blue-900: #001b2a;
60
+ --color-violet-100: #f7f2fe;
61
+ --color-violet-200: #d8bcfb;
62
+ --color-violet-300: #b986f8;
63
+ --color-violet-400: #9951f5;
64
+ --color-violet-500: #7a1bf2;
65
+ --color-violet-600: #5f0bc9;
66
+ --color-violet-700: #460894;
67
+ --color-violet-800: #2d055e;
68
+ --color-violet-900: #130228;
69
+ --color-pink-100: #fff1fc;
70
+ --color-pink-200: #ffb8f1;
71
+ --color-pink-300: #ff80e6;
72
+ --color-pink-400: #ff47db;
73
+ --color-pink-500: #ff17d2;
74
+ --color-pink-600: #d400ab;
75
+ --color-pink-700: #9c007e;
76
+ --color-pink-800: #630050;
77
+ --color-pink-900: #2a0022;
78
+
79
+ /* GUI colours */
80
+ /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
81
+ --color-gui-blue-default-light: #006edc;
82
+ --color-gui-blue-hover-light: #0862b9;
83
+ --color-gui-blue-active-light: #074095;
84
+ --color-gui-blue-default-dark: #4da6ff;
85
+ --color-gui-blue-hover-dark: #2894ff;
86
+ --color-gui-blue-active-dark: #0080ff;
87
+ --color-gui-blue-focus: #80b9f2;
88
+ --color-gui-unavailable: #a8a8a8;
89
+ --color-gui-success-green: #11cb24;
90
+ --color-gui-error-red: #fb0c0c;
91
+ --color-gui-focus: #80b9f2;
19
92
  --color-gui-focus-outline: #80b9f2;
20
- --color-gui-active: #074095;
21
93
  --color-gui-visited: #4887c2;
22
- --color-gui-unavailable: #a8a8a8;
23
- --color-gui-error: #fb0c0c;
24
- --color-gui-success: #11cb24;
94
+
95
+ /* Colours replaced by neutral colours */
96
+ --color-white: var(--color-neutral-000);
97
+ --color-extra-light-grey: var(--color-neutral-100);
98
+ --color-light-grey: var(--color-neutral-200);
99
+ --color-mid-grey: var(--color-neutral-500);
100
+ --color-dark-grey: var(--color-neutral-800);
101
+ --color-charcoal-grey: var(--color-neutral-1000);
102
+ --color-cool-black: var(--color-neutral-1300);
103
+
104
+ /* Colours replaced by orange colours */
105
+ --color-active-orange: var(--color-orange-600);
106
+ --color-bright-red: var(--color-orange-700);
107
+ --color-red-orange: var(--color-orange-800);
108
+
109
+ /* Colours replaced by secondary colours */
110
+ --color-electric-cyan: var(--color-blue-400);
111
+ --color-zingy-green: var(--color-green-400);
112
+ --color-jazzy-pink: var(--color-pink-500);
113
+
114
+ /* Colours replaced by GUI colours */
115
+ --color-gui-default: var(--color-gui-blue-default-light);
116
+ --color-gui-hover: var(--color-gui-blue-hover-light);
117
+ --color-gui-active: var(--color-gui-blue-active-light);
118
+ --color-gui-error: var(--color-gui-error-red);
119
+ --color-gui-success: var(--color-gui-success-green);
120
+ --color-gui-default-dark: var(--color-gui-blue-default-dark);
121
+ --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
122
+ --color-gui-active-dark: var(--color-gui-blue-active-dark);
25
123
 
26
124
  /* code syntax: theme */
27
- --syntax-black: var(--color-cool-black);
28
- --syntax-dark-grey: var(--color-dark-grey);
29
- --syntax-mid-grey: var(--color-mid-grey);
30
- --syntax-light-grey: var(--color-light-grey);
31
- --syntax-extra-light-grey: var(--color-extra-light-grey);
125
+ --syntax-black: var(--color-neutral-1300);
126
+ --syntax-dark-grey: var(--color-neutral-800);
127
+ --syntax-mid-grey: var(--color-neutral-500);
128
+ --syntax-light-grey: var(--color-neutral-200);
129
+ --syntax-extra-light-grey: var(--color-neutral-100);
32
130
  --syntax-orange: #e78c45;
33
131
  --syntax-yellow: #e7c547;
34
132
  --syntax-blue: #3490ec;
@@ -70,44 +168,51 @@
70
168
 
71
169
  --gradient-hot-pink: linear-gradient(
72
170
  80.2deg,
73
- var(--color-bright-red) 0%,
171
+ var(--color-orange-700) 0%,
74
172
  var(--color-jazzy-pink) 100%
75
173
  );
76
174
 
77
- --fs-title-xl: 4rem;
78
- --fs-title: 3.5rem;
79
- --fs-title-xs: 3rem;
80
- --fs-h1-xl: 3.5rem;
81
- --fs-h1: 3rem;
82
- --fs-h1-xs: 2.625rem;
83
- --fs-h2-xl: 2.5rem;
175
+ --fs-title-xl: 3rem;
176
+ --fs-title: 2.75rem;
177
+ --fs-title-xs: 2.5rem;
178
+ --fs-h1-xl: 2.5rem;
179
+ --fs-h1: 2.25rem;
180
+ --fs-h1-xs: 2rem;
181
+
182
+ --fs-h2-xl: 2.125rem;
84
183
  --fs-h2: 2rem;
85
- --fs-h2-xs: 1.875rem;
184
+ --fs-h2-xs: 1.75rem;
185
+
86
186
  --fs-h3: 1.5rem;
87
- --fs-h4: 1.125rem;
88
- --fs-p1: 1.125rem;
89
- --fs-p2: 1rem;
187
+ --fs-h4: 1.25rem;
188
+ --fs-h5: 1rem;
189
+
190
+ --fs-p1: 1rem;
191
+ --fs-p2: 0.938rem;
90
192
  --fs-p3: 0.875rem;
91
193
  --fs-standfirst-xl: 2.25rem;
92
194
  --fs-standfirst: 1.5rem;
93
- --fs-sub-header: 1.5rem;
94
- --fs-sub-header-xs: 1.125rem;
195
+ --fs-sub-header: 1.125rem;
196
+ --fs-sub-header-xs: 1.063rem;
95
197
  --fs-overline1: 1rem;
96
198
  --fs-overline2: 0.875rem;
97
- --fs-btn1: 1.125rem;
98
- --fs-btn2: 1rem;
199
+ --fs-btn1: 1rem;
200
+ --fs-btn2: 0.938rem;
99
201
  --fs-btn3: 0.875rem;
100
- --fs-menu1: 1.125rem;
101
- --fs-menu2: 1rem;
202
+ --fs-menu1: 1rem;
203
+ --fs-menu2: 0.938rem;
102
204
  --fs-menu3: 0.875rem;
103
- --fs-quote: 1.5rem;
104
- --fs-code: 0.875rem;
205
+ --fs-quote: 1.25rem;
206
+ --fs-code: 0.938rem;
207
+ --fs-code2: 0.813rem;
105
208
 
106
209
  --lh-dense: 1;
107
210
  --lh-tight: 1.125;
108
211
  --lh-snug: 1.15;
212
+ --lh-min-normal: 1.2;
109
213
  --lh-normal: 1.25;
110
214
  --lh-relaxed: 1.45;
215
+ --lh-extra-relaxed: 1.6;
111
216
 
112
217
  --ls-tighten-0_025: -0.025em;
113
218
  --ls-tighten-0_02: -0.02em;
@@ -115,7 +220,9 @@
115
220
  --ls-tighten-0_01: -0.01em;
116
221
  --ls-tighten-0_005: -0.005em;
117
222
  --ls-tighten-0_0025: -0.0025em;
223
+ --ls-tighten-0_0015: -0.0015em;
118
224
  --ls-widen-0_1: 0.1em;
225
+ --ls-widen-0_16: 0.16em;
119
226
  --ls-widen-0_15: 0.15em;
120
227
 
121
228
  --spacing-0: 0px;
@@ -130,6 +237,7 @@
130
237
  --spacing-20: 1.25rem;
131
238
  --spacing-24: 1.5rem;
132
239
  --spacing-32: 2rem;
240
+ --spacing-36: 2.25rem;
133
241
  --spacing-40: 2.5rem;
134
242
  --spacing-48: 3rem;
135
243
  --spacing-64: 4rem;
@@ -177,7 +285,7 @@
177
285
  }
178
286
  @layer components {
179
287
  .ui-btn {
180
- @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
288
+ @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
181
289
  @apply hover:text-white hover:bg-active-orange;
182
290
  @apply active:text-white active:bg-red-orange;
183
291
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -201,7 +309,7 @@
201
309
  background-size: 200% 100%;
202
310
  background-position: 0% 0%;
203
311
 
204
- @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
312
+ @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
205
313
  @apply focus:outline-gui-focus;
206
314
  @apply inline-flex items-center justify-center;
207
315
  }
@@ -217,7 +325,7 @@
217
325
  }
218
326
 
219
327
  .ui-btn-invert {
220
- @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
328
+ @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
221
329
  @apply hover:text-white hover:bg-active-orange;
222
330
  @apply active:text-white active:bg-red-orange;
223
331
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -227,7 +335,7 @@
227
335
  }
228
336
 
229
337
  .ui-btn-secondary {
230
- @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
338
+ @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
231
339
  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
232
340
  @apply active:border-red-orange active:bg-white;
233
341
  @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -237,7 +345,7 @@
237
345
  }
238
346
 
239
347
  .ui-btn-secondary-invert {
240
- @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
348
+ @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
241
349
  @apply hover:text-white hover:border-active-orange;
242
350
  @apply active:border-red-orange;
243
351
  @apply focus:outline-gui-focus;
@@ -322,47 +430,53 @@
322
430
  }
323
431
  @layer components {
324
432
  .ui-text-title {
325
- @apply font-sans font-medium text-cool-black;
433
+ @apply font-sans font-extrabold text-cool-black;
326
434
  @apply text-title-xs xs:text-title xl:text-title-xl;
327
- @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
435
+ @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
328
436
  }
329
437
 
330
438
  .ui-text-h1 {
331
- @apply font-sans font-medium text-cool-black;
439
+ @apply font-sans font-extrabold text-cool-black;
332
440
  @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
333
- @apply tracking-tighten-0.01;
441
+ @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
334
442
  }
335
443
 
336
444
  .ui-text-h2 {
337
- @apply font-sans font-medium text-cool-black;
445
+ @apply font-sans font-extrabold text-cool-black;
338
446
  @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
339
- @apply tracking-tighten-0.005;
447
+ @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
340
448
  }
341
449
 
342
450
  .ui-text-h3 {
343
- @apply font-sans font-medium text-cool-black;
451
+ @apply font-sans font-extrabold text-cool-black;
344
452
  @apply text-h3;
345
- @apply tracking-tighten-0.0025;
453
+ @apply tracking-tighten-0.005;
346
454
  }
347
455
 
348
456
  .ui-text-h4 {
349
- @apply font-sans font-medium text-cool-black;
457
+ @apply font-sans font-extrabold text-cool-black;
350
458
  @apply text-h4;
351
- @apply tracking-widen-0.1;
459
+ @apply tracking-tighten-0.0015;
460
+ }
461
+
462
+ .ui-text-h5 {
463
+ @apply font-sans font-extrabold text-cool-black;
464
+ @apply text-h5;
465
+ @apply tracking-tighten-0.0025;
352
466
  }
353
467
 
354
468
  .ui-text-p1 {
355
- @apply font-sans font-light text-charcoal-grey;
469
+ @apply font-sans font-medium text-charcoal-grey;
356
470
  @apply text-p1;
357
471
  }
358
472
 
359
473
  .ui-text-p2 {
360
- @apply font-sans font-light text-charcoal-grey;
474
+ @apply font-sans font-medium text-charcoal-grey;
361
475
  @apply text-p2;
362
476
  }
363
477
 
364
478
  .ui-text-p3 {
365
- @apply font-sans font-light text-charcoal-grey;
479
+ @apply font-sans font-medium text-charcoal-grey;
366
480
  @apply text-p3;
367
481
  }
368
482
 
@@ -373,60 +487,70 @@
373
487
  }
374
488
 
375
489
  .ui-text-quote {
376
- @apply font-sans font-light text-cool-black;
377
- @apply text-quote;
378
- @apply tracking-tighten-0.025;
490
+ @apply font-sans font-normal text-cool-black;
491
+ @apply text-quote leading-normal;
492
+ @apply tracking-tighten-0.0015;
379
493
  }
380
494
 
381
495
  .ui-text-sub-header {
382
- @apply font-sans font-light text-dark-grey;
383
- @apply text-sub-header-xs xs:text-sub-header;
384
- @apply tracking-tighten-0.025;
496
+ @apply font-sans font-semibold text-neutral-800;
497
+ @apply text-sub-header-xs xs:text-sub-header leading-normal;
385
498
  }
386
499
 
387
500
  .ui-text-overline1 {
388
- @apply font-sans font-medium text-dark-grey uppercase;
389
- @apply text-overline1;
390
- @apply tracking-widen-0.15;
501
+ @apply font-mono font-medium text-active-orange uppercase;
502
+ @apply text-overline1 leading-normal;
503
+ @apply tracking-widen-0.16;
391
504
  }
392
505
 
393
506
  .ui-text-overline2 {
394
- @apply font-sans font-medium text-dark-grey uppercase;
395
- @apply text-overline2;
396
- @apply tracking-widen-0.1;
507
+ @apply font-mono font-medium text-active-orange uppercase;
508
+ @apply text-overline2 leading-normal;
509
+ @apply tracking-widen-0.16;
397
510
  }
398
511
 
399
512
  .ui-text-menu1 {
400
- @apply font-sans font-light text-cool-black;
401
- @apply text-menu1;
513
+ @apply font-sans font-medium text-cool-black;
514
+ @apply text-menu1 leading-snug;
402
515
  }
403
516
 
404
517
  .ui-text-menu2 {
405
- @apply font-sans font-light text-cool-black;
406
- @apply text-menu2;
518
+ @apply font-sans font-medium text-cool-black;
519
+ @apply text-menu2 leading-snug;
407
520
  }
408
521
 
409
522
  .ui-text-menu3 {
410
- @apply font-sans font-light text-cool-black;
411
- @apply text-menu3;
523
+ @apply font-sans font-medium text-cool-black;
524
+ @apply text-menu3 leading-snug;
412
525
  }
413
526
 
414
527
  .ui-text-code {
415
- @apply font-mono font-semibold text-code;
528
+ @apply font-mono font-normal text-code;
529
+ }
530
+
531
+ .ui-text-code2 {
532
+ @apply font-mono font-normal text-code2;
416
533
  }
417
534
 
418
535
  .ui-text-code-inline {
419
- @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
536
+ @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
420
537
  }
421
538
 
422
539
  .ui-unordered-list {
423
- @apply text-p1 font-light text-cool-black;
424
- @apply list-disc ml-32 mb-24;
540
+ @apply text-p1 font-medium text-charcoal-grey;
541
+ @apply ml-32 my-16;
542
+ @apply list-disc;
425
543
  }
426
544
 
427
545
  .ui-ordered-list {
428
- @apply text-p1 font-light text-cool-black;
429
- @apply ml-32 mb-24 list-decimal;
546
+ @apply text-p1 font-medium text-charcoal-grey;
547
+ @apply ml-32 my-16;
548
+ @apply list-decimal;
549
+ }
550
+
551
+ .ui-ordered-list li,
552
+ .ui-unordered-list li {
553
+ @apply mb-8;
430
554
  }
431
555
 
432
556
  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -435,37 +559,19 @@
435
559
  }
436
560
 
437
561
  .ui-unordered-list ul {
438
- @apply ml-24 mt-16 list-circle;
562
+ @apply ml-24 my-8 list-circle;
439
563
  }
440
564
 
441
565
  .ui-ordered-list ol {
442
- @apply ml-24 mt-16 list-decimal;
566
+ @apply ml-24 my-16 list-decimal;
443
567
  }
444
568
 
445
569
  .ui-unordered-list ul ul {
446
- @apply list-square;
447
- }
448
-
449
- .ui-unordered-list-with-emphasis {
450
- @apply text-p1 font-light text-cool-black;
451
- @apply list-disc ml-32 mt-32 -mb-12;
452
- }
453
-
454
- .ui-unordered-list-with-emphasis li div {
455
- @apply relative -top-12;
570
+ @apply list-square my-8;
456
571
  }
457
572
 
458
- .ui-unordered-list-with-emphasis li div > strong {
459
- @apply block;
460
- }
461
-
462
- .ui-unordered-list-with-emphasis ul {
463
- margin-top: calc(var(--spacing-16) + var(--spacing-8));
464
- @apply ml-24 list-circle;
465
- }
466
-
467
- .ui-unordered-list-with-emphasis ul ul {
468
- @apply list-square;
573
+ .ui-unordered-list ul ul {
574
+ @apply my-8;
469
575
  }
470
576
 
471
577
  .ui-link {
@@ -480,14 +586,18 @@
480
586
  @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
481
587
  @apply underline;
482
588
  }
589
+
590
+ .ui-figcaption {
591
+ @apply font-mono text-p3 text-neutral-800;
592
+ }
483
593
  }
484
594
  @layer components {
485
595
  .ui-checkbox-p1 {
486
- @apply flex items-start mb-16 font-sans;
596
+ @apply flex items-start mb-16 font-sans font-medium;
487
597
  }
488
598
 
489
599
  .ui-checkbox-p2 {
490
- @apply flex items-start mb-12 font-sans;
600
+ @apply flex items-start mb-12 font-sans font-medium;
491
601
  }
492
602
 
493
603
  .ui-checkbox-input {
@@ -506,12 +616,12 @@
506
616
 
507
617
  .ui-checkbox-label-p1 {
508
618
  @apply select-none;
509
- @apply text-p1 font-light text-cool-black;
619
+ @apply text-p1 font-medium text-cool-black;
510
620
  }
511
621
 
512
622
  .ui-checkbox-label-p2 {
513
623
  @apply select-none;
514
- @apply text-p2 font-light text-cool-black;
624
+ @apply text-p2 font-medium text-cool-black;
515
625
  }
516
626
 
517
627
  .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -532,7 +642,7 @@
532
642
  }
533
643
 
534
644
  .ui-textarea {
535
- @apply font-sans font-light text-cool-black text-p1;
645
+ @apply font-sans font-medium text-cool-black text-p1;
536
646
  @apply p-input mb-16;
537
647
  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
538
648
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
@@ -553,7 +663,7 @@
553
663
  }
554
664
  @layer components {
555
665
  .ui-input {
556
- @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
666
+ @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
557
667
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
558
668
  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
559
669
  @apply max-w-screen-sm;
data/lib/ably_ui/core/uptime/component.css CHANGED
@@ -86,7 +86,7 @@
86
86
  .ui-uptime-key {
87
87
  @apply block mt-16 mr-20 bg-transparent;
88
88
  @apply sm:inline-block sm:mt-0;
89
- @apply font-light text-p2 text-white block sm:inline-flex items-center;
89
+ @apply font-medium text-p2 text-white block sm:inline-flex items-center;
90
90
  }
91
91
 
92
92
  .ui-uptime-key:first-child {
data/lib/ably_ui/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module AblyUi
2
- VERSION = '11.7.1'
2
+ VERSION = '12.0.0'
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: 11.7.1
4
+ version: 12.0.0
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: 2023-11-15 00:00:00.000000000 Z
13
+ date: 2023-11-30 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component
@@ -69,7 +69,6 @@ files:
69
69
  - lib/ably_ui/core/feature_footer/component.js
70
70
  - lib/ably_ui/core/feature_footer/feature_footer.html.erb
71
71
  - lib/ably_ui/core/feature_footer/feature_footer.rb
72
- - lib/ably_ui/core/featured_link/component.css
73
72
  - lib/ably_ui/core/featured_link/component.js
74
73
  - lib/ably_ui/core/featured_link/featured_link.html.erb
75
74
  - lib/ably_ui/core/featured_link/featured_link.rb
@@ -91,6 +90,8 @@ files:
91
90
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
92
91
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
93
92
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
93
+ - lib/ably_ui/core/fonts/jetBrains-mono.css
94
+ - lib/ably_ui/core/fonts/manrope.css
94
95
  - lib/ably_ui/core/fonts/next.css
95
96
  - lib/ably_ui/core/fonts/source-code-pro.css
96
97
  - lib/ably_ui/core/footer/component.css
data/lib/ably_ui/core/featured_link/component.css DELETED
@@ -1,16 +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
- }
16
-