ably-ui 8.7.0.dev.4de588d → 8.7.0.dev.4e08581
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 +2 -9
- data/lib/ably_ui/core/code/component.css +3 -3
- data/lib/ably_ui/core/code/component.js +1 -1
- data/lib/ably_ui/core/core.rb +4 -12
- data/lib/ably_ui/core/feature_footer/feature_footer.html.erb +1 -1
- data/lib/ably_ui/core/footer/component.css +0 -10
- data/lib/ably_ui/core/footer/footer.html.erb +50 -112
- 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_developers/meganav_content_developers.html.erb +8 -17
- data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +1 -1
- data/lib/ably_ui/core/meganav_search_suggestions/meganav_search_suggestions.html.erb +1 -1
- data/lib/ably_ui/core/notice/component.js +1 -1
- data/lib/ably_ui/core/sprites.svg +1 -42
- data/lib/ably_ui/core/styles.css +0 -2
- data/lib/ably_ui/react/connect_state_wrapper/component.js +1 -0
- data/lib/ably_ui/react/scripts.js +1 -0
- data/lib/ably_ui/version.rb +1 -1
- metadata +4 -7
- data/lib/ably_ui/core/dropdown_menu/component.js +0 -1
- 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
|
@@ -1,26 +1,17 @@
|
|
|
1
|
+
require 'securerandom'
|
|
2
|
+
|
|
1
3
|
module AblyUi
|
|
2
4
|
module Core
|
|
3
5
|
class Logo < ViewComponent::Base
|
|
4
6
|
include AblyUi::Core::MeganavConfig
|
|
5
7
|
|
|
6
|
-
attr_reader :href,
|
|
7
|
-
:logo_url,
|
|
8
|
-
:data_id,
|
|
9
|
-
:additional_img_attrs,
|
|
10
|
-
:additional_link_attrs
|
|
8
|
+
attr_reader :href, :data_id, :gradient_id_0, :gradient_id_1
|
|
11
9
|
|
|
12
|
-
def initialize(
|
|
13
|
-
href:,
|
|
14
|
-
logo_url:,
|
|
15
|
-
data_id: '',
|
|
16
|
-
additional_img_attrs: {},
|
|
17
|
-
additional_link_attrs: {}
|
|
18
|
-
)
|
|
10
|
+
def initialize(data_id: '', href:)
|
|
19
11
|
@data_id = data_id
|
|
20
12
|
@href = href
|
|
21
|
-
@
|
|
22
|
-
@
|
|
23
|
-
@additional_link_attrs = additional_link_attrs
|
|
13
|
+
@gradient_id_0 = "paint_linear_#{SecureRandom.uuid}"
|
|
14
|
+
@gradient_id_1 = "paint_linear_#{SecureRandom.uuid}"
|
|
24
15
|
end
|
|
25
16
|
|
|
26
17
|
def logo_href
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
"panels": [
|
|
32
32
|
{ "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
|
|
33
|
-
{ "label": "Solutions", "shortLabel": "
|
|
33
|
+
{ "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
|
|
34
34
|
{ "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
|
|
35
35
|
{ "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
|
|
36
36
|
]
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
<div class="ui-meganav ui-grid-px">
|
|
5
5
|
<div className="mr-24">
|
|
6
|
-
<%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link
|
|
6
|
+
<%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
|
|
7
7
|
</div>
|
|
8
8
|
<%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
|
|
9
9
|
|
|
@@ -6,7 +6,6 @@ module AblyUi
|
|
|
6
6
|
class Meganav < ViewComponent::Base
|
|
7
7
|
include MeganavConfig
|
|
8
8
|
include Util
|
|
9
|
-
include SharedAssets
|
|
10
9
|
attr_reader :options, :login_link, :logo_link, :url_base
|
|
11
10
|
|
|
12
11
|
renders_one :notice, AblyUi::Core::Notice
|
|
@@ -36,8 +35,8 @@ module AblyUi
|
|
|
36
35
|
class: 'AblyUi::Core::MeganavContentPlatform'
|
|
37
36
|
},
|
|
38
37
|
{
|
|
39
|
-
label: 'Solutions',
|
|
40
|
-
short_label: '
|
|
38
|
+
label: 'Use Cases & Solutions',
|
|
39
|
+
short_label: 'Use Cases',
|
|
41
40
|
id: 'use-cases-panel',
|
|
42
41
|
class: 'AblyUi::Core::MeganavContentUseCases'
|
|
43
42
|
},
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
<% end %>
|
|
17
17
|
</li>
|
|
18
18
|
<li>
|
|
19
|
-
<%= link_to abs_url("/docs/
|
|
20
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-
|
|
19
|
+
<%= link_to abs_url("/docs/key-concepts"), class: "ui-meganav-media-with-image group" do %>
|
|
20
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-lightbulb-col", size: "2.5rem")) %>
|
|
21
21
|
<div class="flex flex-col justify-center">
|
|
22
|
-
<p class="ui-meganav-media-heading">
|
|
23
|
-
<p class="ui-meganav-media-copy">
|
|
22
|
+
<p class="ui-meganav-media-heading">Concepts</p>
|
|
23
|
+
<p class="ui-meganav-media-copy">Read about core Ably platform concepts.</p>
|
|
24
24
|
</div>
|
|
25
25
|
<% end %>
|
|
26
26
|
</li>
|
|
27
27
|
<li>
|
|
28
|
-
<%= link_to abs_url("/
|
|
29
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-
|
|
28
|
+
<%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
|
|
29
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
|
|
30
30
|
<div class="flex flex-col justify-center">
|
|
31
|
-
<p class="ui-meganav-media-heading">
|
|
32
|
-
<p class="ui-meganav-media-copy">
|
|
31
|
+
<p class="ui-meganav-media-heading">Quickstart guides</p>
|
|
32
|
+
<p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
|
|
33
33
|
</div>
|
|
34
34
|
<% end %>
|
|
35
35
|
</li>
|
|
@@ -56,15 +56,6 @@
|
|
|
56
56
|
</div>
|
|
57
57
|
<% end %>
|
|
58
58
|
</li>
|
|
59
|
-
<li>
|
|
60
|
-
<%= link_to abs_url("/reference-guide-chat"), class: "ui-meganav-media-with-image group" do %>
|
|
61
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-col", size: "2.5rem")) %>
|
|
62
|
-
<div class="flex flex-col justify-center">
|
|
63
|
-
<p class="ui-meganav-media-heading">Chat apps reference guide</p>
|
|
64
|
-
<p class="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
|
|
65
|
-
</div>
|
|
66
|
-
<% end %>
|
|
67
|
-
</li>
|
|
68
59
|
</ul>
|
|
69
60
|
</div>
|
|
70
61
|
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
</li>
|
|
59
59
|
<li>
|
|
60
60
|
<%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
|
|
61
|
-
<p class="ui-meganav-media-heading">
|
|
61
|
+
<p class="ui-meganav-media-heading">Fintech</p>
|
|
62
62
|
<p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
|
|
63
63
|
<% end %>
|
|
64
64
|
</li>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<%= link_to 'Publish/Subscribe Messaging', abs_url("/docs/core-features/pubsub"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
|
|
13
13
|
</li>
|
|
14
14
|
<li class="py-12 pl-8 flex-shrink-0">
|
|
15
|
-
<%= link_to 'Platform', abs_url("/
|
|
15
|
+
<%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
|
|
16
16
|
</li>
|
|
17
17
|
</ul>
|
|
18
18
|
|
|
@@ -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})()}));
|