From c23a5ec0af18f90694931208d9082bb189edac09 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 9 Aug 2024 22:57:46 -0400
Subject: [PATCH 01/10] refactor(mdComponents): convert components to ShadCN

---
 src/components/MdComponents.tsx | 175 ++++++++++++++------------------
 src/layouts/Docs.tsx            |  43 +++-----
 src/layouts/Staking.tsx         |  14 +--
 src/layouts/Static.tsx          |  19 ++--
 src/layouts/Tutorial.tsx        |  28 ++---
 src/layouts/Upgrade.tsx         |   6 +-
 tailwind.config.ts              |   2 +-
 7 files changed, 118 insertions(+), 169 deletions(-)

diff --git a/src/components/MdComponents.tsx b/src/components/MdComponents.tsx
index 9affa173a57..2b334243302 100644
--- a/src/components/MdComponents.tsx
+++ b/src/components/MdComponents.tsx
@@ -1,18 +1,11 @@
-import { ComponentProps } from "react"
+import { ComponentProps, type HTMLAttributes } from "react"
 import {
   Badge,
   Box,
   type BoxProps,
-  chakra,
-  Divider as ChakraDivider,
-  Flex,
-  type FlexProps,
-  type HeadingProps,
   ListItem,
   OrderedList,
-  Text,
   UnorderedList,
-  useToken,
 } from "@chakra-ui/react"
 
 import type { ChildOnlyProp } from "@/lib/types"
