@charcoal-ui/react-sandbox 3.3.0 → 3.4.0

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.
@@ -0,0 +1,507 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Storyshots Sandbox/Selection Control/SwitchCheckbox Default 1`] = `
4
+ .c7 {
5
+ margin-left: 8px;
6
+ }
7
+
8
+ .c0 {
9
+ display: -webkit-inline-box;
10
+ display: -webkit-inline-flex;
11
+ display: -ms-inline-flexbox;
12
+ display: inline-flex;
13
+ -webkit-align-items: center;
14
+ -webkit-box-align: center;
15
+ -ms-flex-align: center;
16
+ align-items: center;
17
+ -webkit-flex-direction: row;
18
+ -ms-flex-direction: row;
19
+ flex-direction: row;
20
+ cursor: pointer;
21
+ outline: 0;
22
+ }
23
+
24
+ .c0[aria-disabled='true'] {
25
+ cursor: auto;
26
+ }
27
+
28
+ .c1 {
29
+ display: -webkit-inline-box;
30
+ display: -webkit-inline-flex;
31
+ display: -ms-inline-flexbox;
32
+ display: inline-flex;
33
+ position: relative;
34
+ z-index: 0;
35
+ }
36
+
37
+ .c4 {
38
+ position: relative;
39
+ box-sizing: border-box;
40
+ width: 28px;
41
+ height: 16px;
42
+ border-radius: 16px;
43
+ border: 2px solid transparent;
44
+ background: #adadad;
45
+ -webkit-transition: box-shadow 0.2s,background-color 0.2s;
46
+ transition: box-shadow 0.2s,background-color 0.2s;
47
+ }
48
+
49
+ .c6 {
50
+ position: absolute;
51
+ display: block;
52
+ top: 0;
53
+ left: 0;
54
+ width: 12px;
55
+ height: 12px;
56
+ background-color: #ffffff;
57
+ border-radius: 50%;
58
+ -webkit-transform: translateX(0);
59
+ -ms-transform: translateX(0);
60
+ transform: translateX(0);
61
+ -webkit-transition: -webkit-transform 0.2s;
62
+ -webkit-transition: transform 0.2s;
63
+ transition: transform 0.2s;
64
+ }
65
+
66
+ .c2 {
67
+ position: absolute;
68
+ z-index: 1;
69
+ top: 0;
70
+ left: 0;
71
+ width: 100%;
72
+ height: 100%;
73
+ border-radius: 16px;
74
+ opacity: 0;
75
+ -webkit-appearance: none;
76
+ -moz-appearance: none;
77
+ appearance: none;
78
+ outline: none;
79
+ cursor: pointer;
80
+ }
81
+
82
+ .c2:checked ~ .c3 {
83
+ background-color: #0096fa;
84
+ }
85
+
86
+ .c2:checked ~ .c3 .c5 {
87
+ -webkit-transform: translateX(12px);
88
+ -ms-transform: translateX(12px);
89
+ transform: translateX(12px);
90
+ }
91
+
92
+ .c2:disabled {
93
+ cursor: auto;
94
+ }
95
+
96
+ .c2:disabled ~ .c3 {
97
+ opacity: 0.32;
98
+ }
99
+
100
+ .c2:not(:disabled):focus ~ .c3 {
101
+ box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
102
+ }
103
+
104
+ <div
105
+ data-dark={false}
106
+ >
107
+ <label
108
+ aria-disabled={false}
109
+ className="c0"
110
+ >
111
+ <span
112
+ className="c1"
113
+ >
114
+ <input
115
+ className="c2"
116
+ defaultChecked={false}
117
+ disabled={false}
118
+ onChange={[Function]}
119
+ type="checkbox"
120
+ />
121
+ <div
122
+ className="c3 c4"
123
+ >
124
+ <div
125
+ className="c5 c6"
126
+ />
127
+ </div>
128
+ </span>
129
+ <span
130
+ className="c7"
131
+ >
132
+ label
133
+ </span>
134
+ </label>
135
+ </div>
136
+ `;
137
+
138
+ exports[`Storyshots Sandbox/Selection Control/SwitchCheckbox Disabled 1`] = `
139
+ .c0 {
140
+ display: -webkit-inline-box;
141
+ display: -webkit-inline-flex;
142
+ display: -ms-inline-flexbox;
143
+ display: inline-flex;
144
+ -webkit-align-items: center;
145
+ -webkit-box-align: center;
146
+ -ms-flex-align: center;
147
+ align-items: center;
148
+ -webkit-flex-direction: row;
149
+ -ms-flex-direction: row;
150
+ flex-direction: row;
151
+ cursor: pointer;
152
+ outline: 0;
153
+ }
154
+
155
+ .c0[aria-disabled='true'] {
156
+ cursor: auto;
157
+ }
158
+
159
+ .c1 {
160
+ display: -webkit-inline-box;
161
+ display: -webkit-inline-flex;
162
+ display: -ms-inline-flexbox;
163
+ display: inline-flex;
164
+ position: relative;
165
+ z-index: 0;
166
+ }
167
+
168
+ .c4 {
169
+ position: relative;
170
+ box-sizing: border-box;
171
+ width: 28px;
172
+ height: 16px;
173
+ border-radius: 16px;
174
+ border: 2px solid transparent;
175
+ background: #adadad;
176
+ -webkit-transition: box-shadow 0.2s,background-color 0.2s;
177
+ transition: box-shadow 0.2s,background-color 0.2s;
178
+ }
179
+
180
+ .c6 {
181
+ position: absolute;
182
+ display: block;
183
+ top: 0;
184
+ left: 0;
185
+ width: 12px;
186
+ height: 12px;
187
+ background-color: #ffffff;
188
+ border-radius: 50%;
189
+ -webkit-transform: translateX(0);
190
+ -ms-transform: translateX(0);
191
+ transform: translateX(0);
192
+ -webkit-transition: -webkit-transform 0.2s;
193
+ -webkit-transition: transform 0.2s;
194
+ transition: transform 0.2s;
195
+ }
196
+
197
+ .c2 {
198
+ position: absolute;
199
+ z-index: 1;
200
+ top: 0;
201
+ left: 0;
202
+ width: 100%;
203
+ height: 100%;
204
+ border-radius: 16px;
205
+ opacity: 0;
206
+ -webkit-appearance: none;
207
+ -moz-appearance: none;
208
+ appearance: none;
209
+ outline: none;
210
+ cursor: pointer;
211
+ }
212
+
213
+ .c2:checked ~ .c3 {
214
+ background-color: #0096fa;
215
+ }
216
+
217
+ .c2:checked ~ .c3 .c5 {
218
+ -webkit-transform: translateX(12px);
219
+ -ms-transform: translateX(12px);
220
+ transform: translateX(12px);
221
+ }
222
+
223
+ .c2:disabled {
224
+ cursor: auto;
225
+ }
226
+
227
+ .c2:disabled ~ .c3 {
228
+ opacity: 0.32;
229
+ }
230
+
231
+ .c2:not(:disabled):focus ~ .c3 {
232
+ box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
233
+ }
234
+
235
+ <div
236
+ data-dark={false}
237
+ >
238
+ <label
239
+ aria-disabled={true}
240
+ className="c0"
241
+ >
242
+ <span
243
+ className="c1"
244
+ >
245
+ <input
246
+ checked={true}
247
+ className="c2"
248
+ disabled={true}
249
+ type="checkbox"
250
+ />
251
+ <div
252
+ className="c3 c4"
253
+ >
254
+ <div
255
+ className="c5 c6"
256
+ />
257
+ </div>
258
+ </span>
259
+ </label>
260
+ </div>
261
+ `;
262
+
263
+ exports[`Storyshots Sandbox/Selection Control/SwitchCheckbox Off 1`] = `
264
+ .c0 {
265
+ display: -webkit-inline-box;
266
+ display: -webkit-inline-flex;
267
+ display: -ms-inline-flexbox;
268
+ display: inline-flex;
269
+ -webkit-align-items: center;
270
+ -webkit-box-align: center;
271
+ -ms-flex-align: center;
272
+ align-items: center;
273
+ -webkit-flex-direction: row;
274
+ -ms-flex-direction: row;
275
+ flex-direction: row;
276
+ cursor: pointer;
277
+ outline: 0;
278
+ }
279
+
280
+ .c0[aria-disabled='true'] {
281
+ cursor: auto;
282
+ }
283
+
284
+ .c1 {
285
+ display: -webkit-inline-box;
286
+ display: -webkit-inline-flex;
287
+ display: -ms-inline-flexbox;
288
+ display: inline-flex;
289
+ position: relative;
290
+ z-index: 0;
291
+ }
292
+
293
+ .c4 {
294
+ position: relative;
295
+ box-sizing: border-box;
296
+ width: 28px;
297
+ height: 16px;
298
+ border-radius: 16px;
299
+ border: 2px solid transparent;
300
+ background: #adadad;
301
+ -webkit-transition: box-shadow 0.2s,background-color 0.2s;
302
+ transition: box-shadow 0.2s,background-color 0.2s;
303
+ }
304
+
305
+ .c6 {
306
+ position: absolute;
307
+ display: block;
308
+ top: 0;
309
+ left: 0;
310
+ width: 12px;
311
+ height: 12px;
312
+ background-color: #ffffff;
313
+ border-radius: 50%;
314
+ -webkit-transform: translateX(0);
315
+ -ms-transform: translateX(0);
316
+ transform: translateX(0);
317
+ -webkit-transition: -webkit-transform 0.2s;
318
+ -webkit-transition: transform 0.2s;
319
+ transition: transform 0.2s;
320
+ }
321
+
322
+ .c2 {
323
+ position: absolute;
324
+ z-index: 1;
325
+ top: 0;
326
+ left: 0;
327
+ width: 100%;
328
+ height: 100%;
329
+ border-radius: 16px;
330
+ opacity: 0;
331
+ -webkit-appearance: none;
332
+ -moz-appearance: none;
333
+ appearance: none;
334
+ outline: none;
335
+ cursor: pointer;
336
+ }
337
+
338
+ .c2:checked ~ .c3 {
339
+ background-color: #0096fa;
340
+ }
341
+
342
+ .c2:checked ~ .c3 .c5 {
343
+ -webkit-transform: translateX(12px);
344
+ -ms-transform: translateX(12px);
345
+ transform: translateX(12px);
346
+ }
347
+
348
+ .c2:disabled {
349
+ cursor: auto;
350
+ }
351
+
352
+ .c2:disabled ~ .c3 {
353
+ opacity: 0.32;
354
+ }
355
+
356
+ .c2:not(:disabled):focus ~ .c3 {
357
+ box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
358
+ }
359
+
360
+ <div
361
+ data-dark={false}
362
+ >
363
+ <label
364
+ className="c0"
365
+ >
366
+ <span
367
+ className="c1"
368
+ >
369
+ <input
370
+ checked={false}
371
+ className="c2"
372
+ type="checkbox"
373
+ />
374
+ <div
375
+ className="c3 c4"
376
+ >
377
+ <div
378
+ className="c5 c6"
379
+ />
380
+ </div>
381
+ </span>
382
+ </label>
383
+ </div>
384
+ `;
385
+
386
+ exports[`Storyshots Sandbox/Selection Control/SwitchCheckbox On 1`] = `
387
+ .c0 {
388
+ display: -webkit-inline-box;
389
+ display: -webkit-inline-flex;
390
+ display: -ms-inline-flexbox;
391
+ display: inline-flex;
392
+ -webkit-align-items: center;
393
+ -webkit-box-align: center;
394
+ -ms-flex-align: center;
395
+ align-items: center;
396
+ -webkit-flex-direction: row;
397
+ -ms-flex-direction: row;
398
+ flex-direction: row;
399
+ cursor: pointer;
400
+ outline: 0;
401
+ }
402
+
403
+ .c0[aria-disabled='true'] {
404
+ cursor: auto;
405
+ }
406
+
407
+ .c1 {
408
+ display: -webkit-inline-box;
409
+ display: -webkit-inline-flex;
410
+ display: -ms-inline-flexbox;
411
+ display: inline-flex;
412
+ position: relative;
413
+ z-index: 0;
414
+ }
415
+
416
+ .c4 {
417
+ position: relative;
418
+ box-sizing: border-box;
419
+ width: 28px;
420
+ height: 16px;
421
+ border-radius: 16px;
422
+ border: 2px solid transparent;
423
+ background: #adadad;
424
+ -webkit-transition: box-shadow 0.2s,background-color 0.2s;
425
+ transition: box-shadow 0.2s,background-color 0.2s;
426
+ }
427
+
428
+ .c6 {
429
+ position: absolute;
430
+ display: block;
431
+ top: 0;
432
+ left: 0;
433
+ width: 12px;
434
+ height: 12px;
435
+ background-color: #ffffff;
436
+ border-radius: 50%;
437
+ -webkit-transform: translateX(0);
438
+ -ms-transform: translateX(0);
439
+ transform: translateX(0);
440
+ -webkit-transition: -webkit-transform 0.2s;
441
+ -webkit-transition: transform 0.2s;
442
+ transition: transform 0.2s;
443
+ }
444
+
445
+ .c2 {
446
+ position: absolute;
447
+ z-index: 1;
448
+ top: 0;
449
+ left: 0;
450
+ width: 100%;
451
+ height: 100%;
452
+ border-radius: 16px;
453
+ opacity: 0;
454
+ -webkit-appearance: none;
455
+ -moz-appearance: none;
456
+ appearance: none;
457
+ outline: none;
458
+ cursor: pointer;
459
+ }
460
+
461
+ .c2:checked ~ .c3 {
462
+ background-color: #0096fa;
463
+ }
464
+
465
+ .c2:checked ~ .c3 .c5 {
466
+ -webkit-transform: translateX(12px);
467
+ -ms-transform: translateX(12px);
468
+ transform: translateX(12px);
469
+ }
470
+
471
+ .c2:disabled {
472
+ cursor: auto;
473
+ }
474
+
475
+ .c2:disabled ~ .c3 {
476
+ opacity: 0.32;
477
+ }
478
+
479
+ .c2:not(:disabled):focus ~ .c3 {
480
+ box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
481
+ }
482
+
483
+ <div
484
+ data-dark={false}
485
+ >
486
+ <label
487
+ className="c0"
488
+ >
489
+ <span
490
+ className="c1"
491
+ >
492
+ <input
493
+ checked={true}
494
+ className="c2"
495
+ type="checkbox"
496
+ />
497
+ <div
498
+ className="c3 c4"
499
+ >
500
+ <div
501
+ className="c5 c6"
502
+ />
503
+ </div>
504
+ </span>
505
+ </label>
506
+ </div>
507
+ `;
@@ -0,0 +1,32 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Storyshots Sandbox/TextEllipsis Default 1`] = `
4
+ .c1 {
5
+ overflow: hidden;
6
+ line-height: 22px;
7
+ overflow-wrap: break-word;
8
+ display: -webkit-box;
9
+ -webkit-box-orient: vertical;
10
+ -webkit-line-clamp: 2;
11
+ max-height: 44px;
12
+ }
13
+
14
+ .c0 {
15
+ font-size: 14px;
16
+ }
17
+
18
+ <div
19
+ data-dark={false}
20
+ >
21
+ <div
22
+ className="c0"
23
+ >
24
+ <div
25
+ className="c1"
26
+ title="隴西の李徴は博学才穎、天宝の末年、若くして名を虎榜に連ね、ついで江南尉に補せられたが、性、狷介、自ら恃むところ頗る厚く、賤吏に甘んずるを潔しとしなかった。いくばくもなく官を退いた後は、故山、※(「埒のつくり+虎」、第3水準1-91-48)略に帰臥し、人と交を絶って、ひたすら詩作に耽った。下吏となって長く膝を俗悪な大官の前に屈するよりは、詩家としての名を死後百年に遺そうとしたのである。しかし、文名は容易に揚らず、生活は日を逐うて苦しくなる。李徴は漸く焦躁に駆られて来た。この頃からその容貌も峭刻となり、肉落ち骨秀で、眼光のみ徒らに炯々として、曾て進士に登第した頃の豊頬の美少年の俤は、何処に求めようもない。数年の後、貧窮に堪えず、妻子の衣食のために遂に節を屈して、再び東へ赴き、一地方官吏の職を奉ずることになった。一方、これは、己の詩業に半ば絶望したためでもある。曾ての同輩は既に遥か高位に進み、彼が昔、鈍物として歯牙にもかけなかったその連中の下命を拝さねばならぬことが、往年の儁才李徴の自尊心を如何に傷けたかは、想像に難くない。彼は怏々として楽しまず、狂悖の性は愈々抑え難くなった。一年の後、公用で旅に出、汝水のほとりに宿った時、遂に発狂した。或夜半、急に顔色を変えて寝床から起上ると、何か訳の分らぬことを叫びつつそのまま下にとび下りて、闇の中へ駈出した。彼は二度と戻って来なかった。附近の山野を捜索しても、何の手掛りもない。その後李徴がどうなったかを知る者は、誰もなかった。"
27
+ >
28
+ 隴西の李徴は博学才穎、天宝の末年、若くして名を虎榜に連ね、ついで江南尉に補せられたが、性、狷介、自ら恃むところ頗る厚く、賤吏に甘んずるを潔しとしなかった。いくばくもなく官を退いた後は、故山、※(「埒のつくり+虎」、第3水準1-91-48)略に帰臥し、人と交を絶って、ひたすら詩作に耽った。下吏となって長く膝を俗悪な大官の前に屈するよりは、詩家としての名を死後百年に遺そうとしたのである。しかし、文名は容易に揚らず、生活は日を逐うて苦しくなる。李徴は漸く焦躁に駆られて来た。この頃からその容貌も峭刻となり、肉落ち骨秀で、眼光のみ徒らに炯々として、曾て進士に登第した頃の豊頬の美少年の俤は、何処に求めようもない。数年の後、貧窮に堪えず、妻子の衣食のために遂に節を屈して、再び東へ赴き、一地方官吏の職を奉ずることになった。一方、これは、己の詩業に半ば絶望したためでもある。曾ての同輩は既に遥か高位に進み、彼が昔、鈍物として歯牙にもかけなかったその連中の下命を拝さねばならぬことが、往年の儁才李徴の自尊心を如何に傷けたかは、想像に難くない。彼は怏々として楽しまず、狂悖の性は愈々抑え難くなった。一年の後、公用で旅に出、汝水のほとりに宿った時、遂に発狂した。或夜半、急に顔色を変えて寝床から起上ると、何か訳の分らぬことを叫びつつそのまま下にとび下りて、闇の中へ駈出した。彼は二度と戻って来なかった。附近の山野を捜索しても、何の手掛りもない。その後李徴がどうなったかを知る者は、誰もなかった。
29
+ </div>
30
+ </div>
31
+ </div>
32
+ `;