refactor(Heading): update heading theme configuration

ethereum · Apr 28, 2024 · ea5c38a · ea5c38a
1 parent 0ed0f9a
commit ea5c38a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 29 deletions.
diff --git a/src/@chakra-ui/components/Heading.ts b/src/@chakra-ui/components/Heading.ts
@@ -1,38 +1,55 @@
-import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+import { defineStyleConfig } from "@chakra-ui/react"
 
 import { headingDefaultTheme } from "./components.utils"
 
-const { sizes: defaultSizes } = headingDefaultTheme
+const HEADING_SIZES = [
+  "4xl",
+  "3xl",
+  "2xl",
+  "xl",
+  "lg",
+  "md",
+  "sm",
+  "xs",
+] as const
 
-const lineHeightScale = {
+type SCALE_VALUE = string | [string, null, null, string]
+
+type SIZE_SCALE = { [key in (typeof HEADING_SIZES)[number]]: SCALE_VALUE }
+
+const lineHeightScale: SIZE_SCALE = {
   "4xl": "6xs",
-  "3xl": ["6xs", null, "5xs"],
-  "2xl": ["4xs", null, "5xs"],
-  xl: ["2xs", null, "4xs"],
-  lg: ["2xs", null, "3xs"],
+  "3xl": ["6xs", null, null, "5xs"],
+  "2xl": ["4xs", null, null, "5xs"],
+  xl: ["2xs", null, null, "4xs"],
+  lg: ["2xs", null, null, "3xs"],
   md: "xs",
   sm: "base",
   xs: "base",
 }
 
-/*
- * Instead of rewriting the entire sizes object, take the existing value from the
- * default theme and replace the lineHeight values.
- */
-const sizes = Object.entries(defaultSizes || {}).reduceRight(
-  (acc, [key, value]) => {
-    return {
-      ...acc,
-      [key]: defineStyle({
-        ...value,
-        lineHeight: lineHeightScale[key],
-      }),
-    }
-  },
-  {
-    ...defaultSizes,
+const fontSizeScale: SIZE_SCALE = {
+  "4xl": ["6xl", null, null, "7xl"],
+  "3xl": ["5xl", null, null, "6xl"],
+  "2xl": ["4xl", null, null, "5xl"],
+  xl: ["3xl", null, null, "4xl"],
+  lg: ["2xl", null, null, "3xl"],
+  md: "xl",
+  sm: "md",
+  xs: "sm",
+}
+
+const sizes = HEADING_SIZES.reduce<{
+  [key: string]: { fontSize: SCALE_VALUE; lineHeight: SCALE_VALUE }
+}>((obj, key) => {
+  return {
+    ...obj,
+    [key]: {
+      fontSize: fontSizeScale[key],
+      lineHeight: lineHeightScale[key],
+    },
   }
-)
+}, {})
 
 export const Heading = defineStyleConfig({
   ...headingDefaultTheme,

diff --git a/src/components/BaseStories/Heading.stories.tsx b/src/components/BaseStories/Heading.stories.tsx
@@ -65,10 +65,7 @@ const headingScale: Array<HeadingProps> = [
 ]
 
 export const Heading: Story = {
-  args: {
-    children: <Translation id="page-index:page-index-title" />,
-  },
-  render: (args) => (
+  render: () => (
     <VStack w="full">
       <Box>
         Adjust the viewport to below &quot;md&quot; to see the font size and
@@ -86,7 +83,7 @@ export const Heading: Story = {
               {(obj.size as string) || "xl"}
             </HeadingComponent>
             <HeadingComponent flex="3" {...obj}>
-              {args.children}
+              <Translation id="page-index:page-index-title" />
             </HeadingComponent>
           </Flex>
         ))}