@khanacademy/wonder-blocks-progress-spinner 3.1.61 → 3.2.0
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.
- package/.turbo/turbo-build$colon$css.log +5 -0
- package/CHANGELOG.md +20 -0
- package/dist/components/circular-spinner.d.ts +3 -0
- package/dist/css/vars.css +14 -0
- package/dist/es/index.js +6 -2
- package/dist/index.js +5 -1
- package/dist/theme/default.d.ts +11 -0
- package/dist/theme/index.d.ts +11 -0
- package/dist/theme/syl-dark.d.ts +11 -0
- package/dist/theme/thunderblocks.d.ts +11 -0
- package/package.json +12 -2
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
|
|
2
|
+
> @khanacademy/wonder-blocks-progress-spinner@3.2.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-progress-spinner
|
|
3
|
+
> pnpm exec wonder-blocks-tokens .
|
|
4
|
+
|
|
5
|
+
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-progress-spinner/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-progress-spinner
|
|
2
2
|
|
|
3
|
+
## 3.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- cbdc909: Add Thunderblocks theming to `CircularSpinner`. In Thunderblocks, the `medium` spinner is 36px instead of 48px so it fits inside large buttons.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [cbdc909]
|
|
12
|
+
- @khanacademy/wonder-blocks-tokens@18.1.0
|
|
13
|
+
|
|
14
|
+
## 3.1.62
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies [04522d4]
|
|
19
|
+
- Updated dependencies [5b4fed3]
|
|
20
|
+
- @khanacademy/wonder-blocks-tokens@18.0.0
|
|
21
|
+
- @khanacademy/wonder-blocks-core@12.5.0
|
|
22
|
+
|
|
3
23
|
## 3.1.61
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -4,6 +4,9 @@ type Props = AriaProps & {
|
|
|
4
4
|
/**
|
|
5
5
|
* The size of the spinner. (large = 96px, medium = 48px, small = 24px,
|
|
6
6
|
* xsmall = 16px)
|
|
7
|
+
*
|
|
8
|
+
* In the Thunderblocks theme, `medium` is 36px so that it fits inside
|
|
9
|
+
* large buttons.
|
|
7
10
|
*/
|
|
8
11
|
size: "xsmall" | "small" | "medium" | "large";
|
|
9
12
|
/** Should a light version of the spinner be shown?
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
:root, [data-wb-theme='default'] {--wb-c-progress-spinner-root-sizing-xsmall: var(--wb-sizing-size_160);
|
|
2
|
+
--wb-c-progress-spinner-root-sizing-small: var(--wb-sizing-size_240);
|
|
3
|
+
--wb-c-progress-spinner-root-sizing-medium: var(--wb-sizing-size_480);
|
|
4
|
+
--wb-c-progress-spinner-root-sizing-large: var(--wb-sizing-size_960);}
|
|
5
|
+
|
|
6
|
+
[data-wb-theme='syl-dark'] {--wb-c-progress-spinner-root-sizing-xsmall: var(--wb-sizing-size_160);
|
|
7
|
+
--wb-c-progress-spinner-root-sizing-small: var(--wb-sizing-size_240);
|
|
8
|
+
--wb-c-progress-spinner-root-sizing-medium: var(--wb-sizing-size_360);
|
|
9
|
+
--wb-c-progress-spinner-root-sizing-large: var(--wb-sizing-size_960);}
|
|
10
|
+
|
|
11
|
+
[data-wb-theme='thunderblocks'] {--wb-c-progress-spinner-root-sizing-xsmall: var(--wb-sizing-size_160);
|
|
12
|
+
--wb-c-progress-spinner-root-sizing-small: var(--wb-sizing-size_240);
|
|
13
|
+
--wb-c-progress-spinner-root-sizing-medium: var(--wb-sizing-size_360);
|
|
14
|
+
--wb-c-progress-spinner-root-sizing-large: var(--wb-sizing-size_960);}
|
package/dist/es/index.js
CHANGED
|
@@ -2,8 +2,12 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { StyleSheet } from 'aphrodite';
|
|
4
4
|
import { addStyle, View } from '@khanacademy/wonder-blocks-core';
|
|
5
|
-
import { semanticColor } from '@khanacademy/wonder-blocks-tokens';
|
|
5
|
+
import { sizing, mapValuesToCssVars, semanticColor } from '@khanacademy/wonder-blocks-tokens';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
var themeDefault = {root:{sizing:{xsmall:sizing.size_160,small:sizing.size_240,medium:sizing.size_480,large:sizing.size_960}}};
|
|
8
|
+
|
|
9
|
+
var theme = mapValuesToCssVars(themeDefault,"--wb-c-progress-spinner-");
|
|
10
|
+
|
|
11
|
+
const pathSizes={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 StyledSvg=addStyle("svg");const StyledPath=addStyle("path");class CircularSpinner extends React.Component{render(){const{size,light,style,testId}=this.props;const pathSize=pathSizes[size];const path=paths[size];const color=light?semanticColor.core.foreground.knockout.default:semanticColor.core.foreground.neutral.subtle;const svg=jsx(StyledSvg,{xmlns:"http://www.w3.org/2000/svg",width:pathSize,height:pathSize,viewBox:`0 0 ${pathSize} ${pathSize}`,"data-testid":testId,style:sizeStyles[size],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 sizeStyles=StyleSheet.create({xsmall:{width:theme.root.sizing.xsmall,height:theme.root.sizing.xsmall},small:{width:theme.root.sizing.small,height:theme.root.sizing.small},medium:{width:theme.root.sizing.medium,height:theme.root.sizing.medium},large:{width:theme.root.sizing.large,height:theme.root.sizing.large}});const styles=StyleSheet.create({spinnerContainer:{justifyContent:"center"},loadingSpinner:{transformOrigin:"50% 50%",animationName:rotateKeyFrames,animationDuration:"1.1s",animationIterationCount:"infinite",animationTimingFunction:"linear"}});
|
|
8
12
|
|
|
9
13
|
export { CircularSpinner };
|
package/dist/index.js
CHANGED
|
@@ -28,6 +28,10 @@ function _interopNamespace(e) {
|
|
|
28
28
|
|
|
29
29
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
var themeDefault = {root:{sizing:{xsmall:wonderBlocksTokens.sizing.size_160,small:wonderBlocksTokens.sizing.size_240,medium:wonderBlocksTokens.sizing.size_480,large:wonderBlocksTokens.sizing.size_960}}};
|
|
32
|
+
|
|
33
|
+
var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-progress-spinner-");
|
|
34
|
+
|
|
35
|
+
const pathSizes={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 StyledSvg=wonderBlocksCore.addStyle("svg");const StyledPath=wonderBlocksCore.addStyle("path");class CircularSpinner extends React__namespace.Component{render(){const{size,light,style,testId}=this.props;const pathSize=pathSizes[size];const path=paths[size];const color=light?wonderBlocksTokens.semanticColor.core.foreground.knockout.default:wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle;const svg=jsxRuntime.jsx(StyledSvg,{xmlns:"http://www.w3.org/2000/svg",width:pathSize,height:pathSize,viewBox:`0 0 ${pathSize} ${pathSize}`,"data-testid":testId,style:sizeStyles[size],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 sizeStyles=aphrodite.StyleSheet.create({xsmall:{width:theme.root.sizing.xsmall,height:theme.root.sizing.xsmall},small:{width:theme.root.sizing.small,height:theme.root.sizing.small},medium:{width:theme.root.sizing.medium,height:theme.root.sizing.medium},large:{width:theme.root.sizing.large,height:theme.root.sizing.large}});const styles=aphrodite.StyleSheet.create({spinnerContainer:{justifyContent:"center"},loadingSpinner:{transformOrigin:"50% 50%",animationName:rotateKeyFrames,animationDuration:"1.1s",animationIterationCount:"infinite",animationTimingFunction:"linear"}});
|
|
32
36
|
|
|
33
37
|
exports.CircularSpinner = CircularSpinner;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "3.
|
|
6
|
+
"version": "3.2.0",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -19,9 +19,18 @@
|
|
|
19
19
|
"main": "dist/index.js",
|
|
20
20
|
"module": "dist/es/index.js",
|
|
21
21
|
"types": "dist/index.d.ts",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"import": "./dist/es/index.js",
|
|
25
|
+
"require": "./dist/index.js",
|
|
26
|
+
"types": "./dist/index.d.ts"
|
|
27
|
+
},
|
|
28
|
+
"./styles.css": "./dist/css/vars.css"
|
|
29
|
+
},
|
|
22
30
|
"dependencies": {
|
|
23
31
|
"@khanacademy/wonder-blocks-core": "12.5.0",
|
|
24
|
-
"@khanacademy/wonder-blocks-
|
|
32
|
+
"@khanacademy/wonder-blocks-theming": "4.1.0",
|
|
33
|
+
"@khanacademy/wonder-blocks-tokens": "18.1.0"
|
|
25
34
|
},
|
|
26
35
|
"peerDependencies": {
|
|
27
36
|
"aphrodite": "^1.2.5",
|
|
@@ -31,6 +40,7 @@
|
|
|
31
40
|
"@khanacademy/wb-dev-build-settings": "3.3.0"
|
|
32
41
|
},
|
|
33
42
|
"scripts": {
|
|
43
|
+
"build:css": "pnpm exec wonder-blocks-tokens .",
|
|
34
44
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
35
45
|
}
|
|
36
46
|
}
|