ably-ui 4.2.0.dev.1a5533f → 4.2.0.dev.04ce1ff

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d90d2dcabfe89fbf34064b45b05e22286e68f0508475509e6a7ab9e32ac45513
-  data.tar.gz: f385c2cb554a828e6faa7678291d23a1f95688edbefb19ad3fe8d873a11ffcf0
+  metadata.gz: 3e9bcbf240a0a1b7b1ed243c7093590ed8be5713a3b806b035d012037b40d6a3
+  data.tar.gz: 330b62568bc989475fe6fd50ee34c223bd4d3d6a33c298affbf33be0741c5667
 SHA512:
-  metadata.gz: e63f99bd5cb2d9736b3d5d5cf903f42d536868d862beee75fd6106613d6d4270e59f62676ed7aaa30f3191a830a31a14af6250074e9998ca3dc38c01ae631912
-  data.tar.gz: bbbf3d2ae41413b024e2e79bc2eb90a775882a617182df8fa7856c374327847f826b1802f58b361d4c744a8462feb7ac183b696d02d1a7ab7819dd4d8189cd67
+  metadata.gz: 46f4b7d0fe610d29029e0bbf0ab1288f15a4adf2133aab21b78f9edaaa3384ed31790e2ff61c2208bef40becdb2ac409d2046bd28619e9b59cf131398ad4cfef
+  data.tar.gz: 99e9c11d107b617943e401fc7c1e0ba6b0a2bb5c4f33fe3f016c734456dc947039ad569fe811f6006e6fb719cf4d84b332f2b7dd08d6365030e0b3bb03d2245c

data/ably-ui.gemspec

@@ -10,10 +10,10 @@ Gem::Specification.new do |spec|
   spec.email         = ["dominik.piatek@ably.com", "arti.mathanda@ably.com", "bruce.thomas@ably.com"]
   spec.summary       = "Shared component library and design system for Ably Real-time Ltd (ably.com)"
   spec.licenses      = ['Apache-2.0']
-  spec.homepage      = "https://github.com/ably/ui"
+  spec.homepage      = "https://github.com/ably/ably-ui"
 
   spec.metadata = {
-    "source_code_uri" => "https://github.com/ably/ui",
+    "source_code_uri" => "https://github.com/ably/ably-ui",
   }
 
   spec.files         = Dir['lib/**/*'] + %w[Gemfile Gemfile.lock LICENSE README.md ably-ui.gemspec]

data/lib/ably_ui/core/core.base.css

@@ -0,0 +1 @@
+@import "./styles/properties.css";

data/lib/ably_ui/core/core.components.css

@@ -0,0 +1,49 @@
+@import "./styles/buttons.css";
+@import "./styles/layout.css";
+@import "./styles/text.css";
+
+@layer components {
+  .ui-input {
+    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+    @apply max-w-screen-sm;
+  }
+
+  /* Basis for icon component */
+  .ui-icon-cool-black {
+    stroke: var(--color-cool-black);
+  }
+
+  .ui-icon-white {
+    stroke: var(--color-white);
+  }
+
+  .ui-icon-dark-grey {
+    stroke: var(--color-dark-grey);
+  }
+
+  /* Extend how tailwind does group hover for icons */
+  .group {
+    &:hover {
+      .group-hover\:icon-gui-hover {
+        stroke: var(--color-gui-hover);
+      }
+    }
+
+    &:focus {
+      .group-focus\:icon-gui-focus {
+        stroke: var(--color-gui-focus);
+      }
+    }
+  }
+
+  .ui-version-tag {
+    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
+
+    position: relative;
+    vertical-align: super;
+    margin-left: 3px;
+    font-size: 8px;
+  }
+}

data/lib/ably_ui/core/styles.base.css

@@ -0,0 +1 @@
+@import "./styles/properties.css";

data/lib/ably_ui/core/styles.components.css