@@ -23,14 +16,16 @@ import ButtonDropdown, {
 import { ButtonLink } from "@/components/Buttons"
 import Contributors from "@/components/Contributors"
 import MarkdownImage from "@/components/MarkdownImage"
-import OldHeading from "@/components/OldHeading"
 import { mdxTableComponents } from "@/components/Table"
 import TooltipLink from "@/components/TooltipLink"
 import YouTube from "@/components/YouTube"
 
+import { cn } from "@/lib/utils/cn"
+
 import ContributorsQuizBanner from "./Banners/ContributorsQuizBanner"
 import GlossaryTooltip from "./Glossary/GlossaryTooltip"
 import { StandaloneQuizWidget } from "./Quiz/QuizWidget"
+import { Flex } from "./ui/flex"
 import Card from "./Card"
 import DocLink from "./DocLink"
 import Emoji from "./Emoji"
@@ -42,90 +37,79 @@ import IssuesList from "./IssuesList"
 import LocaleDateTime from "./LocaleDateTime"
 import MainArticle from "./MainArticle"
 
-/**
- * Base HTML elements
- */
-const headingPropsForAnchor = (id?: string): HeadingProps => {
-  if (!id) return {}
-  return {
-    scrollMarginTop: 28,
-    id,
-    "data-group": true,
-    position: "relative",
-  } as HeadingProps
-}
-
-export const commonHeadingProps = (id?: string): HeadingProps => ({
-  fontWeight: 700,
-  lineHeight: 1.4,
-  ...headingPropsForAnchor(id),
+export const commonHeadingAttributes = (className: string, id?: string) => ({
+  id,
+  className: cn(
+    "font-bold leading-xs my-8",
+    id && "scroll-mt-28 relative",
+    className
+  ),
+  "data-group": !!id || undefined,
 })
 
-export const Heading1 = ({ children, ...rest }: HeadingProps) => (
-  <OldHeading as="h1" {...commonHeadingProps()} fontSize="2.5rem" {...rest}>
+type HeadingProps = HTMLAttributes<HTMLHeadingElement>
+
+export const Heading1 = ({ children, className, ...rest }: HeadingProps) => (
+  <h1 {...commonHeadingAttributes(cn("text-[2.5rem]", className))} {...rest}>
     {children}
-  </OldHeading>
+  </h1>
 )
 
-export const Heading2 = ({ id, children, ...rest }: HeadingProps) => (
-  <OldHeading
-    as="h2"
-    {...commonHeadingProps(id)}
-    fontSize="2rem"
-    mt={16}
+export const Heading2 = ({
+  id,
+  children,
+  className,
+  ...rest
+}: HeadingProps) => (
+  <h2
+    {...commonHeadingAttributes(cn("text-[2rem] mt-16", className), id)}
     {...rest}
   >
     <IdAnchor id={id} />
     {children}
-  </OldHeading>
+  </h2>
 )
 
-export const Heading3 = ({ id, children, ...rest }: HeadingProps) => (
-  <OldHeading as="h3" {...commonHeadingProps(id)} fontSize="2xl" {...rest}>
+export const Heading3 = ({
+  id,
+  children,
+  className,
+  ...rest
+}: HeadingProps) => (
+  <h3 {...commonHeadingAttributes(cn("text-2xl", className), id)} {...rest}>
     <IdAnchor id={id} />
     {children}
-  </OldHeading>
+  </h3>
 )
 
-export const Heading4 = ({ id, children, ...rest }: HeadingProps) => (
-  <OldHeading
-    as="h4"
-    {...commonHeadingProps(id)}
-    fontSize="xl"
-    fontWeight={600}
+export const Heading4 = ({
+  id,
+  children,
+  className,
+  ...rest
+}: HeadingProps) => (
+  <h4
+    {...commonHeadingAttributes(cn("text-xl font-semibold", className), id)}
     {...rest}
   >
     <IdAnchor id={id} />
     {children}
-  </OldHeading>
+  </h4>
 )
 
 export const Pre = (props: ChildOnlyProp) => (
-  <chakra.pre
-    bg="preBackground"
-    border="1px"
-    borderColor="preBorder"
-    borderRadius="base"
-    maxW="full"
-    overflowX="scroll"
-    p={4}
-    whiteSpace="pre-wrap"
+  <pre
+    className="max-w-full overflow-x-scroll whitespace-pre-wrap rounded border-[1px] border-[rgba(0,0,0,.05)] bg-[#f2f2f2] p-4 dark:border-[hsla(0,0%,100%,.05)] dark:bg-[#191919]"
     {...props}
   />
 )
 
 export const Paragraph = (props: ChildOnlyProp) => (
-  <Text mt={8} mb={4} {...props} />
+  <p className="mb-4 mt-8" {...props} />
 )
 
 export const HR = () => (
-  <ChakraDivider
-    mt={8}
-    mb={4}
-    display="inline-block"
-    position="inherit"
-    bg="border"
-  />
+  <hr className="mb-4 mt-8 inline-block w-full bg-[#e5e5e5] opacity-60 dark:bg-[#333]" />
 )
 
 // All base html element components
@@ -150,53 +134,36 @@ export const htmlElements = {
 /**
  * Custom React components
  */
-export const Page = (props: FlexProps) => (
+export const Page = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
   <Flex
-    flexDirection={{ base: "column", lg: "row" }}
-    justifyContent="space-between"
-    mx="auto"
-    mb={16}
-    pt={{ lg: 16 }}
-    width="full"
-    sx={{ "h2:first-of-type": { mt: { lg: 0 } } }}
+    className={cn(
+      "mx-auto mb-16 w-full flex-col justify-between lg:flex-row lg:pt-16 lg:first-of-type:[&_h2]:mt-0",
+      className
+    )}
     {...props}
   />
 )
 
-export const Title = (props: ChildOnlyProp) => <Heading1 mt={4} {...props} />
+export const Title = (props: ChildOnlyProp) => (
+  <Heading1 className="mt-4" {...props} />
+)
 
 export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
-  const lgBp = useToken("breakpoints", "lg")
-
   return (
-    <Box
-      as={MainArticle}
-      flex={`1 1 ${lgBp}`}
-      position="relative"
-      px={8}
-      pb={8}
+    <MainArticle
+      className="relative flex-[1_1_992px] px-8 pb-8 [&_.citation_p]:text-[#666] dark:[&_.citation_p]:text-[#080808]"
       {...props}
-      sx={{
-        ".citation p": {
-          color: "text200",
-        },
-      }}
     />
   )
 }
 
 export const MobileButton = (props: ChildOnlyProp) => {
-  const borderColor = useToken("colors", "border")
   return (
-    <Box
-      hideFrom="lg"
-      bg="background.base"
-      boxShadow={`0 -1px 0 ${borderColor}`}
-      position="sticky"
-      bottom={0}
-      zIndex={99}
-      p={8}
-      width="full"
+    <div
+      className="sticky bottom-0 z-[99] w-full bg-background p-8 shadow-[0_-1px_0_#e5e5e5] lg:hidden dark:shadow-[0_-1px_0_#333]"
       {...props}
     />
   )
@@ -204,18 +171,24 @@ export const MobileButton = (props: ChildOnlyProp) => {
 
 export const StyledButtonDropdown = ({
   list,
+  className,
   ...rest
-}: FlexProps & Pick<ButtonDropdownProps, "list">) => (
-  <Flex align="flex-end" justify="flex-end" mb={8} {...rest}>
+}: HTMLAttributes<HTMLDivElement> & Pick<ButtonDropdownProps, "list">) => (
+  <Flex className={cn("mb-8 items-end justify-end", className)} {...rest}>
     <ButtonDropdown list={list} w={{ base: "full", lg: "auto" }} minW="240px" />
   </Flex>
 )
 
-export const MobileButtonDropdown = (
-  props: ComponentProps<typeof StyledButtonDropdown>
-) => <StyledButtonDropdown mb={0} {...props} />
+export const MobileButtonDropdown = ({
+  className,
+  ...props
+}: ComponentProps<typeof StyledButtonDropdown>) => (
+  <StyledButtonDropdown className={cn("mb-0", className)} {...props} />
+)
 
-export const Divider = () => <Box my={16} w="10%" h={1} bgColor="homeDivider" />
+export const Divider = () => (
+  <div className="my-16 h-1 w-[10%] bg-[#a4a4f3] dark:bg-[#ffc7a7]" />
+)
 
 // All custom React components
 export const reactComponents = {
diff --git a/src/layouts/Docs.tsx b/src/layouts/Docs.tsx
index 7d6fc32ddf7..7ac9dba2c82 100644
--- a/src/layouts/Docs.tsx
+++ b/src/layouts/Docs.tsx
@@ -1,4 +1,5 @@
 import { useRouter } from "next/router"
+import type { HTMLAttributes } from "react"
 import {
   Badge,
   Box,
@@ -6,7 +7,6 @@ import {
   Divider as ChakraDivider,
   Flex,
   type FlexProps,
-  type HeadingProps,
   type ListProps,
   OrderedList as ChakraOrderedList,
   UnorderedList as ChakraUnorderedList,
@@ -45,6 +45,7 @@ import TableOfContents from "@/components/TableOfContents"
 import Translation from "@/components/Translation"
 import YouTube from "@/components/YouTube"
 
+import { cn } from "@/lib/utils/cn"
 import { getEditPath } from "@/lib/utils/editPath"
 
 const Page = (props: ChildOnlyProp & Pick<FlexProps, "dir">) => (
@@ -80,47 +81,33 @@ const ContentContainer = (props: ContentContainerProps) => (
   />
 )
 
-const baseHeadingStyle: HeadingProps = {
-  fontFamily: "mono",
-  textTransform: "uppercase",
-  fontWeight: "bold",
-  scrollMarginTop: 40,
-}
+const baseHeadingClasses = "font-mono uppercase font-bold scroll-mt-40"
 
-const H1 = (props: HeadingProps) => (
+const H1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading1
-    {...baseHeadingStyle}
-    fontSize={{ base: "2rem", md: "2.5rem" }}
-    mt={{ base: 0, md: 8 }}
-    mb="8"
+    className={cn(baseHeadingClasses, "max-md:mt-0 max-md:text-[2rem]")}
     {...props}
   />
 )
 
-const H2 = (props: HeadingProps) => (
+const H2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading2
-    {...baseHeadingStyle}
-    fontSize="2xl"
-    lineHeight={{ base: 1.2, md: 1.4 }}
-    pb={2}
-    mt={12}
-    borderBottom="1px"
-    borderColor="border"
+    className={cn(
+      baseHeadingClasses,
+      "mt-12 border-b-[1px] border-[#e5e5e5] pb-2 text-2xl max-md:leading-4xs dark:border-[#333]"
+    )}
     {...props}
   />
 )
 
-const baseSubHeadingStyles: HeadingProps = {
-  lineHeight: 1.4,
-  fontWeight: "semibold",
-}
+const baseSubHeadingClasses = "leading-xs font-semibold"
 
-const H3 = (props: HeadingProps) => (
-  <MdHeading3 {...baseSubHeadingStyles} mt={12} {...props} />
+const H3 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading3 className={cn(baseSubHeadingClasses, "mt-12")} {...props} />
 )
 
-const H4 = (props: HeadingProps) => (
-  <MdHeading4 {...baseSubHeadingStyles} {...props} />
+const H4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading4 className={baseSubHeadingClasses} {...props} />
 )
 
 const UnorderedList = (props: ListProps) => (
diff --git a/src/layouts/Staking.tsx b/src/layouts/Staking.tsx
index aabe7c501c2..9236ac5e740 100644
--- a/src/layouts/Staking.tsx
+++ b/src/layouts/Staking.tsx
@@ -1,11 +1,11 @@
 import { useTranslation } from "next-i18next"
+import type { HTMLAttributes } from "react"
 import {
   Box,
   type BoxProps,
   chakra,
   Flex,
   Grid,
-  type HeadingProps,
   SimpleGrid,
   Text,
   UnorderedList,
@@ -43,16 +43,12 @@ import WithdrawalsTabComparison from "@/components/Staking/WithdrawalsTabCompari
 import TableOfContents from "@/components/TableOfContents"
 import UpgradeStatus from "@/components/UpgradeStatus"
 
-const Heading1 = (props: HeadingProps) => (
-  <MdHeading1 fontSize={{ base: "2.5rem", md: "5xl" }} {...props} />
+const Heading1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading1 className="md:text-5xl" {...props} />
 )
 
-const Heading4 = (props: HeadingProps) => (
-  <MdHeading4
-    fontSize={{ base: "md", md: "xl" }}
-    fontWeight="semibold"
-    {...props}
-  />
+const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading4 className="font-semibold max-md:text-md" {...props} />
 )
 
 const Paragraph = (props: ChildOnlyProp) => (
diff --git a/src/layouts/Static.tsx b/src/layouts/Static.tsx
index b111623d0be..870f5776310 100644
--- a/src/layouts/Static.tsx
+++ b/src/layouts/Static.tsx
@@ -1,5 +1,6 @@
 import { useRouter } from "next/router"
-import { Box, Flex, type HeadingProps, Icon } from "@chakra-ui/react"
+import type { HTMLAttributes } from "react"
+import { Box, Flex, Icon } from "@chakra-ui/react"
 
 import type { ChildOnlyProp, Lang } from "@/lib/types"
 import type { MdPageContent, StaticFrontmatter } from "@/lib/interfaces"
@@ -38,17 +39,17 @@ import { isLangRightToLeft } from "@/lib/utils/translations"
 
 import GuideHeroImage from "@/public/images/heroes/guides-hub-hero.jpg"
 
-const Heading1 = (props: HeadingProps) => (
-  <MdHeading1 fontSize={{ base: "2.5rem", md: "5xl" }} {...props} />
+const Heading1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading1 className="md:text-5xl" {...props} />
 )
-const Heading2 = (props: HeadingProps) => (
-  <MdHeading2 fontSize={{ base: "2xl", md: "2rem" }} {...props} />
+const Heading2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading2 className="max-md:text-2xl" {...props} />
 )
-const Heading3 = (props: HeadingProps) => (
-  <MdHeading3 fontSize={{ base: "xl", md: "2xl" }} {...props} />
+const Heading3 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading3 className="max-md:text-xl" {...props} />
 )
-const Heading4 = (props: HeadingProps) => (
-  <MdHeading4 fontSize={{ base: "md", md: "xl" }} {...props} />
+const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
+  <MdHeading4 className="max-md:text-md" {...props} />
 )
 
 // Static layout components
diff --git a/src/layouts/Tutorial.tsx b/src/layouts/Tutorial.tsx
index 4c5a54a0a95..33b20f6f21a 100644
--- a/src/layouts/Tutorial.tsx
+++ b/src/layouts/Tutorial.tsx
@@ -1,11 +1,11 @@
 import { useRouter } from "next/router"
+import type { HTMLAttributes } from "react"
 import {
   Badge,
   Box,
   type BoxProps,
   Divider,
   Flex,
-  type HeadingProps,
   Kbd,
   Text,
   type TextProps,
@@ -65,40 +65,30 @@ const ContentContainer = (props: ContentContainerProps) => {
   )
 }
 
-const Heading1 = (props: HeadingProps) => (
+const Heading1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading1
-    fontSize={{ base: "1.75rem", lg: "2.5rem" }}
-    fontFamily="monospace"
-    textTransform="uppercase"
+    className="my-8 font-monospace uppercase max-lg:text-[1.75rem]"
     {...props}
   />
 )
 
-const Heading2 = (props: HeadingProps) => (
+const Heading2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading2
-    fontSize={{ base: "2xl", md: "2rem" }}
-    fontFamily="monospace"
-    textTransform="uppercase"
-    scrollMarginTop={40}
-    mt={12}
+    className="mt-12 scroll-mt-40 font-monospace uppercase max-md:text-2xl"
     {...props}
   />
 )
 
-const Heading3 = (props: HeadingProps) => (
+const Heading3 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading3
-    fontWeight={{ base: "semibold" }}
-    fontSize={{ base: "1rem", md: "1.5rem" }}
-    scrollMarginTop={40}
+    className="scroll-mt-40 font-semibold max-md:text-md"
     {...props}
   />
 )
 
-const Heading4 = (props: HeadingProps) => (
+const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading4
-    fontWeight={{ base: "semibold" }}
-    fontSize={{ base: "1rem", md: "1.25rem" }}
-    scrollMarginTop={40}
+    className="scroll-mt-40 font-semibold max-md:text-md"
     {...props}
   />
 )
diff --git a/src/layouts/Upgrade.tsx b/src/layouts/Upgrade.tsx
index 8978dc5f8e3..c227863f5e3 100644
--- a/src/layouts/Upgrade.tsx
+++ b/src/layouts/Upgrade.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from "next-i18next"
+import type { HTMLAttributes } from "react"
 import {
   Box,
   type BoxProps,
-  type FlexProps,
   List,
   ListItem,
   Text,
@@ -29,7 +29,9 @@ import UpgradeStatus from "@/components/UpgradeStatus"
 
 import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
 
-const Page = (props: FlexProps) => <MdPage sx={{}} {...props} />
+const Page = (props: HTMLAttributes<HTMLDivElement>) => (
+  <MdPage className="lg:first-of-type:[&_h2]:mt-16" {...props} />
+)
 
 type ContainerProps = Pick<BoxProps, "children" | "dir">
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 17d5794bf52..4685492f175 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import type { Config } from "tailwindcss"
 import plugin from "tailwindcss/plugin"
 
 const config = {
-  darkMode: ["class"],
+  darkMode: ["selector", "[data-theme=dark]"],
   content: [
     "./src/**/*.{ts,tsx}",
     // TODO: remove after migration

From 20fc86e0e5a169f800225efa4826f846ab4e223d Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sun, 18 Aug 2024 22:40:32 -0400
Subject: [PATCH 02/10] refactor(MdComponents): update imports

---
 .../index.tsx}                                | 40 ++++++++-----------
 1 file changed, 17 insertions(+), 23 deletions(-)
 rename src/components/{MdComponents.tsx => MdComponents/index.tsx} (85%)

diff --git a/src/components/MdComponents.tsx b/src/components/MdComponents/index.tsx
similarity index 85%
rename from src/components/MdComponents.tsx
rename to src/components/MdComponents/index.tsx
index 2b334243302..1b4669c8e8e 100644
--- a/src/components/MdComponents.tsx
+++ b/src/components/MdComponents/index.tsx
@@ -1,19 +1,11 @@
 import { ComponentProps, type HTMLAttributes } from "react"
-import {
-  Badge,
-  Box,
-  type BoxProps,
-  ListItem,
-  OrderedList,
-  UnorderedList,
-} from "@chakra-ui/react"
+import { Badge, Box, type BoxProps } from "@chakra-ui/react"
 
 import type { ChildOnlyProp } from "@/lib/types"
 
 import ButtonDropdown, {
   type ButtonDropdownProps,
 } from "@/components/ButtonDropdown"
-import { ButtonLink } from "@/components/Buttons"
 import Contributors from "@/components/Contributors"
 import MarkdownImage from "@/components/MarkdownImage"
 import { mdxTableComponents } from "@/components/Table"
@@ -22,20 +14,22 @@ import YouTube from "@/components/YouTube"
 
 import { cn } from "@/lib/utils/cn"
 
-import ContributorsQuizBanner from "./Banners/ContributorsQuizBanner"
-import GlossaryTooltip from "./Glossary/GlossaryTooltip"
-import { StandaloneQuizWidget } from "./Quiz/QuizWidget"
-import { Flex } from "./ui/flex"
-import Card from "./Card"
-import DocLink from "./DocLink"
-import Emoji from "./Emoji"
-import ExpandableCard from "./ExpandableCard"
-import FeaturedText from "./FeaturedText"
-import IdAnchor from "./IdAnchor"
-import InfoBanner from "./InfoBanner"
-import IssuesList from "./IssuesList"
-import LocaleDateTime from "./LocaleDateTime"
-import MainArticle from "./MainArticle"
+import ContributorsQuizBanner from "../Banners/ContributorsQuizBanner"
+import Card from "../Card"
+import DocLink from "../DocLink"
+import Emoji from "../Emoji"
+import ExpandableCard from "../ExpandableCard"
+import FeaturedText from "../FeaturedText"
+import GlossaryTooltip from "../Glossary/GlossaryTooltip"
+import IdAnchor from "../IdAnchor"
+import InfoBanner from "../InfoBanner"
+import IssuesList from "../IssuesList"
+import LocaleDateTime from "../LocaleDateTime"
+import MainArticle from "../MainArticle"
+import { StandaloneQuizWidget } from "../Quiz/QuizWidget"
+import { ButtonLink } from "../ui/buttons/Button"
+import { Flex } from "../ui/flex"
+import { ListItem, OrderedList, UnorderedList } from "../ui/list"
 
 export const commonHeadingAttributes = (className: string, id?: string) => ({
   id,

From 5081b56dcd5c08686e0aff314ec1e230c7c2a1bf Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Mon, 19 Aug 2024 19:36:02 -0400
Subject: [PATCH 03/10] feat(MdComponents): create story set

---
 .../MdComponents/MdComponents.stories.tsx     | 129 ++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 src/components/MdComponents/MdComponents.stories.tsx

diff --git a/src/components/MdComponents/MdComponents.stories.tsx b/src/components/MdComponents/MdComponents.stories.tsx
new file mode 100644
index 00000000000..9d101a7334d
--- /dev/null
+++ b/src/components/MdComponents/MdComponents.stories.tsx
@@ -0,0 +1,129 @@
+import pickBy from "lodash/pickBy"
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import type { List as ButtonDropdownList } from "@/components/ButtonDropdown"
+
+import { viewportModes } from "../../../.storybook/modes"
+
+import MdComponentSet from "."
+
+const meta = {
+  title: "Molecules / Display Content / MdComponents",
+  parameters: {
+    layout: "none",
+    chromatic: {
+      modes: pickBy(viewportModes, (args) =>
+        ["md", "lg"].includes(args.viewport)
+      ),
+    },
+  },
+} satisfies Meta
+
+export default meta
+
+const {
+  ContentContainer,
+  h1: Heading1,
+  h2: Heading2,
+  h3: Heading3,
+  h4: Heading4,
+  Title,
+  p: Paragraph,
+  FeaturedText,
+  Divider,
+  hr: HR,
+  pre: Pre,
+  Page,
+  MobileButton,
+  MobileButtonDropdown,
+} = MdComponentSet
+
+const Para = () => (
+  <Paragraph>
+    Ether (also known by its ticker symbol, ETH) is the native currency
+    transacted on Ethereum. ETH is needed to pay for usage of the Ethereum
+    network (in the form of transaction fees). ETH is also used to secure the
+    network with staking. When people talk about the price of Ethereum,
+    they&apos;re referring to ETH the asset.
+  </Paragraph>
+)
+
+export const MdComponents: StoryObj = {
+  render: () => (
+    <div className="mx-auto max-w-screen-lg">
+      <Page>
+        <ContentContainer>
+          <MobileButton>
+            <MobileButtonDropdown list={roadmapDropdownLinks} />
+          </MobileButton>
+          <Heading1>Heading1</Heading1>
+          <Para />
+          <Heading2>Heading2</Heading2>
+          <Para />
+          <Heading3>Heading3</Heading3>
+          <Para />
+          <Heading4>Heading4</Heading4>
+          <Para />
+          <Title>Title</Title>
+          <Para />
+          <Divider />
+          <Pre>Lots of coding here</Pre>
+          <HR />
+          <FeaturedText>Feature Text</FeaturedText>
+        </ContentContainer>
+      </Page>
+    </div>
+  ),
+}
+
+const roadmapDropdownLinks: ButtonDropdownList = {
+  text: "nav-roadmap-options",
+  ariaLabel: "nav-roadmap-options-alt",
+  items: [
+    {
+      text: "nav-roadmap-home",
+      href: "/roadmap/",
+      matomo: {
+        eventCategory: `Roadmap dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap home",
+      },
+    },
+    {
+      text: "nav-roadmap-security",
+      href: "/roadmap/security",
+      matomo: {
+        eventCategory: `Roadmap security dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap security",
+      },
+    },
+    {
+      text: "nav-roadmap-scaling",
+      href: "/roadmap/scaling",
+      matomo: {
+        eventCategory: `Roadmap scaling dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap scaling home",
+      },
+    },
+    {
+      text: "nav-roadmap-user-experience",
+      href: "/roadmap/user-experience/",
+      matomo: {
+        eventCategory: `Roadmap user experience dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap user experience home",
+      },
+    },
+    {
+      text: "nav-roadmap-future-proofing",
+      href: "/roadmap/future-proofing",
+      matomo: {
+        eventCategory: `Roadmap future-proofing dropdown`,
+        eventAction: `Clicked`,
+        eventName: "clicked roadmap future-proofing home",
+      },
+    },
+  ],
+}

From 7ae010e802486b182a2c2d422a2da83962b83fbd Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 6 Sep 2024 22:11:03 -0400
Subject: [PATCH 04/10] refactor(layouts/Tutorial): remove margin declaration
 for Heading1

---
 src/layouts/Tutorial.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Tutorial.tsx b/src/layouts/Tutorial.tsx
index 33b20f6f21a..aa599d44653 100644
--- a/src/layouts/Tutorial.tsx
+++ b/src/layouts/Tutorial.tsx
@@ -67,7 +67,7 @@ const ContentContainer = (props: ContentContainerProps) => {
 
 const Heading1 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading1
-    className="my-8 font-monospace uppercase max-lg:text-[1.75rem]"
+    className="font-monospace uppercase max-lg:text-[1.75rem]"
     {...props}
   />
 )

From 2c8988cc5138309b3f5d76844e924b9b8d89eecc Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 6 Sep 2024 22:11:49 -0400
Subject: [PATCH 05/10] refactor(layouts/Docs): simplify border definition for
 H2

---
 src/layouts/Docs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Docs.tsx b/src/layouts/Docs.tsx
index 7ac9dba2c82..925b60310c8 100644
--- a/src/layouts/Docs.tsx
+++ b/src/layouts/Docs.tsx
@@ -94,7 +94,7 @@ const H2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading2
     className={cn(
       baseHeadingClasses,
-      "mt-12 border-b-[1px] border-[#e5e5e5] pb-2 text-2xl max-md:leading-4xs dark:border-[#333]"
+      "mt-12 border-b border-[#e5e5e5] pb-2 text-2xl max-md:leading-4xs dark:border-[#333]"
     )}
     {...props}
   />

From fbcee749331c9af26d9fee648791112991e135de Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 6 Sep 2024 22:13:09 -0400
Subject: [PATCH 06/10] refactor(MdComponents): update background color for
 `Divider`

---
 src/components/MdComponents/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdComponents/index.tsx b/src/components/MdComponents/index.tsx
index 1b4669c8e8e..1dbf1c9aeca 100644
--- a/src/components/MdComponents/index.tsx
+++ b/src/components/MdComponents/index.tsx
@@ -181,7 +181,7 @@ export const MobileButtonDropdown = ({
 )
 
 export const Divider = () => (
-  <div className="my-16 h-1 w-[10%] bg-[#a4a4f3] dark:bg-[#ffc7a7]" />
+  <div className="my-16 h-1 w-[10%] bg-primary-high-contrast" />
 )
 
 // All custom React components

From 32bc6c08b16415bbca1b546cb5e1f76008f25b45 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Mon, 9 Sep 2024 11:00:58 -0400
Subject: [PATCH 07/10] fix(MdComponents): update top margin for Heading3

---
 src/components/MdComponents/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/MdComponents/index.tsx b/src/components/MdComponents/index.tsx
index 1dbf1c9aeca..f3664459a58 100644
--- a/src/components/MdComponents/index.tsx
+++ b/src/components/MdComponents/index.tsx
@@ -70,7 +70,10 @@ export const Heading3 = ({
   className,
   ...rest
 }: HeadingProps) => (
-  <h3 {...commonHeadingAttributes(cn("text-2xl", className), id)} {...rest}>
+  <h3
+    {...commonHeadingAttributes(cn("text-2xl mt-10", className), id)}
+    {...rest}
+  >
     <IdAnchor id={id} />
     {children}
   </h3>

From 50a336a3574f4ee77416779af4c15986267ce983 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Mon, 9 Sep 2024 11:16:36 -0400
Subject: [PATCH 08/10] style(MdComponents): update border and background
 styles for Pre component

---
 src/components/MdComponents/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdComponents/index.tsx b/src/components/MdComponents/index.tsx
index f3664459a58..ec7c8fdd079 100644
--- a/src/components/MdComponents/index.tsx
+++ b/src/components/MdComponents/index.tsx
@@ -96,7 +96,7 @@ export const Heading4 = ({
 
 export const Pre = (props: ChildOnlyProp) => (
   <pre
-    className="max-w-full overflow-x-scroll whitespace-pre-wrap rounded border-[1px] border-[rgba(0,0,0,.05)] bg-[#f2f2f2] p-4 dark:border-[hsla(0,0%,100%,.05)] dark:bg-[#191919]"
+    className="max-w-full overflow-x-scroll whitespace-pre-wrap rounded border bg-background-highlight p-4"
     {...props}
   />
 )

From 5ee4ebdaa9960b8c793be8222d15442f3663fc21 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 12 Sep 2024 09:42:04 +0200
Subject: [PATCH 09/10] use theme defined z-index values

---
 src/components/MdComponents/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MdComponents/index.tsx b/src/components/MdComponents/index.tsx
index ec7c8fdd079..2ae07cd4898 100644
--- a/src/components/MdComponents/index.tsx
+++ b/src/components/MdComponents/index.tsx
@@ -160,7 +160,7 @@ export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
 export const MobileButton = (props: ChildOnlyProp) => {
   return (
     <div
-      className="sticky bottom-0 z-[99] w-full bg-background p-8 shadow-[0_-1px_0_#e5e5e5] lg:hidden dark:shadow-[0_-1px_0_#333]"
+      className="sticky bottom-0 z-sticky w-full bg-background p-8 shadow-[0_-1px_0_#e5e5e5] lg:hidden dark:shadow-[0_-1px_0_#333]"
       {...props}
     />
   )

From 8bfc8ff950670ba44e5611f7ed4fe94c221146a4 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 12 Sep 2024 10:01:19 +0200
Subject: [PATCH 10/10] replace custom values with ds tokens

---
 src/components/MdComponents/index.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/MdComponents/index.tsx b/src/components/MdComponents/index.tsx
index 2ae07cd4898..a58550e47c5 100644
--- a/src/components/MdComponents/index.tsx
+++ b/src/components/MdComponents/index.tsx
@@ -106,7 +106,7 @@ export const Paragraph = (props: ChildOnlyProp) => (
 )
 
 export const HR = () => (
-  <hr className="mb-4 mt-8 inline-block w-full bg-[#e5e5e5] opacity-60 dark:bg-[#333]" />
+  <hr className="mb-4 mt-8 inline-block w-full border-body-medium opacity-60" />
 )
 
 // All base html element components
@@ -150,17 +150,14 @@ export const Title = (props: ChildOnlyProp) => (
 
 export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
   return (
-    <MainArticle
-      className="relative flex-[1_1_992px] px-8 pb-8 [&_.citation_p]:text-[#666] dark:[&_.citation_p]:text-[#080808]"
-      {...props}
-    />
+    <MainArticle className="relative flex-[1_1_992px] px-8 pb-8" {...props} />
   )
 }
 
 export const MobileButton = (props: ChildOnlyProp) => {
   return (
     <div
-      className="sticky bottom-0 z-sticky w-full bg-background p-8 shadow-[0_-1px_0_#e5e5e5] lg:hidden dark:shadow-[0_-1px_0_#333]"
+      className="sticky bottom-0 z-sticky w-full bg-background p-8 shadow-md lg:hidden"
       {...props}
     />
   )