Merge pull request #128 from vector-im/florianduros/fix-heading-size

Fix `Typography` > `Heading` and `Text` size

src/components/Typography/Heading.stories.tsx

@@ -25,7 +25,7 @@ export default {
   component: HeadingComponent,
   argTypes: {
     size: {
-      options: ["xs", "sm", "md", "lg"],
+      options: ["sm", "md", "lg", "xl"],
       control: { type: "inline-radio" },
     },
     weight: {

src/components/Typography/Heading.tsx

@@ -18,11 +18,16 @@ import React from "react";
 import { Typography } from "./Typography";
 import { Text } from "./Text";
 
+type TypographyProps = React.ComponentProps<typeof Typography>;
+
 /**
  * A heading component.
  */
 export const Heading: React.FC<
-  Omit<React.ComponentProps<typeof Typography>, "type">
+  Omit<TypographyProps, "type"> & {
+    // xs is not a valid heading size
+    size?: Exclude<TypographyProps["size"], "xs">;
+  }
 > = ({ as = "h1", children, ...props }) => {
   return (
     <Typography as={as} type="heading" {...props}>

src/components/Typography/Text.tsx

@@ -17,12 +17,17 @@ limitations under the License.
 import React from "react";
 import { Typography } from "./Typography";
 
+type TypographyProps = React.ComponentProps<typeof Typography>;
+
 /**
  * A text component. Underlying HTML element can be changed using the `as`
  * property. Will default to be a paragraph.
  */
 export const Text: React.FC<
-  Omit<React.ComponentProps<typeof Typography>, "type">
+  Omit<TypographyProps, "type"> & {
+    // xl is not a valid text size
+    size?: Exclude<TypographyProps["size"], "xl">;
+  }
 > = ({ as = "p", children, ...props }) => {
   return (
     <Typography as={as} type="body" {...props}>

src/components/Typography/Typography.tsx

@@ -36,7 +36,7 @@ type TypographyProps<C extends React.ElementType> = {
   /**
    * The t-shirt size of the content.
    */
-  size?: "xs" | "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   /**
    * The CSS class name.
    */