feat: add default header sizes (#6)

hivemq · Mar 20, 2024 · a45788a · a45788a
1 parent 536bb07
commit a45788a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/testing/src/views/Headings.tsx b/testing/src/views/Headings.tsx
@@ -6,7 +6,7 @@ export function Headings() {
   return (
     <>
       {headings.map(heading => (
-        <Heading as={heading} variant={heading}>
+        <Heading as={heading} key={`header_${heading}`} >
           {heading.toUpperCase()} (Heading {heading[1]})
         </Heading>
       ))}

diff --git a/theme/package.json b/theme/package.json
@@ -24,15 +24,17 @@
     "publish:dry": "pnpm publish --no-git-checks --dry-run"
   },
   "peerDependencies": {
+    "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/theme-tools": "^2.1.2"
   },
   "devDependencies": {
+    "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@types/node": "^20.11.26",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
     "vite-plugin-dts": "^3.7.3"
   }
-}
+}
diff --git a/theme/src/components/headings.ts b/theme/src/components/headings.ts
@@ -8,7 +8,6 @@ const h1 = defineStyle({
   lineHeight: '2.25rem'
 })
 
-
 const h2 = defineStyle({
   fontFamily: "Raleway",
   fontSize: '1.5rem',
@@ -17,7 +16,6 @@ const h2 = defineStyle({
   lineHeight: '2rem'
 })
 
-
 const h3 = defineStyle({
   fontFamily: "Raleway",
   fontSize: '1.25rem',
@@ -48,13 +46,29 @@ const variants = {
   h3,
   h4,
   h5
-}
+} as const
+
+type HeaderVariant = typeof variants
+
+const variantMap = new Map(Object.entries(variants))
+const DEFAULT_VARIANT = h1
 
 export const headingTheme = defineStyleConfig({
-  baseStyle: {
-  },
+  baseStyle: defineStyle((props) => {
+    let selectedVariant: HeaderVariant[keyof HeaderVariant] | undefined
+
+    if (props.variant && variantMap.has(props.variant)) {
+      selectedVariant = variantMap.get(props.variant)
+    }
+
+    if (!!props.as && variantMap.has(props.as)) {
+      selectedVariant = variantMap.get(props.as)
+    }
+
+    return selectedVariant || DEFAULT_VARIANT
+  }),
   variants,
   defaultProps: {
-    variant: "h1",
+    variant: undefined,
   }
 })