Merge pull request #13205 from ethereum/fix-glossary-tooltip-styles

Fix heading styles in Glossary Definition and Tooltip

Author: pettinarip

.storybook/i18next.ts

@@ -13,6 +13,7 @@ export const baseLocales = {
 export const ns = [
   "common",
   "glossary",
+  "glossary-tooltip",
   "learn-quizzes",
   "page-about",
   "page-index",

src/components/Glossary/GlossaryDefinition/index.tsx

@@ -1,9 +1,9 @@
 import { ComponentProps } from "react"
-import { Box, type HeadingProps, Text } from "@chakra-ui/react"
+import { Box, type HeadingProps, Text, VStack } from "@chakra-ui/react"
 
+import Heading from "@/components/Heading"
 import IdAnchor from "@/components/IdAnchor"
 import InlineLink from "@/components/Link"
-import OldHeading from "@/components/OldHeading"
 import Translation from "@/components/Translation"
 
 import { DEFAULT_GLOSSARY_NS } from "@/lib/constants"
@@ -36,27 +36,17 @@ const GlossaryDefinition = ({
       position: "relative",
     } as HeadingProps
   }
-  const commonHeadingProps = (id?: string): HeadingProps => ({
-    fontWeight: 700,
-    lineHeight: 1.4,
-    ...headingPropsForAnchor(id),
-  })
-  const Heading3 = ({ id, children, ...rest }: HeadingProps) => (
-    <OldHeading as="h3" {...commonHeadingProps(id)} fontSize="2xl" {...rest}>
-      <IdAnchor id={id} />
-      {children}
-    </OldHeading>
-  )
 
   return (
-    <Box textAlign="start">
-      <Heading3 id={term}>
+    <VStack spacing={4} align="stretch" textAlign="start" mb={8}>
+      <Heading size="md" {...headingPropsForAnchor(term)}>
+        <IdAnchor id={term} />
         <Translation
           id={term + "-term"}
           options={options}
           transform={components}
         />
-      </Heading3>
+      </Heading>
       {/**
        * `as="span"` prevents hydration warnings for strings that contain
        * elements that cannot be nested inside `p` tags, like `ul` tags
@@ -70,7 +60,7 @@ const GlossaryDefinition = ({
           transform={components}
         />
       </Text>
-    </Box>
+    </VStack>
   )
 }
 

src/components/Glossary/GlossaryTooltip/GlossaryTooltip.stories.tsx

@@ -1,17 +1,33 @@
+import { Center } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
 import GlossaryTooltipComponent from "."
 
 const meta = {
   title: "Molecules / Overlay Content / Glossary Tooltip",
   component: GlossaryTooltipComponent,
+  args: {
+    termKey: "bridge",
+    children: "bridge",
+  },
+  decorators: [
+    (Story) => (
+      <Center boxSize="md">
+        <Story />
+      </Center>
+    ),
+  ],
 } satisfies Meta<typeof GlossaryTooltipComponent>
 
 export default meta
 
-export const GlossaryTooltip: StoryObj<typeof meta> = {
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {}
+
+// for chromatic story snapshot showing the rendered popover
+export const OnOpen: Story = {
   args: {
-    termKey: "big-endian",
-    children: "big-endian",
+    isOpen: true,
   },
 }

src/components/Glossary/GlossaryTooltip/index.tsx

@@ -1,30 +1,58 @@
 import React, { ReactNode } from "react"
 import { useRouter } from "next/router"
-import { Box, Text } from "@chakra-ui/react"
+import { Box, Text, VStack } from "@chakra-ui/react"
 
-import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
-import Tooltip from "@/components/Tooltip"
+import Heading from "@/components/Heading"
+import InlineLink from "@/components/Link"
+import Tooltip, { type TooltipProps } from "@/components/Tooltip"
+import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { cleanPath } from "@/lib/utils/url"
 
-type GlossaryTooltipProps = {
+type GlossaryTooltipProps = Omit<TooltipProps, "content"> & {
   children: ReactNode
   termKey: string
 }
 
-const GlossaryTooltip = ({ children, termKey }: GlossaryTooltipProps) => {
+const components = {
+  a: InlineLink,
+}
+
+const GlossaryTooltip = ({
+  children,
+  termKey,
+  ...props
+}: GlossaryTooltipProps) => {
   const { asPath } = useRouter()
 
   return (
     <Box as="span" display="inline-block">
       <Tooltip
+        {...props}
         content={
-          <GlossaryDefinition
-            term={termKey}
-            size="sm"
-            options={{ ns: "glossary-tooltip" }}
-          />
+          <VStack spacing={2} align="stretch" textAlign="start">
+            <Heading as="h6">
+              <Translation
+                id={termKey + "-term"}
+                options={{ ns: "glossary-tooltip" }}
+                transform={components}
+              />
+            </Heading>
+            {/**
+             * `as="span"` prevents hydration warnings for strings that contain
+             * elements that cannot be nested inside `p` tags, like `ul` tags
+             * (found in some Glossary definition).
+             * TODO: Develop a better solution to handle this case.
+             */}
+            <Text as="span">
+              <Translation
+                id={termKey + "-definition"}
+                options={{ ns: "glossary-tooltip" }}
+                transform={components}
+              />
+            </Text>
+          </VStack>
         }
         onBeforeOpen={() => {
           trackCustomEvent({