ably-ui 11.7.1.dev.2e09628 → 11.7.1.dev.13caf30
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/featured_link.html.erb +1 -1
- data/lib/ably_ui/core/flash/component.css +4 -0
- 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 +37 -16
- 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: ac86c0bf9e54ffd564b5c60616078b23a7c7c90b22451e4387ae420146e15538
|
|
4
|
+
data.tar.gz: c1564effbd5189252f85f110b8ee33e15875f4a09daca4a1b343d626f1a9102f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 583b035e2b47e2b51b6f30a4107dc72f030bb254367a2f3483c220b7cbe87a0c77591a9813c4f6781249547da2974b67a7c570ecbb9d83ea53d71cf69391573a
|
|
7
|
+
data.tar.gz: 23ac9b690d07eb7f1228ba7774634ec0bd621766c8563d3e910ed0093a16672743e601b54765c6ef96b49ed30a35390261be6747f4c5df214f71aeac9ecfb62e
|
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="
|
|
7
|
-
<p class="
|
|
6
|
+
<div class="text-h3 mb-24">Live Chat</div>
|
|
7
|
+
<p class="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
|
|
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="
|
|
17
|
-
<p class="
|
|
18
|
-
<span class="block"><strong class="font-
|
|
19
|
-
<span class="block"><strong class="font-
|
|
16
|
+
<div class="text-h3 mb-24">Call us</div>
|
|
17
|
+
<p class="text-p1 font-light">
|
|
18
|
+
<span class="block"><strong class="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free) </span>
|
|
19
|
+
<span class="block"><strong class="text-p1 font-medium">+44 20 3318 4689</strong> (UK) </span>
|
|
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="
|
|
27
|
-
<p class="
|
|
26
|
+
<div class="text-h3 mb-24">Technical and account support</div>
|
|
27
|
+
<p class="text-p1 font-light">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="
|
|
10
|
-
<p class="
|
|
9
|
+
<div class="text-h3 mb-24 flex-1"><%= @title %> </div>
|
|
10
|
+
<p class="text-p1 font-light"><%= @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="
|
|
16
|
+
<p class="text-p1 font-light">
|
|
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="
|
|
28
|
-
<p class="
|
|
29
|
-
<ul class="relative ml-24
|
|
27
|
+
<div class="text-h3 mb-24">Try our APIs for free</div>
|
|
28
|
+
<p class="text-p1 font-medium mb-16">Our free plan includes</p>
|
|
29
|
+
<ul class="relative ml-24 text-p1 font-light leading-8">
|
|
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,4 +1,4 @@
|
|
|
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
|
|
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 #{@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)",
|
|
@@ -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="
|
|
6
|
+
<h2 class="text-overline2 col-span-full font-mono font-bold 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="font-sans text-p3 py-16 font-bold 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-bold 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="
|
|
10
|
+
<p class="text-p2 font-bold text-cool-black mb-24 leading-normal" 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-text
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):"function"==typeof define&&define.amd?define([,,,,,],t):"object"==typeof exports?exports.AblyUi=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Notice=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,((e,t,r,n,o,i)=>(()=>{"use strict";var c={710:t=>{t.exports=e},4360:e=>{e.exports=t},7326:e=>{e.exports=r},6073:e=>{e.exports=n},5225:e=>{e.exports=o},5293:e=>{e.exports=i}},a={};function u(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return c[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var l={};return(()=>{u.d(l,{default:()=>R});var e=u(4360),t=u.n(e),r=u(7326),n=u.n(r),o=u(5225),i=u.n(o),c=u(710),a=u.n(c),s=u(6073),f=u.n(s);let p=(e=21)=>{let t="",r=e;for(;r--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[64*Math.random()|0];return t};u(5293);var d=["name","size","color","additionalCSS"];function y(){return y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},y.apply(this,arguments)}var m=function(e){var t=e.name,r=e.size,n=void 0===r?"0.75rem":r,o=e.color,c=void 0===o?"":o,a=e.additionalCSS,u=void 0===a?"":a,l=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,d);return i().createElement("svg",y({className:"".concat(c," ").concat(u),style:{width:n,height:n}},l),i().createElement("use",{xlinkHref:"#sprite-".concat(t)}))};m.propTypes={name:f().string.isRequired,size:f().string,color:f().string,additionalCSS:f().string};const b=m;function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},v.apply(this,arguments)}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=r){var n,o,i=[],c=!0,a=!1;try{for(r=r.call(e);!(c=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==r.return||r.return()}finally{if(a)throw o}}return i}}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e,t){if(e){if("string"==typeof e)return S(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?S(e,t):void 0}}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var E="flashes",P="ui-flashes",A={items:[]},k=(w({},E,(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:A,t=arguments.length>1?arguments[1]:void 0;if("flash/push"===t.type){var r=Array.isArray(t.payload)?t.payload:[t.payload];return{items:[].concat(j(e.items),j(r))}}return e})),{type:f().oneOf(["error","success","notice","info","alert"]),content:f().string}),q={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},T={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},C=["success","info","notice"],L=function(e){var t=e.id,r=e.type,n=e.content,c=e.removeFlash,u=(0,o.useRef)(null),l=O((0,o.useState)(!1),2),s=l[0],f=l[1],p=O((0,o.useState)(0),2),d=p[0],y=p[1],m=O((0,o.useState)(!1),2),v=m[0],h=m[1],g=function(){u.current&&y(u.current.getBoundingClientRect().height),f(!0),setTimeout((function(){c(t)}),100)};(0,o.useEffect)((function(){return h(!0)}),[]),function(e,t){var r=(0,o.useRef)(null);(0,o.useEffect)((function(){return C.includes(e)&&(r.current=setTimeout((function(){t()}),8e3)),function(){r.current&&clearTimeout(r.current)}}),[])}(r,g);var w,j=v&&!s;w=d&&!s?{height:"".concat(d,"px")}:s?{height:0,marginTop:0,zIndex:-1}:{};var x=a().sanitize(n,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]}),S={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"},E={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return i().createElement("div",{className:"ui-flash-message ui-grid-px ".concat(j?"ui-flash-message-enter":""),style:w,ref:u,"data-id":"ui-flash"},i().createElement("div",{className:"".concat(q[r]," p-32 flex align-center rounded shadow-container-subtle")},S[r]&&i().createElement(b,{name:S[r],color:E[r],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),i().createElement("p",{className:"ui-flash-text ".concat(T[r]),dangerouslySetInnerHTML:{__html:x}}),i().createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:g},i().createElement(b,{name:"icon-gui-close",color:E[r],size:"1.5rem",additionalCSS:"transition-colors"}))))};L.propTypes=g({},k);var z=function(e){var t=e.flashes,r=O((0,o.useState)([]),2),n=r[0],c=r[1],a=function(e){return c((function(t){return t.filter((function(t){return t.id!==e}))}))};return(0,o.useEffect)((function(){c((function(e){return[].concat(j(e),j(((null==t?void 0:t.items)||[]).map((function(e){return g(g({},e),{},{id:p(),removed:!1})}))))}))}),[t]),i().createElement("div",{className:"ui-flash","data-id":P},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(L,v({removeFlash:a,key:e.id},e))})))};z.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(k))})};function D(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function I(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}f().arrayOf(f().arrayOf(f().string));var N=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(P);t&&(t.style.marginTop=e?"4rem":null)},U=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},_=function(e){e.style.maxHeight=0,e.style.overflow="hidden",N(!1)},M=function(e){e.style.maxHeight=null,e.style.overflow=null,N(!0)};const R=function(e){var r=e.bannerContainer,o=e.cookieId,i=e.noticeId,c=e.options;if("undefined"==typeof window)return function(){};if(!r)return console.warn("A Notice component was initited but no notice container was found."),function(){};if(function(e,r){return(t().get(e)||"").includes(r)}(o,i))return function(){};U(r),M(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?D(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):D(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({collapse:!0},c),u=a.collapse?function(e){window.scrollY>5&&_(e);var t=n()((function(){window.scrollY>5?_(e):e.style.overflow&&M(e)}),100);return document.addEventListener("scroll",t),function(){return document.removeEventListener("scroll",t)}}(r):function(){},l=function(e,r,n,o){var i=e.querySelector("button");if(!i)return function(){};var c=function(){r&&n&&function(e,r){var n=t().get(e)||"";t().set(e,"".concat(n.replace("".concat(r,","),"")+r,","),{expires:90})}(r,n),_(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){U(e)}),100);return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}(r);return function(){[l,u,s].forEach((function(e){return e()}))}}})(),l.default})()));
|
|
@@ -1,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: "w-full pr-8
|
|
4
|
+
<%= content_wrapper class: "font-medium w-full pr-8 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-white")) %>
|
|
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="
|
|
39
|
+
<p class="text-quote font-light 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="
|
|
47
|
-
<p class="
|
|
46
|
+
<p class="text-p2 font-medium"><%= company[:author][:name] %></p>
|
|
47
|
+
<p class="text-p3 font-light"><%= 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="
|
|
58
|
-
<p class="
|
|
57
|
+
<p class="text-h4 pb-24"><%= col[:heading] %></p>
|
|
58
|
+
<p class="text-p1 font-light"><%= 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="
|
|
66
|
-
<p class="
|
|
65
|
+
<p class="text-title-xl font-extra-large"><%= col[:heading] %></p>
|
|
66
|
+
<p class="text-p1 font-light mb-0 sm:mb-32"><%= col[:text] %></p>
|
|
67
67
|
</div>
|
|
68
68
|
<% end %>
|
|
69
69
|
<% end %>
|
data/lib/ably_ui/core/styles.css
CHANGED
|
@@ -525,32 +525,25 @@
|
|
|
525
525
|
}
|
|
526
526
|
|
|
527
527
|
.ui-text-code {
|
|
528
|
-
@apply font-mono font-
|
|
528
|
+
@apply font-mono font-medium text-code;
|
|
529
529
|
}
|
|
530
530
|
|
|
531
531
|
.ui-text-code2 {
|
|
532
|
-
@apply font-mono font-
|
|
532
|
+
@apply font-mono font-medium text-code2;
|
|
533
533
|
}
|
|
534
534
|
|
|
535
535
|
.ui-text-code-inline {
|
|
536
|
-
@apply font-mono font-
|
|
536
|
+
@apply font-mono font-medium 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 ml-32 my-16;
|
|
542
|
-
@apply list-disc;
|
|
540
|
+
@apply text-p1 font-medium text-cool-black;
|
|
541
|
+
@apply list-disc ml-32 my-16;
|
|
543
542
|
}
|
|
544
543
|
|
|
545
544
|
.ui-ordered-list {
|
|
546
545
|
@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;
|
|
546
|
+
@apply ml-32 my-16 list-decimal;
|
|
554
547
|
}
|
|
555
548
|
|
|
556
549
|
.ui-unordered-list li > *:last-of-type:not(ul):not(ol),
|
|
@@ -559,11 +552,11 @@
|
|
|
559
552
|
}
|
|
560
553
|
|
|
561
554
|
.ui-unordered-list ul {
|
|
562
|
-
@apply ml-24
|
|
555
|
+
@apply ml-24 mt-16 list-circle;
|
|
563
556
|
}
|
|
564
557
|
|
|
565
558
|
.ui-ordered-list ol {
|
|
566
|
-
@apply ml-24
|
|
559
|
+
@apply ml-24 mt-16 list-decimal;
|
|
567
560
|
}
|
|
568
561
|
|
|
569
562
|
.ui-unordered-list ul ul {
|
|
@@ -574,6 +567,34 @@
|
|
|
574
567
|
@apply my-8;
|
|
575
568
|
}
|
|
576
569
|
|
|
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
|
+
|
|
577
598
|
.ui-link {
|
|
578
599
|
@apply text-gui-default;
|
|
579
600
|
@apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
|
|
@@ -663,7 +684,7 @@
|
|
|
663
684
|
}
|
|
664
685
|
@layer components {
|
|
665
686
|
.ui-input {
|
|
666
|
-
@apply text-p2 font-
|
|
687
|
+
@apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
|
|
667
688
|
@apply hover:bg-white hover:shadow-input hover:border-transparent;
|
|
668
689
|
@apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
|
|
669
690
|
@apply max-w-screen-sm;
|
|
@@ -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-light 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.13caf30
|
|
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-24 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: view_component
|