@khanacademy/wonder-blocks-progress-spinner 3.1.8 → 3.1.10

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 (4) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/es/index.js +2 -73
  3. package/dist/index.js +2 -73
  4. package/package.json +3 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @khanacademy/wonder-blocks-progress-spinner
2
2
 
3
+ ## 3.1.10
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [b9e4946]
8
+ - @khanacademy/wonder-blocks-tokens@10.0.0
9
+ - @khanacademy/wonder-blocks-core@12.2.1
10
+
11
+ ## 3.1.9
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies [2656fd4]
16
+ - Updated dependencies [6018552]
17
+ - Updated dependencies [7bbf311]
18
+ - Updated dependencies [7f79943]
19
+ - @khanacademy/wonder-blocks-tokens@9.0.0
20
+
3
21
  ## 3.1.8
4
22
 
5
23
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -1,80 +1,9 @@
1
+ import { jsx } from 'react/jsx-runtime';
1
2
  import * as React from 'react';
2
3
  import { StyleSheet } from 'aphrodite';
3
4
  import { addStyle, View } from '@khanacademy/wonder-blocks-core';
4
5
  import { color } from '@khanacademy/wonder-blocks-tokens';
5
6
 
6
- const heights = {
7
- xsmall: 16,
8
- small: 24,
9
- medium: 48,
10
- large: 96
11
- };
12
- const paths = {
13
- 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",
14
- 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",
15
- 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",
16
- 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"
17
- };
18
- const colors = {
19
- light: color.white,
20
- dark: color.offBlack50
21
- };
22
- const StyledPath = addStyle("path");
23
- class CircularSpinner extends React.Component {
24
- render() {
25
- const {
26
- size,
27
- light,
28
- style,
29
- testId
30
- } = this.props;
31
- const height = heights[size];
32
- const path = paths[size];
33
- const color = light ? colors.light : colors.dark;
34
- const svg = React.createElement("svg", {
35
- xmlns: "http://www.w3.org/2000/svg",
36
- width: height,
37
- height: height,
38
- viewBox: `0 0 ${height} ${height}`,
39
- "data-testid": testId
40
- }, React.createElement(StyledPath, {
41
- style: [styles.loadingSpinner, {
42
- fill: color
43
- }],
44
- fillRule: "nonzero",
45
- d: path
46
- }));
47
- return React.createElement(View, {
48
- style: [styles.spinnerContainer, style]
49
- }, svg);
50
- }
51
- }
52
- CircularSpinner.defaultProps = {
53
- size: "large",
54
- light: false
55
- };
56
- const rotateKeyFrames = {
57
- "0%": {
58
- transform: "rotate(0deg)"
59
- },
60
- "50%": {
61
- transform: "rotate(180deg)"
62
- },
63
- "100%": {
64
- transform: "rotate(360deg)"
65
- }
66
- };
67
- const styles = StyleSheet.create({
68
- spinnerContainer: {
69
- justifyContent: "center"
70
- },
71
- loadingSpinner: {
72
- transformOrigin: "50% 50%",
73
- animationName: rotateKeyFrames,
74
- animationDuration: "1.1s",
75
- animationIterationCount: "infinite",
76
- animationTimingFunction: "linear"
77
- }
78
- });
7
+ const heights={xsmall:16,small:24,medium:48,large:96};const paths={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",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",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",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"};const colors={light:color.white,dark:color.offBlack50};const StyledPath=addStyle("path");class CircularSpinner extends React.Component{render(){const{size,light,style,testId}=this.props;const height=heights[size];const path=paths[size];const color=light?colors.light:colors.dark;const svg=jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:height,height:height,viewBox:`0 0 ${height} ${height}`,"data-testid":testId,children:jsx(StyledPath,{style:[styles.loadingSpinner,{fill:color}],fillRule:"nonzero",d:path})});return jsx(View,{style:[styles.spinnerContainer,style],children:svg})}}CircularSpinner.defaultProps={size:"large",light:false};const rotateKeyFrames={"0%":{transform:"rotate(0deg)"},"50%":{transform:"rotate(180deg)"},"100%":{transform:"rotate(360deg)"}};const styles=StyleSheet.create({spinnerContainer:{justifyContent:"center"},loadingSpinner:{transformOrigin:"50% 50%",animationName:rotateKeyFrames,animationDuration:"1.1s",animationIterationCount:"infinite",animationTimingFunction:"linear"}});
79
8
 
80
9
  export { CircularSpinner };
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var jsxRuntime = require('react/jsx-runtime');
5
6
  var React = require('react');
6
7
  var aphrodite = require('aphrodite');
