@strapi/plugin-documentation 4.10.1 → 4.10.2

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.
@@ -56,6 +56,34 @@ describe('Plugin | Documentation | SettingsPage', () => {
56
56
  });
57
57
 
58
58
  expect(firstChild).toMatchInlineSnapshot(`
59
+ .c1 {
60
+ background: #f6f6f9;
61
+ padding-top: 40px;
62
+ padding-right: 56px;
63
+ padding-bottom: 40px;
64
+ padding-left: 56px;
65
+ }
66
+
67
+ .c3 {
68
+ min-width: 0;
69
+ }
70
+
71
+ .c7 {
72
+ background: #4945ff;
73
+ padding: 8px;
74
+ padding-right: 16px;
75
+ padding-left: 16px;
76
+ border-radius: 4px;
77
+ border-color: #4945ff;
78
+ border: 1px solid #4945ff;
79
+ cursor: pointer;
80
+ }
81
+
82
+ .c13 {
83
+ padding-right: 56px;
84
+ padding-left: 56px;
85
+ }
86
+
59
87
  .c14 {
60
88
  background: #ffffff;
61
89
  padding-top: 24px;
@@ -66,46 +94,196 @@ describe('Plugin | Documentation | SettingsPage', () => {
66
94
  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
67
95
  }
68
96
 
69
- .c11 {
70
- font-weight: 600;
71
- color: #32324d;
72
- font-size: 0.75rem;
73
- line-height: 1.33;
97
+ .c25 {
98
+ background: #f6f6f9;
99
+ padding: 4px;
100
+ border-radius: 4px;
101
+ border-style: solid;
102
+ border-width: 1px;
103
+ border-color: #dcdce4;
104
+ display: -webkit-box;
105
+ display: -webkit-flex;
106
+ display: -ms-flexbox;
107
+ display: flex;
108
+ }
109
+
110
+ .c27 {
111
+ padding-right: 12px;
112
+ padding-left: 12px;
113
+ border-radius: 4px;
114
+ }
115
+
116
+ .c2 {
117
+ -webkit-align-items: center;
118
+ -webkit-box-align: center;
119
+ -ms-flex-align: center;
120
+ align-items: center;
121
+ display: -webkit-box;
122
+ display: -webkit-flex;
123
+ display: -ms-flexbox;
124
+ display: flex;
125
+ -webkit-flex-direction: row;
126
+ -ms-flex-direction: row;
127
+ flex-direction: row;
128
+ -webkit-box-pack: justify;
129
+ -webkit-justify-content: space-between;
130
+ -ms-flex-pack: justify;
131
+ justify-content: space-between;
132
+ }
133
+
134
+ .c4 {
135
+ -webkit-align-items: center;
136
+ -webkit-box-align: center;
137
+ -ms-flex-align: center;
138
+ align-items: center;
139
+ display: -webkit-box;
140
+ display: -webkit-flex;
141
+ display: -ms-flexbox;
142
+ display: flex;
143
+ -webkit-flex-direction: row;
144
+ -ms-flex-direction: row;
145
+ flex-direction: row;
74
146
  }
75
147
 
76
148
  .c8 {
77
- padding-right: 8px;
149
+ -webkit-align-items: center;
150
+ -webkit-box-align: center;
151
+ -ms-flex-align: center;
152
+ align-items: center;
153
+ display: -webkit-box;
154
+ display: -webkit-flex;
155
+ display: -ms-flexbox;
156
+ display: flex;
157
+ -webkit-flex-direction: row;
158
+ -ms-flex-direction: row;
159
+ flex-direction: row;
160
+ gap: 8px;
78
161
  }
79
162
 
80
- .c5 {
163
+ .c15 {
164
+ -webkit-align-items: stretch;
165
+ -webkit-box-align: stretch;
166
+ -ms-flex-align: stretch;
167
+ align-items: stretch;
81
168
  display: -webkit-box;
82
169
  display: -webkit-flex;
83
170
  display: -ms-flexbox;
84
171
  display: flex;
85
- cursor: pointer;
86
- padding: 8px;
87
- border-radius: 4px;
88
- background: #ffffff;
89
- border: 1px solid #dcdce4;
172
+ -webkit-flex-direction: column;
173
+ -ms-flex-direction: column;
174
+ flex-direction: column;
175
+ gap: 16px;
176
+ }
177
+
178
+ .c20 {
179
+ -webkit-align-items: stretch;
180
+ -webkit-box-align: stretch;
181
+ -ms-flex-align: stretch;
182
+ align-items: stretch;
183
+ display: -webkit-box;
184
+ display: -webkit-flex;
185
+ display: -ms-flexbox;
186
+ display: flex;
187
+ -webkit-flex-direction: column;
188
+ -ms-flex-direction: column;
189
+ flex-direction: column;
190
+ gap: 4px;
191
+ }
192
+
193
+ .c28 {
194
+ -webkit-align-items: center;
195
+ -webkit-box-align: center;
196
+ -ms-flex-align: center;
197
+ align-items: center;
198
+ display: -webkit-box;
199
+ display: -webkit-flex;
200
+ display: -ms-flexbox;
201
+ display: flex;
202
+ -webkit-flex-direction: row;
203
+ -ms-flex-direction: row;
204
+ flex-direction: row;
205
+ -webkit-box-pack: center;
206
+ -webkit-justify-content: center;
207
+ -ms-flex-pack: center;
208
+ justify-content: center;
209
+ }
210
+
211
+ .c6 {
212
+ font-weight: 600;
213
+ font-size: 2rem;
214
+ line-height: 1.25;
215
+ color: #32324d;
216
+ }
217
+
218
+ .c11 {
219
+ font-size: 0.75rem;
220
+ line-height: 1.33;
221
+ font-weight: 600;
222
+ color: #ffffff;
223
+ }
224
+
225
+ .c12 {
226
+ font-size: 1rem;
227
+ line-height: 1.5;
228
+ color: #666687;
229
+ }
230
+
231
+ .c16 {
232
+ font-weight: 500;
233
+ font-size: 1rem;
234
+ line-height: 1.25;
235
+ color: #32324d;
236
+ }
237
+
238
+ .c21 {
239
+ font-size: 0.75rem;
240
+ line-height: 1.33;
241
+ font-weight: 600;
242
+ color: #32324d;
243
+ }
244
+
245
+ .c30 {
246
+ font-size: 0.75rem;
247
+ line-height: 1.33;
248
+ font-weight: 600;
249
+ color: #b72b1a;
250
+ text-transform: uppercase;
251
+ }
252
+
253
+ .c32 {
254
+ font-size: 0.75rem;
255
+ line-height: 1.33;
256
+ font-weight: 600;
257
+ color: #666687;
258
+ text-transform: uppercase;
259
+ }
260
+
261
+ .c34 {
262
+ font-size: 0.75rem;
263
+ line-height: 1.33;
264
+ color: #666687;
265
+ }
266
+
267
+ .c9 {
90
268
  position: relative;
91
269
  outline: none;
92
270
  }
93
271
 
94
- .c5 svg {
272
+ .c9 svg {
95
273
  height: 12px;
96
274
  width: 12px;
97
275
  }
98
276
 
99
- .c5 svg > g,
100
- .c5 svg path {
277
+ .c9 svg > g,
278
+ .c9 svg path {
101
279
  fill: #ffffff;
102
280
  }
103
281
 
104
- .c5[aria-disabled='true'] {
282
+ .c9[aria-disabled='true'] {
105
283
  pointer-events: none;
106
284
  }
107
285
 
108
- .c5:after {
286
+ .c9:after {
109
287
  -webkit-transition-property: all;
110
288
  transition-property: all;
111
289
  -webkit-transition-duration: 0.2s;
@@ -120,11 +298,11 @@ describe('Plugin | Documentation | SettingsPage', () => {
120
298
  border: 2px solid transparent;
121
299
  }
122
300
 
123
- .c5:focus-visible {
301
+ .c9:focus-visible {
124
302
  outline: none;
125
303
  }
126
304
 
127
- .c5:focus-visible:after {
305
+ .c9:focus-visible:after {
128
306
  border-radius: 8px;
129
307
  content: '';
130
308
  position: absolute;
@@ -135,189 +313,101 @@ describe('Plugin | Documentation | SettingsPage', () => {
135
313
  border: 2px solid #4945ff;
136
314
  }
137
315
 
138
- .c9 {
139
- height: 100%;
140
- }
141
-
142
- .c6 {
143
- -webkit-align-items: center;
144
- -webkit-box-align: center;
145
- -ms-flex-align: center;
146
- align-items: center;
147
- padding: 8px 16px;
148
- background: #4945ff;
149
- border: none;
150
- border: 1px solid #4945ff;
151
- background: #4945ff;
152
- }
153
-
154
- .c6 .c7 {
155
- display: -webkit-box;
156
- display: -webkit-flex;
157
- display: -ms-flexbox;
158
- display: flex;
159
- -webkit-align-items: center;
160
- -webkit-box-align: center;
161
- -ms-flex-align: center;
162
- align-items: center;
316
+ .c24 {
317
+ border: 0;
318
+ -webkit-clip: rect(0 0 0 0);
319
+ clip: rect(0 0 0 0);
320
+ height: 1px;
321
+ margin: -1px;
322
+ overflow: hidden;
323
+ padding: 0;
324
+ position: absolute;
325
+ width: 1px;
163
326
  }
164
327
 
165
- .c6 .c10 {
166
- color: #ffffff;
328
+ .c10 {
329
+ height: 2rem;
167
330
  }
168
331
 
169
- .c6[aria-disabled='true'] {
332
+ .c10[aria-disabled='true'] {
170
333
  border: 1px solid #dcdce4;
171
334
  background: #eaeaef;
172
335
  }
173
336
 
174
- .c6[aria-disabled='true'] .c10 {
337
+ .c10[aria-disabled='true'] .c5 {
175
338
  color: #666687;
176
339
  }
177
340
 
178
- .c6[aria-disabled='true'] svg > g,
179
- .c6[aria-disabled='true'] svg path {
341
+ .c10[aria-disabled='true'] svg > g,.c10[aria-disabled='true'] svg path {
180
342
  fill: #666687;
181
343
  }
182
344
 
183
- .c6[aria-disabled='true']:active {
345
+ .c10[aria-disabled='true']:active {
184
346
  border: 1px solid #dcdce4;
185
347
  background: #eaeaef;
186
348
  }
187
349
 
188
- .c6[aria-disabled='true']:active .c10 {
350
+ .c10[aria-disabled='true']:active .c5 {
189
351
  color: #666687;
190
352
  }
191
353
 
192
- .c6[aria-disabled='true']:active svg > g,
193
- .c6[aria-disabled='true']:active svg path {
354
+ .c10[aria-disabled='true']:active svg > g,.c10[aria-disabled='true']:active svg path {
194
355
  fill: #666687;
195
356
  }
196
357
 
197
- .c6:hover {
358
+ .c10:hover {
198
359
  border: 1px solid #7b79ff;
199
360
  background: #7b79ff;
200
361
  }
201
362
 
202
- .c6:active {
363
+ .c10:active {
203
364
  border: 1px solid #4945ff;
204
365
  background: #4945ff;
205
366
  }
206
367
 
207
- .c15 {
208
- display: -webkit-box;
209
- display: -webkit-flex;
210
- display: -ms-flexbox;
211
- display: flex;
212
- -webkit-flex-direction: column;
213
- -ms-flex-direction: column;
214
- flex-direction: column;
215
- }
216
-
217
- .c15 > * {
218
- margin-top: 0;
219
- margin-bottom: 0;
220
- }
221
-
222
- .c15 > * + * {
223
- margin-top: 16px;
368
+ .c10 svg > g,
369
+ .c10 svg path {
370
+ fill: #ffffff;
224
371
  }
225
372
 
226
373
  .c22 {
227
- font-weight: 600;
228
- color: #32324d;
229
- font-size: 0.75rem;
230
- line-height: 1.33;
231
- }
232
-
233
- .c29 {
234
- font-weight: 600;
235
- color: #b72b1a;
236
- font-size: 0.75rem;
237
- line-height: 1.33;
238
- }
239
-
240
- .c33 {
241
- color: #666687;
242
- font-size: 0.75rem;
243
- line-height: 1.33;
244
- }
245
-
246
- .c25 {
247
- background: #ffffff;
248
- border-radius: 4px;
249
- }
250
-
251
- .c27 {
252
- background: #fcecea;
253
- padding-right: 32px;
254
- padding-left: 32px;
255
- }
256
-
257
- .c30 {
258
- background: #ffffff;
259
- padding-right: 32px;
260
- padding-left: 32px;
261
- }
262
-
263
- .c21 {
264
374
  display: -webkit-box;
265
375
  display: -webkit-flex;
266
376
  display: -ms-flexbox;
267
377
  display: flex;
268
- -webkit-flex-direction: row;
269
- -ms-flex-direction: row;
270
- flex-direction: row;
271
378
  -webkit-align-items: center;
272
379
  -webkit-box-align: center;
273
380
  -ms-flex-align: center;
274
381
  align-items: center;
275
382
  }
276
383
 
277
- .c20 {
278
- display: -webkit-box;
279
- display: -webkit-flex;
280
- display: -ms-flexbox;
281
- display: flex;
282
- -webkit-flex-direction: column;
283
- -ms-flex-direction: column;
284
- flex-direction: column;
285
- }
286
-
287
- .c20 > * {
288
- margin-top: 0;
289
- margin-bottom: 0;
384
+ .c17 {
385
+ display: grid;
386
+ grid-template-columns: repeat(12,1fr);
387
+ gap: 16px;
290
388
  }
291
389
 
292
- .c20 > * + * {
293
- margin-top: 4px;
390
+ .c18 {
391
+ grid-column: span 6;
392
+ max-width: 100%;
294
393
  }
295
394
 
296
- .c24 {
297
- border: 0;
298
- -webkit-clip: rect(0 0 0 0);
299
- clip: rect(0 0 0 0);
300
- height: 1px;
301
- margin: -1px;
302
- overflow: hidden;
303
- padding: 0;
304
- position: absolute;
305
- width: 1px;
395
+ .c0:focus-visible {
396
+ outline: none;
306
397
  }
307
398
 
308
399
  .c23 {
309
400
  position: relative;
310
401
  display: inline-block;
402
+ z-index: 0;
403
+ width: 100%;
311
404
  }
312
405
 
313
406
  .c26 {
314
- height: 2.5rem;
315
- border: 1px solid #dcdce4;
316
- display: -webkit-inline-box;
317
- display: -webkit-inline-flex;
318
- display: -ms-inline-flexbox;
319
- display: inline-flex;
320
407
  overflow: hidden;
408
+ -webkit-flex-wrap: wrap;
409
+ -ms-flex-wrap: wrap;
410
+ flex-wrap: wrap;
321
411
  outline: none;
322
412
  box-shadow: 0;
323
413
  -webkit-transition-property: border-color,box-shadow,fill;
@@ -331,109 +421,50 @@ describe('Plugin | Documentation | SettingsPage', () => {
331
421
  box-shadow: #4945ff 0px 0px 0px 2px;
332
422
  }
333
423
 
334
- .c31 {
335
- text-transform: uppercase;
424
+ .c29 {
425
+ background-color: #ffffff;
426
+ border: 1px solid #dcdce4;
336
427
  position: relative;
428
+ -webkit-user-select: none;
429
+ -moz-user-select: none;
430
+ -ms-user-select: none;
431
+ user-select: none;
337
432
  z-index: 2;
433
+ -webkit-flex: 1 1 50%;
434
+ -ms-flex: 1 1 50%;
435
+ flex: 1 1 50%;
436
+ padding-top: 6px;
437
+ padding-bottom: 6px;
338
438
  }
339
439
 
340
- .c28 {
341
- text-transform: uppercase;
342
- border-right: 1px solid #dcdce4;
440
+ .c31 {
441
+ background-color: transparent;
442
+ border: 1px solid #f6f6f9;
343
443
  position: relative;
444
+ -webkit-user-select: none;
445
+ -moz-user-select: none;
446
+ -ms-user-select: none;
447
+ user-select: none;
344
448
  z-index: 2;
449
+ -webkit-flex: 1 1 50%;
450
+ -ms-flex: 1 1 50%;
451
+ flex: 1 1 50%;
452
+ padding-top: 6px;
453
+ padding-bottom: 6px;
345
454
  }
346
455
 
347
- .c32 {
456
+ .c33 {
457
+ height: 100%;
458
+ left: 0;
459
+ opacity: 0;
348
460
  position: absolute;
461
+ top: 0;
349
462
  z-index: 1;
350
- left: 4px;
351
- top: 4px;
463
+ width: 100%;
352
464
  }
353
465
 
354
466
  .c19 {
355
- width: -webkit-fit-content;
356
- width: -moz-fit-content;
357
- width: fit-content;
358
- }
359
-
360
- .c16 {
361
- color: #32324d;
362
- font-weight: 500;
363
- font-size: 1rem;
364
- line-height: 1.25;
365
- }
366
-
367
- .c1 {
368
- background: #f6f6f9;
369
- padding-top: 40px;
370
- padding-right: 56px;
371
- padding-bottom: 40px;
372
- padding-left: 56px;
373
- }
374
-
375
- .c13 {
376
- padding-right: 56px;
377
- padding-left: 56px;
378
- }
379
-
380
- .c2 {
381
- display: -webkit-box;
382
- display: -webkit-flex;
383
- display: -ms-flexbox;
384
- display: flex;
385
- -webkit-flex-direction: row;
386
- -ms-flex-direction: row;
387
- flex-direction: row;
388
- -webkit-box-pack: justify;
389
- -webkit-justify-content: space-between;
390
- -ms-flex-pack: justify;
391
- justify-content: space-between;
392
- -webkit-align-items: center;
393
- -webkit-box-align: center;
394
- -ms-flex-align: center;
395
- align-items: center;
396
- }
397
-
398
- .c3 {
399
- display: -webkit-box;
400
- display: -webkit-flex;
401
- display: -ms-flexbox;
402
- display: flex;
403
- -webkit-flex-direction: row;
404
- -ms-flex-direction: row;
405
- flex-direction: row;
406
- -webkit-align-items: center;
407
- -webkit-box-align: center;
408
- -ms-flex-align: center;
409
- align-items: center;
410
- }
411
-
412
- .c4 {
413
- color: #32324d;
414
- font-weight: 600;
415
- font-size: 2rem;
416
- line-height: 1.25;
417
- }
418
-
419
- .c12 {
420
- color: #666687;
421
- font-size: 1rem;
422
- line-height: 1.5;
423
- }
424
-
425
- .c0:focus-visible {
426
- outline: none;
427
- }
428
-
429
- .c17 {
430
- display: grid;
431
- grid-template-columns: repeat(12,1fr);
432
- gap: 16px;
433
- }
434
-
435
- .c18 {
436
- grid-column: span 6;
467
+ max-width: 320px;
437
468
  }
438
469
 
439
470
  @media (max-width:68.75rem) {
@@ -469,45 +500,45 @@ describe('Plugin | Documentation | SettingsPage', () => {
469
500
  class="c2"
470
501
  >
471
502
  <div
472
- class="c3"
503
+ class="c3 c4"
473
504
  >
474
505
  <h1
475
- class="c4"
506
+ class="c5 c6"
476
507
  >
477
508
  Documentation
478
509
  </h1>
479
510
  </div>
480
511
  <button
481
512
  aria-disabled="false"
482
- class="c5 c6"
513
+ class="c7 c8 c9 c10"
483
514
  type="submit"
484
515
  >
485
516
  <div
486
517
  aria-hidden="true"
487
- class="c7 c8 c9"
518
+ class=""
488
519
  >
489
520
  <svg
490
521
  fill="none"
491
- height="1em"
522
+ height="1rem"
492
523
  viewBox="0 0 24 24"
493
- width="1em"
524
+ width="1rem"
494
525
  xmlns="http://www.w3.org/2000/svg"
495
526
  >
496
527
  <path
497
- d="M20.727 2.97a.2.2 0 01.286 0l2.85 2.89a.2.2 0 010 .28L9.554 20.854a.2.2 0 01-.285 0l-9.13-9.243a.2.2 0 010-.281l2.85-2.892a.2.2 0 01.284 0l6.14 6.209L20.726 2.97z"
528
+ d="M20.727 2.97a.2.2 0 0 1 .286 0l2.85 2.89a.2.2 0 0 1 0 .28L9.554 20.854a.2.2 0 0 1-.285 0l-9.13-9.243a.2.2 0 0 1 0-.281l2.85-2.892a.2.2 0 0 1 .284 0l6.14 6.209L20.726 2.97Z"
498
529
  fill="#212134"
499
530
  />
500
531
  </svg>
501
532
  </div>
502
533
  <span
503
- class="c10 c11"
534
+ class="c5 c11"
504
535
  >
505
536
  Save
506
537
  </span>
507
538
  </button>
508
539
  </div>
509
540
  <p
510
- class="c12"
541
+ class="c5 c12"
511
542
  >
512
543
  Configure the documentation plugin
513
544
  </p>
@@ -523,7 +554,7 @@ describe('Plugin | Documentation | SettingsPage', () => {
523
554
  class="c15"
524
555
  >
525
556
  <h2
526
- class="c16"
557
+ class="c5 c16"
527
558
  >
528
559
  Settings
529
560
  </h2>
@@ -543,11 +574,11 @@ describe('Plugin | Documentation | SettingsPage', () => {
543
574
  class="c20"
544
575
  >
545
576
  <div
546
- class="c21"
577
+ class="c4"
547
578
  >
548
579
  <label
549
- class="c22"
550
- for="field-1"
580
+ class="c5 c21 c22"
581
+ for="1"
551
582
  >
552
583
  Restricted Access
553
584
  </label>
@@ -562,38 +593,42 @@ describe('Plugin | Documentation | SettingsPage', () => {
562
593
  </div>
563
594
  <div
564
595
  class="c25 c26"
596
+ display="flex"
565
597
  >
566
598
  <div
567
599
  aria-hidden="true"
568
- class="c27 c21 c28"
600
+ class="c27 c28 c29"
569
601
  >
570
602
  <span
571
- class="c29"
603
+ class="c5 c30"
572
604
  >
573
605
  Off
574
606
  </span>
575
607
  </div>
576
608
  <div
577
609
  aria-hidden="true"
578
- class="c30 c21 c31"
610
+ class="c27 c28 c31"
579
611
  >
580
612
  <span
581
- class="c22"
613
+ class="c5 c32"
582
614
  >
583
615
  On
584
616
  </span>
585
617
  </div>
586
618
  <input
619
+ aria-describedby="1-hint"
587
620
  aria-disabled="false"
588
- class="c32"
621
+ aria-required="false"
622
+ class="c33"
623
+ id="1"
589
624
  name="restrictedAccess"
590
625
  type="checkbox"
591
626
  />
592
627
  </div>
593
628
  </label>
594
629
  <p
595
- class="c33"
596
- id="field-1-hint"
630
+ class="c5 c34"
631
+ id="1-hint"
597
632
  >
598
633
  Make the documentation endpoint private
599
634
  </p>