@khanacademy/wonder-blocks-popover 6.2.4 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-popover
 
+## 6.3.0
+
+### Minor Changes
+
+- dbc9011: Add a new prop to the PopoverContent component that represents the heading tag for the title prop. This allows users to specify the proper heading level for their page for a11y compliance.
+
+## 6.2.5
+
+### Patch Changes
+
+- Updated dependencies [44bde5e]
+- Updated dependencies [27a211d]
+    - @khanacademy/wonder-blocks-tokens@16.5.0
+    - @khanacademy/wonder-blocks-icon-button@11.3.0
+    - @khanacademy/wonder-blocks-modal@8.7.0
+    - @khanacademy/wonder-blocks-styles@0.2.45
+    - @khanacademy/wonder-blocks-tooltip@4.1.75
+    - @khanacademy/wonder-blocks-typography@4.3.4
+
 ## 6.2.4
 
 ### Patch Changes

package/dist/components/popover-content.d.ts

@@ -10,6 +10,11 @@ type CommonProps = AriaProps & {
      * The popover title
      */
     title: string;
+    /**
+     * The heading tag for the popover title. Defaults to `"h4"`.
+     * This does not affect the visual appearance of the title.
+     */
+    titleHeadingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     /**
      * User-defined actions.
      *

package/dist/es/index.js

@@ -31,6 +31,6 @@ class CloseButton extends React.Component{render(){const{"aria-label":ariaLabel,
 
 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,maxInlineSize:`calc(${sizing.size_160} * 18)`,padding:sizing.size_240,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",insetInlineEnd:sizing.size_040,insetBlockStart:sizing.size_040,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(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:{marginBlockStart:sizing.size_240,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBlockEnd:sizing.size_080},iconContainer:{alignItems:"center",justifyContent:"center",blockSize:sizing.size_640,inlineSize:sizing.size_640,minInlineSize:sizing.size_640,marginInlineEnd:sizing.size_160,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBlockEnd:sizing.size_240,marginBlockStart:`calc(-1 * ${sizing.size_240})`,marginInline:`calc(-1 * ${sizing.size_240})`,inlineSize:`calc(100% + ${sizing.size_480})`},imageToBottom:{marginBlockEnd:`calc(-1 * ${sizing.size_240})`,marginBlockStart:sizing.size_240,order: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,titleHeadingTag,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",tag:titleHeadingTag,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:{marginBlockStart:sizing.size_240,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBlockEnd:sizing.size_080},iconContainer:{alignItems:"center",justifyContent:"center",blockSize:sizing.size_640,inlineSize:sizing.size_640,minInlineSize:sizing.size_640,marginInlineEnd:sizing.size_160,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBlockEnd:sizing.size_240,marginBlockStart:`calc(-1 * ${sizing.size_240})`,marginInline:`calc(-1 * ${sizing.size_240})`,inlineSize:`calc(100% + ${sizing.size_480})`},imageToBottom:{marginBlockEnd:`calc(-1 * ${sizing.size_240})`,marginBlockStart:sizing.size_240,order:1}});
 
 export { Popover, PopoverContent, PopoverContentCore };

package/dist/index.js

@@ -60,7 +60,7 @@ class CloseButton extends React__namespace.Component{render(){const{"aria-label"
 
 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,maxInlineSize:`calc(${wonderBlocksTokens.sizing.size_160} * 18)`,padding:wonderBlocksTokens.sizing.size_240,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_040,insetBlockStart:wonderBlocksTokens.sizing.size_040,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.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:{marginBlockStart:wonderBlocksTokens.sizing.size_240,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBlockEnd:wonderBlocksTokens.sizing.size_080},iconContainer:{alignItems:"center",justifyContent:"center",blockSize:wonderBlocksTokens.sizing.size_640,inlineSize:wonderBlocksTokens.sizing.size_640,minInlineSize:wonderBlocksTokens.sizing.size_640,marginInlineEnd:wonderBlocksTokens.sizing.size_160,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBlockEnd:wonderBlocksTokens.sizing.size_240,marginBlockStart:`calc(-1 * ${wonderBlocksTokens.sizing.size_240})`,marginInline:`calc(-1 * ${wonderBlocksTokens.sizing.size_240})`,inlineSize:`calc(100% + ${wonderBlocksTokens.sizing.size_480})`},imageToBottom:{marginBlockEnd:`calc(-1 * ${wonderBlocksTokens.sizing.size_240})`,marginBlockStart:wonderBlocksTokens.sizing.size_240,order: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,titleHeadingTag,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",tag:titleHeadingTag,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:{marginBlockStart:wonderBlocksTokens.sizing.size_240,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBlockEnd:wonderBlocksTokens.sizing.size_080},iconContainer:{alignItems:"center",justifyContent:"center",blockSize:wonderBlocksTokens.sizing.size_640,inlineSize:wonderBlocksTokens.sizing.size_640,minInlineSize:wonderBlocksTokens.sizing.size_640,marginInlineEnd:wonderBlocksTokens.sizing.size_160,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBlockEnd:wonderBlocksTokens.sizing.size_240,marginBlockStart:`calc(-1 * ${wonderBlocksTokens.sizing.size_240})`,marginInline:`calc(-1 * ${wonderBlocksTokens.sizing.size_240})`,inlineSize:`calc(100% + ${wonderBlocksTokens.sizing.size_480})`},imageToBottom:{marginBlockEnd:`calc(-1 * ${wonderBlocksTokens.sizing.size_240})`,marginBlockStart:wonderBlocksTokens.sizing.size_240,order:1}});
 
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "6.2.4",
+  "version": "6.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -20,13 +20,13 @@
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@khanacademy/wonder-blocks-icon-button": "11.3.0",
+    "@khanacademy/wonder-blocks-modal": "8.7.0",
+    "@khanacademy/wonder-blocks-styles": "0.2.45",
+    "@khanacademy/wonder-blocks-tokens": "16.5.0",
     "@khanacademy/wonder-blocks-core": "12.4.3",
-    "@khanacademy/wonder-blocks-icon-button": "11.2.4",
-    "@khanacademy/wonder-blocks-modal": "8.6.5",
-    "@khanacademy/wonder-blocks-styles": "0.2.44",
-    "@khanacademy/wonder-blocks-tokens": "16.4.1",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.74",
-    "@khanacademy/wonder-blocks-typography": "4.3.3"
+    "@khanacademy/wonder-blocks-typography": "4.3.4",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.75"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",