@khanacademy/wonder-blocks-progress-spinner 1.1.35 → 1.1.36

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 (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/docs.md +4 -6
  3. package/package.json +2 -2
  4. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -920
  5. package/src/__tests__/generated-snapshot.test.js +0 -99
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @khanacademy/wonder-blocks-progress-spinner
2
2
 
3
+ ## 1.1.36
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [175a2dd2]
8
+ - @khanacademy/wonder-blocks-core@4.5.0
9
+
3
10
  ## 1.1.35
4
11
 
5
12
  ### Patch Changes
package/docs.md CHANGED
@@ -1,7 +1,5 @@
1
- Progress spinners to be used when indicating that some piece of content is loading. They come in three sizes (default, small, and xsmall) and also in light and dark varities. By default `CircularSpinner` should be used for most loading indicators.
1
+ Documentation for `@khanacademy/wonder-blocks-progress-spinner` is now in Storybook.
2
2
 
3
- ```js
4
- import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
5
-
6
- <CircularSpinner />
7
- ```
3
+ Visit the [Storybook
4
+ ProgressSpiner](https://khan.github.io/wonder-blocks/?path=/docs/progressspinner)
5
+ docs on GitHub Pages.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-progress-spinner",
3
- "version": "1.1.35",
3
+ "version": "1.1.36",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -17,7 +17,7 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.18.6",
19
19
  "@khanacademy/wonder-blocks-color": "^1.2.0",
20
- "@khanacademy/wonder-blocks-core": "^4.4.0",
20
+ "@khanacademy/wonder-blocks-core": "^4.5.0",
21
21
  "@khanacademy/wonder-blocks-spacing": "^3.0.5"
22
22
  },
23
23
  "peerDependencies": {
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap DELETED
@@ -1,920 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`wonder-blocks-progress-spinner example 1 1`] = `
4
- <div
5
- className=""
6
- style={
7
- {
8
- "alignItems": "stretch",
9
- "borderStyle": "solid",
10
- "borderWidth": 0,
11
- "boxSizing": "border-box",
12
- "display": "flex",
13
- "flexDirection": "column",
14
- "justifyContent": "center",
15
- "margin": 0,
16
- "minHeight": 0,
17
- "minWidth": 0,
18
- "padding": 0,
19
- "position": "relative",
20
- "zIndex": 0,
21
- }
22
- }
23
- >
24
- <svg
25
- height={96}
26
- viewBox="0 0 96 96"
27
- width={96}
28
- xmlns="http://www.w3.org/2000/svg"
29
- >
30
- <path
31
- className=""
32
- d="M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
33
- fillRule="nonzero"
34
- style={
35
- {
36
- "animationDuration": "1.1s",
37
- "animationIterationCount": "infinite",
38
- "animationName": {
39
- "0%": {
40
- "transform": "rotate(0deg)",
41
- },
42
- "100%": {
43
- "transform": "rotate(360deg)",
44
- },
45
- "50%": {
46
- "transform": "rotate(180deg)",
47
- },
48
- },
49
- "animationTimingFunction": "linear",
50
- "fill": "rgba(33,36,44,0.16)",
51
- "transformOrigin": "50% 50%",
52
- }
53
- }
54
- />
55
- </svg>
56
- </div>
57
- `;
58
-
59
- exports[`wonder-blocks-progress-spinner example 2 1`] = `
60
- <div
61
- className=""
62
- style={
63
- {
64
- "alignItems": "stretch",
65
- "borderStyle": "solid",
66
- "borderWidth": 0,
67
- "boxSizing": "border-box",
68
- "display": "flex",
69
- "flexDirection": "column",
70
- "margin": 0,
71
- "minHeight": 0,
72
- "minWidth": 0,
73
- "padding": 0,
74
- "position": "relative",
75
- "zIndex": 0,
76
- }
77
- }
78
- >
79
- <div
80
- className=""
81
- style={
82
- {
83
- "alignItems": "stretch",
84
- "borderStyle": "solid",
85
- "borderWidth": 0,
86
- "boxSizing": "border-box",
87
- "display": "flex",
88
- "flexDirection": "row",
89
- "margin": 0,
90
- "minHeight": 0,
91
- "minWidth": 0,
92
- "padding": 0,
93
- "position": "relative",
94
- "zIndex": 0,
95
- }
96
- }
97
- >
98
- <div
99
- className=""
100
- style={
101
- {
102
- "alignItems": "center",
103
- "borderStyle": "solid",
104
- "borderWidth": 0,
105
- "boxSizing": "border-box",
106
- "display": "flex",
107
- "flexDirection": "column",
108
- "height": 154,
109
- "justifyContent": "center",
110
- "margin": 0,
111
- "marginRight": 16,
112
- "minHeight": 0,
113
- "minWidth": 0,
114
- "padding": 0,
115
- "position": "relative",
116
- "textAlign": "center",
117
- "width": 154,
118
- "zIndex": 0,
119
- }
120
- }
121
- >
122
- <div
123
- className=""
124
- style={
125
- {
126
- "alignItems": "stretch",
127
- "borderStyle": "solid",
128
- "borderWidth": 0,
129
- "boxSizing": "border-box",
130
- "display": "flex",
131
- "flexDirection": "column",
132
- "justifyContent": "center",
133
- "margin": 0,
134
- "minHeight": 0,
135
- "minWidth": 0,
136
- "padding": 0,
137
- "position": "relative",
138
- "zIndex": 0,
139
- }
140
- }
141
- >
142
- <svg
143
- height={96}
144
- viewBox="0 0 96 96"
145
- width={96}
146
- xmlns="http://www.w3.org/2000/svg"
147
- >
148
- <path
149
- className=""
150
- d="M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
151
- fillRule="nonzero"
152
- style={
153
- {
154
- "animationDuration": "1.1s",
155
- "animationIterationCount": "infinite",
156
- "animationName": {
157
- "0%": {
158
- "transform": "rotate(0deg)",
159
- },
160
- "100%": {
161
- "transform": "rotate(360deg)",
162
- },
163
- "50%": {
164
- "transform": "rotate(180deg)",
165
- },
166
- },
167
- "animationTimingFunction": "linear",
168
- "fill": "rgba(33,36,44,0.16)",
169
- "transformOrigin": "50% 50%",
170
- }
171
- }
172
- />
173
- </svg>
174
- </div>
175
- <span
176
- className=""
177
- style={
178
- {
179
- "MozOsxFontSmoothing": "grayscale",
180
- "WebkitFontSmoothing": "antialiased",
181
- }
182
- }
183
- >
184
- size: large (96px)
185
- </span>
186
- </div>
187
- <div
188
- className=""
189
- style={
190
- {
191
- "alignItems": "center",
192
- "borderStyle": "solid",
193
- "borderWidth": 0,
194
- "boxSizing": "border-box",
195
- "display": "flex",
196
- "flexDirection": "column",
197
- "height": 154,
198
- "justifyContent": "center",
199
- "margin": 0,
200
- "marginRight": 16,
201
- "minHeight": 0,
202
- "minWidth": 0,
203
- "padding": 0,
204
- "position": "relative",
205
- "textAlign": "center",
206
- "width": 154,
207
- "zIndex": 0,
208
- }
209
- }
210
- >
211
- <div
212
- className=""
213
- style={
214
- {
215
- "alignItems": "stretch",
216
- "borderStyle": "solid",
217
- "borderWidth": 0,
218
- "boxSizing": "border-box",
219
- "display": "flex",
220
- "flexDirection": "column",
221
- "justifyContent": "center",
222
- "margin": 0,
223
- "minHeight": 0,
224
- "minWidth": 0,
225
- "padding": 0,
226
- "position": "relative",
227
- "zIndex": 0,
228
- }
229
- }
230
- >
231
- <svg
232
- height={48}
233
- viewBox="0 0 48 48"
234
- width={48}
235
- xmlns="http://www.w3.org/2000/svg"
236
- >
237
- <path
238
- className=""
239
- d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
240
- fillRule="nonzero"
241
- style={
242
- {
243
- "animationDuration": "1.1s",
244
- "animationIterationCount": "infinite",
245
- "animationName": {
246
- "0%": {
247
- "transform": "rotate(0deg)",
248
- },
249
- "100%": {
250
- "transform": "rotate(360deg)",
251
- },
252
- "50%": {
253
- "transform": "rotate(180deg)",
254
- },
255
- },
256
- "animationTimingFunction": "linear",
257
- "fill": "rgba(33,36,44,0.16)",
258
- "transformOrigin": "50% 50%",
259
- }
260
- }
261
- />
262
- </svg>
263
- </div>
264
- <span
265
- className=""
266
- style={
267
- {
268
- "MozOsxFontSmoothing": "grayscale",
269
- "WebkitFontSmoothing": "antialiased",
270
- }
271
- }
272
- >
273
- size: medium (48px)
274
- </span>
275
- </div>
276
- <div
277
- className=""
278
- style={
279
- {
280
- "alignItems": "center",
281
- "borderStyle": "solid",
282
- "borderWidth": 0,
283
- "boxSizing": "border-box",
284
- "display": "flex",
285
- "flexDirection": "column",
286
- "height": 154,
287
- "justifyContent": "center",
288
- "margin": 0,
289
- "marginRight": 16,
290
- "minHeight": 0,
291
- "minWidth": 0,
292
- "padding": 0,
293
- "position": "relative",
294
- "textAlign": "center",
295
- "width": 154,
296
- "zIndex": 0,
297
- }
298
- }
299
- >
300
- <div
301
- className=""
302
- style={
303
- {
304
- "alignItems": "stretch",
305
- "borderStyle": "solid",
306
- "borderWidth": 0,
307
- "boxSizing": "border-box",
308
- "display": "flex",
309
- "flexDirection": "column",
310
- "justifyContent": "center",
311
- "margin": 0,
312
- "minHeight": 0,
313
- "minWidth": 0,
314
- "padding": 0,
315
- "position": "relative",
316
- "zIndex": 0,
317
- }
318
- }
319
- >
320
- <svg
321
- height={24}
322
- viewBox="0 0 24 24"
323
- width={24}
324
- xmlns="http://www.w3.org/2000/svg"
325
- >
326
- <path
327
- className=""
328
- d="M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z"
329
- fillRule="nonzero"
330
- style={
331
- {
332
- "animationDuration": "1.1s",
333
- "animationIterationCount": "infinite",
334
- "animationName": {
335
- "0%": {
336
- "transform": "rotate(0deg)",
337
- },
338
- "100%": {
339
- "transform": "rotate(360deg)",
340
- },
341
- "50%": {
342
- "transform": "rotate(180deg)",
343
- },
344
- },
345
- "animationTimingFunction": "linear",
346
- "fill": "rgba(33,36,44,0.16)",
347
- "transformOrigin": "50% 50%",
348
- }
349
- }
350
- />
351
- </svg>
352
- </div>
353
- <span
354
- className=""
355
- style={
356
- {
357
- "MozOsxFontSmoothing": "grayscale",
358
- "WebkitFontSmoothing": "antialiased",
359
- }
360
- }
361
- >
362
- size: small (24px)
363
- </span>
364
- </div>
365
- <div
366
- className=""
367
- style={
368
- {
369
- "alignItems": "center",
370
- "borderStyle": "solid",
371
- "borderWidth": 0,
372
- "boxSizing": "border-box",
373
- "display": "flex",
374
- "flexDirection": "column",
375
- "height": 154,
376
- "justifyContent": "center",
377
- "margin": 0,
378
- "marginRight": 16,
379
- "minHeight": 0,
380
- "minWidth": 0,
381
- "padding": 0,
382
- "position": "relative",
383
- "textAlign": "center",
384
- "width": 154,
385
- "zIndex": 0,
386
- }
387
- }
388
- >
389
- <div
390
- className=""
391
- style={
392
- {
393
- "alignItems": "stretch",
394
- "borderStyle": "solid",
395
- "borderWidth": 0,
396
- "boxSizing": "border-box",
397
- "display": "flex",
398
- "flexDirection": "column",
399
- "justifyContent": "center",
400
- "margin": 0,
401
- "minHeight": 0,
402
- "minWidth": 0,
403
- "padding": 0,
404
- "position": "relative",
405
- "zIndex": 0,
406
- }
407
- }
408
- >
409
- <svg
410
- height={16}
411
- viewBox="0 0 16 16"
412
- width={16}
413
- xmlns="http://www.w3.org/2000/svg"
414
- >
415
- <path
416
- className=""
417
- d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
418
- fillRule="nonzero"
419
- style={
420
- {
421
- "animationDuration": "1.1s",
422
- "animationIterationCount": "infinite",
423
- "animationName": {
424
- "0%": {
425
- "transform": "rotate(0deg)",
426
- },
427
- "100%": {
428
- "transform": "rotate(360deg)",
429
- },
430
- "50%": {
431
- "transform": "rotate(180deg)",
432
- },
433
- },
434
- "animationTimingFunction": "linear",
435
- "fill": "rgba(33,36,44,0.16)",
436
- "transformOrigin": "50% 50%",
437
- }
438
- }
439
- />
440
- </svg>
441
- </div>
442
- <span
443
- className=""
444
- style={
445
- {
446
- "MozOsxFontSmoothing": "grayscale",
447
- "WebkitFontSmoothing": "antialiased",
448
- }
449
- }
450
- >
451
- size: xsmall (16px)
452
- </span>
453
- </div>
454
- </div>
455
- <div
456
- className=""
457
- style={
458
- {
459
- "alignItems": "stretch",
460
- "background": "#0b2149",
461
- "borderStyle": "solid",
462
- "borderWidth": 0,
463
- "boxSizing": "border-box",
464
- "color": "#ffffff",
465
- "display": "flex",
466
- "flexDirection": "row",
467
- "margin": 0,
468
- "minHeight": 0,
469
- "minWidth": 0,
470
- "padding": 0,
471
- "position": "relative",
472
- "zIndex": 0,
473
- }
474
- }
475
- >
476
- <div
477
- className=""
478
- style={
479
- {
480
- "alignItems": "center",
481
- "borderStyle": "solid",
482
- "borderWidth": 0,
483
- "boxSizing": "border-box",
484
- "display": "flex",
485
- "flexDirection": "column",
486
- "height": 154,
487
- "justifyContent": "center",
488
- "margin": 0,
489
- "marginRight": 16,
490
- "minHeight": 0,
491
- "minWidth": 0,
492
- "padding": 0,
493
- "position": "relative",
494
- "textAlign": "center",
495
- "width": 154,
496
- "zIndex": 0,
497
- }
498
- }
499
- >
500
- <div
501
- className=""
502
- style={
503
- {
504
- "alignItems": "stretch",
505
- "borderStyle": "solid",
506
- "borderWidth": 0,
507
- "boxSizing": "border-box",
508
- "display": "flex",
509
- "flexDirection": "column",
510
- "justifyContent": "center",
511
- "margin": 0,
512
- "minHeight": 0,
513
- "minWidth": 0,
514
- "padding": 0,
515
- "position": "relative",
516
- "zIndex": 0,
517
- }
518
- }
519
- >
520
- <svg
521
- height={96}
522
- viewBox="0 0 96 96"
523
- width={96}
524
- xmlns="http://www.w3.org/2000/svg"
525
- >
526
- <path
527
- className=""
528
- d="M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
529
- fillRule="nonzero"
530
- style={
531
- {
532
- "animationDuration": "1.1s",
533
- "animationIterationCount": "infinite",
534
- "animationName": {
535
- "0%": {
536
- "transform": "rotate(0deg)",
537
- },
538
- "100%": {
539
- "transform": "rotate(360deg)",
540
- },
541
- "50%": {
542
- "transform": "rotate(180deg)",
543
- },
544
- },
545
- "animationTimingFunction": "linear",
546
- "fill": "#ffffff",
547
- "transformOrigin": "50% 50%",
548
- }
549
- }
550
- />
551
- </svg>
552
- </div>
553
- <span
554
- className=""
555
- style={
556
- {
557
- "MozOsxFontSmoothing": "grayscale",
558
- "WebkitFontSmoothing": "antialiased",
559
- }
560
- }
561
- >
562
- light, size: large (96px)
563
- </span>
564
- </div>
565
- <div
566
- className=""
567
- style={
568
- {
569
- "alignItems": "center",
570
- "borderStyle": "solid",
571
- "borderWidth": 0,
572
- "boxSizing": "border-box",
573
- "display": "flex",
574
- "flexDirection": "column",
575
- "height": 154,
576
- "justifyContent": "center",
577
- "margin": 0,
578
- "marginRight": 16,
579
- "minHeight": 0,
580
- "minWidth": 0,
581
- "padding": 0,
582
- "position": "relative",
583
- "textAlign": "center",
584
- "width": 154,
585
- "zIndex": 0,
586
- }
587
- }
588
- >
589
- <div
590
- className=""
591
- style={
592
- {
593
- "alignItems": "stretch",
594
- "borderStyle": "solid",
595
- "borderWidth": 0,
596
- "boxSizing": "border-box",
597
- "display": "flex",
598
- "flexDirection": "column",
599
- "justifyContent": "center",
600
- "margin": 0,
601
- "minHeight": 0,
602
- "minWidth": 0,
603
- "padding": 0,
604
- "position": "relative",
605
- "zIndex": 0,
606
- }
607
- }
608
- >
609
- <svg
610
- height={48}
611
- viewBox="0 0 48 48"
612
- width={48}
613
- xmlns="http://www.w3.org/2000/svg"
614
- >
615
- <path
616
- className=""
617
- d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
618
- fillRule="nonzero"
619
- style={
620
- {
621
- "animationDuration": "1.1s",
622
- "animationIterationCount": "infinite",
623
- "animationName": {
624
- "0%": {
625
- "transform": "rotate(0deg)",
626
- },
627
- "100%": {
628
- "transform": "rotate(360deg)",
629
- },
630
- "50%": {
631
- "transform": "rotate(180deg)",
632
- },
633
- },
634
- "animationTimingFunction": "linear",
635
- "fill": "#ffffff",
636
- "transformOrigin": "50% 50%",
637
- }
638
- }
639
- />
640
- </svg>
641
- </div>
642
- <span
643
- className=""
644
- style={
645
- {
646
- "MozOsxFontSmoothing": "grayscale",
647
- "WebkitFontSmoothing": "antialiased",
648
- }
649
- }
650
- >
651
- light, size: medium (48px)
652
- </span>
653
- </div>
654
- <div
655
- className=""
656
- style={
657
- {
658
- "alignItems": "center",
659
- "borderStyle": "solid",
660
- "borderWidth": 0,
661
- "boxSizing": "border-box",
662
- "display": "flex",
663
- "flexDirection": "column",
664
- "height": 154,
665
- "justifyContent": "center",
666
- "margin": 0,
667
- "marginRight": 16,
668
- "minHeight": 0,
669
- "minWidth": 0,
670
- "padding": 0,
671
- "position": "relative",
672
- "textAlign": "center",
673
- "width": 154,
674
- "zIndex": 0,
675
- }
676
- }
677
- >
678
- <div
679
- className=""
680
- style={
681
- {
682
- "alignItems": "stretch",
683
- "borderStyle": "solid",
684
- "borderWidth": 0,
685
- "boxSizing": "border-box",
686
- "display": "flex",
687
- "flexDirection": "column",
688
- "justifyContent": "center",
689
- "margin": 0,
690
- "minHeight": 0,
691
- "minWidth": 0,
692
- "padding": 0,
693
- "position": "relative",
694
- "zIndex": 0,
695
- }
696
- }
697
- >
698
- <svg
699
- height={24}
700
- viewBox="0 0 24 24"
701
- width={24}
702
- xmlns="http://www.w3.org/2000/svg"
703
- >
704
- <path
705
- className=""
706
- d="M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z"
707
- fillRule="nonzero"
708
- style={
709
- {
710
- "animationDuration": "1.1s",
711
- "animationIterationCount": "infinite",
712
- "animationName": {
713
- "0%": {
714
- "transform": "rotate(0deg)",
715
- },
716
- "100%": {
717
- "transform": "rotate(360deg)",
718
- },
719
- "50%": {
720
- "transform": "rotate(180deg)",
721
- },
722
- },
723
- "animationTimingFunction": "linear",
724
- "fill": "#ffffff",
725
- "transformOrigin": "50% 50%",
726
- }
727
- }
728
- />
729
- </svg>
730
- </div>
731
- <span
732
- className=""
733
- style={
734
- {
735
- "MozOsxFontSmoothing": "grayscale",
736
- "WebkitFontSmoothing": "antialiased",
737
- }
738
- }
739
- >
740
- light, size: small (24px)
741
- </span>
742
- </div>
743
- <div
744
- className=""
745
- style={
746
- {
747
- "alignItems": "center",
748
- "borderStyle": "solid",
749
- "borderWidth": 0,
750
- "boxSizing": "border-box",
751
- "display": "flex",
752
- "flexDirection": "column",
753
- "height": 154,
754
- "justifyContent": "center",
755
- "margin": 0,
756
- "marginRight": 16,
757
- "minHeight": 0,
758
- "minWidth": 0,
759
- "padding": 0,
760
- "position": "relative",
761
- "textAlign": "center",
762
- "width": 154,
763
- "zIndex": 0,
764
- }
765
- }
766
- >
767
- <div
768
- className=""
769
- style={
770
- {
771
- "alignItems": "stretch",
772
- "borderStyle": "solid",
773
- "borderWidth": 0,
774
- "boxSizing": "border-box",
775
- "display": "flex",
776
- "flexDirection": "column",
777
- "justifyContent": "center",
778
- "margin": 0,
779
- "minHeight": 0,
780
- "minWidth": 0,
781
- "padding": 0,
782
- "position": "relative",
783
- "zIndex": 0,
784
- }
785
- }
786
- >
787
- <svg
788
- height={16}
789
- viewBox="0 0 16 16"
790
- width={16}
791
- xmlns="http://www.w3.org/2000/svg"
792
- >
793
- <path
794
- className=""
795
- d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
796
- fillRule="nonzero"
797
- style={
798
- {
799
- "animationDuration": "1.1s",
800
- "animationIterationCount": "infinite",
801
- "animationName": {
802
- "0%": {
803
- "transform": "rotate(0deg)",
804
- },
805
- "100%": {
806
- "transform": "rotate(360deg)",
807
- },
808
- "50%": {
809
- "transform": "rotate(180deg)",
810
- },
811
- },
812
- "animationTimingFunction": "linear",
813
- "fill": "#ffffff",
814
- "transformOrigin": "50% 50%",
815
- }
816
- }
817
- />
818
- </svg>
819
- </div>
820
- <span
821
- className=""
822
- style={
823
- {
824
- "MozOsxFontSmoothing": "grayscale",
825
- "WebkitFontSmoothing": "antialiased",
826
- }
827
- }
828
- >
829
- light, size: xsmall (16px)
830
- </span>
831
- </div>
832
- </div>
833
- <div
834
- className=""
835
- style={
836
- {
837
- "alignItems": "stretch",
838
- "borderStyle": "solid",
839
- "borderWidth": 0,
840
- "boxSizing": "border-box",
841
- "display": "flex",
842
- "flexDirection": "column",
843
- "margin": 0,
844
- "minHeight": 0,
845
- "minWidth": 0,
846
- "padding": 0,
847
- "position": "relative",
848
- "zIndex": 0,
849
- }
850
- }
851
- >
852
- <span
853
- className=""
854
- style={
855
- {
856
- "MozOsxFontSmoothing": "grayscale",
857
- "WebkitFontSmoothing": "antialiased",
858
- }
859
- }
860
- >
861
- Inline inside
862
- <div
863
- className=""
864
- style={
865
- {
866
- "alignItems": "stretch",
867
- "borderStyle": "solid",
868
- "borderWidth": 0,
869
- "boxSizing": "border-box",
870
- "display": "inline",
871
- "flexDirection": "column",
872
- "justifyContent": "center",
873
- "margin": 0,
874
- "minHeight": 0,
875
- "minWidth": 0,
876
- "padding": 0,
877
- "position": "relative",
878
- "zIndex": 0,
879
- }
880
- }
881
- >
882
- <svg
883
- height={16}
884
- viewBox="0 0 16 16"
885
- width={16}
886
- xmlns="http://www.w3.org/2000/svg"
887
- >
888
- <path
889
- className=""
890
- d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
891
- fillRule="nonzero"
892
- style={
893
- {
894
- "animationDuration": "1.1s",
895
- "animationIterationCount": "infinite",
896
- "animationName": {
897
- "0%": {
898
- "transform": "rotate(0deg)",
899
- },
900
- "100%": {
901
- "transform": "rotate(360deg)",
902
- },
903
- "50%": {
904
- "transform": "rotate(180deg)",
905
- },
906
- },
907
- "animationTimingFunction": "linear",
908
- "fill": "rgba(33,36,44,0.16)",
909
- "transformOrigin": "50% 50%",
910
- }
911
- }
912
- />
913
- </svg>
914
- </div>
915
-
916
- some text.
917
- </span>
918
- </div>
919
- </div>
920
- `;
package/src/__tests__/generated-snapshot.test.js DELETED
@@ -1,99 +0,0 @@
1
- // This file is auto-generated by gen-snapshot-tests.js
2
- // Do not edit this file. To make changes to these snapshot tests:
3
- // 1. edit the markdown documentation files in the package,
4
- // packages/wonder-blocks-progress-spinner
5
- // 2. Run `yarn run gen-snapshot-tests`.
6
- import React from "react";
7
- import renderer from "react-test-renderer";
8
-
9
- // Mock react-dom as jest doesn't like findDOMNode.
10
- jest.mock("react-dom");
11
- import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
12
- import {StyleSheet} from "aphrodite";
13
- import {Text, View} from "@khanacademy/wonder-blocks-core";
14
- import Color from "@khanacademy/wonder-blocks-color";
15
-
16
- describe("wonder-blocks-progress-spinner", () => {
17
- it("example 1", () => {
18
- const example = <CircularSpinner />;
19
- const tree = renderer.create(example).toJSON();
20
- expect(tree).toMatchSnapshot();
21
- });
22
-
23
- it("example 2", () => {
24
- const styles = StyleSheet.create({
25
- contents: {
26
- flexDirection: "row",
27
- },
28
- dark: {
29
- background: Color.darkBlue,
30
- color: Color.white,
31
- },
32
- block: {
33
- width: 154,
34
- height: 154,
35
- marginRight: 16,
36
- alignItems: "center",
37
- justifyContent: "center",
38
- textAlign: "center",
39
- },
40
- inline: {
41
- display: "inline",
42
- },
43
- });
44
- const example = (
45
- <View>
46
- <View style={styles.contents}>
47
- <View style={styles.block}>
48
- <CircularSpinner size="large" />
49
- <Text>size: large (96px)</Text>
50
- </View>
51
- <View style={styles.block}>
52
- <CircularSpinner size="medium" />
53
- <Text>size: medium (48px)</Text>
54
- </View>
55
- <View style={styles.block}>
56
- <CircularSpinner size="small" />
57
- <Text>size: small (24px)</Text>
58
- </View>
59
- <View style={styles.block}>
60
- <CircularSpinner size="xsmall" />
61
- <Text>size: xsmall (16px)</Text>
62
- </View>
63
- </View>
64
-
65
- <View style={[styles.contents, styles.dark]}>
66
- <View style={styles.block}>
67
- <CircularSpinner size="large" light />
68
- <Text>light, size: large (96px)</Text>
69
- </View>
70
- <View style={styles.block}>
71
- <CircularSpinner size="medium" light />
72
- <Text>light, size: medium (48px)</Text>
73
- </View>
74
- <View style={styles.block}>
75
- <CircularSpinner size="small" light />
76
- <Text>light, size: small (24px)</Text>
77
- </View>
78
- <View style={styles.block}>
79
- <CircularSpinner size="xsmall" light />
80
- <Text>light, size: xsmall (16px)</Text>
81
- </View>
82
- </View>
83
-
84
- <View>
85
- <Text>
86
- Inline inside
87
- <CircularSpinner
88
- size="xsmall"
89
- style={styles.inline}
90
- />{" "}
91
- some text.
92
- </Text>
93
- </View>
94
- </View>
95
- );
96
- const tree = renderer.create(example).toJSON();
97
- expect(tree).toMatchSnapshot();
98
- });
99
- });