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

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 (7) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/package.json +3 -3
  3. package/dist/index.js +0 -230
  4. package/dist/index.js.flow +0 -2
  5. package/docs.md +0 -7
  6. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -920
  7. package/src/__tests__/generated-snapshot.test.js +0 -99
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @khanacademy/wonder-blocks-progress-spinner
2
2
 
3
+ ## 1.1.37
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [b561425a]
8
+ - Updated dependencies [a566e232]
9
+ - Updated dependencies [d2b21a6e]
10
+ - @khanacademy/wonder-blocks-core@4.6.0
11
+
12
+ ## 1.1.36
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies [175a2dd2]
17
+ - @khanacademy/wonder-blocks-core@4.5.0
18
+
3
19
  ## 1.1.35
4
20
 
5
21
  ### Patch Changes
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.37",
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.6.0",
21
21
  "@khanacademy/wonder-blocks-spacing": "^3.0.5"
22
22
  },
23
23
  "peerDependencies": {
@@ -25,6 +25,6 @@
25
25
  "react": "16.14.0"
26
26
  },
27
27
  "devDependencies": {
28
- "wb-dev-build-settings": "^0.4.0"
28
+ "wb-dev-build-settings": "^0.5.0"
29
29
  }
30
30
  }
package/dist/index.js DELETED
@@ -1,230 +0,0 @@
1
- module.exports =
2
- /******/ (function(modules) { // webpackBootstrap
3
- /******/ // The module cache
4
- /******/ var installedModules = {};
5
- /******/
6
- /******/ // The require function
7
- /******/ function __webpack_require__(moduleId) {
8
- /******/
9
- /******/ // Check if module is in cache
10
- /******/ if(installedModules[moduleId]) {
11
- /******/ return installedModules[moduleId].exports;
12
- /******/ }
13
- /******/ // Create a new module (and put it into the cache)
14
- /******/ var module = installedModules[moduleId] = {
15
- /******/ i: moduleId,
16
- /******/ l: false,
17
- /******/ exports: {}
18
- /******/ };
19
- /******/
20
- /******/ // Execute the module function
21
- /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22
- /******/
23
- /******/ // Flag the module as loaded
24
- /******/ module.l = true;
25
- /******/
26
- /******/ // Return the exports of the module
27
- /******/ return module.exports;
28
- /******/ }
29
- /******/
30
- /******/
31
- /******/ // expose the modules object (__webpack_modules__)
32
- /******/ __webpack_require__.m = modules;
33
- /******/
34
- /******/ // expose the module cache
35
- /******/ __webpack_require__.c = installedModules;
36
- /******/
37
- /******/ // define getter function for harmony exports
38
- /******/ __webpack_require__.d = function(exports, name, getter) {
39
- /******/ if(!__webpack_require__.o(exports, name)) {
40
- /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
41
- /******/ }
42
- /******/ };
43
- /******/
44
- /******/ // define __esModule on exports
45
- /******/ __webpack_require__.r = function(exports) {
46
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
47
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
48
- /******/ }
49
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
50
- /******/ };
51
- /******/
52
- /******/ // create a fake namespace object
53
- /******/ // mode & 1: value is a module id, require it
54
- /******/ // mode & 2: merge all properties of value into the ns
55
- /******/ // mode & 4: return value when already ns object
56
- /******/ // mode & 8|1: behave like require
57
- /******/ __webpack_require__.t = function(value, mode) {
58
- /******/ if(mode & 1) value = __webpack_require__(value);
59
- /******/ if(mode & 8) return value;
60
- /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
61
- /******/ var ns = Object.create(null);
62
- /******/ __webpack_require__.r(ns);
63
- /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
64
- /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
65
- /******/ return ns;
66
- /******/ };
67
- /******/
68
- /******/ // getDefaultExport function for compatibility with non-harmony modules
69
- /******/ __webpack_require__.n = function(module) {
70
- /******/ var getter = module && module.__esModule ?
71
- /******/ function getDefault() { return module['default']; } :
72
- /******/ function getModuleExports() { return module; };
73
- /******/ __webpack_require__.d(getter, 'a', getter);
74
- /******/ return getter;
75
- /******/ };
76
- /******/
77
- /******/ // Object.prototype.hasOwnProperty.call
78
- /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
79
- /******/
80
- /******/ // __webpack_public_path__
81
- /******/ __webpack_require__.p = "";
82
- /******/
83
- /******/
84
- /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 5);
86
- /******/ })
87
- /************************************************************************/
88
- /******/ ([
89
- /* 0 */
90
- /***/ (function(module, exports) {
91
-
92
- module.exports = require("react");
93
-
94
- /***/ }),
95
- /* 1 */
96
- /***/ (function(module, exports) {
97
-
98
- module.exports = require("@khanacademy/wonder-blocks-core");
99
-
100
- /***/ }),
101
- /* 2 */
102
- /***/ (function(module, exports) {
103
-
104
- module.exports = require("@khanacademy/wonder-blocks-color");
105
-
106
- /***/ }),
107
- /* 3 */
108
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
109
-
110
- "use strict";
111
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CircularSpinner; });
112
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
113
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
114
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
115
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
116
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
117
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
118
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
119
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
120
-
121
-
122
-
123
-
124
- const heights = {
125
- xsmall: 16,
126
- small: 24,
127
- medium: 48,
128
- large: 96
129
- };
130
- const paths = {
131
- xsmall: "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",
132
- small: "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",
133
- medium: "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",
134
- large: "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"
135
- };
136
- const colors = {
137
- light: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white,
138
- dark: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack16
139
- };
140
- const StyledPath = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["addStyle"])("path");
141
-
142
- /**
143
- * A circular progress spinner. Used for indicating loading progress. Should
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
- * ```
153
- */
154
- class CircularSpinner extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
155
- render() {
156
- const {
157
- size,
158
- light,
159
- style,
160
- testId
161
- } = this.props;
162
- const height = heights[size];
163
- const path = paths[size];
164
- const color = light ? colors.light : colors.dark;
165
- const svg = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", {
166
- xmlns: "http://www.w3.org/2000/svg",
167
- width: height,
168
- height: height,
169
- viewBox: `0 0 ${height} ${height}`,
170
- "data-test-id": testId
171
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledPath, {
172
- style: [styles.loadingSpinner, {
173
- fill: color
174
- }],
175
- fillRule: "nonzero",
176
- d: path
177
- }));
178
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
179
- style: [styles.spinnerContainer, style]
180
- }, svg);
181
- }
182
-
183
- }
184
- CircularSpinner.defaultProps = {
185
- size: "large",
186
- light: false
187
- };
188
- const rotateKeyFrames = {
189
- "0%": {
190
- transform: "rotate(0deg)"
191
- },
192
- "50%": {
193
- transform: "rotate(180deg)"
194
- },
195
- "100%": {
196
- transform: "rotate(360deg)"
197
- }
198
- };
199
- const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
200
- spinnerContainer: {
201
- justifyContent: "center"
202
- },
203
- loadingSpinner: {
204
- transformOrigin: "50% 50%",
205
- animationName: rotateKeyFrames,
206
- animationDuration: "1.1s",
207
- animationIterationCount: "infinite",
208
- animationTimingFunction: "linear"
209
- }
210
- });
211
-
212
- /***/ }),
213
- /* 4 */
214
- /***/ (function(module, exports) {
215
-
216
- module.exports = require("aphrodite");
217
-
218
- /***/ }),
219
- /* 5 */
220
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
221
-
222
- "use strict";
223
- __webpack_require__.r(__webpack_exports__);
224
- /* harmony import */ var _components_circular_spinner_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
225
- /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CircularSpinner", function() { return _components_circular_spinner_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
226
-
227
-
228
-
229
- /***/ })
230
- /******/ ]);
package/dist/index.js.flow DELETED
@@ -1,2 +0,0 @@
1
- // @flow
2
- export * from "../src/index.js";
package/docs.md DELETED
@@ -1,7 +0,0 @@
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.
2
-
3
- ```js
4
- import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
5
-
6
- <CircularSpinner />
7
- ```
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
- });