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

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 (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/index.js +8 -0
  3. package/package.json +4 -4
  4. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +82 -82
  5. package/src/components/__docs__/circular-spinner.stories.js +182 -0
  6. package/src/components/circular-spinner.js +8 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @khanacademy/wonder-blocks-progress-spinner
2
2
 
3
+ ## 1.1.35
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [6ee20af9]
8
+ - @khanacademy/wonder-blocks-core@4.4.0
9
+
10
+ ## 1.1.34
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies [34c7aacb]
15
+ - @khanacademy/wonder-blocks-color@1.2.0
16
+
3
17
  ## 1.1.33
4
18
 
5
19
  ### Patch Changes
package/dist/index.js CHANGED
@@ -142,6 +142,14 @@ const StyledPath = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODU
142
142
  /**
143
143
  * A circular progress spinner. Used for indicating loading progress. Should
144
144
  * be used by default in most places where a loading indicator is needed.
145
+ *
146
+ * ### Usage
147
+ *
148
+ * ```js
149
+ * import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
150
+ *
151
+ * <CircularSpinner />
152
+ * ```
145
153
  */
146
154
  class CircularSpinner extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
147
155
  render() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-progress-spinner",
3
- "version": "1.1.33",
3
+ "version": "1.1.35",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -15,9 +15,9 @@
15
15
  "author": "",
16
16
  "license": "MIT",
17
17
  "dependencies": {
18
- "@babel/runtime": "^7.16.3",
19
- "@khanacademy/wonder-blocks-color": "^1.1.20",
20
- "@khanacademy/wonder-blocks-core": "^4.3.2",
18
+ "@babel/runtime": "^7.18.6",
19
+ "@khanacademy/wonder-blocks-color": "^1.2.0",
20
+ "@khanacademy/wonder-blocks-core": "^4.4.0",
21
21
  "@khanacademy/wonder-blocks-spacing": "^3.0.5"
22
22
  },
23
23
  "peerDependencies": {
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap CHANGED
@@ -4,7 +4,7 @@ exports[`wonder-blocks-progress-spinner example 1 1`] = `
4
4
  <div
5
5
  className=""
6
6
  style={
7
- Object {
7
+ {
8
8
  "alignItems": "stretch",
9
9
  "borderStyle": "solid",
10
10
  "borderWidth": 0,
@@ -32,17 +32,17 @@ exports[`wonder-blocks-progress-spinner example 1 1`] = `
32
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
33
  fillRule="nonzero"
34
34
  style={
35
- Object {
35
+ {
36
36
  "animationDuration": "1.1s",
37
37
  "animationIterationCount": "infinite",
38
- "animationName": Object {
39
- "0%": Object {
38
+ "animationName": {
39
+ "0%": {
40
40
  "transform": "rotate(0deg)",
41
41
  },
42
- "100%": Object {
42
+ "100%": {
43
43
  "transform": "rotate(360deg)",
44
44
  },
45
- "50%": Object {
45
+ "50%": {
46
46
  "transform": "rotate(180deg)",
47
47
  },
48
48
  },
@@ -60,7 +60,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
60
60
  <div
61
61
  className=""
62
62
  style={
63
- Object {
63
+ {
64
64
  "alignItems": "stretch",
65
65
  "borderStyle": "solid",
66
66
  "borderWidth": 0,
@@ -79,7 +79,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
79
79
  <div
80
80
  className=""
81
81
  style={
82
- Object {
82
+ {
83
83
  "alignItems": "stretch",
84
84
  "borderStyle": "solid",
85
85
  "borderWidth": 0,
@@ -98,7 +98,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
98
98
  <div
99
99
  className=""
100
100
  style={
101
- Object {
101
+ {
102
102
  "alignItems": "center",
103
103
  "borderStyle": "solid",
104
104
  "borderWidth": 0,
@@ -122,7 +122,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
122
122
  <div
123
123
  className=""
124
124
  style={
125
- Object {
125
+ {
126
126
  "alignItems": "stretch",
127
127
  "borderStyle": "solid",
128
128
  "borderWidth": 0,
@@ -150,17 +150,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
150
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
151
  fillRule="nonzero"
152
152
  style={
153
- Object {
153
+ {
154
154
  "animationDuration": "1.1s",
155
155
  "animationIterationCount": "infinite",
156
- "animationName": Object {
157
- "0%": Object {
156
+ "animationName": {
157
+ "0%": {
158
158
  "transform": "rotate(0deg)",
159
159
  },
160
- "100%": Object {
160
+ "100%": {
161
161
  "transform": "rotate(360deg)",
162
162
  },
163
- "50%": Object {
163
+ "50%": {
164
164
  "transform": "rotate(180deg)",
165
165
  },
166
166
  },
@@ -175,7 +175,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
175
175
  <span
176
176
  className=""
177
177
  style={
178
- Object {
178
+ {
179
179
  "MozOsxFontSmoothing": "grayscale",
180
180
  "WebkitFontSmoothing": "antialiased",
181
181
  }
@@ -187,7 +187,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
187
187
  <div
188
188
  className=""
189
189
  style={
190
- Object {
190
+ {
191
191
  "alignItems": "center",
192
192
  "borderStyle": "solid",
193
193
  "borderWidth": 0,
@@ -211,7 +211,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
211
211
  <div
212
212
  className=""
213
213
  style={
214
- Object {
214
+ {
215
215
  "alignItems": "stretch",
216
216
  "borderStyle": "solid",
217
217
  "borderWidth": 0,
@@ -239,17 +239,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
239
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
240
  fillRule="nonzero"
241
241
  style={
242
- Object {
242
+ {
243
243
  "animationDuration": "1.1s",
244
244
  "animationIterationCount": "infinite",
245
- "animationName": Object {
246
- "0%": Object {
245
+ "animationName": {
246
+ "0%": {
247
247
  "transform": "rotate(0deg)",
248
248
  },
249
- "100%": Object {
249
+ "100%": {
250
250
  "transform": "rotate(360deg)",
251
251
  },
252
- "50%": Object {
252
+ "50%": {
253
253
  "transform": "rotate(180deg)",
254
254
  },
255
255
  },
@@ -264,7 +264,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
264
264
  <span
265
265
  className=""
266
266
  style={
267
- Object {
267
+ {
268
268
  "MozOsxFontSmoothing": "grayscale",
269
269
  "WebkitFontSmoothing": "antialiased",
270
270
  }
@@ -276,7 +276,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
276
276
  <div
277
277
  className=""
278
278
  style={
279
- Object {
279
+ {
280
280
  "alignItems": "center",
281
281
  "borderStyle": "solid",
282
282
  "borderWidth": 0,
@@ -300,7 +300,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
300
300
  <div
301
301
  className=""
302
302
  style={
303
- Object {
303
+ {
304
304
  "alignItems": "stretch",
305
305
  "borderStyle": "solid",
306
306
  "borderWidth": 0,
@@ -328,17 +328,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
328
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
329
  fillRule="nonzero"
330
330
  style={
331
- Object {
331
+ {
332
332
  "animationDuration": "1.1s",
333
333
  "animationIterationCount": "infinite",
334
- "animationName": Object {
335
- "0%": Object {
334
+ "animationName": {
335
+ "0%": {
336
336
  "transform": "rotate(0deg)",
337
337
  },
338
- "100%": Object {
338
+ "100%": {
339
339
  "transform": "rotate(360deg)",
340
340
  },
341
- "50%": Object {
341
+ "50%": {
342
342
  "transform": "rotate(180deg)",
343
343
  },
344
344
  },
@@ -353,7 +353,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
353
353
  <span
354
354
  className=""
355
355
  style={
356
- Object {
356
+ {
357
357
  "MozOsxFontSmoothing": "grayscale",
358
358
  "WebkitFontSmoothing": "antialiased",
359
359
  }
@@ -365,7 +365,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
365
365
  <div
366
366
  className=""
367
367
  style={
368
- Object {
368
+ {
369
369
  "alignItems": "center",
370
370
  "borderStyle": "solid",
371
371
  "borderWidth": 0,
@@ -389,7 +389,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
389
389
  <div
390
390
  className=""
391
391
  style={
392
- Object {
392
+ {
393
393
  "alignItems": "stretch",
394
394
  "borderStyle": "solid",
395
395
  "borderWidth": 0,
@@ -417,17 +417,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
417
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
418
  fillRule="nonzero"
419
419
  style={
420
- Object {
420
+ {
421
421
  "animationDuration": "1.1s",
422
422
  "animationIterationCount": "infinite",
423
- "animationName": Object {
424
- "0%": Object {
423
+ "animationName": {
424
+ "0%": {
425
425
  "transform": "rotate(0deg)",
426
426
  },
427
- "100%": Object {
427
+ "100%": {
428
428
  "transform": "rotate(360deg)",
429
429
  },
430
- "50%": Object {
430
+ "50%": {
431
431
  "transform": "rotate(180deg)",
432
432
  },
433
433
  },
@@ -442,7 +442,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
442
442
  <span
443
443
  className=""
444
444
  style={
445
- Object {
445
+ {
446
446
  "MozOsxFontSmoothing": "grayscale",
447
447
  "WebkitFontSmoothing": "antialiased",
448
448
  }
@@ -455,9 +455,9 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
455
455
  <div
456
456
  className=""
457
457
  style={
458
- Object {
458
+ {
459
459
  "alignItems": "stretch",
460
- "background": "#0a2a66",
460
+ "background": "#0b2149",
461
461
  "borderStyle": "solid",
462
462
  "borderWidth": 0,
463
463
  "boxSizing": "border-box",
@@ -476,7 +476,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
476
476
  <div
477
477
  className=""
478
478
  style={
479
- Object {
479
+ {
480
480
  "alignItems": "center",
481
481
  "borderStyle": "solid",
482
482
  "borderWidth": 0,
@@ -500,7 +500,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
500
500
  <div
501
501
  className=""
502
502
  style={
503
- Object {
503
+ {
504
504
  "alignItems": "stretch",
505
505
  "borderStyle": "solid",
506
506
  "borderWidth": 0,
@@ -528,17 +528,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
528
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
529
  fillRule="nonzero"
530
530
  style={
531
- Object {
531
+ {
532
532
  "animationDuration": "1.1s",
533
533
  "animationIterationCount": "infinite",
534
- "animationName": Object {
535
- "0%": Object {
534
+ "animationName": {
535
+ "0%": {
536
536
  "transform": "rotate(0deg)",
537
537
  },
538
- "100%": Object {
538
+ "100%": {
539
539
  "transform": "rotate(360deg)",
540
540
  },
541
- "50%": Object {
541
+ "50%": {
542
542
  "transform": "rotate(180deg)",
543
543
  },
544
544
  },
@@ -553,7 +553,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
553
553
  <span
554
554
  className=""
555
555
  style={
556
- Object {
556
+ {
557
557
  "MozOsxFontSmoothing": "grayscale",
558
558
  "WebkitFontSmoothing": "antialiased",
559
559
  }
@@ -565,7 +565,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
565
565
  <div
566
566
  className=""
567
567
  style={
568
- Object {
568
+ {
569
569
  "alignItems": "center",
570
570
  "borderStyle": "solid",
571
571
  "borderWidth": 0,
@@ -589,7 +589,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
589
589
  <div
590
590
  className=""
591
591
  style={
592
- Object {
592
+ {
593
593
  "alignItems": "stretch",
594
594
  "borderStyle": "solid",
595
595
  "borderWidth": 0,
@@ -617,17 +617,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
617
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
618
  fillRule="nonzero"
619
619
  style={
620
- Object {
620
+ {
621
621
  "animationDuration": "1.1s",
622
622
  "animationIterationCount": "infinite",
623
- "animationName": Object {
624
- "0%": Object {
623
+ "animationName": {
624
+ "0%": {
625
625
  "transform": "rotate(0deg)",
626
626
  },
627
- "100%": Object {
627
+ "100%": {
628
628
  "transform": "rotate(360deg)",
629
629
  },
630
- "50%": Object {
630
+ "50%": {
631
631
  "transform": "rotate(180deg)",
632
632
  },
633
633
  },
@@ -642,7 +642,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
642
642
  <span
643
643
  className=""
644
644
  style={
645
- Object {
645
+ {
646
646
  "MozOsxFontSmoothing": "grayscale",
647
647
  "WebkitFontSmoothing": "antialiased",
648
648
  }
@@ -654,7 +654,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
654
654
  <div
655
655
  className=""
656
656
  style={
657
- Object {
657
+ {
658
658
  "alignItems": "center",
659
659
  "borderStyle": "solid",
660
660
  "borderWidth": 0,
@@ -678,7 +678,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
678
678
  <div
679
679
  className=""
680
680
  style={
681
- Object {
681
+ {
682
682
  "alignItems": "stretch",
683
683
  "borderStyle": "solid",
684
684
  "borderWidth": 0,
@@ -706,17 +706,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
706
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
707
  fillRule="nonzero"
708
708
  style={
709
- Object {
709
+ {
710
710
  "animationDuration": "1.1s",
711
711
  "animationIterationCount": "infinite",
712
- "animationName": Object {
713
- "0%": Object {
712
+ "animationName": {
713
+ "0%": {
714
714
  "transform": "rotate(0deg)",
715
715
  },
716
- "100%": Object {
716
+ "100%": {
717
717
  "transform": "rotate(360deg)",
718
718
  },
719
- "50%": Object {
719
+ "50%": {
720
720
  "transform": "rotate(180deg)",
721
721
  },
722
722
  },
@@ -731,7 +731,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
731
731
  <span
732
732
  className=""
733
733
  style={
734
- Object {
734
+ {
735
735
  "MozOsxFontSmoothing": "grayscale",
736
736
  "WebkitFontSmoothing": "antialiased",
737
737
  }
@@ -743,7 +743,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
743
743
  <div
744
744
  className=""
745
745
  style={
746
- Object {
746
+ {
747
747
  "alignItems": "center",
748
748
  "borderStyle": "solid",
749
749
  "borderWidth": 0,
@@ -767,7 +767,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
767
767
  <div
768
768
  className=""
769
769
  style={
770
- Object {
770
+ {
771
771
  "alignItems": "stretch",
772
772
  "borderStyle": "solid",
773
773
  "borderWidth": 0,
@@ -795,17 +795,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
795
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
796
  fillRule="nonzero"
797
797
  style={
798
- Object {
798
+ {
799
799
  "animationDuration": "1.1s",
800
800
  "animationIterationCount": "infinite",
801
- "animationName": Object {
802
- "0%": Object {
801
+ "animationName": {
802
+ "0%": {
803
803
  "transform": "rotate(0deg)",
804
804
  },
805
- "100%": Object {
805
+ "100%": {
806
806
  "transform": "rotate(360deg)",
807
807
  },
808
- "50%": Object {
808
+ "50%": {
809
809
  "transform": "rotate(180deg)",
810
810
  },
811
811
  },
@@ -820,7 +820,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
820
820
  <span
821
821
  className=""
822
822
  style={
823
- Object {
823
+ {
824
824
  "MozOsxFontSmoothing": "grayscale",
825
825
  "WebkitFontSmoothing": "antialiased",
826
826
  }
@@ -833,7 +833,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
833
833
  <div
834
834
  className=""
835
835
  style={
836
- Object {
836
+ {
837
837
  "alignItems": "stretch",
838
838
  "borderStyle": "solid",
839
839
  "borderWidth": 0,
@@ -852,7 +852,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
852
852
  <span
853
853
  className=""
854
854
  style={
855
- Object {
855
+ {
856
856
  "MozOsxFontSmoothing": "grayscale",
857
857
  "WebkitFontSmoothing": "antialiased",
858
858
  }
@@ -862,7 +862,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
862
862
  <div
863
863
  className=""
864
864
  style={
865
- Object {
865
+ {
866
866
  "alignItems": "stretch",
867
867
  "borderStyle": "solid",
868
868
  "borderWidth": 0,
@@ -890,17 +890,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
890
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
891
  fillRule="nonzero"
892
892
  style={
893
- Object {
893
+ {
894
894
  "animationDuration": "1.1s",
895
895
  "animationIterationCount": "infinite",
896
- "animationName": Object {
897
- "0%": Object {
896
+ "animationName": {
897
+ "0%": {
898
898
  "transform": "rotate(0deg)",
899
899
  },
900
- "100%": Object {
900
+ "100%": {
901
901
  "transform": "rotate(360deg)",
902
902
  },
903
- "50%": Object {
903
+ "50%": {
904
904
  "transform": "rotate(180deg)",
905
905
  },
906
906
  },
package/src/components/__docs__/circular-spinner.stories.js ADDED
@@ -0,0 +1,182 @@
1
+ // @flow
2
+ import * as React from "react";
3
+ import {StyleSheet, css} from "aphrodite";
4
+ import type {StoryComponentType} from "@storybook/react";
5
+
6
+ import Color from "@khanacademy/wonder-blocks-color";
7
+ import {View} from "@khanacademy/wonder-blocks-core";
8
+ import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
9
+ import Spacing from "@khanacademy/wonder-blocks-spacing";
10
+ import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
11
+
12
+ import ComponentInfo from "../../../../../.storybook/components/component-info.js";
13
+ import {name, version} from "../../../package.json";
14
+
15
+ export default {
16
+ title: "ProgressSpinner/CircularSpinner",
17
+ component: CircularSpinner,
18
+ parameters: {
19
+ componentSubtitle: ((
20
+ <ComponentInfo name={name} version={version} />
21
+ ): any),
22
+ docs: {
23
+ description: {
24
+ component: null,
25
+ },
26
+ source: {
27
+ // See https://github.com/storybookjs/storybook/issues/12596
28
+ excludeDecorators: true,
29
+ },
30
+ },
31
+ },
32
+ decorators: [
33
+ (Story: any): React.Element<typeof View> => (
34
+ <View style={styles.example}>
35
+ <Story />
36
+ </View>
37
+ ),
38
+ ],
39
+ };
40
+
41
+ export const Default: StoryComponentType = (args) => (
42
+ <CircularSpinner {...args} />
43
+ );
44
+
45
+ export const Sizes: StoryComponentType = () => (
46
+ <table>
47
+ <tbody>
48
+ <tr>
49
+ <th>
50
+ <LabelLarge>xsmall</LabelLarge>
51
+ </th>
52
+ <th>
53
+ <LabelLarge>small</LabelLarge>
54
+ </th>
55
+ <th>
56
+ <LabelLarge>medium</LabelLarge>
57
+ </th>
58
+ <th>
59
+ <LabelLarge>large</LabelLarge>
60
+ </th>
61
+ </tr>
62
+ <tr>
63
+ <td>
64
+ <CircularSpinner size={"xsmall"} style={styles.distanced} />
65
+ </td>
66
+ <td>
67
+ <CircularSpinner size={"small"} style={styles.distanced} />
68
+ </td>
69
+ <td>
70
+ <CircularSpinner size={"medium"} style={styles.distanced} />
71
+ </td>
72
+ <td>
73
+ <CircularSpinner size={"large"} style={styles.distanced} />
74
+ </td>
75
+ </tr>
76
+ <tr className={css(styles.darkBackground)}>
77
+ <td>
78
+ <CircularSpinner
79
+ light={true}
80
+ size={"xsmall"}
81
+ style={styles.distanced}
82
+ />
83
+ </td>
84
+ <td>
85
+ <CircularSpinner
86
+ light={true}
87
+ size={"small"}
88
+ style={styles.distanced}
89
+ />
90
+ </td>
91
+ <td>
92
+ <CircularSpinner
93
+ light={true}
94
+ size={"medium"}
95
+ style={styles.distanced}
96
+ />
97
+ </td>
98
+ <td>
99
+ <CircularSpinner
100
+ light={true}
101
+ size={"large"}
102
+ style={styles.distanced}
103
+ />
104
+ </td>
105
+ </tr>
106
+ </tbody>
107
+ </table>
108
+ );
109
+
110
+ Sizes.parameters = {
111
+ docs: {
112
+ storyDescription: `The available sizes for progress spinner are
113
+ \`"xsmall"\`, \`"small"\`, \`"medium"\`, and \`"large"\`.
114
+ This is set with the \`size\` prop.`,
115
+ },
116
+ };
117
+
118
+ export const Light: StoryComponentType = () => <CircularSpinner light={true} />;
119
+
120
+ Light.parameters = {
121
+ backgrounds: {
122
+ default: "darkBlue",
123
+ },
124
+ docs: {
125
+ storyDescription: `This is a progress spinner with its \`light\`
126
+ prop set to true. This is for use on dark backgrounds.`,
127
+ },
128
+ };
129
+
130
+ export const Inline: StoryComponentType = () => (
131
+ <Body>
132
+ Inline inside{" "}
133
+ <CircularSpinner size="xsmall" style={{display: "inline"}} /> some text.
134
+ </Body>
135
+ );
136
+
137
+ Inline.parameters = {
138
+ docs: {
139
+ storyDescription: `Circular spinners also work inline.`,
140
+ },
141
+ };
142
+
143
+ export const WithStyle: StoryComponentType = () => {
144
+ const spinnerStyle = {
145
+ border: `solid 5px ${Color.teal}`,
146
+ borderRadius: "50%",
147
+ backgroundColor: Color.offWhite,
148
+ };
149
+
150
+ return <CircularSpinner style={spinnerStyle} />;
151
+ };
152
+
153
+ WithStyle.parameters = {
154
+ docs: {
155
+ storyDescription: `\`<CircularSpinner>\` has \`style\` prop
156
+ that can be used to apply styles to the spinner's container.
157
+ Here, it has been given a style that includes \`border\` that
158
+ is \`solid 5px \${Color.teal}\` as well as a \`borderRadius\`
159
+ of \`50%\`.`,
160
+ },
161
+ };
162
+
163
+ const styles = StyleSheet.create({
164
+ darkBackground: {
165
+ background: Color.darkBlue,
166
+ padding: Spacing.xLarge_32,
167
+ width: "100%",
168
+ alignItems: "center",
169
+ justifyContent: "center",
170
+ },
171
+ distanced: {
172
+ margin: Spacing.large_24,
173
+ },
174
+ example: {
175
+ alignItems: "center",
176
+ justifyContent: "center",
177
+ },
178
+ row: {
179
+ flexDirection: "row",
180
+ marginBottom: Spacing.xLarge_32,
181
+ },
182
+ });
package/src/components/circular-spinner.js CHANGED
@@ -58,6 +58,14 @@ type DefaultProps = {|
58
58
  /**
59
59
  * A circular progress spinner. Used for indicating loading progress. Should
60
60
  * be used by default in most places where a loading indicator is needed.
61
+ *
62
+ * ### Usage
63
+ *
64
+ * ```js
65
+ * import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
66
+ *
67
+ * <CircularSpinner />
68
+ * ```
61
69
  */
62
70
  export default class CircularSpinner extends React.Component<Props> {
63
71
  static defaultProps: DefaultProps = {