@khanacademy/wonder-blocks-typography 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-typography
 
+## 4.1.0
+
+### Minor Changes
+
+- 7d2a646: Adjust styles in BodyText and Heading components for backwards compatibility
+
+### Patch Changes
+
+- Updated dependencies [b1ee2b4]
+- Updated dependencies [7abcccf]
+- Updated dependencies [9bacc1a]
+- Updated dependencies [9bacc1a]
+- Updated dependencies [1c3c335]
+- Updated dependencies [689f5d3]
+    - @khanacademy/wonder-blocks-tokens@10.4.0
+
 ## 4.0.0
 
 ### Major Changes

package/dist/components/heading.d.ts

@@ -1,9 +1,17 @@
 import * as React from "react";
 import { PropsFor, Text } from "@khanacademy/wonder-blocks-core";
+declare const tagMap: {
+    readonly xxlarge: "h1";
+    readonly xlarge: "h2";
+    readonly large: "h3";
+    readonly medium: "h4";
+    readonly small: "h4";
+};
+type HeadingSize = keyof typeof tagMap;
 type Props = PropsFor<typeof Text> & {
-    size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
+    size?: HeadingSize;
     tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    weight?: "semi" | "bold";
+    weight?: "medium" | "semi" | "bold";
 };
 declare const Heading: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<unknown>>;
 export default Heading;

package/dist/es/index.js

@@ -8,7 +8,7 @@ const common={display:"block"};const styles=StyleSheet.create({Title:{...common,
 
 const Title=React.forwardRef(function Title({style,children,tag="h1",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.Title,style],ref:ref,children:children})});
 
-const Heading=React.forwardRef(function Heading({size="large",weight="bold",style,children,tag="h2",...otherProps},ref){const themeHeading={fontSize:font.heading.size[size],fontWeight:font.weight[weight],lineHeight:font.heading.lineHeight[size]};return jsx(Text,{...otherProps,tag:tag,style:[styles.Heading,themeHeading,style],ref:ref,children:children})});
+const tagMap={xxlarge:"h1",xlarge:"h2",large:"h3",medium:"h4",small:"h4"};const Heading=React.forwardRef(function Heading(props,ref){const{size,weight="bold",style,children,tag,...otherProps}=props;const finalSize=size??"large";const resolvedTag=tag??(size?tagMap[size]:"h2");const themeHeading={fontSize:font.heading.size[finalSize],fontWeight:font.weight[weight],lineHeight:font.heading.lineHeight[finalSize]};return jsx(Text,{...otherProps,tag:resolvedTag,style:[styles.Heading,themeHeading,style],ref:ref,children:children})});
 
 const HeadingLarge=React.forwardRef(function HeadingLarge({style,children,tag="h2",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.HeadingLarge,style],ref:ref,children:children})});
 
@@ -18,7 +18,7 @@ const HeadingSmall=React.forwardRef(function HeadingSmall({style,children,tag="h
 
 const HeadingXSmall=React.forwardRef(function HeadingXSmall({style,children,tag="h4",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.HeadingXSmall,style],ref:ref,children:children})});
 
-const BodyText=React.forwardRef(function BodyText({size="small",weight="semi",style,children,tag="p",...otherProps},ref){const themeBodyText={fontSize:font.body.size[size],fontWeight:font.weight[weight],lineHeight:font.body.lineHeight[size]};return jsx(Text,{...otherProps,tag:tag,style:[styles.BodyText,themeBodyText,style],ref:ref,children:children})});
+const BodyText=React.forwardRef(function BodyText({size="medium",weight="medium",style,children,tag="p",...otherProps},ref){const themeBodyText={fontSize:font.body.size[size],fontWeight:font.weight[weight],lineHeight:font.body.lineHeight[size]};return jsx(Text,{...otherProps,tag:tag,style:[styles.BodyText,themeBodyText,style],ref:ref,children:children})});
 
 const BodySerifBlock=React.forwardRef(function BodySerifBlock({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.BodySerifBlock,style],ref:ref,children:children})});
 

package/dist/index.js

@@ -32,7 +32,7 @@ const common={display:"block"};const styles=aphrodite.StyleSheet.create({Title:{
 
 const Title=React__namespace.forwardRef(function Title({style,children,tag="h1",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.Title,style],ref:ref,children:children})});
 
-const Heading=React__namespace.forwardRef(function Heading({size="large",weight="bold",style,children,tag="h2",...otherProps},ref){const themeHeading={fontSize:wonderBlocksTokens.font.heading.size[size],fontWeight:wonderBlocksTokens.font.weight[weight],lineHeight:wonderBlocksTokens.font.heading.lineHeight[size]};return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.Heading,themeHeading,style],ref:ref,children:children})});
+const tagMap={xxlarge:"h1",xlarge:"h2",large:"h3",medium:"h4",small:"h4"};const Heading=React__namespace.forwardRef(function Heading(props,ref){const{size,weight="bold",style,children,tag,...otherProps}=props;const finalSize=size??"large";const resolvedTag=tag??(size?tagMap[size]:"h2");const themeHeading={fontSize:wonderBlocksTokens.font.heading.size[finalSize],fontWeight:wonderBlocksTokens.font.weight[weight],lineHeight:wonderBlocksTokens.font.heading.lineHeight[finalSize]};return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:resolvedTag,style:[styles.Heading,themeHeading,style],ref:ref,children:children})});
 
 const HeadingLarge=React__namespace.forwardRef(function HeadingLarge({style,children,tag="h2",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.HeadingLarge,style],ref:ref,children:children})});
 
@@ -42,7 +42,7 @@ const HeadingSmall=React__namespace.forwardRef(function HeadingSmall({style,chil
 
 const HeadingXSmall=React__namespace.forwardRef(function HeadingXSmall({style,children,tag="h4",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.HeadingXSmall,style],ref:ref,children:children})});
 
-const BodyText=React__namespace.forwardRef(function BodyText({size="small",weight="semi",style,children,tag="p",...otherProps},ref){const themeBodyText={fontSize:wonderBlocksTokens.font.body.size[size],fontWeight:wonderBlocksTokens.font.weight[weight],lineHeight:wonderBlocksTokens.font.body.lineHeight[size]};return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.BodyText,themeBodyText,style],ref:ref,children:children})});
+const BodyText=React__namespace.forwardRef(function BodyText({size="medium",weight="medium",style,children,tag="p",...otherProps},ref){const themeBodyText={fontSize:wonderBlocksTokens.font.body.size[size],fontWeight:wonderBlocksTokens.font.weight[weight],lineHeight:wonderBlocksTokens.font.body.lineHeight[size]};return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.BodyText,themeBodyText,style],ref:ref,children:children})});
 
 const BodySerifBlock=React__namespace.forwardRef(function BodySerifBlock({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.BodySerifBlock,style],ref:ref,children:children})});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-typography",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-tokens": "10.3.0"
+    "@khanacademy/wonder-blocks-tokens": "10.4.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",