ably-ui 7.8.2.dev.e8b31f4 → 7.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93fe05c1f516bd76cd872302ea5300bb8117129228348fca7442355c1afb5c37
-  data.tar.gz: 5ebcc9f5f087c67c4adc6efa9ee507640f894a4ecef0b41b4aad4360c9f154ca
+  metadata.gz: bde61226b5f6a191c68aa300a043c9cece9986a3b3dac6af0f2a94af71ccc2af
+  data.tar.gz: d0612a892d69a1e47db0b6c0deb2e47dc49921e8397b609b6445e9372ae4b519
 SHA512:
-  metadata.gz: 99cfd4edbc8e1bcddc11bdbe8ca3c255e38315a214fb456689f13fb87b218d26204d9a9c5c247f22f9755b54203029cb2e0b11cc4909f067a5283fa3f582e178
-  data.tar.gz: 27951a326a734504d60d4d89779916ae073828535173619d08397beebbb7d1526978a9b99192e5bef9f00bcfb2cc06fbc4849b8293fdc4dcf4eb3d9d3a5a78de
+  metadata.gz: 50eb420c73b8fd342d329f4645e2a23c97c29ebf5da91b43efeb6b2ff22efc1e36a0db602764c2fc76d478cdf3e39a53694dd0ade5405cb58792dc38d705c94b
+  data.tar.gz: 790d81482e6f4573059c3773a1145151c2be7bda2607ec188fea5d174164285c5ee474257be9035911a563c3e26ec6544a5bb2f86cc200aaeee32c9be4c5bdcf

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (7.8.2)
+    ably-ui (7.8.0.dev.502e5bf)
       view_component (>= 2.33, < 2.50)
 
 GEM

data/README.md

@@ -73,16 +73,8 @@ import "@ably/ui/core/styles.css";
 Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into your app:
 
 1. Add AblyUI to your project
-2. Add TailwindCSS to your project
-   1. By project type:
-       1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
-       2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
-          1. Add postCSS import with `npm install postcss-import`
-    1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
-    2. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
-    3. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
-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
-4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
+1. Add TailwindCSS to your project https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin
+1. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
 
 ```js
 const extendConfig = require("@ably/ui/tailwind.extend.js");
@@ -101,7 +93,7 @@ module.exports = extendConfig((ablyUIConfig) => ({
 }));
 ```
 
-1. In the CSS file you added your tailwind declarations to, import the CSS for the modules and components you need:
+1. In the CSS file you added your tailwind declarations too, import the CSS for the modules and components you need:
 
 ```css
 @import "tailwindcss/base";
@@ -144,7 +136,7 @@ Note that this loads neither CSS nor JS — these need to still be loaded by a b
 
 ### Icons
 
-Putting SVG files inside a`src/MODULE_NAME/icons` folder will add them to a per-module sprites file that will be available at the root of the module (e.g., `core/sprites.svg`). This file can be loaded with the `loadSprites` helper available in the `core` module or include in the page directly.
+Putting SVG files inside and `src/MODULE_NAME/icons` folder will add them to a per-module sprites file that will be available at the root of the module (e.g., `core/sprites.svg`). This file can be loaded with the `loadSprites` helper available in the `core` module or include in the page directly.
 
 Usage with the `Icon` React component:
 

data/lib/ably_ui/core/styles.css

@@ -15,10 +15,9 @@
     --color-charcoal-grey: #292831;
     --color-gui-default: #0073e6;
     --color-gui-hover: #0867c4;
-    --color-gui-focus: #0073e6;
-    --color-gui-focus-outline: #80b9f2;
+    --color-gui-focus: #80b9f2;
     --color-gui-active: #074095;
-    --color-gui-visited: #4887c2;
+    --color-gui-viewed: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
     --color-gui-success: #11cb24;
@@ -156,7 +155,7 @@
     /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
        alternatively, look for ui-grid-* helpers. */
-    --bp-xs: 428px; /* gutters 8px, side-margin 24px */
+    --bp-xs: 375px; /* gutters 8px, side-margin 24px */
     --bp-sm: 768px; /* gutters 16px, side-margin 32px */
     --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
     --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
@@ -344,17 +343,17 @@
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-light text-cool-black;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-light text-cool-black;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-light text-cool-black;
     @apply text-p3;
   }
 
@@ -460,18 +459,24 @@
     @apply list-square;
   }
 
-  .ui-link {
-    @apply visited:text-gui-visited;
-    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus;
-    @apply underline;
+  /* visited needs to come before :hover et all else it overrides them */
+  .ui-link:visited {
+    @apply text-gui-viewed;
   }
 
-  .ui-link-neutral {
-    @apply visited:text-dark-grey;
-    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
-    @apply underline;
+  .ui-link {
+    @apply hover:text-active-orange active:text-red-orange;
+    -webkit-text-decoration-color: var(--color-active-orange);
+            text-decoration-color: var(--color-active-orange);
+    text-underline-offset: 4px; /* px used here as behaves weird with rem's */
+    -webkit-text-decoration-line: underline;
+            text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+  }
+
+  .ui-link:focus {
+    @apply focus:text-white focus:bg-active-orange focus:outline-none;
+    text-decoration: none;
   }
 }
 @layer components {

data/lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '7.8.2.dev.e8b31f4'
+  VERSION = '7.8.2'
 end

metadata

@@ -1,16 +1,16 @@
 --- !ruby/object:Gem::Specification
 name: ably-ui
 version: !ruby/object:Gem::Version
-  version: 7.8.2.dev.e8b31f4
+  version: 7.8.2
 platform: ruby
 authors:
 - Dominik Piatek
 - Arti Mathanda
 - Bruce Thomas
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-06-09 00:00:00.000000000 Z
+date: 2022-05-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component
@@ -32,7 +32,7 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '2.50'
-description:
+description: 
 email:
 - dominik.piatek@ably.com
 - arti.mathanda@ably.com
@@ -91,7 +91,6 @@ files:
 - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
 - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
 - lib/ably_ui/core/fonts/next.css
-- lib/ably_ui/core/fonts/source-code-pro.css
 - lib/ably_ui/core/footer/component.css
 - lib/ably_ui/core/footer/component.js
 - lib/ably_ui/core/footer/footer.html.erb
@@ -202,8 +201,6 @@ files:
 - 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
@@ -212,7 +209,7 @@ licenses:
 - Apache-2.0
 metadata:
   source_code_uri: https://github.com/ably/ably-ui
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -223,12 +220,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.2.3
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Shared component library and design system for Ably Real-time Ltd (ably.com)
 test_files: []

data/lib/ably_ui/core/fonts/source-code-pro.css

@@ -1,3 +0,0 @@
-@layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
-}

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

@@ -1 +0,0 @@
-!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

@@ -1 +0,0 @@
-!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})()}));