ably-ui 7.8.2 → 7.8.4.dev.f992ca8
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 +12 -4
- data/lib/ably_ui/core/fonts/source-code-pro.css +3 -0
- data/lib/ably_ui/core/styles.css +17 -22
- 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 +11 -8
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: eca0b5d2b712a2d72912b595c3ae2791ef9d317a75d351128ab34c232adea3b3
|
4
|
+
data.tar.gz: 023ac78d51b4be017394ed64ebfd3096f922a0bae762653aad4b4490bae031c8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fcdcd87a9fff2720129d80eb4265883d3621f1c0ccccc77b195db07bb52e9f3c9b43d05ae716e75ff461da8d4e1080929d9cfd590a08f0c6d64878ba6cd9f4fd
|
7
|
+
data.tar.gz: 358db8bcbe5d481f09781f30894aff903786543112c331f1c991684fbb1b4af446b8f40fb17cd3eb897ae5cfcbf5b60268ffe668ba861aa87cc59b59d2c78246
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -73,8 +73,16 @@ import "@ably/ui/core/styles.css";
|
|
73
73
|
Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into your app:
|
74
74
|
|
75
75
|
1. Add AblyUI to your project
|
76
|
-
|
77
|
-
1.
|
76
|
+
2. Add TailwindCSS to your project
|
77
|
+
1. By project type:
|
78
|
+
1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
|
79
|
+
2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
|
80
|
+
1. Add postCSS import with `npm install postcss-import`
|
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
|
+
2. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
|
83
|
+
3. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
|
84
|
+
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
|
+
4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
|
78
86
|
|
79
87
|
```js
|
80
88
|
const extendConfig = require("@ably/ui/tailwind.extend.js");
|
@@ -93,7 +101,7 @@ module.exports = extendConfig((ablyUIConfig) => ({
|
|
93
101
|
}));
|
94
102
|
```
|
95
103
|
|
96
|
-
1. In the CSS file you added your tailwind declarations
|
104
|
+
1. In the CSS file you added your tailwind declarations to, import the CSS for the modules and components you need:
|
97
105
|
|
98
106
|
```css
|
99
107
|
@import "tailwindcss/base";
|
@@ -136,7 +144,7 @@ Note that this loads neither CSS nor JS — these need to still be loaded by a b
|
|
136
144
|
|
137
145
|
### Icons
|
138
146
|
|
139
|
-
Putting SVG files inside
|
147
|
+
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.
|
140
148
|
|
141
149
|
Usage with the `Icon` React component:
|
142
150
|
|
data/lib/ably_ui/core/styles.css
CHANGED
@@ -15,9 +15,10 @@
|
|
15
15
|
--color-charcoal-grey: #292831;
|
16
16
|
--color-gui-default: #0073e6;
|
17
17
|
--color-gui-hover: #0867c4;
|
18
|
-
--color-gui-focus: #
|
18
|
+
--color-gui-focus: #0073e6;
|
19
|
+
--color-gui-focus-outline: #80b9f2;
|
19
20
|
--color-gui-active: #074095;
|
20
|
-
--color-gui-
|
21
|
+
--color-gui-visited: #4887c2;
|
21
22
|
--color-gui-unavailable: #a8a8a8;
|
22
23
|
--color-gui-error: #fb0c0c;
|
23
24
|
--color-gui-success: #11cb24;
|
@@ -155,7 +156,7 @@
|
|
155
156
|
/* In components, when looking at implementing viewport margin and spacing between elements,
|
156
157
|
the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
|
157
158
|
alternatively, look for ui-grid-* helpers. */
|
158
|
-
--bp-xs:
|
159
|
+
--bp-xs: 428px; /* gutters 8px, side-margin 24px */
|
159
160
|
--bp-sm: 768px; /* gutters 16px, side-margin 32px */
|
160
161
|
--bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
|
161
162
|
--bp-lg: 1280px; /* gutters 24px, side-margin 64px */
|
@@ -343,17 +344,17 @@
|
|
343
344
|
}
|
344
345
|
|
345
346
|
.ui-text-p1 {
|
346
|
-
@apply font-sans font-light text-
|
347
|
+
@apply font-sans font-light text-charcoal-grey;
|
347
348
|
@apply text-p1;
|
348
349
|
}
|
349
350
|
|
350
351
|
.ui-text-p2 {
|
351
|
-
@apply font-sans font-light text-
|
352
|
+
@apply font-sans font-light text-charcoal-grey;
|
352
353
|
@apply text-p2;
|
353
354
|
}
|
354
355
|
|
355
356
|
.ui-text-p3 {
|
356
|
-
@apply font-sans font-light text-
|
357
|
+
@apply font-sans font-light text-charcoal-grey;
|
357
358
|
@apply text-p3;
|
358
359
|
}
|
359
360
|
|
@@ -459,24 +460,18 @@
|
|
459
460
|
@apply list-square;
|
460
461
|
}
|
461
462
|
|
462
|
-
|
463
|
-
|
464
|
-
@apply text-gui-
|
463
|
+
.ui-link {
|
464
|
+
@apply visited:text-gui-visited;
|
465
|
+
@apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
|
466
|
+
@apply focus:text-gui-focus focus:outline-gui-focus;
|
467
|
+
@apply underline;
|
465
468
|
}
|
466
469
|
|
467
|
-
.ui-link {
|
468
|
-
@apply
|
469
|
-
-
|
470
|
-
|
471
|
-
|
472
|
-
-webkit-text-decoration-line: underline;
|
473
|
-
text-decoration-line: underline;
|
474
|
-
text-decoration-thickness: 0.125rem;
|
475
|
-
}
|
476
|
-
|
477
|
-
.ui-link:focus {
|
478
|
-
@apply focus:text-white focus:bg-active-orange focus:outline-none;
|
479
|
-
text-decoration: none;
|
470
|
+
.ui-link-neutral {
|
471
|
+
@apply visited:text-dark-grey;
|
472
|
+
@apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
|
473
|
+
@apply focus:text-gui-focus focus:outline-gui-focus-neutral;
|
474
|
+
@apply underline;
|
480
475
|
}
|
481
476
|
}
|
482
477
|
@layer components {
|
@@ -0,0 +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.React=e.AblyUi.React||{},e.AblyUi.React.ConnectStateWrapper=t())}(this,(function(){return{}.default}));
|
@@ -0,0 +1 @@
|
|
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
CHANGED
metadata
CHANGED
@@ -1,16 +1,16 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ably-ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 7.8.
|
4
|
+
version: 7.8.4.dev.f992ca8
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Dominik Piatek
|
8
8
|
- Arti Mathanda
|
9
9
|
- Bruce Thomas
|
10
|
-
autorequire:
|
10
|
+
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date: 2022-
|
13
|
+
date: 2022-06-22 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: view_component
|
@@ -32,7 +32,7 @@ dependencies:
|
|
32
32
|
- - "<"
|
33
33
|
- !ruby/object:Gem::Version
|
34
34
|
version: '2.50'
|
35
|
-
description:
|
35
|
+
description:
|
36
36
|
email:
|
37
37
|
- dominik.piatek@ably.com
|
38
38
|
- arti.mathanda@ably.com
|
@@ -91,6 +91,7 @@ files:
|
|
91
91
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
|
92
92
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
|
93
93
|
- lib/ably_ui/core/fonts/next.css
|
94
|
+
- lib/ably_ui/core/fonts/source-code-pro.css
|
94
95
|
- lib/ably_ui/core/footer/component.css
|
95
96
|
- lib/ably_ui/core/footer/component.js
|
96
97
|
- lib/ably_ui/core/footer/footer.html.erb
|
@@ -201,6 +202,8 @@ files:
|
|
201
202
|
- lib/ably_ui/core/uptime/component.js
|
202
203
|
- lib/ably_ui/core/uptime/uptime.html.erb
|
203
204
|
- lib/ably_ui/core/uptime/uptime.rb
|
205
|
+
- lib/ably_ui/react/connect_state_wrapper/component.js
|
206
|
+
- lib/ably_ui/react/scripts.js
|
204
207
|
- lib/ably_ui/reset/scripts.js
|
205
208
|
- lib/ably_ui/reset/styles.css
|
206
209
|
- lib/ably_ui/version.rb
|
@@ -209,7 +212,7 @@ licenses:
|
|
209
212
|
- Apache-2.0
|
210
213
|
metadata:
|
211
214
|
source_code_uri: https://github.com/ably/ably-ui
|
212
|
-
post_install_message:
|
215
|
+
post_install_message:
|
213
216
|
rdoc_options: []
|
214
217
|
require_paths:
|
215
218
|
- lib
|
@@ -220,12 +223,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
220
223
|
version: '0'
|
221
224
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
222
225
|
requirements:
|
223
|
-
- - "
|
226
|
+
- - ">"
|
224
227
|
- !ruby/object:Gem::Version
|
225
|
-
version:
|
228
|
+
version: 1.3.1
|
226
229
|
requirements: []
|
227
230
|
rubygems_version: 3.2.3
|
228
|
-
signing_key:
|
231
|
+
signing_key:
|
229
232
|
specification_version: 4
|
230
233
|
summary: Shared component library and design system for Ably Real-time Ltd (ably.com)
|
231
234
|
test_files: []
|