coveragebook_components 0.6.2 → 0.6.3

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.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +252 -212
  3. data/app/assets/build/coco/app.js +19 -2
  4. data/app/assets/build/coco/book.css +466 -218
  5. data/app/assets/build/coco/icons/custom/eye-off-red.svg +17 -0
  6. data/app/assets/build/coco/icons/custom/google-sso.svg +9 -0
  7. data/app/assets/build/coco/icons/custom/layout-overlay.svg +7 -0
  8. data/app/assets/build/coco/icons/custom/layout-split.svg +8 -0
  9. data/app/assets/build/coco/icons/custom/layout-stacked.svg +7 -0
  10. data/app/assets/build/coco/icons/custom/microsoft-sso.svg +11 -0
  11. data/app/assets/build/coco/icons/custom/montage.svg +10 -0
  12. data/app/assets/css/base/utils/icons.css +6 -5
  13. data/app/assets/css/book.css +1 -0
  14. data/app/assets/custom_icons/other/eye-off-red.svg +17 -0
  15. data/app/assets/custom_icons/other/google-sso.svg +9 -0
  16. data/app/assets/custom_icons/other/layout-overlay.svg +7 -0
  17. data/app/assets/custom_icons/other/layout-split.svg +8 -0
  18. data/app/assets/custom_icons/other/layout-stacked.svg +7 -0
  19. data/app/assets/custom_icons/other/microsoft-sso.svg +11 -0
  20. data/app/assets/custom_icons/other/montage.svg +10 -0
  21. data/app/components/coco/app/blocks/slide_editor/slide_editor.css +27 -18
  22. data/app/components/coco/app/blocks/slide_editor/slide_editor.html.erb +5 -3
  23. data/app/components/coco/app/blocks/slide_editor/slide_editor.js +23 -0
  24. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.js +1 -1
  25. data/app/components/coco/base/icon/icon.css +6 -2
  26. data/app/components/coco/base/icon/icon.html.erb +1 -1
  27. data/app/components/coco/base/icon/icon.rb +32 -9
  28. data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.css +156 -140
  29. data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.html.erb +25 -21
  30. data/lib/coco.rb +1 -1
  31. metadata +16 -2
@@ -1,16 +1,16 @@
1
1
  @layer components {
2
2
  [data-coco][data-component="book-editable-slide"] {
3
3
  /*
4
- * slide-padding-md at max (1480px): 240px (16.2%)
5
- * slide-padding-md at min (320px): 16.2% x 320px = 52px
4
+ * slide-padding-lg at max (1480px): 240px (16.2%)
5
+ * slide-padding-lg at min (320px): 16.2% x 320px = 52px
6
6
  */
7
- --slide-padding-lg: max(38px, clamp(52px, 16.2cqw, 240px));
7
+ --slide-padding-lg: clamp(52px, 16.2cqw, 240px);
8
8
 
9
9
  /*
10
10
  * slide-padding-md at max (1480px): 120px (8.1%)
11
11
  * slide-padding-md at min (320px): 8.1% x 320px = 26px
12
12
  */
13
- --slide-padding-md: max(24px, clamp(26px, 8.1cqw, 120px));
13
+ --slide-padding-md: clamp(26px, 8.1cqw, 120px);
14
14
 
15
15
  /*
16
16
  * slide-padding-sm at max (1480px): 80px (5.4%)
@@ -18,6 +18,9 @@
18
18
  */
19
19
  --slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));
20
20
 
21
+ /* Visually-adjusted small padding size for grid gap and header spacing */
22
+ --slide-padding-sm-internal: max(20px, clamp(16px, 4.9cqw, 72px));
23
+
21
24
  /*
22
25
  * Small title font size at max (1480px): 64px (4.3%)
23
26
  * Small title font size at min (320px): 4.3% x 320px = 13.8px
@@ -31,10 +34,7 @@
31
34
  * Text font size at max (1480px): 24px / 1.62%
32
35
  * Text font size at min (320px): 1.62% x 320px = 5.2px
33
36
  */
34
- --text-font-size: max(
35
- 16px,
36
- clamp(5.2px, 1.62cqw, theme(fontSize.subheading-2))
37
- );
37
+ --text-font-size: max(12px, clamp(6.1px, 1.86cqw, 28px));
38
38
 
39
39
  /* ------------- */
40
40
 
@@ -49,10 +49,13 @@
49
49
 
