ably-ui 8.7.0.dev.f891ad9 → 8.7.0.dev.fa55b85
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 +4 -15
- data/lib/ably_ui/core/core.rb +4 -12
- data/lib/ably_ui/core/footer/component.css +1 -21
- data/lib/ably_ui/core/footer/footer.html.erb +56 -118
- data/lib/ably_ui/core/logo/logo.html.erb +27 -2
- data/lib/ably_ui/core/logo/logo.rb +6 -15
- 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 +2 -3
- data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +0 -9
- 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 +38 -42
- data/lib/ably_ui/core/notice/component.js +1 -1
- data/lib/ably_ui/core/sprites.svg +3 -87
- data/lib/ably_ui/version.rb +1 -1
- metadata +2 -6
- 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
|
@@ -3,68 +3,49 @@
|
|
|
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
|
+
Use cases
|
|
7
7
|
</h3>
|
|
8
8
|
<ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
|
|
9
|
-
|
|
10
9
|
<li>
|
|
11
|
-
<%= link_to abs_url("/solutions/
|
|
12
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-
|
|
10
|
+
<%= link_to abs_url("/solutions/live-updates-results-metrics"), class: "ui-meganav-media-with-image group" do %>
|
|
11
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
|
|
13
12
|
<div class="flex flex-col justify-center">
|
|
14
|
-
<p class="ui-meganav-media-heading">Live
|
|
15
|
-
<p class="ui-meganav-media-copy">Deliver
|
|
13
|
+
<p class="ui-meganav-media-heading">Live updates, results & metrics</p>
|
|
14
|
+
<p class="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
|
|
16
15
|
</div>
|
|
17
16
|
<% end %>
|
|
18
17
|
</li>
|
|
19
18
|
<li>
|
|
20
|
-
<%= link_to abs_url("/solutions/
|
|
21
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-
|
|
22
|
-
<div class="flex flex-col justify-center">
|
|
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>
|
|
25
|
-
</div>
|
|
26
|
-
<% end %>
|
|
27
|
-
</li>
|
|
28
|
-
<li>
|
|
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")) %>
|
|
19
|
+
<%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
|
|
20
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
|
|
31
21
|
<div class="flex flex-col justify-center">
|
|
32
|
-
<p class="ui-meganav-media-heading">
|
|
33
|
-
<p class="ui-meganav-media-copy">
|
|
22
|
+
<p class="ui-meganav-media-heading">Chat</p>
|
|
23
|
+
<p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
|
|
34
24
|
</div>
|
|
35
25
|
<% end %>
|
|
36
26
|
</li>
|
|
37
27
|
<li>
|
|
38
|
-
<%= link_to abs_url("/solutions/
|
|
39
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-
|
|
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")) %>
|
|
28
|
+
<%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %>
|
|
29
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
|
|
49
30
|
<div class="flex flex-col justify-center">
|
|
50
|
-
<p class="ui-meganav-media-heading">
|
|
51
|
-
<p class="ui-meganav-media-copy">
|
|
31
|
+
<p class="ui-meganav-media-heading">Virtual Events</p>
|
|
32
|
+
<p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
|
|
52
33
|
</div>
|
|
53
34
|
<% end %>
|
|
54
35
|
</li>
|
|
55
36
|
<li>
|
|
56
|
-
<%= link_to abs_url("/solutions/
|
|
57
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-
|
|
37
|
+
<%= link_to abs_url("/solutions/multi-user-virtual-spaces"), class: "ui-meganav-media-with-image group" do %>
|
|
38
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
|
|
58
39
|
<div class="flex flex-col justify-center">
|
|
59
|
-
<p class="ui-meganav-media-heading">
|
|
60
|
-
<p class="ui-meganav-media-copy">
|
|
40
|
+
<p class="ui-meganav-media-heading">Multi-user virtual spaces</p>
|
|
41
|
+
<p class="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
|
|
61
42
|
</div>
|
|
62
43
|
<% end %>
|
|
63
44
|
</li>
|
|
64
45
|
</ul>
|
|
65
46
|
</div>
|
|
66
47
|
|
|
67
|
-
<div class="col-span-full md:col-span-4 pt-24 pb-
|
|
48
|
+
<div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
|
|
68
49
|
<h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
|
|
69
50
|
Industry
|
|
70
51
|
</h3>
|
|
@@ -99,11 +80,6 @@
|
|
|
99
80
|
<p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
|
|
100
81
|
<% end %>
|
|
101
82
|
</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">
|
|
107
83
|
<li>
|
|
108
84
|
<%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
|
|
109
85
|
<p class="ui-meganav-media-heading">eCommerce & Retail</p>
|
|
@@ -130,6 +106,26 @@
|
|
|
130
106
|
</li>
|
|
131
107
|
</ul>
|
|
132
108
|
</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>
|
|
133
129
|
</section>
|
|
134
130
|
<div class="ui-meganav-content-spacer"></div>
|
|
135
131
|
</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:()=>U});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);u(5044);var p=["name","size","color","additionalCSS"];function d(){return d=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},d.apply(this,arguments)}var y=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,p);return i().createElement("svg",d({className:"".concat(c," ").concat(u),style:{width:n,height:n}},l),i().createElement("use",{xlinkHref:"#sprite-".concat(t)}))};y.propTypes={name:f().string.isRequired,size:f().string,color:f().string,additionalCSS:f().string};const b=y;function m(){return m=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},m.apply(this,arguments)}function v(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,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)||w(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 h(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(e){return function(e){if(Array.isArray(e))return j(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||w(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 w(e,t){if(e){if("string"==typeof e)return j(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)?j(e,t):void 0}}function j(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 x="ui-flashes",S={items:[]},E=(h({},"flashes",(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:S,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(O(e.items),O(r))}}return e})),{type:f().oneOf(["error","success","notice","info","alert"]),content:f().string}),P={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},A={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},k=["success","info","notice"],q=function(e){var t=e.type,r=e.content,n=(0,o.useRef)(null),c=g((0,o.useState)(!1),2),u=c[0],l=c[1],s=g((0,o.useState)(0),2),f=s[0],p=s[1],d=g((0,o.useState)(!1),2),y=d[0],m=d[1];(0,o.useEffect)((function(){return m(!0)}),[]),(0,o.useEffect)((function(){k.includes(t)&&setTimeout((function(){h()}),8e3)}),[u]);var v,h=function(){n.current&&p(n.current.getBoundingClientRect().height),setTimeout((function(){return l(!0)}),0)},O=y&&!u;v=f&&!u?{height:"".concat(f,"px")}:u?{height:0,marginTop:0,zIndex:-1}:{};var w=a().sanitize(r,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]}),j={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"},x={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(O?"ui-flash-message-enter":""),style:v,ref:n,"data-id":"ui-flash"},i().createElement("div",{className:"".concat(P[t]," p-32 flex align-center rounded shadow-container-subtle")},j[t]&&i().createElement(b,{name:j[t],color:x[t],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),i().createElement("p",{className:"ui-flash-text ".concat(A[t]),dangerouslySetInnerHTML:{__html:w}}),i().createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:h},i().createElement(b,{name:"icon-gui-close",color:x[t],size:"1.5rem",additionalCSS:"transition-colors"}))))};q.propTypes=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?v(Object(r),!0).forEach((function(t){h(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):v(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},E);var T=function(e){var t=e.flashes,r=(null==t?void 0:t.items)||[];return i().createElement("div",{className:"ui-flash","data-id":x},r.map((function(e){return i().createElement(q,m({key:e.type},e))})))};T.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(E))})};function C(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 L(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 z=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(x);t&&(t.style.marginTop=e?"4rem":null)},D=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},I=function(e){e.style.maxHeight=0,e.style.overflow="hidden",z(!1)},N=function(e){e.style.maxHeight=null,e.style.overflow=null,z(!0)};const U=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(){};D(r),N(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?C(Object(r),!0).forEach((function(t){L(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):C(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&&I(e);var t=n()((function(){window.scrollY>5?I(e):e.style.overflow&&N(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),I(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){D(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})()}));
|