@khanacademy/wonder-blocks-popover 6.1.28 → 6.1.29

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-popover
 
+## 6.1.29
+
+### Patch Changes
+
+- 1feec01: Replace use of `surface` tokens in components in favour of `background` tokens
+- Updated dependencies [1feec01]
+    - @khanacademy/wonder-blocks-tooltip@4.1.43
+    - @khanacademy/wonder-blocks-styles@0.2.30
+    - @khanacademy/wonder-blocks-tokens@12.2.1
+    - @khanacademy/wonder-blocks-modal@8.3.1
+    - @khanacademy/wonder-blocks-icon-button@10.4.1
+    - @khanacademy/wonder-blocks-typography@4.2.20
+
 ## 6.1.28
 
 ### Patch Changes

package/dist/es/index.js

@@ -29,7 +29,7 @@ class Popover extends React.Component{static getDerivedStateFromProps(props,stat
 
 class CloseButton extends React.Component{render(){const{"aria-label":ariaLabel,style,testId}=this.props;return jsx(PopoverContext.Consumer,{children:({close})=>{return jsx(IconButton,{icon:xIcon,"aria-label":ariaLabel,onClick:close,kind:"tertiary",actionType:"neutral",style:style,testId:testId})}})}}CloseButton.defaultProps={"aria-label":"Close Popover"};
 
-class PopoverContentCore extends React.Component{render(){const{"aria-label":ariaLabel,children,closeButtonLight,closeButtonLabel,closeButtonVisible,style,testId}=this.props;return jsxs(View,{testId:testId,style:[styles$1.content,style],"aria-label":ariaLabel,children:[closeButtonVisible&&jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})}}PopoverContentCore.defaultProps={closeButtonLight:false,closeButtonVisible:false};const styles$1=StyleSheet.create({content:{borderRadius:border.radius.radius_040,border:`solid 1px ${semanticColor.core.border.neutral.subtle}`,backgroundColor:semanticColor.surface.primary,boxShadow:`0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,margin:0,maxWidth:spacing.medium_16*18,padding:spacing.large_24,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",right:spacing.xxxSmall_4,top:spacing.xxxSmall_4,zIndex:1}});
+class PopoverContentCore extends React.Component{render(){const{"aria-label":ariaLabel,children,closeButtonLight,closeButtonLabel,closeButtonVisible,style,testId}=this.props;return jsxs(View,{testId:testId,style:[styles$1.content,style],"aria-label":ariaLabel,children:[closeButtonVisible&&jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})}}PopoverContentCore.defaultProps={closeButtonLight:false,closeButtonVisible:false};const styles$1=StyleSheet.create({content:{borderRadius:border.radius.radius_040,border:`solid 1px ${semanticColor.core.border.neutral.subtle}`,backgroundColor:semanticColor.core.background.base.default,boxShadow:`0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,margin:0,maxWidth:spacing.medium_16*18,padding:spacing.large_24,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",right:spacing.xxxSmall_4,top:spacing.xxxSmall_4,zIndex:1}});
 
 const StyledImg=addStyle("img");class PopoverContent extends React.Component{componentDidMount(){const{icon,image}=this.props;if(image&&icon){throw new Error("'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.")}}validateProps({placement}){if(this.props.image&&(placement==="left"||placement==="right")){throw new Error("'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.")}}render(){const{closeButtonLabel,closeButtonVisible,content,icon,image,style,title,testId,uniqueId}=this.props;return jsx(PopoverContext.Consumer,{children:({close,placement})=>{this.validateProps({close,placement});return jsxs(PopoverContentCore,{closeButtonLight:image&&placement==="top",closeButtonLabel:closeButtonLabel,closeButtonVisible:closeButtonVisible,style:style,testId:testId,children:[jsxs(View,{style:!!icon&&styles.withIcon,children:[this.maybeRenderImage({placement}),this.maybeRenderIcon(),jsxs(View,{style:styles.text,children:[jsx(HeadingSmall,{id:`${uniqueId}-title`,style:styles.title,children:title}),jsx(Body,{id:`${uniqueId}-content`,children:content})]})]}),this.maybeRenderActions(close)]})}})}constructor(...args){super(...args),this.maybeRenderImage=({placement})=>{const{image}=this.props;if(!image){return null}return jsx(View,{style:[styles.image,placement==="bottom"&&styles.imageToBottom],children:image})},this.maybeRenderIcon=()=>{const{icon,iconAlt}=this.props;if(!icon){return null}return jsx(View,{style:styles.iconContainer,children:typeof icon!=="string"?icon:jsx(StyledImg,{src:icon,style:styles.icon,alt:iconAlt||""})})},this.maybeRenderActions=close=>{const{actions}=this.props;if(!actions){return null}return jsx(View,{style:styles.actions,children:typeof actions==="function"?actions({close:close}):actions})};}}PopoverContent.defaultProps={closeButtonVisible:false};const styles=StyleSheet.create({actions:{marginTop:spacing.large_24,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBottom:spacing.xSmall_8},iconContainer:{alignItems:"center",justifyContent:"center",height:spacing.xxxLarge_64,width:spacing.xxxLarge_64,minWidth:spacing.xxxLarge_64,marginRight:spacing.medium_16,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBottom:spacing.large_24,marginLeft:-spacing.large_24,marginRight:-spacing.large_24,marginTop:-spacing.large_24,width:`calc(100% + ${spacing.large_24*2}px)`},imageToBottom:{marginBottom:-spacing.large_24,marginTop:spacing.large_24,order:1}});
 

package/dist/index.js

@@ -58,7 +58,7 @@ class Popover extends React__namespace.Component{static getDerivedStateFromProps
 
 class CloseButton extends React__namespace.Component{render(){const{"aria-label":ariaLabel,style,testId}=this.props;return jsxRuntime.jsx(PopoverContext.Consumer,{children:({close})=>{return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":ariaLabel,onClick:close,kind:"tertiary",actionType:"neutral",style:style,testId:testId})}})}}CloseButton.defaultProps={"aria-label":"Close Popover"};
 
-class PopoverContentCore extends React__namespace.Component{render(){const{"aria-label":ariaLabel,children,closeButtonLight,closeButtonLabel,closeButtonVisible,style,testId}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{testId:testId,style:[styles$1.content,style],"aria-label":ariaLabel,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&wonderBlocksStyles.actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})}}PopoverContentCore.defaultProps={closeButtonLight:false,closeButtonVisible:false};const styles$1=aphrodite.StyleSheet.create({content:{borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid 1px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,backgroundColor:wonderBlocksTokens.semanticColor.surface.primary,boxShadow:`0 ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0 ${wonderBlocksTokens.color.offBlack8}`,margin:0,maxWidth:wonderBlocksTokens.spacing.medium_16*18,padding:wonderBlocksTokens.spacing.large_24,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",right:wonderBlocksTokens.spacing.xxxSmall_4,top:wonderBlocksTokens.spacing.xxxSmall_4,zIndex:1}});
+class PopoverContentCore extends React__namespace.Component{render(){const{"aria-label":ariaLabel,children,closeButtonLight,closeButtonLabel,closeButtonVisible,style,testId}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{testId:testId,style:[styles$1.content,style],"aria-label":ariaLabel,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&wonderBlocksStyles.actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})}}PopoverContentCore.defaultProps={closeButtonLight:false,closeButtonVisible:false};const styles$1=aphrodite.StyleSheet.create({content:{borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid 1px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,boxShadow:`0 ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0 ${wonderBlocksTokens.color.offBlack8}`,margin:0,maxWidth:wonderBlocksTokens.spacing.medium_16*18,padding:wonderBlocksTokens.spacing.large_24,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",right:wonderBlocksTokens.spacing.xxxSmall_4,top:wonderBlocksTokens.spacing.xxxSmall_4,zIndex:1}});
 
 const StyledImg=wonderBlocksCore.addStyle("img");class PopoverContent extends React__namespace.Component{componentDidMount(){const{icon,image}=this.props;if(image&&icon){throw new Error("'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.")}}validateProps({placement}){if(this.props.image&&(placement==="left"||placement==="right")){throw new Error("'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.")}}render(){const{closeButtonLabel,closeButtonVisible,content,icon,image,style,title,testId,uniqueId}=this.props;return jsxRuntime.jsx(PopoverContext.Consumer,{children:({close,placement})=>{this.validateProps({close,placement});return jsxRuntime.jsxs(PopoverContentCore,{closeButtonLight:image&&placement==="top",closeButtonLabel:closeButtonLabel,closeButtonVisible:closeButtonVisible,style:style,testId:testId,children:[jsxRuntime.jsxs(wonderBlocksCore.View,{style:!!icon&&styles.withIcon,children:[this.maybeRenderImage({placement}),this.maybeRenderIcon(),jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.text,children:[jsxRuntime.jsx(wonderBlocksTypography.HeadingSmall,{id:`${uniqueId}-title`,style:styles.title,children:title}),jsxRuntime.jsx(wonderBlocksTypography.Body,{id:`${uniqueId}-content`,children:content})]})]}),this.maybeRenderActions(close)]})}})}constructor(...args){super(...args),this.maybeRenderImage=({placement})=>{const{image}=this.props;if(!image){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.image,placement==="bottom"&&styles.imageToBottom],children:image})},this.maybeRenderIcon=()=>{const{icon,iconAlt}=this.props;if(!icon){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.iconContainer,children:typeof icon!=="string"?icon:jsxRuntime.jsx(StyledImg,{src:icon,style:styles.icon,alt:iconAlt||""})})},this.maybeRenderActions=close=>{const{actions}=this.props;if(!actions){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.actions,children:typeof actions==="function"?actions({close:close}):actions})};}}PopoverContent.defaultProps={closeButtonVisible:false};const styles=aphrodite.StyleSheet.create({actions:{marginTop:wonderBlocksTokens.spacing.large_24,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBottom:wonderBlocksTokens.spacing.xSmall_8},iconContainer:{alignItems:"center",justifyContent:"center",height:wonderBlocksTokens.spacing.xxxLarge_64,width:wonderBlocksTokens.spacing.xxxLarge_64,minWidth:wonderBlocksTokens.spacing.xxxLarge_64,marginRight:wonderBlocksTokens.spacing.medium_16,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBottom:wonderBlocksTokens.spacing.large_24,marginLeft:-wonderBlocksTokens.spacing.large_24,marginRight:-wonderBlocksTokens.spacing.large_24,marginTop:-wonderBlocksTokens.spacing.large_24,width:`calc(100% + ${wonderBlocksTokens.spacing.large_24*2}px)`},imageToBottom:{marginBottom:-wonderBlocksTokens.spacing.large_24,marginTop:wonderBlocksTokens.spacing.large_24,order:1}});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "6.1.28",
+  "version": "6.1.29",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,12 +13,12 @@
   "license": "MIT",
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.4.0",
-    "@khanacademy/wonder-blocks-icon-button": "10.4.0",
-    "@khanacademy/wonder-blocks-modal": "8.3.0",
-    "@khanacademy/wonder-blocks-styles": "0.2.29",
-    "@khanacademy/wonder-blocks-tokens": "12.2.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.42",
-    "@khanacademy/wonder-blocks-typography": "4.2.19"
+    "@khanacademy/wonder-blocks-modal": "8.3.1",
+    "@khanacademy/wonder-blocks-styles": "0.2.30",
+    "@khanacademy/wonder-blocks-tokens": "12.2.1",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.43",
+    "@khanacademy/wonder-blocks-typography": "4.2.20",
+    "@khanacademy/wonder-blocks-icon-button": "10.4.1"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",