7
8
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
@@ -27,78 +28,6 @@ function _interopNamespace(e) {
27
28
 
28
29
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
29
30
 
30
- const heights = {
31
- xsmall: 16,
32
- small: 24,
33
- medium: 48,
34
- large: 96
35
- };
36
- const paths = {
37
- 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",
38
- 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",
39
- 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",
40
- 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"
41
- };
42
- const colors = {
43
- light: wonderBlocksTokens.color.white,
44
- dark: wonderBlocksTokens.color.offBlack50
45
- };
46
- const StyledPath = wonderBlocksCore.addStyle("path");
47
- class CircularSpinner extends React__namespace.Component {
48
- render() {
49
- const {
50
- size,
51
- light,
52
- style,
53
- testId
54
- } = this.props;
55
- const height = heights[size];
56
- const path = paths[size];
57
- const color = light ? colors.light : colors.dark;
58
- const svg = React__namespace.createElement("svg", {
59
- xmlns: "http://www.w3.org/2000/svg",
60
- width: height,
61
- height: height,
62
- viewBox: `0 0 ${height} ${height}`,
63
- "data-testid": testId
64
- }, React__namespace.createElement(StyledPath, {
65
- style: [styles.loadingSpinner, {
66
- fill: color
67
- }],
68
- fillRule: "nonzero",
69
- d: path
70
- }));
71
- return React__namespace.createElement(wonderBlocksCore.View, {
72
- style: [styles.spinnerContainer, style]
73
- }, svg);
74
- }
75
- }
76
- CircularSpinner.defaultProps = {
77
- size: "large",
78
- light: false
79
- };
80
- const rotateKeyFrames = {
81
- "0%": {
82
- transform: "rotate(0deg)"
83
- },
84
- "50%": {
85
- transform: "rotate(180deg)"
86
- },
87
- "100%": {
88
- transform: "rotate(360deg)"
89
- }
90
- };
91
- const styles = aphrodite.StyleSheet.create({
92
- spinnerContainer: {
93
- justifyContent: "center"
94
- },
95
- loadingSpinner: {
96
- transformOrigin: "50% 50%",
97
- animationName: rotateKeyFrames,
98
- animationDuration: "1.1s",
99
- animationIterationCount: "infinite",
100
- animationTimingFunction: "linear"
101
- }
102
- });
31
+ const heights={xsmall:16,small:24,medium:48,large:96};const paths={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",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",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",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"};const colors={light:wonderBlocksTokens.color.white,dark:wonderBlocksTokens.color.offBlack50};const StyledPath=wonderBlocksCore.addStyle("path");class CircularSpinner extends React__namespace.Component{render(){const{size,light,style,testId}=this.props;const height=heights[size];const path=paths[size];const color=light?colors.light:colors.dark;const svg=jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:height,height:height,viewBox:`0 0 ${height} ${height}`,"data-testid":testId,children:jsxRuntime.jsx(StyledPath,{style:[styles.loadingSpinner,{fill:color}],fillRule:"nonzero",d:path})});return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.spinnerContainer,style],children:svg})}}CircularSpinner.defaultProps={size:"large",light:false};const rotateKeyFrames={"0%":{transform:"rotate(0deg)"},"50%":{transform:"rotate(180deg)"},"100%":{transform:"rotate(360deg)"}};const styles=aphrodite.StyleSheet.create({spinnerContainer:{justifyContent:"center"},loadingSpinner:{transformOrigin:"50% 50%",animationName:rotateKeyFrames,animationDuration:"1.1s",animationIterationCount:"infinite",animationTimingFunction:"linear"}});
103
32
 
104
33
  exports.CircularSpinner = CircularSpinner;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-progress-spinner",
3
- "version": "3.1.8",
3
+ "version": "3.1.10",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -12,16 +12,15 @@
12
12
  "author": "",
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@babel/runtime": "^7.24.5",
16
15
  "@khanacademy/wonder-blocks-core": "12.2.1",
17
- "@khanacademy/wonder-blocks-tokens": "8.0.0"
16
+ "@khanacademy/wonder-blocks-tokens": "10.0.0"
18
17
  },
19
18
  "peerDependencies": {
20
19
  "aphrodite": "^1.2.5",
21
20
  "react": "18.2.0"
22
21
  },
23
22
  "devDependencies": {
24
- "@khanacademy/wb-dev-build-settings": "2.1.1"
23
+ "@khanacademy/wb-dev-build-settings": "3.0.0"
25
24
  },
26
25
  "scripts": {
27
26
  "test": "echo \"Error: no test specified\" && exit 1"