@khanacademy/wonder-blocks-progress-spinner 1.1.34 → 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 (8) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/index.js +8 -0
  3. package/docs.md +4 -6
  4. package/package.json +2 -2
  5. package/src/components/__docs__/circular-spinner.stories.js +182 -0
  6. package/src/components/circular-spinner.js +8 -0
  7. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -920
  8. package/src/__tests__/generated-snapshot.test.js +0 -99
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
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
+
10
+ ## 1.1.35
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies [6ee20af9]
15
+ - @khanacademy/wonder-blocks-core@4.4.0
16
+
3
17
  ## 1.1.34
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/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.34",
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.3.2",
20
+ "@khanacademy/wonder-blocks-core": "^4.5.0",
21
21
  "@khanacademy/wonder-blocks-spacing": "^3.0.5"
22
22
  },
23
23
  "peerDependencies": {
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 = {
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
- Object {
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
- Object {
36
- "animationDuration": "1.1s",
37
- "animationIterationCount": "infinite",
38
- "animationName": Object {
39
- "0%": Object {
40
- "transform": "rotate(0deg)",
41
- },
42
- "100%": Object {
43
- "transform": "rotate(360deg)",
44
- },
45
- "50%": Object {
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
- Object {
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
- Object {
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
- Object {
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
- Object {
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
- Object {
154
- "animationDuration": "1.1s",
155
- "animationIterationCount": "infinite",
156
- "animationName": Object {
157
- "0%": Object {
158
- "transform": "rotate(0deg)",
159
- },
160
- "100%": Object {
161
- "transform": "rotate(360deg)",
162
- },
163
- "50%": Object {
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
- Object {
179
- "MozOsxFontSmoothing": "grayscale",
180
- "WebkitFontSmoothing": "antialiased",
181
- }
182
- }
183
- >
184
- size: large (96px)
185
- </span>
186
- </div>
187
- <div
188
- className=""
189
- style={
190
- Object {
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
- Object {
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
- Object {
243
- "animationDuration": "1.1s",
244
- "animationIterationCount": "infinite",
245
- "animationName": Object {
246
- "0%": Object {
247
- "transform": "rotate(0deg)",
248
- },
249
- "100%": Object {
250
- "transform": "rotate(360deg)",
251
- },
252
- "50%": Object {
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
- Object {
268
- "MozOsxFontSmoothing": "grayscale",
269
- "WebkitFontSmoothing": "antialiased",
270
- }
271
- }
272
- >
273
- size: medium (48px)
274
- </span>
275
- </div>
276
- <div
277
- className=""
278
- style={
279
- Object {
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
- Object {
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
- Object {
332
- "animationDuration": "1.1s",
333
- "animationIterationCount": "infinite",
334
- "animationName": Object {
335
- "0%": Object {
336
- "transform": "rotate(0deg)",
337
- },
338
- "100%": Object {
339
- "transform": "rotate(360deg)",
340
- },
341
- "50%": Object {
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
- Object {
357
- "MozOsxFontSmoothing": "grayscale",
358
- "WebkitFontSmoothing": "antialiased",
359
- }
360
- }
361
- >
362
- size: small (24px)
363
- </span>
364
- </div>
365
- <div
366
- className=""
367
- style={
368
- Object {
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
- Object {
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
- Object {
421
- "animationDuration": "1.1s",
422
- "animationIterationCount": "infinite",
423
- "animationName": Object {
424
- "0%": Object {
425
- "transform": "rotate(0deg)",
426
- },
427
- "100%": Object {
428
- "transform": "rotate(360deg)",
429
- },
430
- "50%": Object {
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
- Object {
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
- Object {
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
- Object {
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
- Object {
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
- Object {
532
- "animationDuration": "1.1s",
533
- "animationIterationCount": "infinite",
534
- "animationName": Object {
535
- "0%": Object {
536
- "transform": "rotate(0deg)",
537
- },
538
- "100%": Object {
539
- "transform": "rotate(360deg)",
540
- },
541
- "50%": Object {
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
- Object {
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
- Object {
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
- Object {
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
- Object {
621
- "animationDuration": "1.1s",
622
- "animationIterationCount": "infinite",
623
- "animationName": Object {
624
- "0%": Object {
625
- "transform": "rotate(0deg)",
626
- },
627
- "100%": Object {
628
- "transform": "rotate(360deg)",
629
- },
630
- "50%": Object {
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
- Object {
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
- Object {
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
- Object {
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
- Object {
710
- "animationDuration": "1.1s",
711
- "animationIterationCount": "infinite",
712
- "animationName": Object {
713
- "0%": Object {
714
- "transform": "rotate(0deg)",
715
- },
716
- "100%": Object {
717
- "transform": "rotate(360deg)",
718
- },
719
- "50%": Object {
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
- Object {
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
- Object {
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
- Object {
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
- Object {
799
- "animationDuration": "1.1s",
800
- "animationIterationCount": "infinite",
801
- "animationName": Object {
802
- "0%": Object {
803
- "transform": "rotate(0deg)",
804
- },
805
- "100%": Object {
806
- "transform": "rotate(360deg)",
807
- },
808
- "50%": Object {
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
- Object {
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
- Object {
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
- Object {
856
- "MozOsxFontSmoothing": "grayscale",
857
- "WebkitFontSmoothing": "antialiased",
858
- }
859
- }
860
- >
861
- Inline inside
862
- <div
863
- className=""
864
- style={
865
- Object {
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
- Object {
894
- "animationDuration": "1.1s",
895
- "animationIterationCount": "infinite",
896
- "animationName": Object {
897
- "0%": Object {
898
- "transform": "rotate(0deg)",
899
- },
900
- "100%": Object {
901
- "transform": "rotate(360deg)",
902
- },
903
- "50%": Object {
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
- });