ably-ui 8.7.0.dev.68ea318 → 8.7.0.dev.79f6c9f
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/README.md +15 -4
- data/lib/ably_ui/core/core.rb +12 -4
- data/lib/ably_ui/core/footer/component.css +21 -1
- data/lib/ably_ui/core/footer/footer.html.erb +118 -56
- data/lib/ably_ui/core/images/ably-logo.png +0 -0
- data/lib/ably_ui/core/images/high-performer-2022.png +0 -0
- data/lib/ably_ui/core/images/highest-user-adoption-2022.png +0 -0
- data/lib/ably_ui/core/images/users-love-us-2022.png +0 -0
- data/lib/ably_ui/core/logo/logo.html.erb +2 -27
- data/lib/ably_ui/core/logo/logo.rb +15 -6
- data/lib/ably_ui/core/meganav/component.json +1 -1
- data/lib/ably_ui/core/meganav/meganav.html.erb +1 -1
- data/lib/ably_ui/core/meganav/meganav.rb +3 -2
- data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +9 -0
- data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +12 -12
- data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +6 -6
- data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +42 -38
- data/lib/ably_ui/core/notice/component.js +1 -1
- data/lib/ably_ui/core/sprites.svg +84 -0
- data/lib/ably_ui/version.rb +1 -1
- metadata +6 -2
|
@@ -3,49 +3,68 @@
|
|
|
3
3
|
<section class="grid grid-cols-12 ui-grid-gap-x w-full">
|
|
4
4
|
<div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
|
|
5
5
|
<h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
|
|
6
|
-
|
|
6
|
+
Solutions
|
|
7
7
|
</h3>
|
|
8
8
|
<ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
|
|
9
|
+
|
|
9
10
|
<li>
|
|
10
|
-
<%= link_to abs_url("/solutions/
|
|
11
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-
|
|
11
|
+
<%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
|
|
12
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
|
|
12
13
|
<div class="flex flex-col justify-center">
|
|
13
|
-
<p class="ui-meganav-media-heading">
|
|
14
|
-
<p class="ui-meganav-media-copy">Deliver
|
|
14
|
+
<p class="ui-meganav-media-heading">Chat</p>
|
|
15
|
+
<p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
|
|
15
16
|
</div>
|
|
16
17
|
<% end %>
|
|
17
18
|
</li>
|
|
18
19
|
<li>
|
|
19
|
-
<%= link_to abs_url("/solutions/
|
|
20
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-
|
|
20
|
+
<%= link_to abs_url("/solutions/multiplayer-collaboration"), class: "ui-meganav-media-with-image group" do %>
|
|
21
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
|
|
21
22
|
<div class="flex flex-col justify-center">
|
|
22
|
-
<p class="ui-meganav-media-heading">
|
|
23
|
-
<p class="ui-meganav-media-copy">
|
|
23
|
+
<p class="ui-meganav-media-heading">Multiplayer Collaboration</p>
|
|
24
|
+
<p class="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
|
|
24
25
|
</div>
|
|
25
26
|
<% end %>
|
|
26
27
|
</li>
|
|
27
28
|
<li>
|
|
28
|
-
<%= link_to abs_url("/solutions/
|
|
29
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-
|
|
29
|
+
<%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
|
|
30
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-data-broadcast-col", size: "2.5rem")) %>
|
|
30
31
|
<div class="flex flex-col justify-center">
|
|
31
|
-
<p class="ui-meganav-media-heading">
|
|
32
|
-
<p class="ui-meganav-media-copy">
|
|
32
|
+
<p class="ui-meganav-media-heading">Data Broadcast</p>
|
|
33
|
+
<p class="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
|
|
33
34
|
</div>
|
|
34
35
|
<% end %>
|
|
35
36
|
</li>
|
|
36
37
|
<li>
|
|
37
|
-
<%= link_to abs_url("/solutions/
|
|
38
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-
|
|
38
|
+
<%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
|
|
39
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-data-synchronization-col", size: "2.5rem")) %>
|
|
40
|
+
<div class="flex flex-col justify-center">
|
|
41
|
+
<p class="ui-meganav-media-heading">Data Synchronization</p>
|
|
42
|
+
<p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
|
|
43
|
+
</div>
|
|
44
|
+
<% end %>
|
|
45
|
+
</li>
|
|
46
|
+
<li>
|
|
47
|
+
<%= link_to abs_url("/push-notifications"), class: "ui-meganav-media-with-image group" do %>
|
|
48
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-push-notifications-col", size: "2.5rem")) %>
|
|
39
49
|
<div class="flex flex-col justify-center">
|
|
40
|
-
<p class="ui-meganav-media-heading">
|
|
41
|
-
<p class="ui-meganav-media-copy">
|
|
50
|
+
<p class="ui-meganav-media-heading">Notifications</p>
|
|
51
|
+
<p class="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
|
|
52
|
+
</div>
|
|
53
|
+
<% end %>
|
|
54
|
+
</li>
|
|
55
|
+
<li>
|
|
56
|
+
<%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media-with-image group" do %>
|
|
57
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-kafka-at-the-edge-col", size: "2.5rem")) %>
|
|
58
|
+
<div class="flex flex-col justify-center">
|
|
59
|
+
<p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
|
|
60
|
+
<p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
|
|
42
61
|
</div>
|
|
43
62
|
<% end %>
|
|
44
63
|
</li>
|
|
45
64
|
</ul>
|
|
46
65
|
</div>
|
|
47
66
|
|
|
48
|
-
<div class="col-span-full md:col-span-4 pt-24 pb-
|
|
67
|
+
<div class="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
|
|
49
68
|
<h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
|
|
50
69
|
Industry
|
|
51
70
|
</h3>
|
|
@@ -80,6 +99,11 @@
|
|
|
80
99
|
<p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
|
|
81
100
|
<% end %>
|
|
82
101
|
</li>
|
|
102
|
+
</ul>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
|
|
106
|
+
<ul aria-labelledby="meganav-use-cases-panel-solutions" class="mt-0 md:mt-40">
|
|
83
107
|
<li>
|
|
84
108
|
<%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
|
|
85
109
|
<p class="ui-meganav-media-heading">eCommerce & Retail</p>
|
|
@@ -106,26 +130,6 @@
|
|
|
106
130
|
</li>
|
|
107
131
|
</ul>
|
|
108
132
|
</div>
|
|
109
|
-
|
|
110
|
-
<div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
|
|
111
|
-
<h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
|
|
112
|
-
Solutions
|
|
113
|
-
</h3>
|
|
114
|
-
<ul aria-labelledby="meganav-use-cases-panel-solutions">
|
|
115
|
-
<li>
|
|
116
|
-
<%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
|
|
117
|
-
<p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
|
|
118
|
-
<p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
|
|
119
|
-
<% end %>
|
|
120
|
-
</li>
|
|
121
|
-
<li>
|
|
122
|
-
<%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
|
|
123
|
-
<p class="ui-meganav-media-heading">Asset Tracking</p>
|
|
124
|
-
<p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
|
|
125
|
-
<% end %>
|
|
126
|
-
</li>
|
|
127
|
-
</ul>
|
|
128
|
-
</div>
|
|
129
133
|
</section>
|
|
130
134
|
<div class="ui-meganav-content-spacer"></div>
|
|
131
135
|
</div>
|
|
@@ -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,(function(e,t,r,n,o,i){return(()=>{"use strict";var c={6357:t=>{t.exports=e},9349:e=>{e.exports=t},2040:e=>{e.exports=r},3474:e=>{e.exports=n},9281:e=>{e.exports=o},5044: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:()=>
|
|
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,(function(e,t,r,n,o,i){return(()=>{"use strict";var c={6357:t=>{t.exports=e},9349:e=>{e.exports=t},2040:e=>{e.exports=r},3474:e=>{e.exports=n},9281:e=>{e.exports=o},5044: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:()=>M});var e=u(9349),t=u.n(e),r=u(2040),n=u.n(r),o=u(9281),i=u.n(o),c=u(6357),a=u.n(c),s=u(3474),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(5044);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="ui-flashes",P={items:[]},A=(w({},"flashes",(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:P,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}),k={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},q={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},T=["success","info","notice"],C=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 T.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(k[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(q[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"}))))};C.propTypes=g({},A);var L=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":E},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(C,v({removeFlash:a,key:e.id},e))})))};L.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(A))})};function z(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 D(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 I=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(E);t&&(t.style.marginTop=e?"4rem":null)},N=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},U=function(e){e.style.maxHeight=0,e.style.overflow="hidden",I(!1)},_=function(e){e.style.maxHeight=null,e.style.overflow=null,I(!0)};const M=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(){};N(r),_(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?z(Object(r),!0).forEach((function(t){D(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):z(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&&U(e);var t=n()((function(){window.scrollY>5?U(e):e.style.overflow&&_(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),U(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){N(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})()}));
|