@khanacademy/wonder-blocks-icon
Advanced tools
Comparing version 0.0.0-PR2117-20231122184125 to 0.0.0-PR2128-20231127202201
# @khanacademy/wonder-blocks-icon | ||
## 0.0.0-PR2117-20231122184125 | ||
## 0.0.0-PR2128-20231127202201 | ||
### Major Changes | ||
- be180536: Remove size/weight restriction from PhosphorIcon and remove some exported types from the package. | ||
- 07a06be6: Delete Icon component in favor of PhosphorIcon | ||
## 3.0.0 | ||
### Major Changes | ||
- 96f675d2: Remove size/weight restriction from PhosphorIcon and remove some exported types from the package. | ||
## 2.2.1 | ||
@@ -10,0 +16,0 @@ |
import * as React from "react"; | ||
import { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core"; | ||
import { PhosphorIconAsset } from "../types"; | ||
import { IconSize, PhosphorIconAsset } from "../types"; | ||
/** | ||
@@ -47,4 +47,8 @@ * A `PhosphorIcon` displays a small informational or decorative image as an | ||
testId?: string | undefined; | ||
size?: "medium" | "large" | "small" | "xlarge" | undefined; | ||
/** | ||
* Size of the icon. One of `small` (16), `medium` (24), `large` (48), or | ||
* `xlarge` (96). Defaults to `small`. | ||
*/ | ||
size?: IconSize | undefined; | ||
/** | ||
* The icon to display. This is a reference to the icon asset (imported as a | ||
@@ -51,0 +55,0 @@ * static SVG file). |
@@ -39,161 +39,3 @@ import * as React from 'react'; | ||
})[size]; | ||
const getPathForIcon = (icon, size) => { | ||
if (typeof icon[size] === "number") { | ||
return { | ||
assetSize: size, | ||
path: icon[size] | ||
}; | ||
} else { | ||
const desiredPixelSize = viewportPixelsForSize(size); | ||
const availableSizes = Object.keys(icon); | ||
const sortFn = availableSize => { | ||
const availablePixelSize = viewportPixelsForSize(availableSize); | ||
const tooLargeByPixels = availablePixelSize - desiredPixelSize; | ||
return tooLargeByPixels > 0 ? Number.POSITIVE_INFINITY : Math.abs(tooLargeByPixels); | ||
}; | ||
const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b)); | ||
const bestAssetSize = assetSizes[0]; | ||
if (bestAssetSize && icon[bestAssetSize]) { | ||
return { | ||
assetSize: bestAssetSize, | ||
path: icon[bestAssetSize] | ||
}; | ||
} else { | ||
throw new Error("Icon does not contain any valid asset sizes!"); | ||
} | ||
} | ||
}; | ||
const _excluded$1 = ["color", "icon", "size", "style", "testId"]; | ||
const StyledSVG = addStyle("svg"); | ||
const Icon = React.forwardRef(function Icon(props, ref) { | ||
const { | ||
color = "currentColor", | ||
icon, | ||
size = "small", | ||
style, | ||
testId | ||
} = props, | ||
sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1); | ||
const { | ||
assetSize, | ||
path | ||
} = getPathForIcon(icon, size); | ||
const pixelSize = viewportPixelsForSize(size); | ||
const viewboxPixelSize = viewportPixelsForSize(assetSize); | ||
return React.createElement(StyledSVG, _extends({}, sharedProps, { | ||
style: [styles$1.svg, style], | ||
width: pixelSize, | ||
height: pixelSize, | ||
viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`, | ||
"data-test-id": testId, | ||
ref: ref | ||
}), React.createElement("path", { | ||
fill: color, | ||
d: path | ||
})); | ||
}); | ||
const styles$1 = StyleSheet.create({ | ||
svg: { | ||
display: "inline-block", | ||
verticalAlign: "text-bottom", | ||
flexShrink: 0, | ||
flexGrow: 0 | ||
} | ||
}); | ||
const add = { | ||
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" | ||
}; | ||
const caretDown = { | ||
small: "M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z", | ||
medium: "M17.293 8.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L12 13.586l5.293-5.293z" | ||
}; | ||
const caretLeft = { | ||
small: "M7.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L7.414 8z", | ||
medium: "M15.707 17.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L10.414 12l5.293 5.293z" | ||
}; | ||
const caretRight = { | ||
small: "M8.586 8L5.293 4.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L8.586 8z", | ||
medium: "M8.293 17.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6a1 1 0 0 0-1.414 1.414L13.586 12l-5.293 5.293z" | ||
}; | ||
const caretUp = { | ||
small: "M8 7.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414z", | ||
medium: "M17.293 15.707a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L12 10.414l5.293 5.293z" | ||
}; | ||
const check = { | ||
small: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z" | ||
}; | ||
const contentArticle = { | ||
small: "M11 12V8h2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3v2H5v8h6zM9.5 6a.5.5 0 0 1-.5-.5V2l4 4H9.5z", | ||
medium: "M12 24C5.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 10zm3-6v-4h2v5a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3v2H9v8h6zm-1.5-6a.5.5 0 0 1-.5-.5V6l4 4h-3.5z" | ||
}; | ||
const contentExercise = { | ||
small: "M7.5 6.914L5 9.414V11h1.586l2.5-2.5L7.5 6.914zM8.914 5.5L10.5 7.086 11.586 6 10 4.414 8.914 5.5zM3 9a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-6 6A1 1 0 0 1 7 13H4a1 1 0 0 1-1-1V9z", | ||
medium: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-.5-11.086l1.586 1.586-2.5 2.5H9v-1.586l2.5-2.5zM12.914 9.5L14 8.414 15.586 10 14.5 11.086 12.914 9.5zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zM7 13v3a1 1 0 0 0 1 1h3a1 1 0 0 0 .707-.293l6-6a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 0l-6 6A1 1 0 0 0 7 13z" | ||
}; | ||
const contentVideo = { | ||
small: "M6 5.87v4.263l3.197-2.131L6 5.87zm-.445-2.7l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 4 12.002v-8a1 1 0 0 1 1.555-.832z", | ||
medium: "M12 24C5.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 10zM10.555 7.17l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16.002v-8a1 1 0 0 1 1.555-.832zM11 14.133l3.197-2.131L11 9.87v4.263z" | ||
}; | ||
const correct = { | ||
medium: "M12 24C5.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 10zm-1.928-7.6l6.175-7.058a1 1 0 1 1 1.506 1.317l-6.984 7.981a1 1 0 0 1-1.55-.054l-3.016-3.982a1 1 0 0 1 1.594-1.208l2.275 3.003z" | ||
}; | ||
const _delete = { | ||
medium: "M12 24C5.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 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z" | ||
}; | ||
const dismiss = { | ||
small: "M8 6.586l3.293-3.293a1 1 0 0 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z", | ||
medium: "M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z" | ||
}; | ||
const hint = { | ||
medium: "M10.835 15.993a1 1 0 0 1 1.008-.247 5.5 5.5 0 1 0-3.59-3.59 1 1 0 0 1-.246 1.009L6.172 15 9 17.828l1.835-1.835zm-.78 3.61a1.496 1.496 0 0 1-2.11 0l-3.548-3.549a1.496 1.496 0 0 1 0-2.108l1.787-1.787a7.5 7.5 0 1 1 5.657 5.657l-1.787 1.787zm-6.762.104a1 1 0 0 1 1.414-1.414l1 1a1 1 0 0 1-1.414 1.414l-1-1z" | ||
}; | ||
const incorrect = { | ||
medium: "M12 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414L13.414 12l3.293 3.293a1 1 0 0 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L10.586 12 7.293 8.707a1 1 0 0 1 1.414-1.414L12 10.586zM12 24C5.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" | ||
}; | ||
const info = { | ||
small: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 8a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0V8zm1-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" | ||
}; | ||
const search = { | ||
small: "M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", | ||
medium: "M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z" | ||
}; | ||
const sortableArrowDown = { | ||
small: "M7 9.586V4a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L7 9.586z" | ||
}; | ||
const sortableArrowUp = { | ||
small: "M9 6.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L7 6.414V12a1 1 0 1 0 2 0V6.414z" | ||
}; | ||
const zoomIn = { | ||
medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM12 10h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H8a1 1 0 0 1 0-2h2V8a1 1 0 0 1 2 0v2zm-1 7a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" | ||
}; | ||
const zoomOut = { | ||
medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-3-5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2H8z" | ||
}; | ||
var iconAssets = /*#__PURE__*/Object.freeze({ | ||
__proto__: null, | ||
add: add, | ||
caretDown: caretDown, | ||
caretLeft: caretLeft, | ||
caretRight: caretRight, | ||
caretUp: caretUp, | ||
check: check, | ||
contentArticle: contentArticle, | ||
contentExercise: contentExercise, | ||
contentVideo: contentVideo, | ||
correct: correct, | ||
'delete': _delete, | ||
dismiss: dismiss, | ||
hint: hint, | ||
incorrect: incorrect, | ||
info: info, | ||
search: search, | ||
sortableArrowDown: sortableArrowDown, | ||
sortableArrowUp: sortableArrowUp, | ||
zoomIn: zoomIn, | ||
zoomOut: zoomOut | ||
}); | ||
const _excluded = ["color", "icon", "size", "style", "testId", "className"]; | ||
@@ -252,2 +94,2 @@ const StyledIcon = addStyle("span"); | ||
export { PhosphorIcon, Icon as default, iconAssets as icons }; | ||
export { PhosphorIcon }; |
@@ -1,7 +0,2 @@ | ||
import Icon from "./components/icon"; | ||
import type { IconAsset, IconSize } from "./util/icon-assets"; | ||
export * as icons from "./util/icon-assets"; | ||
export { PhosphorIcon } from "./components/phosphor-icon"; | ||
export type { PhosphorIconAsset } from "./types"; | ||
export type { IconAsset, IconSize }; | ||
export default Icon; | ||
export type { IconSize, PhosphorIconAsset } from "./types"; |
@@ -63,161 +63,3 @@ 'use strict'; | ||
})[size]; | ||
const getPathForIcon = (icon, size) => { | ||
if (typeof icon[size] === "number") { | ||
return { | ||
assetSize: size, | ||
path: icon[size] | ||
}; | ||
} else { | ||
const desiredPixelSize = viewportPixelsForSize(size); | ||
const availableSizes = Object.keys(icon); | ||
const sortFn = availableSize => { | ||
const availablePixelSize = viewportPixelsForSize(availableSize); | ||
const tooLargeByPixels = availablePixelSize - desiredPixelSize; | ||
return tooLargeByPixels > 0 ? Number.POSITIVE_INFINITY : Math.abs(tooLargeByPixels); | ||
}; | ||
const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b)); | ||
const bestAssetSize = assetSizes[0]; | ||
if (bestAssetSize && icon[bestAssetSize]) { | ||
return { | ||
assetSize: bestAssetSize, | ||
path: icon[bestAssetSize] | ||
}; | ||
} else { | ||
throw new Error("Icon does not contain any valid asset sizes!"); | ||
} | ||
} | ||
}; | ||
const _excluded$1 = ["color", "icon", "size", "style", "testId"]; | ||
const StyledSVG = wonderBlocksCore.addStyle("svg"); | ||
const Icon = React__namespace.forwardRef(function Icon(props, ref) { | ||
const { | ||
color = "currentColor", | ||
icon, | ||
size = "small", | ||
style, | ||
testId | ||
} = props, | ||
sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1); | ||
const { | ||
assetSize, | ||
path | ||
} = getPathForIcon(icon, size); | ||
const pixelSize = viewportPixelsForSize(size); | ||
const viewboxPixelSize = viewportPixelsForSize(assetSize); | ||
return React__namespace.createElement(StyledSVG, _extends({}, sharedProps, { | ||
style: [styles$1.svg, style], | ||
width: pixelSize, | ||
height: pixelSize, | ||
viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`, | ||
"data-test-id": testId, | ||
ref: ref | ||
}), React__namespace.createElement("path", { | ||
fill: color, | ||
d: path | ||
})); | ||
}); | ||
const styles$1 = aphrodite.StyleSheet.create({ | ||
svg: { | ||
display: "inline-block", | ||
verticalAlign: "text-bottom", | ||
flexShrink: 0, | ||
flexGrow: 0 | ||
} | ||
}); | ||
const add = { | ||
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" | ||
}; | ||
const caretDown = { | ||
small: "M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z", | ||
medium: "M17.293 8.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L12 13.586l5.293-5.293z" | ||
}; | ||
const caretLeft = { | ||
small: "M7.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L7.414 8z", | ||
medium: "M15.707 17.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L10.414 12l5.293 5.293z" | ||
}; | ||
const caretRight = { | ||
small: "M8.586 8L5.293 4.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L8.586 8z", | ||
medium: "M8.293 17.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6a1 1 0 0 0-1.414 1.414L13.586 12l-5.293 5.293z" | ||
}; | ||
const caretUp = { | ||
small: "M8 7.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414z", | ||
medium: "M17.293 15.707a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L12 10.414l5.293 5.293z" | ||
}; | ||
const check = { | ||
small: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z" | ||
}; | ||
const contentArticle = { | ||
small: "M11 12V8h2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3v2H5v8h6zM9.5 6a.5.5 0 0 1-.5-.5V2l4 4H9.5z", | ||
medium: "M12 24C5.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 10zm3-6v-4h2v5a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3v2H9v8h6zm-1.5-6a.5.5 0 0 1-.5-.5V6l4 4h-3.5z" | ||
}; | ||
const contentExercise = { | ||
small: "M7.5 6.914L5 9.414V11h1.586l2.5-2.5L7.5 6.914zM8.914 5.5L10.5 7.086 11.586 6 10 4.414 8.914 5.5zM3 9a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-6 6A1 1 0 0 1 7 13H4a1 1 0 0 1-1-1V9z", | ||
medium: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-.5-11.086l1.586 1.586-2.5 2.5H9v-1.586l2.5-2.5zM12.914 9.5L14 8.414 15.586 10 14.5 11.086 12.914 9.5zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zM7 13v3a1 1 0 0 0 1 1h3a1 1 0 0 0 .707-.293l6-6a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 0l-6 6A1 1 0 0 0 7 13z" | ||
}; | ||
const contentVideo = { | ||
small: "M6 5.87v4.263l3.197-2.131L6 5.87zm-.445-2.7l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 4 12.002v-8a1 1 0 0 1 1.555-.832z", | ||
medium: "M12 24C5.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 10zM10.555 7.17l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16.002v-8a1 1 0 0 1 1.555-.832zM11 14.133l3.197-2.131L11 9.87v4.263z" | ||
}; | ||
const correct = { | ||
medium: "M12 24C5.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 10zm-1.928-7.6l6.175-7.058a1 1 0 1 1 1.506 1.317l-6.984 7.981a1 1 0 0 1-1.55-.054l-3.016-3.982a1 1 0 0 1 1.594-1.208l2.275 3.003z" | ||
}; | ||
const _delete = { | ||
medium: "M12 24C5.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 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z" | ||
}; | ||
const dismiss = { | ||
small: "M8 6.586l3.293-3.293a1 1 0 0 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z", | ||
medium: "M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z" | ||
}; | ||
const hint = { | ||
medium: "M10.835 15.993a1 1 0 0 1 1.008-.247 5.5 5.5 0 1 0-3.59-3.59 1 1 0 0 1-.246 1.009L6.172 15 9 17.828l1.835-1.835zm-.78 3.61a1.496 1.496 0 0 1-2.11 0l-3.548-3.549a1.496 1.496 0 0 1 0-2.108l1.787-1.787a7.5 7.5 0 1 1 5.657 5.657l-1.787 1.787zm-6.762.104a1 1 0 0 1 1.414-1.414l1 1a1 1 0 0 1-1.414 1.414l-1-1z" | ||
}; | ||
const incorrect = { | ||
medium: "M12 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414L13.414 12l3.293 3.293a1 1 0 0 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L10.586 12 7.293 8.707a1 1 0 0 1 1.414-1.414L12 10.586zM12 24C5.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" | ||
}; | ||
const info = { | ||
small: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 8a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0V8zm1-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" | ||
}; | ||
const search = { | ||
small: "M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", | ||
medium: "M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z" | ||
}; | ||
const sortableArrowDown = { | ||
small: "M7 9.586V4a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L7 9.586z" | ||
}; | ||
const sortableArrowUp = { | ||
small: "M9 6.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L7 6.414V12a1 1 0 1 0 2 0V6.414z" | ||
}; | ||
const zoomIn = { | ||
medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM12 10h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H8a1 1 0 0 1 0-2h2V8a1 1 0 0 1 2 0v2zm-1 7a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" | ||
}; | ||
const zoomOut = { | ||
medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-3-5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2H8z" | ||
}; | ||
var iconAssets = /*#__PURE__*/Object.freeze({ | ||
__proto__: null, | ||
add: add, | ||
caretDown: caretDown, | ||
caretLeft: caretLeft, | ||
caretRight: caretRight, | ||
caretUp: caretUp, | ||
check: check, | ||
contentArticle: contentArticle, | ||
contentExercise: contentExercise, | ||
contentVideo: contentVideo, | ||
correct: correct, | ||
'delete': _delete, | ||
dismiss: dismiss, | ||
hint: hint, | ||
incorrect: incorrect, | ||
info: info, | ||
search: search, | ||
sortableArrowDown: sortableArrowDown, | ||
sortableArrowUp: sortableArrowUp, | ||
zoomIn: zoomIn, | ||
zoomOut: zoomOut | ||
}); | ||
const _excluded = ["color", "icon", "size", "style", "testId", "className"]; | ||
@@ -277,3 +119,1 @@ const StyledIcon = wonderBlocksCore.addStyle("span"); | ||
exports.PhosphorIcon = PhosphorIcon; | ||
exports["default"] = Icon; | ||
exports.icons = iconAssets; |
@@ -5,1 +5,5 @@ /** | ||
export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill; | ||
/** | ||
* All the possible icon sizes. | ||
*/ | ||
export type IconSize = "small" | "medium" | "large" | "xlarge"; |
@@ -1,2 +0,2 @@ | ||
import type { IconAsset, IconSize } from "./icon-assets"; | ||
import { IconSize } from "../types"; | ||
/** | ||
@@ -7,16 +7,1 @@ * A simple function that tells us how many viewport pixels each icon size | ||
export declare const viewportPixelsForSize: (size: IconSize) => number; | ||
/** | ||
* A utility to find the right asset from an IconAsset to display in an icon | ||
* at a given IconSize. We're looking for, in the following order: | ||
* 1. The path for the IconSize (e.g. small, medium) requested | ||
* 2. A path that's _smaller_ than the size we requested | ||
* 3. Any path (what remains is one for a larger IconSize) | ||
* | ||
* The goal here is to provide a path that looks good at the given size... | ||
* obviously, if the size that we want is provided, we'll use it. Otherwise we'd | ||
* rather blow up a smaller, simpler icon than scrunch down a more complex one. | ||
*/ | ||
export declare const getPathForIcon: (icon: IconAsset, size: IconSize) => { | ||
assetSize: IconSize; | ||
path: string; | ||
}; |
{ | ||
"name": "@khanacademy/wonder-blocks-icon", | ||
"version": "0.0.0-PR2117-20231122184125", | ||
"version": "0.0.0-PR2128-20231127202201", | ||
"design": "v1", | ||
@@ -5,0 +5,0 @@ "publishConfig": { |
@@ -1,8 +0,2 @@ | ||
import Icon from "./components/icon"; | ||
import type {IconAsset, IconSize} from "./util/icon-assets"; | ||
export * as icons from "./util/icon-assets"; | ||
export {PhosphorIcon} from "./components/phosphor-icon"; | ||
export type {PhosphorIconAsset} from "./types"; | ||
export type {IconAsset, IconSize}; | ||
export default Icon; | ||
export type {IconSize, PhosphorIconAsset} from "./types"; |
@@ -5,1 +5,6 @@ /** | ||
export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill; | ||
/** | ||
* All the possible icon sizes. | ||
*/ | ||
export type IconSize = "small" | "medium" | "large" | "xlarge"; |
@@ -1,82 +0,3 @@ | ||
import {getPathForIcon, viewportPixelsForSize} from "./icon-util"; | ||
import {viewportPixelsForSize} from "./icon-util"; | ||
import type {IconSize, IconAsset} from "./icon-assets"; | ||
const SIZES = ["small", "medium", "large", "xlarge"]; | ||
const DUMMY_ICON_MEDIUM_ONLY = { | ||
medium: "[MEDIUM SVG PATH]", | ||
} as const; | ||
const DUMMY_ICON_WITH_EVERYTHING_ON_IT: IconAsset = { | ||
small: "[SMALL SVG PATH]", | ||
medium: "[MEDIUM SVG PATH]", | ||
large: "[LARGE SVG PATH]", | ||
xlarge: "[XLARGE SVG PATH]", | ||
}; | ||
describe("getPathForIcon", () => { | ||
test("return the path for the correct size, if available", () => { | ||
SIZES.forEach((size: any) => { | ||
const {path, assetSize} = getPathForIcon( | ||
DUMMY_ICON_WITH_EVERYTHING_ON_IT, | ||
size, | ||
); | ||
expect( | ||
// @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'IconAsset'. | ||
path === DUMMY_ICON_WITH_EVERYTHING_ON_IT[size] && | ||
assetSize === size, | ||
).toBeTruthy(); | ||
}); | ||
}); | ||
test("scale up a small asset rather than scaling down a large one", () => { | ||
const expectValueForSize = ( | ||
requestedSize: IconSize, | ||
returnedSize: IconSize, | ||
) => { | ||
const iconMissingRequestedSize = { | ||
...DUMMY_ICON_WITH_EVERYTHING_ON_IT, | ||
} as const; | ||
delete iconMissingRequestedSize[requestedSize]; | ||
expect( | ||
getPathForIcon(iconMissingRequestedSize, requestedSize), | ||
).toMatchObject({ | ||
assetSize: returnedSize, | ||
path: DUMMY_ICON_WITH_EVERYTHING_ON_IT[returnedSize], | ||
}); | ||
}; | ||
expectValueForSize("small", "medium"); | ||
expectValueForSize("medium", "small"); | ||
expectValueForSize("large", "medium"); | ||
expectValueForSize("xlarge", "large"); | ||
}); | ||
test("return a path as long as at least one size is available", () => { | ||
SIZES.forEach((size: any) => { | ||
const {path, assetSize} = getPathForIcon( | ||
DUMMY_ICON_MEDIUM_ONLY, | ||
size, | ||
); | ||
expect( | ||
path === DUMMY_ICON_MEDIUM_ONLY["medium"] && | ||
assetSize === "medium", | ||
).toBeTruthy(); | ||
}); | ||
}); | ||
test("no valid asset sizes, throws", () => { | ||
// Arrange | ||
const iconAsset: IconAsset = {} as any; | ||
// Act | ||
const underTest = () => getPathForIcon(iconAsset, "medium"); | ||
// Assert | ||
expect(underTest).toThrowErrorMatchingInlineSnapshot( | ||
`"Icon does not contain any valid asset sizes!"`, | ||
); | ||
}); | ||
}); | ||
describe("viewportPixelsForSize", () => { | ||
@@ -83,0 +4,0 @@ test("return the correct values", () => { |
@@ -1,2 +0,2 @@ | ||
import type {IconAsset, IconSize} from "./icon-assets"; | ||
import {IconSize} from "../types"; | ||
@@ -14,49 +14,1 @@ /** | ||
}[size]); | ||
/** | ||
* A utility to find the right asset from an IconAsset to display in an icon | ||
* at a given IconSize. We're looking for, in the following order: | ||
* 1. The path for the IconSize (e.g. small, medium) requested | ||
* 2. A path that's _smaller_ than the size we requested | ||
* 3. Any path (what remains is one for a larger IconSize) | ||
* | ||
* The goal here is to provide a path that looks good at the given size... | ||
* obviously, if the size that we want is provided, we'll use it. Otherwise we'd | ||
* rather blow up a smaller, simpler icon than scrunch down a more complex one. | ||
*/ | ||
export const getPathForIcon = ( | ||
icon: IconAsset, | ||
size: IconSize, | ||
): { | ||
assetSize: IconSize; | ||
path: string; | ||
} => { | ||
if (typeof icon[size] === "number") { | ||
// Great, we have the IconSize we actually requested | ||
// @ts-expect-error [FEI-5019] - TS2322 - Type 'string | undefined' is not assignable to type 'string'. | ||
return {assetSize: size, path: icon[size]}; | ||
} else { | ||
// Oh, no, we don't have the right IconSize! Let's find the next best | ||
// one...we prefer to find a smaller icon and blow it up instead of | ||
// using a larger icon and shrinking it such that detail may be lost. | ||
const desiredPixelSize = viewportPixelsForSize(size); | ||
const availableSizes = Object.keys(icon); | ||
const sortFn = (availableSize: IconSize) => { | ||
const availablePixelSize = viewportPixelsForSize(availableSize); | ||
const tooLargeByPixels = availablePixelSize - desiredPixelSize; | ||
return tooLargeByPixels > 0 | ||
? Number.POSITIVE_INFINITY | ||
: Math.abs(tooLargeByPixels); | ||
}; | ||
// @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'keyof IconAsset'. | TS2345 - Argument of type 'string' is not assignable to parameter of type 'keyof IconAsset'. | ||
const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b)); | ||
const bestAssetSize = assetSizes[0]; | ||
// @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IconAsset'. | ||
if (bestAssetSize && icon[bestAssetSize]) { | ||
// @ts-expect-error [FEI-5019] - TS2322 - Type 'string' is not assignable to type 'keyof IconAsset'. | TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IconAsset'. | ||
return {assetSize: bestAssetSize, path: icon[bestAssetSize]}; | ||
} else { | ||
throw new Error("Icon does not contain any valid asset sizes!"); | ||
} | ||
} | ||
}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
75475
18
569