@khanacademy/wonder-blocks-icon 5.1.2 → 5.1.4
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/CHANGELOG.md +16 -0
- package/dist/es/index.js +3 -62
- package/dist/index.js +3 -66
- package/package.json +3 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-icon
|
|
2
2
|
|
|
3
|
+
## 5.1.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [28fa0c0]
|
|
8
|
+
- Updated dependencies [28fa0c0]
|
|
9
|
+
- @khanacademy/wonder-blocks-core@12.3.0
|
|
10
|
+
|
|
11
|
+
## 5.1.3
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- 1d7be37: Use pnpm catalog to pin dependency versions across packages
|
|
16
|
+
- Updated dependencies [1d7be37]
|
|
17
|
+
- @khanacademy/wonder-blocks-core@12.2.1
|
|
18
|
+
|
|
3
19
|
## 5.1.2
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -1,69 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
2
|
import * as React from 'react';
|
|
4
3
|
import { StyleSheet } from 'aphrodite';
|
|
5
4
|
import { addStyle } from '@khanacademy/wonder-blocks-core';
|
|
6
5
|
|
|
7
|
-
const viewportPixelsForSize
|
|
8
|
-
small: 16,
|
|
9
|
-
medium: 24,
|
|
10
|
-
large: 48,
|
|
11
|
-
xlarge: 96
|
|
12
|
-
})[size];
|
|
6
|
+
const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];
|
|
13
7
|
|
|
14
|
-
const
|
|
15
|
-
const StyledSpan = addStyle("span");
|
|
16
|
-
const PhosphorIcon = React.forwardRef(function PhosphorIcon(props, ref) {
|
|
17
|
-
const {
|
|
18
|
-
color = "currentColor",
|
|
19
|
-
icon,
|
|
20
|
-
size = "small",
|
|
21
|
-
style,
|
|
22
|
-
testId,
|
|
23
|
-
className,
|
|
24
|
-
role
|
|
25
|
-
} = props,
|
|
26
|
-
sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
27
|
-
const pixelSize = viewportPixelsForSize(size);
|
|
28
|
-
const classNames = `${className != null ? className : ""}`;
|
|
29
|
-
const iconStyles = _generateStyles(color, pixelSize);
|
|
30
|
-
return React.createElement(StyledSpan, _extends({}, sharedProps, {
|
|
31
|
-
className: classNames,
|
|
32
|
-
style: [styles.svg, iconStyles.icon, {
|
|
33
|
-
maskImage: `url(${icon})`
|
|
34
|
-
}, style],
|
|
35
|
-
"data-testid": testId,
|
|
36
|
-
ref: ref,
|
|
37
|
-
role: (role != null ? role : sharedProps["aria-label"]) ? "img" : undefined
|
|
38
|
-
}));
|
|
39
|
-
});
|
|
40
|
-
const dynamicStyles = {};
|
|
41
|
-
const _generateStyles = (color, size) => {
|
|
42
|
-
const iconStyle = `${color}-${size}`;
|
|
43
|
-
if (styles[iconStyle]) {
|
|
44
|
-
return styles[iconStyle];
|
|
45
|
-
}
|
|
46
|
-
const newStyles = {
|
|
47
|
-
icon: {
|
|
48
|
-
backgroundColor: color,
|
|
49
|
-
width: size,
|
|
50
|
-
height: size
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
dynamicStyles[iconStyle] = StyleSheet.create(newStyles);
|
|
54
|
-
return dynamicStyles[iconStyle];
|
|
55
|
-
};
|
|
56
|
-
const styles = StyleSheet.create({
|
|
57
|
-
svg: {
|
|
58
|
-
display: "inline-block",
|
|
59
|
-
verticalAlign: "text-bottom",
|
|
60
|
-
flexShrink: 0,
|
|
61
|
-
flexGrow: 0,
|
|
62
|
-
maskSize: "100%",
|
|
63
|
-
maskRepeat: "no-repeat",
|
|
64
|
-
maskPosition: "center"
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
PhosphorIcon.displayName = "PhosphorIcon";
|
|
8
|
+
const StyledSpan=addStyle("span");const PhosphorIcon=React.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});const dynamicStyles={};const _generateStyles=(color,size)=>{const iconStyle=`${color}-${size}`;if(styles[iconStyle]){return styles[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles=StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";
|
|
68
9
|
|
|
69
10
|
export { PhosphorIcon };
|
package/dist/index.js
CHANGED
|
@@ -2,14 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
6
|
var React = require('react');
|
|
8
7
|
var aphrodite = require('aphrodite');
|
|
9
8
|
var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
10
9
|
|
|
11
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
|
-
|
|
13
10
|
function _interopNamespace(e) {
|
|
14
11
|
if (e && e.__esModule) return e;
|
|
15
12
|
var n = Object.create(null);
|
|
@@ -28,70 +25,10 @@ function _interopNamespace(e) {
|
|
|
28
25
|
return Object.freeze(n);
|
|
29
26
|
}
|
|
30
27
|
|
|
31
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
32
|
-
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
33
28
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
34
29
|
|
|
35
|
-
const viewportPixelsForSize
|
|
36
|
-
small: 16,
|
|
37
|
-
medium: 24,
|
|
38
|
-
large: 48,
|
|
39
|
-
xlarge: 96
|
|
40
|
-
})[size];
|
|
30
|
+
const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];
|
|
41
31
|
|
|
42
|
-
const
|
|
43
|
-
const StyledSpan = wonderBlocksCore.addStyle("span");
|
|
44
|
-
const PhosphorIcon = React__namespace.forwardRef(function PhosphorIcon(props, ref) {
|
|
45
|
-
const {
|
|
46
|
-
color = "currentColor",
|
|
47
|
-
icon,
|
|
48
|
-
size = "small",
|
|
49
|
-
style,
|
|
50
|
-
testId,
|
|
51
|
-
className,
|
|
52
|
-
role
|
|
53
|
-
} = props,
|
|
54
|
-
sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
|
|
55
|
-
const pixelSize = viewportPixelsForSize(size);
|
|
56
|
-
const classNames = `${className != null ? className : ""}`;
|
|
57
|
-
const iconStyles = _generateStyles(color, pixelSize);
|
|
58
|
-
return React__namespace.createElement(StyledSpan, _extends__default["default"]({}, sharedProps, {
|
|
59
|
-
className: classNames,
|
|
60
|
-
style: [styles.svg, iconStyles.icon, {
|
|
61
|
-
maskImage: `url(${icon})`
|
|
62
|
-
}, style],
|
|
63
|
-
"data-testid": testId,
|
|
64
|
-
ref: ref,
|
|
65
|
-
role: (role != null ? role : sharedProps["aria-label"]) ? "img" : undefined
|
|
66
|
-
}));
|
|
67
|
-
});
|
|
68
|
-
const dynamicStyles = {};
|
|
69
|
-
const _generateStyles = (color, size) => {
|
|
70
|
-
const iconStyle = `${color}-${size}`;
|
|
71
|
-
if (styles[iconStyle]) {
|
|
72
|
-
return styles[iconStyle];
|
|
73
|
-
}
|
|
74
|
-
const newStyles = {
|
|
75
|
-
icon: {
|
|
76
|
-
backgroundColor: color,
|
|
77
|
-
width: size,
|
|
78
|
-
height: size
|
|
79
|
-
}
|
|
80
|
-
};
|
|
81
|
-
dynamicStyles[iconStyle] = aphrodite.StyleSheet.create(newStyles);
|
|
82
|
-
return dynamicStyles[iconStyle];
|
|
83
|
-
};
|
|
84
|
-
const styles = aphrodite.StyleSheet.create({
|
|
85
|
-
svg: {
|
|
86
|
-
display: "inline-block",
|
|
87
|
-
verticalAlign: "text-bottom",
|
|
88
|
-
flexShrink: 0,
|
|
89
|
-
flexGrow: 0,
|
|
90
|
-
maskSize: "100%",
|
|
91
|
-
maskRepeat: "no-repeat",
|
|
92
|
-
maskPosition: "center"
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
PhosphorIcon.displayName = "PhosphorIcon";
|
|
32
|
+
const StyledSpan=wonderBlocksCore.addStyle("span");const PhosphorIcon=React__namespace.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsxRuntime.jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});const dynamicStyles={};const _generateStyles=(color,size)=>{const iconStyle=`${color}-${size}`;if(styles[iconStyle]){return styles[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=aphrodite.StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles=aphrodite.StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";
|
|
96
33
|
|
|
97
34
|
exports.PhosphorIcon = PhosphorIcon;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-icon",
|
|
3
|
-
"version": "5.1.
|
|
3
|
+
"version": "5.1.4",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -12,11 +12,10 @@
|
|
|
12
12
|
"author": "",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@
|
|
16
|
-
"@khanacademy/wonder-blocks-core": "12.2.0"
|
|
15
|
+
"@khanacademy/wonder-blocks-core": "12.3.0"
|
|
17
16
|
},
|
|
18
17
|
"devDependencies": {
|
|
19
|
-
"@khanacademy/wb-dev-build-settings": "
|
|
18
|
+
"@khanacademy/wb-dev-build-settings": "3.0.0"
|
|
20
19
|
},
|
|
21
20
|
"peerDependencies": {
|
|
22
21
|
"@phosphor-icons/core": "^2.0.2",
|