ably-ui 7.8.0 → 7.8.2.dev.e8b31f4

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 494466a56e66a9ee3ecf752f58e793156bf14028dcff63ef26b7dc9bea8b0ccc
4
- data.tar.gz: c16e417e18ef060884bbceabddd76d5ac0c731667c4ab0a28aa90f31d19c7a43
3
+ metadata.gz: 93fe05c1f516bd76cd872302ea5300bb8117129228348fca7442355c1afb5c37
4
+ data.tar.gz: 5ebcc9f5f087c67c4adc6efa9ee507640f894a4ecef0b41b4aad4360c9f154ca
5
5
  SHA512:
6
- metadata.gz: db9ac06c3dd5f9b7a11f27e347f91e52e6cf73e600011609e3a2bae478d1122c200ccc121019fa4b680ab818140b20d1364f7c8ddfae0054dd65499f860e8858
7
- data.tar.gz: a006f629b0a55f416709a02bff4be042bbc9c6279711625f4443bac64afd8ebdc84435081b50e8740d99b9ac8b865c7750e8693855618f7af4199eeee743285a
6
+ metadata.gz: 99cfd4edbc8e1bcddc11bdbe8ca3c255e38315a214fb456689f13fb87b218d26204d9a9c5c247f22f9755b54203029cb2e0b11cc4909f067a5283fa3f582e178
7
+ data.tar.gz: 27951a326a734504d60d4d89779916ae073828535173619d08397beebbb7d1526978a9b99192e5bef9f00bcfb2cc06fbc4849b8293fdc4dcf4eb3d9d3a5a78de
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- ably-ui (7.7.0.dev.250db1f)
4
+ ably-ui (7.8.2)
5
5
  view_component (>= 2.33, < 2.50)
6
6
 
7
7
  GEM
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
- 1. Add TailwindCSS to your project https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin
77
- 1. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
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 too, import the CSS for the modules and components you need:
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 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.
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
 
@@ -0,0 +1,3 @@
1
+ @layer base {
2
+ @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
3
+ }
@@ -1,13 +1,13 @@
1
1
  <%= link_to logo_href, class: 'h-32' do %>
2
- <%= tag.svg class: ["transition-colors", theme(:logo_text_color)], data: { id: data_id }, width: "108", height: "32", viewBox: "0 0 108 32", xmlns: "http://www.w3.org/2000/svg" do %>
2
+ <%= tag.svg class: ["transition-colors", "text-cool-black"], data: { id: data_id }, width: "108", height: "32", viewBox: "0 0 108 32", xmlns: "http://www.w3.org/2000/svg" do %>
3
3
  <path
4
4
  d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
5
5
  fill="currentColor"
6
6
  />
7
- <path d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z" fill="url(#paint0_linear)" />
8
- <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill="url(#paint1_linear)" />
7
+ <path d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z" fill="url(#<%= gradient_id_0 %>)" />
8
+ <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill="url(#<%= gradient_id_1 %>)" />
9
9
  <defs>
10
- <linearGradient id="paint0_linear" x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
10
+ <linearGradient id="<%= gradient_id_0 %>" x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
11
11
  <stop stop-color="#FF5416" />
12
12
  <stop offset="0.2535" stop-color="#FF5115" />
13
13
  <stop offset="0.461" stop-color="#FF4712" />
@@ -15,7 +15,7 @@
15
15
  <stop offset="0.8327" stop-color="#FF1E08" />
16
16
  <stop offset="1" stop-color="#FF0000" />
17
17
  </linearGradient>
18
- <linearGradient id="paint1_linear" x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
18
+ <linearGradient id="<%= gradient_id_1 %>" x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
19
19
  <stop stop-color="#FF5416" />
20
20
  <stop offset="0.2535" stop-color="#FF5115" />
21
21
  <stop offset="0.461" stop-color="#FF4712" />
@@ -1,14 +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, :data_id
8
+ attr_reader :href, :data_id, :gradient_id_0, :gradient_id_1
7
9
 
8
- def initialize(theme_name:, data_id: '', href:)
10
+ def initialize(data_id: '', href:)
9
11
  @data_id = data_id
10
12
  @href = href
11
- theme_setup(theme_name)
13
+ @gradient_id_0 = "paint_linear_#{SecureRandom.uuid}"
14
+ @gradient_id_1 = "paint_linear_#{SecureRandom.uuid}"
12
15
  end
13
16
 
14
17
  def logo_href
@@ -2,7 +2,7 @@
2
2
  <%= notice %>
3
3
 
4
4
  <div class="ui-meganav ui-grid-px">
5
- <%= render(AblyUi::Core::Logo.new(theme_name: @theme_name, data_id: "meganav-logo", href: logo_link)) %>
5
+ <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
6
6
  <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
7
7
 
8
8
  <% if @session_data[:signedIn] %>
@@ -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: #80b9f2;
18
+ --color-gui-focus: #0073e6;
19
+ --color-gui-focus-outline: #80b9f2;
19
20
  --color-gui-active: #074095;
20
- --color-gui-viewed: #4887c2;
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: 375px; /* gutters 8px, side-margin 24px */
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-cool-black;
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-cool-black;
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-cool-black;
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
- /* visited needs to come before :hover et all else it overrides them */
463
- .ui-link:visited {
464
- @apply text-gui-viewed;
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 hover:text-active-orange active:text-red-orange;
469
- -webkit-text-decoration-color: var(--color-active-orange);
470
- text-decoration-color: var(--color-active-orange);
471
- text-underline-offset: 4px; /* px used here as behaves weird with rem's */
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 {
@@ -1,3 +1,3 @@
1
1
  module AblyUi
2
- VERSION = '7.8.0'
2
+ VERSION = '7.8.2.dev.e8b31f4'
3
3
  end
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: 7.8.0
4
+ version: 7.8.2.dev.e8b31f4
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: 2022-05-18 00:00:00.000000000 Z
13
+ date: 2022-06-09 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component
@@ -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
@@ -222,9 +223,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
222
223
  version: '0'
223
224
  required_rubygems_version: !ruby/object:Gem::Requirement
224
225
  requirements:
225
- - - ">="
226
+ - - ">"
226
227
  - !ruby/object:Gem::Version
227
- version: '0'
228
+ version: 1.3.1
228
229
  requirements: []
229
230
  rubygems_version: 3.2.3
230
231
  signing_key: