Fix typing issue with heading variants

nsbno · Aug 21, 2023 · 2693928 · 2693928
1 parent 3d852b8
commit 2693928
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/.changeset/soft-terms-ring.md b/.changeset/soft-terms-ring.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": patch
+---
+
+Heading: Fix a bug with variants
diff --git a/apps/docs/app/routes/_index/HeroSection.tsx b/apps/docs/app/routes/_index/HeroSection.tsx
@@ -15,7 +15,7 @@ export function HeroSection() {
       <Container maxWidth="container.lg" mt={[0, 8]}>
         <Flex flexDirection={["column-reverse", "row"]} alignItems="center">
           <Flex flexDirection="column" color="white" flex={["auto", "55%"]}>
-            <Heading as="h1" variant="2xl">
+            <Heading as="h1" variant="xxl">
               Velkommen til Spor
             </Heading>
             <Box marginBottom={[10, 0]}>

diff --git a/packages/spor-react/src/typography/Heading.tsx b/packages/spor-react/src/typography/Heading.tsx
@@ -1,14 +1,12 @@
 import { HeadingProps as ChakraHeadingProps, Text } from "@chakra-ui/react";
-import type tokens from "@vygruppen/spor-design-tokens";
 import React from "react";
-
-type TextStyles = keyof typeof tokens.font.style;
+import type { textStyles } from "../theme/foundations";
 
 export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
   /** The heading level, e.g. h1, h2, h3... **/
   as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  /** The size and style of the heading */
-  variant?: TextStyles;
+  /** The size and style of the heading. Defaults to xl-display */
+  variant?: keyof typeof textStyles;
 };
 /**
  * Create your own fancy headings with this component.