ably-ui 11.7.1.dev.a87b30a → 11.7.1.dev.c1ae187
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 +0 -1
- data/lib/ably_ui/core/featured_link/component.css +0 -15
- data/lib/ably_ui/core/featured_link/component.js +1 -1
- data/lib/ably_ui/core/featured_link/featured_link.html.erb +14 -5
- data/lib/ably_ui/core/featured_link/featured_link.rb +3 -1
- data/lib/ably_ui/core/showcase/component.js +1 -1
- data/lib/ably_ui/core/showcase/showcase.html.erb +2 -2
- data/lib/ably_ui/core/styles.css +4 -0
- data/lib/ably_ui/core/uptime/component.css +1 -2
- 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: be5713ec0ddd266bc5859fe367a12c747e47ca4e3497f306df65333aa3eea38c
|
|
4
|
+
data.tar.gz: e6338c428ed6ab90feb943393e429401be88f2e238004693392a94c7ecfabf07
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '0128666e5748d1597b33251b615adfae7447c918a5142ec7957c794431027159222f69b9b3d1d15b0353dab76dc702e7b227de978c518af0263a7cbc741306b5'
|
|
7
|
+
data.tar.gz: f25d22c85dbf8dbec34c361b01f155eb4902056e2194dbf50b93c32a0f7874966796345ae3be89890188b4979dcb92c87226135d38c04fc7e28f6b5bb2586046
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -80,7 +80,6 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
|
|
|
80
80
|
1. Add postCSS import with `npm install postcss-import`
|
|
81
81
|
1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
|
|
82
82
|
1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
|
|
83
|
-
1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
|
|
84
83
|
3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
|
|
85
84
|
4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
|
|
86
85
|
|
|
@@ -1,16 +1 @@
|
|
|
1
|
-
@layer components {
|
|
2
|
-
.ui-featured-link {
|
|
3
|
-
@apply font-sans font-bold block;
|
|
4
|
-
@apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.ui-featured-link:hover svg {
|
|
8
|
-
@apply left-0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.ui-featured-link-icon {
|
|
12
|
-
transition: left 100ms ease-in-out;
|
|
13
|
-
@apply align-middle ml-8 relative -top-1 -left-4;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
1
|
|
|
@@ -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,6 +1,15 @@
|
|
|
1
|
-
<%= link_to(@url, class: "
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
+
<% if @reverse %>
|
|
3
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
|
|
4
|
+
size: "calc(var(--featured-link-icon-size) * 1.25)",
|
|
5
|
+
color: @icon_color,
|
|
6
|
+
additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
|
|
7
|
+
<%= content -%>
|
|
8
|
+
<% else %>
|
|
9
|
+
<%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
|
|
10
|
+
size: "calc(var(--featured-link-icon-size) * 1.25)",
|
|
11
|
+
color: @icon_color,
|
|
12
|
+
additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
6
15
|
<% end %>
|
|
@@ -3,15 +3,17 @@ module AblyUi
|
|
|
3
3
|
class FeaturedLink < ViewComponent::Base
|
|
4
4
|
def initialize(
|
|
5
5
|
url:,
|
|
6
|
-
text_size: 'text-
|
|
6
|
+
text_size: 'text-p2',
|
|
7
7
|
icon_color: 'text-cool-black',
|
|
8
8
|
flush: false,
|
|
9
|
+
reverse: false,
|
|
9
10
|
additional_css: ''
|
|
10
11
|
)
|
|
11
12
|
@url = url
|
|
12
13
|
@text_size = text_size
|
|
13
14
|
@icon_color = icon_color
|
|
14
15
|
@flush = flush
|
|
16
|
+
@reverse = reverse
|
|
15
17
|
@additional_css = additional_css
|
|
16
18
|
end
|
|
17
19
|
end
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,h,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,y,h,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["grayscale","grayscale-0"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||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.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(y=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){y.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(h=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",h),function(){return l.parentNode.removeEventListener("wheel",h)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
type: 'button',
|
|
14
14
|
data: { id: 'showcase-control' },
|
|
15
15
|
aria: { controls: @random_id } do %>
|
|
16
|
-
<%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? '
|
|
16
|
+
<%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'grayscale-0' : 'grayscale', 'hover:grayscale-0'], srcset: [["#{company[:logo2x]}", "2x"]] %>
|
|
17
17
|
<% end %>
|
|
18
18
|
</li>
|
|
19
19
|
<% end %>
|
|
@@ -40,7 +40,7 @@
|
|
|
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
|
-
<%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48
|
|
43
|
+
<%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 grayscale" %>
|
|
44
44
|
</div>
|
|
45
45
|
<div>
|
|
46
46
|
<p class="text-p2 font-medium"><%= company[:author][:name] %></p>
|
data/lib/ably_ui/core/styles.css
CHANGED
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.c1ae187
|
|
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-27 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: view_component
|