@@ -0,0 +1,49 @@
+@import "./styles/buttons.css";
+@import "./styles/layout.css";
+@import "./styles/text.css";
+
+@layer components {
+  .ui-input {
+    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+    @apply max-w-screen-sm;
+  }
+
+  /* Basis for icon component */
+  .ui-icon-cool-black {
+    stroke: var(--color-cool-black);
+  }
+
+  .ui-icon-white {
+    stroke: var(--color-white);
+  }
+
+  .ui-icon-dark-grey {
+    stroke: var(--color-dark-grey);
+  }
+
+  /* Extend how tailwind does group hover for icons */
+  .group {
+    &:hover {
+      .group-hover\:icon-gui-hover {
+        stroke: var(--color-gui-hover);
+      }
+    }
+
+    &:focus {
+      .group-focus\:icon-gui-focus {
+        stroke: var(--color-gui-focus);
+      }
+    }
+  }
+
+  .ui-version-tag {
+    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
+
+    position: relative;
+    vertical-align: super;
+    margin-left: 3px;
+    font-size: 8px;
+  }
+}

data/lib/ably_ui/react/connect_state_wrapper/component.js

@@ -0,0 +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.React=e.AblyUi.React||{},e.AblyUi.React.ConnectStateWrapper=t())}(this,(function(){return{}.default}));

data/lib/ably_ui/react/scripts.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define([,],t):"object"==typeof exports?exports.AblyUi=t(require("react"),require("react-dom")):(e.AblyUi=e.AblyUi||{},e.AblyUi.React=t(e[void 0],e[void 0]))}(this,(function(e,t){return(()=>{"use strict";var r={281:t=>{t.exports=e},645:e=>{e.exports=t}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={exports:{}};return r[e](n,n.exports,a),n.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{a.r(n),a.d(n,{reactRenderer:()=>i});var e=a(281),t=a.n(e),r=a(645),o=a.n(r);function i(e){var r=document.querySelectorAll("[data-react]");Array.from(r).forEach((function(r){var a=r.getAttribute("data-react"),n=e[a];if(!n)throw new Error('Found a data-react attribute with "'.concat(a,'" but no matching component.'));var i=r.getAttribute("data-react-props"),c=i&&JSON.parse(i||{});o().render(t().createElement(n,c),r),r.removeAttribute("data-react"),r.removeAttribute("data-react-props")}))}})(),n})()}));

data/lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '4.2.0.dev.1a5533f'
+  VERSION = '4.2.0.dev.04ce1ff'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ably-ui
 version: !ruby/object:Gem::Version
-  version: 4.2.0.dev.1a5533f
+  version: 4.2.0.dev.04ce1ff
 platform: ruby
 authors:
 - Dominik Piatek
@@ -52,6 +52,8 @@ files:
 - lib/ably_ui/core/contact_footer/contact_footer.rb
 - lib/ably_ui/core/cookie_message/component.css
 - lib/ably_ui/core/cookie_message/component.js
+- lib/ably_ui/core/core.base.css
+- lib/ably_ui/core/core.components.css
 - lib/ably_ui/core/core.rb
 - lib/ably_ui/core/feature_footer/component.css
 - lib/ably_ui/core/feature_footer/component.js
@@ -175,19 +177,23 @@ files:
 - lib/ably_ui/core/slider/slider.html.erb
 - lib/ably_ui/core/slider/slider.rb
 - lib/ably_ui/core/sprites.svg
+- lib/ably_ui/core/styles.base.css
+- lib/ably_ui/core/styles.components.css
 - lib/ably_ui/core/styles.css
 - lib/ably_ui/core/uptime/component.css
 - lib/ably_ui/core/uptime/component.js
 - lib/ably_ui/core/uptime/uptime.html.erb
 - lib/ably_ui/core/uptime/uptime.rb
+- lib/ably_ui/react/connect_state_wrapper/component.js
+- lib/ably_ui/react/scripts.js
 - lib/ably_ui/reset/scripts.js
 - lib/ably_ui/reset/styles.css
 - lib/ably_ui/version.rb
-homepage: https://github.com/ably/ui
+homepage: https://github.com/ably/ably-ui
 licenses:
 - Apache-2.0
 metadata:
-  source_code_uri: https://github.com/ably/ui
+  source_code_uri: https://github.com/ably/ably-ui
 post_install_message:
 rdoc_options: []
 require_paths: