@khanacademy/wonder-blocks-popover 6.2.0 → 6.2.1
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 +15 -0
- package/dist/es/index.js +2 -2
- package/dist/index.js +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-popover
|
|
2
2
|
|
|
3
|
+
## 6.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 00e6dda: Updates internal WB typography references to use the new system (Heading and BodyText)
|
|
8
|
+
- Updated dependencies [488728a]
|
|
9
|
+
- Updated dependencies [00e6dda]
|
|
10
|
+
- Updated dependencies [00e6dda]
|
|
11
|
+
- @khanacademy/wonder-blocks-tokens@16.2.0
|
|
12
|
+
- @khanacademy/wonder-blocks-tooltip@4.1.71
|
|
13
|
+
- @khanacademy/wonder-blocks-typography@4.3.0
|
|
14
|
+
- @khanacademy/wonder-blocks-icon-button@11.2.1
|
|
15
|
+
- @khanacademy/wonder-blocks-modal@8.6.2
|
|
16
|
+
- @khanacademy/wonder-blocks-styles@0.2.41
|
|
17
|
+
|
|
3
18
|
## 6.2.0
|
|
4
19
|
|
|
5
20
|
### Minor Changes
|
package/dist/es/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { TooltipTail, TooltipPopper } from '@khanacademy/wonder-blocks-tooltip';
|
|
|
6
6
|
import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
|
|
7
7
|
import { StyleSheet } from 'aphrodite';
|
|
8
8
|
import { border, semanticColor, boxShadow, spacing } from '@khanacademy/wonder-blocks-tokens';
|
|
9
|
-
import {
|
|
9
|
+
import { Heading, BodyText } from '@khanacademy/wonder-blocks-typography';
|
|
10
10
|
import { actionStyles } from '@khanacademy/wonder-blocks-styles';
|
|
11
11
|
import xIcon from '@phosphor-icons/core/regular/x.svg';
|
|
12
12
|
import IconButton from '@khanacademy/wonder-blocks-icon-button';
|
|
@@ -31,6 +31,6 @@ class CloseButton extends React.Component{render(){const{"aria-label":ariaLabel,
|
|
|
31
31
|
|
|
32
32
|
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:boxShadow.mid,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}});
|
|
33
33
|
|
|
34
|
-
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(
|
|
34
|
+
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(Heading,{size:"medium",id:`${uniqueId}-title`,style:styles.title,children:title}),jsx(BodyText,{tag:"span",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}});
|
|
35
35
|
|
|
36
36
|
export { Popover, PopoverContent, PopoverContentCore };
|
package/dist/index.js
CHANGED
|
@@ -60,7 +60,7 @@ class CloseButton extends React__namespace.Component{render(){const{"aria-label"
|
|
|
60
60
|
|
|
61
61
|
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:wonderBlocksTokens.boxShadow.mid,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}});
|
|
62
62
|
|
|
63
|
-
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.
|
|
63
|
+
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.Heading,{size:"medium",id:`${uniqueId}-title`,style:styles.title,children:title}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",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}});
|
|
64
64
|
|
|
65
65
|
exports.Popover = Popover;
|
|
66
66
|
exports.PopoverContent = PopoverContent;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "6.2.
|
|
6
|
+
"version": "6.2.1",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"types": "dist/index.d.ts",
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@khanacademy/wonder-blocks-core": "12.4.3",
|
|
24
|
-
"@khanacademy/wonder-blocks-icon-button": "11.2.
|
|
25
|
-
"@khanacademy/wonder-blocks-modal": "8.6.
|
|
26
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
27
|
-
"@khanacademy/wonder-blocks-tokens": "16.
|
|
28
|
-
"@khanacademy/wonder-blocks-tooltip": "4.1.
|
|
29
|
-
"@khanacademy/wonder-blocks-typography": "4.
|
|
24
|
+
"@khanacademy/wonder-blocks-icon-button": "11.2.1",
|
|
25
|
+
"@khanacademy/wonder-blocks-modal": "8.6.2",
|
|
26
|
+
"@khanacademy/wonder-blocks-styles": "0.2.41",
|
|
27
|
+
"@khanacademy/wonder-blocks-tokens": "16.2.0",
|
|
28
|
+
"@khanacademy/wonder-blocks-tooltip": "4.1.71",
|
|
29
|
+
"@khanacademy/wonder-blocks-typography": "4.3.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@phosphor-icons/core": "^2.0.2",
|