@khanacademy/wonder-blocks-icon 1.2.26 → 1.2.27

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 CHANGED
@@ -1,5 +1,11 @@
1
1
  # @khanacademy/wonder-blocks-icon
2
2
 
3
+ ## 1.2.27
4
+
5
+ ### Patch Changes
6
+
7
+ - @khanacademy/wonder-blocks-core@4.3.1
8
+
3
9
  ## 1.2.26
4
10
 
5
11
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -4,39 +4,19 @@ import * as React from 'react';
4
4
  import { StyleSheet } from 'aphrodite';
5
5
  import { addStyle } from '@khanacademy/wonder-blocks-core';
6
6
 
7
- /**
8
- * A simple function that tells us how many viewport pixels each icon size
9
- * corresponds to.
10
- */
11
7
  const viewportPixelsForSize = size => ({
12
8
  small: 16,
13
9
  medium: 24,
14
10
  large: 48,
15
11
  xlarge: 96
16
12
  })[size];
17
- /**
18
- * A utility to find the right asset from an IconAsset to display in an icon
19
- * at a given IconSize. We're looking for, in the following order:
20
- * 1. The path for the IconSize (e.g. small, medium) requested
21
- * 2. A path that's _smaller_ than the size we requested
22
- * 3. Any path (what remains is one for a larger IconSize)
23
- *
24
- * The goal here is to provide a path that looks good at the given size...
25
- * obviously, if the size that we want is provided, we'll use it. Otherwise we'd
26
- * rather blow up a smaller, simpler icon than scrunch down a more complex one.
27
- */
28
-
29
13
  const getPathForIcon = (icon, size) => {
30
14
  if (icon[size]) {
31
- // Great, we have the IconSize we actually requested
32
15
  return {
33
16
  assetSize: size,
34
17
  path: icon[size]
35
18
  };
36
19
  } else {
37
- // Oh, no, we don't have the right IconSize! Let's find the next best
38
- // one...we prefer to find a smaller icon and blow it up instead of
39
- // using a larger icon and shrinking it such that detail may be lost.
40
20
  const desiredPixelSize = viewportPixelsForSize(size);
41
21
  const availableSizes = Object.keys(icon);
42
22
 
@@ -62,42 +42,6 @@ const getPathForIcon = (icon, size) => {
62
42
 
63
43
  const _excluded = ["color", "icon", "size", "style"];
64
44
  const StyledSVG = addStyle("svg");
65
- /**
66
- * An Icon displays a small informational or decorative image as an SVG.
67
- *
68
- * ```js
69
- * import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
70
- *
71
- * <Icon
72
- * icon={icons.search}
73
- * color={Color.white}
74
- * size="medium"
75
- * style={{margin: 4}}
76
- * />
77
- * ```
78
- *
79
- * Wonder Blocks comes with a fixed set of icons available by importing `icons`,
80
- * but you can also provide your own `IconAsset`.
81
- *
82
- * ```js
83
- * import Icon from "@khanacademy/wonder-blocks-icon";
84
- * import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
85
- *
86
- * // Easter egg: what shape am I?
87
- * const customIcon: IconAsset = {
88
- * small: "M6.92820 0L13.85640 4L13.85640 12L6.92820 16L0 12L0 4Z",
89
- * };
90
- * ```
91
- *
92
- * `IconAsset` should be in the following format:
93
- * ```js
94
- * {small?: string, medium?: string, large?: string, xlarge?: string}
95
- * ```
96
- *
97
- * These icons should fit into a viewport of 16, 24, 48, and 96 pixels,
98
- * respectively.
99
- */
100
-
101
45
  class Icon extends React.PureComponent {
102
46
  render() {
103
47
  const _this$props = this.props,
@@ -115,12 +59,12 @@ class Icon extends React.PureComponent {
115
59
  } = getPathForIcon(icon, size);
116
60
  const pixelSize = viewportPixelsForSize(size);
117
61
  const viewboxPixelSize = viewportPixelsForSize(assetSize);
118
- return /*#__PURE__*/React.createElement(StyledSVG, _extends({}, sharedProps, {
62
+ return React.createElement(StyledSVG, _extends({}, sharedProps, {
119
63
  style: [styles.svg, style],
120
64
  width: pixelSize,
121
65
  height: pixelSize,
122
66
  viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
123
- }), /*#__PURE__*/React.createElement("path", {
67
+ }), React.createElement("path", {
124
68
  fill: color,
125
69
  d: path
126
70
  }));
@@ -140,9 +84,6 @@ const styles = StyleSheet.create({
140
84
  }
141
85
  });
142
86
 
143
- /**
144
- * The source SVG paths for our icons at various sizes
145
- */
146
87
  var iconAssets = {
147
88
  add: {
148
89
  medium: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-icon",
3
- "version": "1.2.26",
3
+ "version": "1.2.27",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -16,10 +16,10 @@
16
16
  "license": "MIT",
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.16.3",
19
- "@khanacademy/wonder-blocks-core": "^4.3.0"
19
+ "@khanacademy/wonder-blocks-core": "^4.3.1"
20
20
  },
21
21
  "devDependencies": {
22
- "wb-dev-build-settings": "^0.3.0"
22
+ "wb-dev-build-settings": "^0.4.0"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "aphrodite": "^1.2.5",