ably-ui 11.7.1 → 12.0.0.dev.77b7db9
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +6 -7
- data/lib/ably_ui/core/code/component.css +2 -0
- data/lib/ably_ui/core/contact_footer/contact_footer.html.erb +8 -8
- data/lib/ably_ui/core/feature_footer/feature_footer.html.erb +6 -6
- data/lib/ably_ui/core/featured_link/component.css +0 -15
- data/lib/ably_ui/core/featured_link/component.js +1 -1
- data/lib/ably_ui/core/featured_link/featured_link.html.erb +14 -5
- data/lib/ably_ui/core/featured_link/featured_link.rb +3 -1
- data/lib/ably_ui/core/flash/component.css +0 -4
- data/lib/ably_ui/core/fonts/jetBrains-mono.css +3 -0
- data/lib/ably_ui/core/fonts/manrope.css +3 -0
- data/lib/ably_ui/core/footer/component.css +3 -3
- data/lib/ably_ui/core/footer/footer.html.erb +13 -13
- data/lib/ably_ui/core/meganav/component.css +6 -6
- data/lib/ably_ui/core/meganav_content_products/meganav_content_products.html.erb +1 -1
- data/lib/ably_ui/core/notice/component.js +1 -1
- data/lib/ably_ui/core/notice/notice.html.erb +3 -3
- data/lib/ably_ui/core/showcase/component.js +1 -1
- data/lib/ably_ui/core/showcase/showcase.html.erb +9 -9
- data/lib/ably_ui/core/styles.css +232 -117
- data/lib/ably_ui/core/uptime/component.css +2 -3
- data/lib/ably_ui/version.rb +1 -1
- metadata +11 -9
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: aa0f233e8b6024db5a9eb48d4286500a0d8e3412a728d8e0e833ace01ae7e0f7
|
|
4
|
+
data.tar.gz: 760a20eb684d437862348c4ba67a1fff5090f38d662ad2f59780aedf1a102d25
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 49a7c36164c0219176e96f5e3b762e227608fc6b6964348bb00925ae62cedfb906a456dc0a95b0b4d23b28638c25d872d8178f9b41b4bce847d80e5472ed1eaf
|
|
7
|
+
data.tar.gz: d82afab4e779c4973d76f424d66cafaacfaafdf0bf561c073f2562cfb76b68103f5f25c6480a3ea505790f065dba0ef9f2727b2312408afc07b918b32f7545f9
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -75,12 +75,11 @@ 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
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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`
|
|
84
83
|
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
84
|
4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
|
|
86
85
|
|
|
@@ -233,7 +232,7 @@ For `npm`:
|
|
|
233
232
|
```bash
|
|
234
233
|
# in the root directory
|
|
235
234
|
yarn link
|
|
236
|
-
# in the
|
|
235
|
+
# in the "preview" directory
|
|
237
236
|
yarn link @ably/ui
|
|
238
237
|
```
|
|
239
238
|
|
|
@@ -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 {
|
|
@@ -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
|
|
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
|
|
18
|
-
<span class="block"><strong class="
|
|
19
|
-
<span class="block"><strong class="
|
|
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
|
|
26
|
+
<div class="ui-text-h3 mb-24">Technical and account support</div>
|
|
27
|
+
<p class="ui-text-p1">We'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>
|
|
@@ -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
|
|
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
|
|
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
|
|
29
|
-
<ul class="relative ml-24 text-p1
|
|
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
|
|
@@ -1,16 +1 @@
|
|
|
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
1
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,
|
|
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)));
|
|
@@ -1,6 +1,15 @@
|
|
|
1
|
-
<%= link_to(@url, class: "
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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 %>
|
|
@@ -3,15 +3,17 @@ module AblyUi
|
|
|
3
3
|
class FeaturedLink < ViewComponent::Base
|
|
4
4
|
def initialize(
|
|
5
5
|
url:,
|
|
6
|
-
text_size: 'text-
|
|
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
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.ui-footer-col-title {
|
|
3
|
-
@apply text-overline2 p-menu-row-title font-
|
|
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-
|
|
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-
|
|
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 {
|
|
@@ -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-
|
|
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
|
|
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-
|
|
177
|
+
<div class="pl-16 text-menu3 font-sans font-medium">
|
|
178
178
|
<strong class="block font-medium">We'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-
|
|
197
|
+
<div class="text-menu3 font-sans font-medium">
|
|
198
198
|
<strong class="block font-medium">We'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-
|
|
230
|
-
<p class="ui-footer-compliance-text font-
|
|
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-
|
|
237
|
-
<p class="ui-footer-compliance-text font-
|
|
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-
|
|
244
|
-
<p class="ui-footer-compliance-text font-
|
|
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-
|
|
251
|
-
<p class="ui-footer-compliance-text font-
|
|
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>
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.ui-meganav-link {
|
|
54
|
-
@apply text-menu2 font-
|
|
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-
|
|
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-
|
|
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
|
|
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.
|
|
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 {
|
|
@@ -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-
|
|
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>
|
|
@@ -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-
|
|
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})()));
|
|
@@ -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: "
|
|
5
|
-
<strong class="font-
|
|
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-
|
|
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>
|
|
@@ -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.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,h,
|
|
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.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,y,h,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["grayscale","grayscale-0"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(y=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){y.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(h=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",h),function(){return l.parentNode.removeEventListener("wheel",h)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
type: 'button',
|
|
14
14
|
data: { id: 'showcase-control' },
|
|
15
15
|
aria: { controls: @random_id } do %>
|
|
16
|
-
<%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? '
|
|
16
|
+
<%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'grayscale-0' : 'grayscale', 'hover:grayscale-0'], srcset: [["#{company[:logo2x]}", "2x"]] %>
|
|
17
17
|
<% end %>
|
|
18
18
|
</li>
|
|
19
19
|
<% end %>
|
|
@@ -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
|
|
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
|
-
<%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48
|
|
43
|
+
<%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 grayscale" %>
|
|
44
44
|
</div>
|
|
45
45
|
<div>
|
|
46
|
-
<p class="text-p2
|
|
47
|
-
<p class="text-p3
|
|
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
|
|
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
|
|
66
|
-
<p class="text-p1
|
|
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
|
-
|
|
4
|
-
--color-
|
|
5
|
-
--color-
|
|
6
|
-
--color-
|
|
7
|
-
--color-
|
|
8
|
-
--color-
|
|
9
|
-
--color-
|
|
10
|
-
--color-
|
|
11
|
-
--color-
|
|
12
|
-
--color-
|
|
13
|
-
--color-
|
|
14
|
-
--color-
|
|
15
|
-
--color-
|
|
16
|
-
--color-
|
|
17
|
-
--color-
|
|
18
|
-
|
|
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
|
-
|
|
23
|
-
|
|
24
|
-
--color-
|
|
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-
|
|
28
|
-
--syntax-dark-grey: var(--color-
|
|
29
|
-
--syntax-mid-grey: var(--color-
|
|
30
|
-
--syntax-light-grey: var(--color-
|
|
31
|
-
--syntax-extra-light-grey: var(--color-
|
|
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-
|
|
171
|
+
var(--color-orange-700) 0%,
|
|
74
172
|
var(--color-jazzy-pink) 100%
|
|
75
173
|
);
|
|
76
174
|
|
|
77
|
-
--fs-title-xl:
|
|
78
|
-
--fs-title:
|
|
79
|
-
--fs-title-xs:
|
|
80
|
-
--fs-h1-xl:
|
|
81
|
-
--fs-h1:
|
|
82
|
-
--fs-h1-xs:
|
|
83
|
-
|
|
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.
|
|
184
|
+
--fs-h2-xs: 1.75rem;
|
|
185
|
+
|
|
86
186
|
--fs-h3: 1.5rem;
|
|
87
|
-
--fs-h4: 1.
|
|
88
|
-
--fs-
|
|
89
|
-
|
|
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.
|
|
94
|
-
--fs-sub-header-xs: 1.
|
|
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:
|
|
98
|
-
--fs-btn2:
|
|
199
|
+
--fs-btn1: 1rem;
|
|
200
|
+
--fs-btn2: 0.938rem;
|
|
99
201
|
--fs-btn3: 0.875rem;
|
|
100
|
-
--fs-menu1:
|
|
101
|
-
--fs-menu2:
|
|
202
|
+
--fs-menu1: 1rem;
|
|
203
|
+
--fs-menu2: 0.938rem;
|
|
102
204
|
--fs-menu3: 0.875rem;
|
|
103
|
-
--fs-quote: 1.
|
|
104
|
-
--fs-code: 0.
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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.
|
|
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-
|
|
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.
|
|
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-
|
|
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.
|
|
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-
|
|
451
|
+
@apply font-sans font-extrabold text-cool-black;
|
|
344
452
|
@apply text-h3;
|
|
345
|
-
@apply tracking-tighten-0.
|
|
453
|
+
@apply tracking-tighten-0.005;
|
|
346
454
|
}
|
|
347
455
|
|
|
348
456
|
.ui-text-h4 {
|
|
349
|
-
@apply font-sans font-
|
|
457
|
+
@apply font-sans font-extrabold text-cool-black;
|
|
350
458
|
@apply text-h4;
|
|
351
|
-
@apply tracking-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
377
|
-
@apply text-quote;
|
|
378
|
-
@apply tracking-tighten-0.
|
|
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-
|
|
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-
|
|
389
|
-
@apply text-overline1;
|
|
390
|
-
@apply tracking-widen-0.
|
|
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-
|
|
395
|
-
@apply text-overline2;
|
|
396
|
-
@apply tracking-widen-0.
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
424
|
-
@apply
|
|
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-
|
|
429
|
-
@apply ml-32
|
|
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
|
|
562
|
+
@apply ml-24 my-8 list-circle;
|
|
439
563
|
}
|
|
440
564
|
|
|
441
565
|
.ui-ordered-list ol {
|
|
442
|
-
@apply ml-24
|
|
566
|
+
@apply ml-24 my-16 list-decimal;
|
|
443
567
|
}
|
|
444
568
|
|
|
445
569
|
.ui-unordered-list ul ul {
|
|
446
|
-
@apply list-square;
|
|
570
|
+
@apply list-square my-8;
|
|
447
571
|
}
|
|
448
572
|
|
|
449
|
-
.ui-unordered-list
|
|
450
|
-
@apply
|
|
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;
|
|
456
|
-
}
|
|
457
|
-
|
|
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 {
|
|
@@ -477,17 +583,26 @@
|
|
|
477
583
|
|
|
478
584
|
.ui-link-neutral {
|
|
479
585
|
@apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
|
|
480
|
-
@apply focus:text-charcoal-grey
|
|
586
|
+
@apply focus:text-charcoal-grey;
|
|
481
587
|
@apply underline;
|
|
482
588
|
}
|
|
589
|
+
|
|
590
|
+
/* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
|
|
591
|
+
.ui-link-neutral:focus {
|
|
592
|
+
outline: 2px solid var(--color-neutral-000);
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.ui-figcaption {
|
|
596
|
+
@apply font-mono text-p3 text-neutral-800;
|
|
597
|
+
}
|
|
483
598
|
}
|
|
484
599
|
@layer components {
|
|
485
600
|
.ui-checkbox-p1 {
|
|
486
|
-
@apply flex items-start mb-16 font-sans;
|
|
601
|
+
@apply flex items-start mb-16 font-sans font-medium;
|
|
487
602
|
}
|
|
488
603
|
|
|
489
604
|
.ui-checkbox-p2 {
|
|
490
|
-
@apply flex items-start mb-12 font-sans;
|
|
605
|
+
@apply flex items-start mb-12 font-sans font-medium;
|
|
491
606
|
}
|
|
492
607
|
|
|
493
608
|
.ui-checkbox-input {
|
|
@@ -506,12 +621,12 @@
|
|
|
506
621
|
|
|
507
622
|
.ui-checkbox-label-p1 {
|
|
508
623
|
@apply select-none;
|
|
509
|
-
@apply text-p1 font-
|
|
624
|
+
@apply text-p1 font-medium text-cool-black;
|
|
510
625
|
}
|
|
511
626
|
|
|
512
627
|
.ui-checkbox-label-p2 {
|
|
513
628
|
@apply select-none;
|
|
514
|
-
@apply text-p2 font-
|
|
629
|
+
@apply text-p2 font-medium text-cool-black;
|
|
515
630
|
}
|
|
516
631
|
|
|
517
632
|
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
@@ -532,7 +647,7 @@
|
|
|
532
647
|
}
|
|
533
648
|
|
|
534
649
|
.ui-textarea {
|
|
535
|
-
@apply font-sans font-
|
|
650
|
+
@apply font-sans font-medium text-cool-black text-p1;
|
|
536
651
|
@apply p-input mb-16;
|
|
537
652
|
@apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
|
|
538
653
|
@apply hover:bg-white hover:shadow-input hover:border-transparent;
|
|
@@ -553,7 +668,7 @@
|
|
|
553
668
|
}
|
|
554
669
|
@layer components {
|
|
555
670
|
.ui-input {
|
|
556
|
-
@apply text-p2 font-
|
|
671
|
+
@apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
|
|
557
672
|
@apply hover:bg-white hover:shadow-input hover:border-transparent;
|
|
558
673
|
@apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
|
|
559
674
|
@apply max-w-screen-sm;
|
|
@@ -30,8 +30,7 @@
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.ui-uptime-day:hover {
|
|
33
|
-
|
|
34
|
-
@apply z-10;
|
|
33
|
+
@apply z-10 brightness-125;
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
.ui-uptime-day:hover span {
|
|
@@ -86,7 +85,7 @@
|
|
|
86
85
|
.ui-uptime-key {
|
|
87
86
|
@apply block mt-16 mr-20 bg-transparent;
|
|
88
87
|
@apply sm:inline-block sm:mt-0;
|
|
89
|
-
@apply font-
|
|
88
|
+
@apply font-medium text-p2 text-white block sm:inline-flex items-center;
|
|
90
89
|
}
|
|
91
90
|
|
|
92
91
|
.ui-uptime-key:first-child {
|
data/lib/ably_ui/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ably-ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 12.0.0.dev.77b7db9
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Dominik Piatek
|
|
8
8
|
- Arti Mathanda
|
|
9
9
|
- Bruce Thomas
|
|
10
|
-
autorequire:
|
|
10
|
+
autorequire:
|
|
11
11
|
bindir: bin
|
|
12
12
|
cert_chain: []
|
|
13
|
-
date: 2023-
|
|
13
|
+
date: 2023-12-04 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: view_component
|
|
@@ -32,7 +32,7 @@ dependencies:
|
|
|
32
32
|
- - "<"
|
|
33
33
|
- !ruby/object:Gem::Version
|
|
34
34
|
version: '2.50'
|
|
35
|
-
description:
|
|
35
|
+
description:
|
|
36
36
|
email:
|
|
37
37
|
- dominik.piatek@ably.com
|
|
38
38
|
- arti.mathanda@ably.com
|
|
@@ -91,6 +91,8 @@ files:
|
|
|
91
91
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
|
|
92
92
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
|
|
93
93
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
|
|
94
|
+
- lib/ably_ui/core/fonts/jetBrains-mono.css
|
|
95
|
+
- lib/ably_ui/core/fonts/manrope.css
|
|
94
96
|
- lib/ably_ui/core/fonts/next.css
|
|
95
97
|
- lib/ably_ui/core/fonts/source-code-pro.css
|
|
96
98
|
- lib/ably_ui/core/footer/component.css
|
|
@@ -229,7 +231,7 @@ licenses:
|
|
|
229
231
|
- Apache-2.0
|
|
230
232
|
metadata:
|
|
231
233
|
source_code_uri: https://github.com/ably/ably-ui
|
|
232
|
-
post_install_message:
|
|
234
|
+
post_install_message:
|
|
233
235
|
rdoc_options: []
|
|
234
236
|
require_paths:
|
|
235
237
|
- lib
|
|
@@ -240,12 +242,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
240
242
|
version: '0'
|
|
241
243
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
242
244
|
requirements:
|
|
243
|
-
- - "
|
|
245
|
+
- - ">"
|
|
244
246
|
- !ruby/object:Gem::Version
|
|
245
|
-
version:
|
|
247
|
+
version: 1.3.1
|
|
246
248
|
requirements: []
|
|
247
|
-
rubygems_version: 3.
|
|
248
|
-
signing_key:
|
|
249
|
+
rubygems_version: 3.3.7
|
|
250
|
+
signing_key:
|
|
249
251
|
specification_version: 4
|
|
250
252
|
summary: Shared component library and design system for Ably Real-time Ltd (ably.com)
|
|
251
253
|
test_files: []
|