50
50
  .slide-container {
51
51
  @apply @slide-fluid:absolute @slide-fluid:inset-0 overflow-hidden;
52
- @apply px-6 py-10 @slide-fluid:p-[var(--slide-padding-md)];
52
+ @apply px-6 py-10 @slide-fluid:px-[var(--slide-padding-md)] @slide-fluid:py-[var(--slide-padding-md)];
53
+ }
54
+
55
+ .slide-layout {
56
+ @apply @slide-fluid:grid h-full w-full;
53
57
  }
54
58
 
55
- [data-slide-region],
56
59
  .slide-header,
57
60
  .slide-text,
58
61
  .slide-media {
@@ -63,25 +66,38 @@
63
66
  @apply contents;
64
67
  }
65
68
 
69
+ .slide-header {
70
+ @apply w-full;
71
+ }
72
+
66
73
  .slide-title {
67
- @apply font-bold text-current;
74
+ @apply font-bold text-current w-full;
68
75
  overflow-wrap: anywhere;
69
76
  line-height: 1.1;
70
77
  font-size: var(--title-font-size);
71
78
  }
72
79
 
73
80
  .slide-text {
74
- @apply text-current;
81
+ @apply text-current text-base w-full overflow-hidden;
75
82
  line-height: 1.5;
76
- font-size: var(--text-font-size);
77
83
  }
78
84
 
79
85
  .slide-media {
80
- @apply w-full text-current;
81
- font-size: var(--text-font-size);
86
+ @apply w-full text-current relative text-base;
87
+ }
88
+
89
+ @container (min-width: 700px) {
90
+ .slide-text,
91
+ .slide-media {
92
+ font-size: var(--text-font-size);
93
+ }
94
+ }
95
+
96
+ .slide-media-wrapper {
97
+ @apply @slide-fluid:absolute @slide-fluid:inset-0 @slide-fluid:w-full @slide-fluid:h-full;
82
98
 
83
99
  img {
84
- @apply w-full h-full object-contain;
100
+ @apply w-full h-full object-contain object-center;
85
101
  }
86
102
  }
87
103
 
@@ -93,7 +109,7 @@
93
109
  * Title font size at min (320px): 5.4% x 320px = 17px
94
110
  */
95
111
  --title-font-size: max(
96
- 35px,
112
+ 38px,
97
113
  clamp(17px, 5.4cqw, theme(fontSize.display-2))
98
114
  );
99
115
 
@@ -102,86 +118,70 @@
102
118
  * Text font size at min (320px): 2.16% x 320px = 7px
103
119
  */
104
120
  --text-font-size: max(
105
- 16px,
121
+ 15px,
106
122
  clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
107
123
  );
108
124
 
109
- @apply text-center;
110
-
111
125
  .slide-container {
112
- @apply @slide-fluid:px-[var(--slide-padding-lg)];
113
- }
114
-
115
- [data-slide-region="content-1"] {
116
- @apply block;
117
-
118
- .slide-text {
119
- @apply block;
120
- }
121
- }
122
-
123
- &.with-title [data-slide-region="content-1"] .slide-text {
124
- margin-top: 0.875em;
126
+ @apply py-12 @slide-fluid:px-[var(--slide-padding-lg)] @slide-fluid:py-[var(--slide-padding-md)];
125
127
  }
126
128
 
127
129
  .slide-layout {
128
- @apply flex flex-col items-center justify-center text-center w-full h-full;
130
+ @apply mx-auto max-w-[475px] @slide-fluid:max-w-full;
131
+ grid-template-areas: "content";
129
132
  }
130
133
 
