ably-ui 11.7.1.dev.d65c98c → 11.7.1.dev.1344841
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- 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 -6
- data/lib/ably_ui/core/featured_link/component.js +1 -1
- data/lib/ably_ui/core/featured_link/featured_link.html.erb +3 -3
- data/lib/ably_ui/core/flash/component.css +0 -4
- data/lib/ably_ui/core/footer/footer.html.erb +2 -2
- data/lib/ably_ui/core/meganav/component.css +1 -1
- 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 +2 -2
- data/lib/ably_ui/core/showcase/showcase.html.erb +7 -7
- data/lib/ably_ui/core/styles.css +21 -38
- data/lib/ably_ui/core/uptime/component.css +1 -1
- data/lib/ably_ui/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8335699bf46eec3184e802b1d0c0f06440aa1ad333b5077c11bb989db51d1b5e
|
|
4
|
+
data.tar.gz: 1a12c6e2a9c851958aef55e95cc6c693dd5990e6da83709c4f744fe776b707b1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 65a3bb039e49cf625cae6953378ef058ece663ff1e7ced44652897e8be363491da3aa21f257ac4b3837edeac5f78fbaa7591e0df550a9d367a64eb6eb216af2f
|
|
7
|
+
data.tar.gz: 567f72ba7c2c8806ab73f0b87139155894b0c4d48544b5eb743f452788c6dc90575684d9e6d11a530c51212af4065553125d3b9cac715ceb69ed8e35295ea567
|
data/Gemfile.lock
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
|
|
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 +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,15 +1,15 @@
|
|
|
1
|
-
<%= link_to(@url, class: "
|
|
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
2
|
<% if @reverse %>
|
|
3
3
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
|
|
4
4
|
size: "calc(var(--featured-link-icon-size) * 1.25)",
|
|
5
5
|
color: @icon_color,
|
|
6
|
-
additional_css: "
|
|
6
|
+
additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
|
|
7
7
|
<%= content -%>
|
|
8
8
|
<% else %>
|
|
9
9
|
<%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
|
|
10
10
|
size: "calc(var(--featured-link-icon-size) * 1.25)",
|
|
11
11
|
color: @icon_color,
|
|
12
|
-
additional_css: "
|
|
12
|
+
additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
|
|
13
13
|
<% end %>
|
|
14
14
|
|
|
15
15
|
<% end %>
|
|
@@ -3,10 +3,10 @@
|
|
|
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-mono
|
|
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="
|
|
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>
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
.ui-meganav-overline {
|
|
108
|
-
@apply text-overline2 text-cool-black uppercase font-
|
|
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-bold
|
|
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,7 +1,7 @@
|
|
|
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: "
|
|
4
|
+
<%= content_wrapper class: "w-full pr-8 ui-text-p3 self-center" do %>
|
|
5
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>
|
|
@@ -9,7 +9,7 @@
|
|
|
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>
|
|
@@ -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
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
|
|
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
|
@@ -498,13 +498,13 @@
|
|
|
498
498
|
}
|
|
499
499
|
|
|
500
500
|
.ui-text-overline1 {
|
|
501
|
-
@apply font-mono font-
|
|
501
|
+
@apply font-mono font-normal text-active-orange uppercase;
|
|
502
502
|
@apply text-overline1 leading-normal;
|
|
503
503
|
@apply tracking-widen-0.16;
|
|
504
504
|
}
|
|
505
505
|
|
|
506
506
|
.ui-text-overline2 {
|
|
507
|
-
@apply font-mono font-
|
|
507
|
+
@apply font-mono font-normal text-active-orange uppercase;
|
|
508
508
|
@apply text-overline2 leading-normal;
|
|
509
509
|
@apply tracking-widen-0.16;
|
|
510
510
|
}
|
|
@@ -525,25 +525,32 @@
|
|
|
525
525
|
}
|
|
526
526
|
|
|
527
527
|
.ui-text-code {
|
|
528
|
-
@apply font-mono font-
|
|
528
|
+
@apply font-mono font-normal text-code;
|
|
529
529
|
}
|
|
530
530
|
|
|
531
531
|
.ui-text-code2 {
|
|
532
|
-
@apply font-mono font-
|
|
532
|
+
@apply font-mono font-normal text-code2;
|
|
533
533
|
}
|
|
534
534
|
|
|
535
535
|
.ui-text-code-inline {
|
|
536
|
-
@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;
|
|
537
537
|
}
|
|
538
538
|
|
|
539
539
|
.ui-unordered-list {
|
|
540
|
-
@apply text-p1 font-medium text-
|
|
541
|
-
@apply
|
|
540
|
+
@apply text-p1 font-medium text-charcoal-grey;
|
|
541
|
+
@apply ml-32 my-16;
|
|
542
|
+
@apply list-disc;
|
|
542
543
|
}
|
|
543
544
|
|
|
544
545
|
.ui-ordered-list {
|
|
545
546
|
@apply text-p1 font-medium text-charcoal-grey;
|
|
546
|
-
@apply ml-32 my-16
|
|
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;
|
|
547
554
|
}
|
|
548
555
|
|
|
549
556
|
.ui-unordered-list li > *:last-of-type:not(ul):not(ol),
|
|
@@ -552,11 +559,11 @@
|
|
|
552
559
|
}
|
|
553
560
|
|
|
554
561
|
.ui-unordered-list ul {
|
|
555
|
-
@apply ml-24
|
|
562
|
+
@apply ml-24 my-8 list-circle;
|
|
556
563
|
}
|
|
557
564
|
|
|
558
565
|
.ui-ordered-list ol {
|
|
559
|
-
@apply ml-24
|
|
566
|
+
@apply ml-24 my-16 list-decimal;
|
|
560
567
|
}
|
|
561
568
|
|
|
562
569
|
.ui-unordered-list ul ul {
|
|
@@ -567,34 +574,6 @@
|
|
|
567
574
|
@apply my-8;
|
|
568
575
|
}
|
|
569
576
|
|
|
570
|
-
.ui-ordered-list li,
|
|
571
|
-
.ui-unordered-list li {
|
|
572
|
-
@apply font-medium font-sans tracking-widen-0;
|
|
573
|
-
line-height: var(--lh-extra-relaxed);
|
|
574
|
-
}
|
|
575
|
-
|
|
576
|
-
.ui-unordered-list-with-emphasis {
|
|
577
|
-
@apply text-p1 font-medium text-cool-black;
|
|
578
|
-
@apply list-disc ml-32 mt-32 -mb-12;
|
|
579
|
-
}
|
|
580
|
-
|
|
581
|
-
.ui-unordered-list-with-emphasis li div {
|
|
582
|
-
@apply relative -top-12;
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
.ui-unordered-list-with-emphasis li div > strong {
|
|
586
|
-
@apply block;
|
|
587
|
-
}
|
|
588
|
-
|
|
589
|
-
.ui-unordered-list-with-emphasis ul {
|
|
590
|
-
margin-top: calc(var(--spacing-16) + var(--spacing-8));
|
|
591
|
-
@apply ml-24 list-circle;
|
|
592
|
-
}
|
|
593
|
-
|
|
594
|
-
.ui-unordered-list-with-emphasis ul ul {
|
|
595
|
-
@apply list-square;
|
|
596
|
-
}
|
|
597
|
-
|
|
598
577
|
.ui-link {
|
|
599
578
|
@apply text-gui-default;
|
|
600
579
|
@apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
|
|
@@ -607,6 +586,10 @@
|
|
|
607
586
|
@apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
|
|
608
587
|
@apply underline;
|
|
609
588
|
}
|
|
589
|
+
|
|
590
|
+
.ui-figcaption {
|
|
591
|
+
@apply font-mono text-p3 text-neutral-800;
|
|
592
|
+
}
|
|
610
593
|
}
|
|
611
594
|
@layer components {
|
|
612
595
|
.ui-checkbox-p1 {
|
|
@@ -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-
|
|
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
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.dev.
|
|
4
|
+
version: 11.7.1.dev.1344841
|
|
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-
|
|
13
|
+
date: 2023-11-30 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: view_component
|