Merge pull request #13214 from TylerAPfledderer/feat/roadmapactioncard-story

feat(RoadmapActionCard): create story

Author: corwintines

src/components/Glossary/GlossaryTooltip/index.tsx

@@ -3,7 +3,6 @@ import { useRouter } from "next/router"
 import { Box, Text, VStack } from "@chakra-ui/react"
 
 import Heading from "@/components/Heading"
-import InlineLink from "@/components/Link"
 import Tooltip, { type TooltipProps } from "@/components/Tooltip"
 import Translation from "@/components/Translation"
 
@@ -15,10 +14,6 @@ type GlossaryTooltipProps = Omit<TooltipProps, "content"> & {
   termKey: string
 }
 
-const components = {
-  a: InlineLink,
-}
-
 const GlossaryTooltip = ({
   children,
   termKey,
@@ -36,7 +31,6 @@ const GlossaryTooltip = ({
               <Translation
                 id={termKey + "-term"}
                 options={{ ns: "glossary-tooltip" }}
-                transform={components}
               />
             </Heading>
             {/**
@@ -49,7 +43,6 @@ const GlossaryTooltip = ({
               <Translation
                 id={termKey + "-definition"}
                 options={{ ns: "glossary-tooltip" }}
-                transform={components}
               />
             </Text>
           </VStack>

src/components/Roadmap/RoadmapActionCard/RoadmapActionCard.stories.tsx

@@ -0,0 +1,43 @@
+import { Box, SimpleGrid } from "@chakra-ui/react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { ContentContainer } from "@/components/MdComponents"
+
+import RoadmapActionCardComponent from "."
+
+const meta = {
+  title: "Molecules / Display Content / RoadmapActionCard",
+  component: RoadmapActionCardComponent,
+  decorators: [
+    (Story) => (
+      <Box maxW="1008px">
+        <ContentContainer>
+          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={8}>
+            <Story />
+          </SimpleGrid>
+        </ContentContainer>
+      </Box>
+    ),
+  ],
+} satisfies Meta<typeof RoadmapActionCardComponent>
+
+export default meta
+
+export const RoadmapActionCard: StoryObj<typeof meta> = {
+  args: {
+    alt: "",
+    to: "/roadmap/scaling",
+    title: "Cheaper transactions",
+    image: "scaling",
+    description:
+      "Rollups are too expensive and rely on centralized components, causing users to place too much trust in their operators. The roadmap includes fixes for both of these problems.",
+    buttonText: "More on reducing fees",
+  },
+  render: (args) => (
+    <>
+      {Array.from({ length: 4 }).map((_, i) => (
+        <RoadmapActionCardComponent key={i} {...args} />
+      ))}
+    </>
+  ),
+}

src/components/Roadmap/RoadmapActionCard.tsx renamed to src/components/Roadmap/RoadmapActionCard/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "next-i18next"
 
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
-import TooltipLink from "./TooltipLink"
+import InlineLink from "./Link"
 
 type TranslationProps = {
   id: string
@@ -16,7 +16,7 @@ type TranslationProps = {
 // Custom components mapping to be used by `htmr` when parsing the translation
 // text
 const defaultTransform = {
-  a: TooltipLink,
+  a: InlineLink,
 }
 
 // Renders the translation string for the given translation key `id`. It