131
- .slide-header {
132
- @apply w-full block;
134
+ [data-role="group-primary-text"] {
135
+ @apply flex flex-col items-center justify-center text-center h-full;
136
+ grid-area: content;
133
137
  }
134
138
 
135
- .slide-content {
136
- @apply flex-none w-full;
137
- }
138
-
139
- .slide-header,
140
- .slide-content {
141
- @apply mx-auto w-full max-w-[360px] @slide-fluid:max-w-full;
139
+ [data-role="header"],
140
+ [data-role="text-primary"] {
141
+ @apply block;
142
142
  }
143
143
 
144
144
  .slide-text {
145
145
  line-height: 1.4;
146
146
  }
147
+
148
+ &.with-title .slide-text {
149
+ margin-top: 0.875em;
150
+ }
147
151
  }
148
152
 
149
153
  &[data-layout="one-col-text"] {
150
154
  .slide-container {
151
- @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
152
- @apply flex items-center;
155
+ @apply py-10 @slide-fluid:py-[var(--slide-padding-sm)];
153
156
  }
154
157
 
155
158
  .slide-layout {
156
- @apply @slide-fluid:grid w-full;
157
- height: min-content;
158
- grid-template-columns: 1fr;
159
+ @apply @slide-fluid:py-[4.8cqw];
160
+ grid-template-areas: "content";
159
161
  grid-template-rows: auto;
160
- grid-gap: var(--slide-padding-sm);
161
162
  }
162
163
 
163
- &.with-title {
164
- .slide-container {
165
- @apply block;
166
- }
167
-
168
- .slide-layout {
169
- @apply h-full;
170
- grid-template-rows: min-content auto;
171
- }
164
+ &.with-title .slide-layout {
165
+ @apply py-0;
166
+ grid-template-areas:
167
+ "header"
168
+ "content";
169
+ grid-template-rows: min-content auto;
170
+ grid-gap: var(--slide-padding-sm-internal);
172
171
  }
173
172
 
174
- .slide-header {
175
- @apply w-full block;
176
- @apply mb-6 @slide-fluid:mb-0;
173
+ [data-role="header"],
174
+ [data-role="text-primary"] {
175
+ @apply block;
177
176
  }
178
177
 
179
- [data-slide-region="content-1"] {
180
- @apply block;
178
+ [data-role="header"] {
179
+ grid-area: header;
180
+ @apply mb-5 @slide-fluid:mb-0;
181
+ }
181
182
 
182
- .slide-text {
183
- @apply block;
184
- }
183
+ [data-role="text-primary"] {
184
+ grid-area: content;
185
185
  }
186
186
  }
187
187
 
@@ -190,126 +190,142 @@
190
190
  @apply p-6 @slide-fluid:p-[var(--slide-padding-sm)];
191
191
  }
192
192
 
193
- .slide-layout,
194
- .slide-content {
195
- @apply h-full;
193
+ .slide-layout {
194
+ grid-template-areas: "content";
195
+ grid-template-rows: 100%;
196
196
  }
197
197
 
198
- [data-slide-region="content-1"] {
199
- @apply block;
200
-
201
- .slide-media {
202
- @apply block w-full h-full;
198
+ [data-role="media-primary"] {
199
+ @apply block h-full;
200
+ grid-area: content;
201
+ }
203
202
 
204
- img {
205
- @apply h-full w-full object-contain;
206
- }
207
- }
203
+ .slide-media-wrapper {
204
+ @apply h-full;
208
205
  }
209
206
  }
210
207
 
211
- &[data-layout="two-col-text"],
212
- &[data-layout="two-col-media"] {
208
+ &[data-layout="two-col-mixed"] {
213
209
  .slide-container {
214
- @apply flex items-center;
215
- @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
210
+ @apply py-10 @slide-fluid:p-[var(--slide-padding-md)];
216
211
  }
217
212
 
218
213
  .slide-layout {
219
- @apply @slide-fluid:grid w-full;
220
- height: min-content;
214
+ grid-template-areas: "text media";
215
+ grid-template-rows: 100%;
221
216
  grid-template-columns: 1fr 1fr;
222
- grid-template-rows: auto;
223
- grid-gap: var(--slide-padding-sm);
217
+ grid-gap: var(--slide-padding-sm-internal);
224
218
  }
225
219
 
226
- &.with-title {
227
- .slide-container {
228
- @apply block;
229
- }
230
-
231
- .slide-layout {
232
- @apply h-full;
233
- grid-template-rows: min-content auto;
234
- }
220
+ [data-role="header"],
221
+ [data-role="text-primary"],
222
+ [data-role="media-primary"],
223
+ [data-role="group-primary-text"] {
224
+ @apply block;
235
225
  }
236
226
 
237
- .slide-header {
238
- @apply w-full block;
239
- @apply mb-10 @slide-fluid:mb-0;
240
- grid-column-start: 1;
241
- grid-column-end: -1;
227
+ [data-role="group-primary-text"] {
228
+ grid-area: text;
229
+ @apply @slide-fluid:flex @slide-fluid:flex-col @slide-fluid:justify-center @slide-fluid:h-full;
242
230
  }
243
231
 
244
- [data-slide-region="content-1"],
245
- [data-slide-region="content-2"] {
246
- @apply block;
232
+ [data-role="media-primary"] {
233
+ @apply mt-6 @slide-fluid:mt-0;
234
+ grid-area: media;
247
235
  }
248
236
 
249
- [data-slide-region="content-1"] {
250
- @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
237
+ &.with-title .slide-text {
238
+ margin-top: 0.875em;
251
239
  }
252
240
  }
253
241
 
254
242
  &[data-layout="two-col-text"] {
255
- .slide-text {
256
- @apply block;
243
+ .slide-container {
244
+ @apply py-10 @slide-fluid:p-[var(--slide-padding-sm)];
257
245
  }
258
- }
259
246
 
260
- &[data-layout="two-col-media"] {
261
247
  .slide-layout {
262
- @apply @slide-fluid:h-full;
248
+ @apply @slide-fluid:py-[4.8cqw];
249
+ grid-template-areas: "primary secondary";
250
+ grid-template-rows: auto;
251
+ grid-template-columns: 1fr 1fr;
252
+ grid-gap: var(--slide-padding-sm-internal);
263
253
  }
264
254
 
265
- .slide-content {
266
- @apply relative @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
255
+ &.with-title .slide-layout {
256
+ @apply py-0;
257
+ grid-template-areas:
258
+ "header header"
259
+ "primary secondary";
260
+ grid-template-rows: min-content auto;
267
261
  }
268
262
 
269
- .slide-media {
270
- @apply block @slide-fluid:absolute @slide-fluid:inset-0;
263
+ [data-role="header"],
264
+ [data-role="text-primary"],
265
+ [data-role="text-secondary"] {
266
+ @apply block;
271
267
  }
272
- }
273
268
 
274
- &[data-layout="two-col-mixed"] {
275
- .slide-layout {
276
- @apply @slide-fluid:grid w-full h-full;
277
- grid-template-columns: 1fr 1fr;
278
- grid-template-rows: auto;
279
- grid-gap: var(--slide-padding-sm);
269
+ [data-role="header"] {
270
+ grid-area: header;
280
271
  }
281
272
 
282
- .slide-group {
283
- @apply flex flex-col justify-center;
284
- @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
273
+ [data-role="text-primary"] {
274
+ grid-area: primary;
285
275
  }
286
276
 
287
- .slide-header {
288
- @apply w-full block;
277
+ [data-role="text-secondary"] {
278
+ grid-area: secondary;
289
279
  }
290
280
 
291
- .slide-title {
292
- margin-bottom: 0.5em;
281
+ .slide-header,
282
+ [data-role="text-primary"] {
283
+ @apply mb-6 @slide-fluid:mb-0;
284
+ }
285
+ }
286
+
287
+ &[data-layout="two-col-media"] {
288
+ .slide-container {
289
+ @apply py-10 @slide-fluid:p-[var(--slide-padding-sm)];
293
290
  }
294
291
 
295
- [data-slide-region="content-1"] {
292
+ .slide-layout {
293
+ @apply @slide-fluid:py-[4.8cqw];
294
+ grid-template-areas: "primary secondary";
295
+ grid-template-rows: auto;
296
+ grid-template-columns: 1fr 1fr;
297
+ grid-gap: var(--slide-padding-sm-internal);
298
+ }
299
+
300
+ &.with-title .slide-layout {
301
+ @apply py-0;
302
+ grid-template-areas:
303
+ "header header"
304
+ "primary secondary";
305
+ grid-template-rows: min-content auto;
306
+ }
307
+
308
+ [data-role="header"],
309
+ [data-role="media-primary"],
310
+ [data-role="media-secondary"] {
296
311
  @apply block;
312
+ }
297
313
 
298
- .slide-text {
299
- @apply block;
300
- }
314
+ [data-role="header"] {
315
+ grid-area: header;
301
316
  }
302
317
 
303
- [data-slide-region="content-2"] {
304
- @apply relative block @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
318
+ [data-role="media-primary"] {
319
+ grid-area: primary;
320
+ }
305
321
 
306
- .slide-media {
307
- @apply block @slide-fluid:absolute @slide-fluid:inset-0;
322
+ [data-role="media-secondary"] {
323
+ grid-area: secondary;
324
+ }
308
325
 
309
- img {
310
- @apply h-full w-full object-contain;
311
- }
312
- }
326
+ .slide-header,
327
+ [data-role="media-primary"] {
328
+ @apply mb-6 @slide-fluid:mb-0;
313
329
  }
314
330
  }
315
331
  }
@@ -1,43 +1,47 @@
1
1
  <%= render component_tag(style: slide_styles, class: {"with-title": title?}) do %>
2
2
  <div class="slide-aspect">
3
3
  <div class="slide-container">
4
-
5
4
  <div class="slide-layout">
6
- <div class="slide-group">
5
+
6
+ <div class="slide-group" data-role="group-primary-text">
7
7
  <% if title? %>
8
- <header class="slide-header">
8
+ <header class="slide-header" data-role="header">
9
9
  <h3 class="slide-title" data-role="title">
10
10
  <%= title %>
11
11
  </h3>
12
12
  </header>
13
13
  <% end %>
14
14
 
15
- <div class="slide-content" data-slide-region="content-1">
16
- <% if text_1? %>
17
- <div class="slide-text" data-role="text-1">
18
- <%= text_1 %>
19
- </div>
20
- <% end %>
21
- <% if image_1? %>
22
- <div class="slide-media" data-role="media-1">
23
- <%= image_1 %>
24
- </div>
25
- <% end %>
26
- </div>
15
+ <% if text_1? %>
16
+ <div class="slide-text" data-role="text-primary">
17
+ <%= text_1 %>
18
+ </div>
19
+ <% end %>
27
20
  </div>
28
21
 
29
- <div class="slide-content" data-slide-region="content-2">
22
+ <% if image_1? %>
23
+ <div class="slide-media" data-role="media-primary">
24
+ <div class="slide-media-wrapper">
25
+ <%= image_1 %>
26
+ </div>
27
+ </div>
28
+ <% end %>
29
+
30
+ <div class="slide-group" data-role="group-secondary-text">
30
31
  <% if text_2? %>
31
- <div class="slide-text" data-role="text-2">
32
+ <div class="slide-text" data-role="text-secondary">
32
33
  <%= text_2 %>
33
34
  </div>
34
35
  <% end %>
35
- <% if image_2? %>
36
- <div class="slide-media" data-role="media-2">
36
+ </div>
37
+
38
+ <% if image_2? %>
39
+ <div class="slide-media" data-role="media-secondary">
40
+ <div class="slide-media-wrapper">
37
41
  <%= image_2 %>
38
42
  </div>
39
- <% end %>
40
- </div>
43
+ </div>
44
+ <% end %>
41
45
  </div>
42
46
  </div>
43
47
  </div>
data/lib/coco.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Coco
2
- VERSION = "0.6.2"
2
+ VERSION = "0.6.3"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: coveragebook_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.6.2
4
+ version: 0.6.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Mark Perkins
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-08-18 00:00:00.000000000 Z
11
+ date: 2023-08-25 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -427,6 +427,13 @@ files:
427
427
  - app/assets/build/coco/icons/crown.svg
428
428
  - app/assets/build/coco/icons/cup-soda.svg
429
429
  - app/assets/build/coco/icons/currency.svg
430
+ - app/assets/build/coco/icons/custom/eye-off-red.svg
431
+ - app/assets/build/coco/icons/custom/google-sso.svg
432
+ - app/assets/build/coco/icons/custom/layout-overlay.svg
433
+ - app/assets/build/coco/icons/custom/layout-split.svg
434
+ - app/assets/build/coco/icons/custom/layout-stacked.svg
435
+ - app/assets/build/coco/icons/custom/microsoft-sso.svg
436
+ - app/assets/build/coco/icons/custom/montage.svg
430
437
  - app/assets/build/coco/icons/database-backup.svg
431
438
  - app/assets/build/coco/icons/database.svg
432
439
  - app/assets/build/coco/icons/delete.svg
@@ -1281,6 +1288,13 @@ files:
1281
1288
  - app/assets/css/book.css
1282
1289
  - app/assets/css/book/config.css
1283
1290
  - app/assets/css/libs/tippy.css
1291
+ - app/assets/custom_icons/other/eye-off-red.svg
1292
+ - app/assets/custom_icons/other/google-sso.svg
1293
+ - app/assets/custom_icons/other/layout-overlay.svg
1294
+ - app/assets/custom_icons/other/layout-split.svg
1295
+ - app/assets/custom_icons/other/layout-stacked.svg
1296
+ - app/assets/custom_icons/other/microsoft-sso.svg
1297
+ - app/assets/custom_icons/other/montage.svg
1284
1298
  - app/assets/img/coveragebook-landscape-white.svg
1285
1299
  - app/assets/img/coveragebook-logomark-white.svg
1286
1300
  - app/assets/img/slides/one-col-media-layout.svg