From 8c4d770cafc05308acb7d3b0888a2c1aa6cb3513 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 12 Jun 2024 19:38:50 +0200
Subject: [PATCH 1/9] initial toc for desktop migration

---
 src/components/TableOfContents/ItemsList.tsx  | 15 +--
 .../TableOfContents.stories.tsx               | 95 +++++++++++++++++++
 .../TableOfContents/TableOfContentsLink.tsx   | 36 +++----
 src/components/TableOfContents/index.tsx      |  2 +-
 src/lib/utils/toc.ts                          |  6 +-
 5 files changed, 114 insertions(+), 40 deletions(-)
 create mode 100644 src/components/TableOfContents/TableOfContents.stories.tsx

diff --git a/src/components/TableOfContents/ItemsList.tsx b/src/components/TableOfContents/ItemsList.tsx
index 31ee666204f..8ac7e4c0a40 100644
--- a/src/components/TableOfContents/ItemsList.tsx
+++ b/src/components/TableOfContents/ItemsList.tsx
@@ -15,11 +15,14 @@ const ItemsList = ({
   items,
   depth,
   maxDepth,
-  activeHash,
+  // activeHash,
   ...rest
 }: ItemsListProps) => {
   if (depth > maxDepth) return null
 
+  // FIXME: TEST
+  const activeHash = "#web3"
+
   return (
     <>
       {items.map((item, index) => {
@@ -28,15 +31,7 @@ const ItemsList = ({
           <ListItem key={index} m={0} {...rest}>
             <ToCLink depth={depth} item={item} activeHash={activeHash} />
             {items && (
-              <List
-                key={title}
-                fontSize="sm"
-                lineHeight={1.6}
-                fontWeight={400}
-                ps={4}
-                pe={1}
-                m={0}
-              >
+              <List key={title} fontSize="sm" ps={2} m={0} mt="2" spacing="2">
                 <ItemsList
                   items={items}
                   depth={depth + 1}
diff --git a/src/components/TableOfContents/TableOfContents.stories.tsx b/src/components/TableOfContents/TableOfContents.stories.tsx
new file mode 100644
index 00000000000..ec706509e01
--- /dev/null
+++ b/src/components/TableOfContents/TableOfContents.stories.tsx
@@ -0,0 +1,95 @@
+import * as React from "react"
+import { Stack } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import { ToCItem, TocNodeType } from "@/lib/types"
+
+import TableOfContents from "./"
+
+const tocItems: ToCItem[] = [
+  {
+    title: "The early Web",
+    url: "#early-internet",
+    items: [
+      { title: "Web 1.0: Read-Only (1990-2004)", url: "#web1" },
+      { title: "Web 2.0: Read-Write (2004-now)", url: "#web2" },
+    ],
+  },
+  {
+    title: "Web 3.0: Read-Write-Own",
+    url: "#web3",
+    items: [
+      {
+        title: "What is Web3?",
+        url: "#what-is-web3",
+        items: [{ title: "Core ideas of Web3", url: "#core-ideas" }],
+      },
+      {
+        title: "Why is Web3 important?",
+        url: "#why-is-web3-important",
+        items: [
+          { title: "Ownership", url: "#ownership" },
+          {
+            title: "Censorship resistance",
+            url: "#censorship-resistance",
+          },
+          {
+            title: "Decentralized autonomous organizations (DAOs)",
+            url: "#daos",
+          },
+        ],
+      },
+      { title: "Identity", url: "#identity" },
+      {
+        title: "Native payments",
+        url: "#native-payments",
+        items: [
+          { title: "Cryptocurrency", url: "#cryptocurrency" },
+          { title: "Micropayments", url: "#micropayments" },
+          { title: "Tokenization", url: "#tokenization" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Web3 limitations",
+    url: "#web3-limitations",
+    items: [
+      { title: "Accessibility", url: "#accessibility" },
+      { title: "User experience", url: "#user-experience" },
+      { title: "Education", url: "#education" },
+      {
+        title: "Centralized infrastructure",
+        url: "#centralized-infrastructure",
+      },
+    ],
+  },
+  {
+    title: "A decentralized future",
+    url: "#decentralized-future",
+  },
+  { title: "How can I get involved", url: "#get-involved" },
+  { title: "Further reading", url: "#further-reading" },
+]
+
+const meta = {
+  title: "Molecules / Navigation / TableOfContents",
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <Stack minH="100vh" position="relative">
+        <Story />
+      </Stack>
+    ),
+  ],
+} satisfies Meta<typeof TableOfContents>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <TableOfContents slug="#web3" items={tocItems} maxDepth={2} />,
+}
diff --git a/src/components/TableOfContents/TableOfContentsLink.tsx b/src/components/TableOfContents/TableOfContentsLink.tsx
index 8b7d6d3ecc2..6cbf4cc6fe5 100644
--- a/src/components/TableOfContents/TableOfContentsLink.tsx
+++ b/src/components/TableOfContents/TableOfContentsLink.tsx
@@ -29,16 +29,20 @@ const Link = ({
   const $dotBg = cssVar("dot-bg")
 
   const hoverOrActiveStyle: SystemStyleObject = {
-    color: "primary.base",
+    color: $dotBg.reference,
     _after: {
       content: `""`,
-      background: $dotBg.reference,
+      backgroundColor: "background.base",
       border: "1px",
-      borderColor: "primary.base",
+      borderColor: $dotBg.reference,
       borderRadius: "50%",
       boxSize: 2,
       position: "absolute",
-      insetInlineStart: "-1.29rem",
+      // 16px is the initial list padding
+      // 8px is the padding for each nested list
+      // 4px is half of the width of the dot
+      // 1px for the border
+      insetInlineStart: `calc(-16px - 8px * ${depth} - 4px - 1px)`,
       top: "50%",
       mt: -1,
     },
@@ -51,35 +55,17 @@ const Link = ({
       textDecoration="none"
       display="inline-block"
       position="relative"
-      color="textTableOfContents"
-      fontWeight="normal"
-      mb="0.5rem !important"
+      color="body.medium"
       width={{ base: "100%", lg: "auto" }}
       _hover={{
         ...hoverOrActiveStyle,
       }}
       sx={{
-        [$dotBg.variable]: "colors.background",
+        [$dotBg.variable]: "var(--eth-colors-primary-hover)",
         "&.active": {
-          [$dotBg.variable]: "colors.primary",
+          [$dotBg.variable]: "var(--eth-colors-primary-visited)",
           ...hoverOrActiveStyle,
         },
-        "&.nested": {
-          _before: {
-            content: `"⌞"`,
-            opacity: 0.5,
-            display: "inline-flex",
-            position: "absolute",
-            insetInlineStart: -3.5,
-            top: -1,
-            transform: flipForRtl,
-          },
-          "&.active, &:hover": {
-            _after: {
-              insetInlineStart: "-2.29rem",
-            },
-          },
-        },
       }}
     >
       {title}
diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
index 93ef59abda3..776e1317aad 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/TableOfContents/index.tsx
@@ -96,7 +96,7 @@ const TableOfContents = ({
           <Box mb={2} textTransform="uppercase">
             {t("on-this-page")}
           </Box>
-          <List m={0}>
+          <List m={0} spacing="2">
             <ItemsList
               items={items}
               depth={0}
diff --git a/src/lib/utils/toc.ts b/src/lib/utils/toc.ts
index b38a7740ace..c5093400331 100644
--- a/src/lib/utils/toc.ts
+++ b/src/lib/utils/toc.ts
@@ -31,16 +31,14 @@ export const parseHeadingId = (heading: string): string => {
  */
 export const outerListProps: ListProps = {
   borderStart: "1px solid",
-  borderStartColor: "dropdownBorder",
+  borderStartColor: "body.medium",
   borderTop: 0,
   fontSize: "sm",
-  lineHeight: 1.6,
-  fontWeight: 400,
+  spacing: "2",
   m: 0,
   mt: 2,
   mb: 2,
   ps: 4,
-  pe: 1,
   pt: 0,
   sx: {
     // TODO: Flip to object syntax with `lg` token after completion of Chakra migration

From 64a8fe18b35db8653c3bc4576d7df937fe420c30 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 13 Jun 2024 12:36:58 +0200
Subject: [PATCH 2/9] fix spacing

---
 src/components/TableOfContents/TableOfContentsLink.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/TableOfContents/TableOfContentsLink.tsx b/src/components/TableOfContents/TableOfContentsLink.tsx
index 6cbf4cc6fe5..6c1d353ce28 100644
--- a/src/components/TableOfContents/TableOfContentsLink.tsx
+++ b/src/components/TableOfContents/TableOfContentsLink.tsx
@@ -60,6 +60,8 @@ const Link = ({
       _hover={{
         ...hoverOrActiveStyle,
       }}
+      p={2}
+      ps={0}
       sx={{
         [$dotBg.variable]: "var(--eth-colors-primary-hover)",
         "&.active": {

From 0139c8458efad5374bc4d29ee03f4878c25a14c1 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 13 Jun 2024 12:37:50 +0200
Subject: [PATCH 3/9] cleanup

---
 src/components/TableOfContents/TableOfContentsLink.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/TableOfContents/TableOfContentsLink.tsx b/src/components/TableOfContents/TableOfContentsLink.tsx
index 6c1d353ce28..12c2090be00 100644
--- a/src/components/TableOfContents/TableOfContentsLink.tsx
+++ b/src/components/TableOfContents/TableOfContentsLink.tsx
@@ -4,8 +4,6 @@ import type { ToCItem } from "@/lib/types"
 
 import { BaseLink } from "@/components/Link"
 
-import { useRtlFlip } from "@/hooks/useRtlFlip"
-
 export type TableOfContentsLinkProps = {
   depth: number
   item: ToCItem
@@ -17,7 +15,6 @@ const Link = ({
   item: { title, url },
   activeHash,
 }: TableOfContentsLinkProps) => {
-  const { flipForRtl } = useRtlFlip()
   const isActive = activeHash === url
   const isNested = depth === 2
 

From ca83f2be91720b7c437497ed3ae13b65ee8913de Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 13 Jun 2024 12:48:52 +0200
Subject: [PATCH 4/9] tweak styles from parent wrapper component

---
 src/components/TableOfContents/index.tsx | 51 +++++++++++-------------
 1 file changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
index 776e1317aad..dcc732b471a 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/TableOfContents/index.tsx
@@ -4,9 +4,9 @@ import {
   Box,
   BoxProps,
   calc,
+  Flex,
   Icon,
   List,
-  ListItem,
   useToken,
 } from "@chakra-ui/react"
 
@@ -67,7 +67,10 @@ const TableOfContents = ({
   }
 
   return (
-    <Box
+    <Flex
+      direction="column"
+      align="start"
+      gap={4}
       hideBelow={lgBp}
       as="aside"
       position="sticky"
@@ -80,33 +83,25 @@ const TableOfContents = ({
       overflowY="auto"
       {...rest}
     >
-      <List {...outerListProps}>
-        {!hideEditButton && editPath && (
-          <ListItem mb={2}>
-            <ButtonLink
-              leftIcon={<Icon as={FaGithub} />}
-              href={editPath}
-              variant="outline"
-            >
-              {t("edit-page")}
-            </ButtonLink>
-          </ListItem>
-        )}
-        <ListItem>
-          <Box mb={2} textTransform="uppercase">
-            {t("on-this-page")}
-          </Box>
-          <List m={0} spacing="2">
-            <ItemsList
-              items={items}
-              depth={0}
-              maxDepth={maxDepth ? maxDepth : 1}
-              activeHash={activeHash}
-            />
-          </List>
-        </ListItem>
+      {!hideEditButton && editPath && (
+        <ButtonLink
+          leftIcon={<Icon as={FaGithub} />}
+          href={editPath}
+          variant="outline"
+        >
+          {t("edit-page")}
+        </ButtonLink>
+      )}
+      <Box textTransform="uppercase">{t("on-this-page")}</Box>
+      <List m={0} spacing="2" {...outerListProps}>
+        <ItemsList
+          items={items}
+          depth={0}
+          maxDepth={maxDepth ? maxDepth : 1}
+          activeHash={activeHash}
+        />
       </List>
-    </Box>
+    </Flex>
   )
 }
 

From 62970bf88118de728a25fcaab06b7c5013b1a13a Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 13 Jun 2024 12:50:16 +0200
Subject: [PATCH 5/9] remove test for active hash

---
 src/components/TableOfContents/ItemsList.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/TableOfContents/ItemsList.tsx b/src/components/TableOfContents/ItemsList.tsx
index 8ac7e4c0a40..a8cd6942876 100644
--- a/src/components/TableOfContents/ItemsList.tsx
+++ b/src/components/TableOfContents/ItemsList.tsx
@@ -15,14 +15,11 @@ const ItemsList = ({
   items,
   depth,
   maxDepth,
-  // activeHash,
+  activeHash,
   ...rest
 }: ItemsListProps) => {
   if (depth > maxDepth) return null
 
-  // FIXME: TEST
-  const activeHash = "#web3"
-
   return (
     <>
       {items.map((item, index) => {

From 231cf72d40e12236074def4d196ef62ffab643ac Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 13 Jun 2024 12:53:47 +0200
Subject: [PATCH 6/9] refactor style props

---
 src/components/TableOfContents/ItemsList.tsx           | 2 +-
 src/components/TableOfContents/TableOfContentsLink.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TableOfContents/ItemsList.tsx b/src/components/TableOfContents/ItemsList.tsx
index a8cd6942876..6368a9c3e5e 100644
--- a/src/components/TableOfContents/ItemsList.tsx
+++ b/src/components/TableOfContents/ItemsList.tsx
@@ -28,7 +28,7 @@ const ItemsList = ({
           <ListItem key={index} m={0} {...rest}>
             <ToCLink depth={depth} item={item} activeHash={activeHash} />
             {items && (
-              <List key={title} fontSize="sm" ps={2} m={0} mt="2" spacing="2">
+              <List key={title} fontSize="sm" ps="2" m="0" mt="2" spacing="2">
                 <ItemsList
                   items={items}
                   depth={depth + 1}
diff --git a/src/components/TableOfContents/TableOfContentsLink.tsx b/src/components/TableOfContents/TableOfContentsLink.tsx
index 12c2090be00..96230cf8a59 100644
--- a/src/components/TableOfContents/TableOfContentsLink.tsx
+++ b/src/components/TableOfContents/TableOfContentsLink.tsx
@@ -57,8 +57,8 @@ const Link = ({
       _hover={{
         ...hoverOrActiveStyle,
       }}
-      p={2}
-      ps={0}
+      p="2"
+      ps="0"
       sx={{
         [$dotBg.variable]: "var(--eth-colors-primary-hover)",
         "&.active": {

From 0ddd3b8922c627b4f41f5cb8c076e4a4ee675285 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 19 Jun 2024 09:24:27 +0200
Subject: [PATCH 7/9] use literal inset-inline-start css prop since
 insetInlineStart style prop is not working fine with rtl

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

diff --git a/src/components/TableOfContents/TableOfContentsLink.tsx b/src/components/TableOfContents/TableOfContentsLink.tsx
index 96230cf8a59..8568e64ba7e 100644
--- a/src/components/TableOfContents/TableOfContentsLink.tsx
+++ b/src/components/TableOfContents/TableOfContentsLink.tsx
@@ -39,7 +39,7 @@ const Link = ({
       // 8px is the padding for each nested list
       // 4px is half of the width of the dot
       // 1px for the border
-      insetInlineStart: `calc(-16px - 8px * ${depth} - 4px - 1px)`,
+      "inset-inline-start": `calc(-16px - 8px * ${depth} - 4px - 1px)`,
       top: "50%",
       mt: -1,
     },

From 528acdffa67a742613d3b8510aef885d382c66c5 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 18 Jul 2024 09:02:25 +0200
Subject: [PATCH 8/9] fix: text color

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

diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
index a3778ae001a..de3eced42e0 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/TableOfContents/index.tsx
@@ -90,7 +90,9 @@ const TableOfContents = ({
           {t("edit-page")}
         </ButtonLink>
       )}
-      <Box textTransform="uppercase">{t("on-this-page")}</Box>
+      <Box textTransform="uppercase" color="body.medium">
+        {t("on-this-page")}
+      </Box>
       <List m={0} spacing="2" {...outerListProps}>
         <ItemsList
           items={items}

From 8030741c78a50a65d970f6cb82c129f62f31b6b0 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 6 Aug 2024 13:37:30 -0700
Subject: [PATCH 9/9] chore: rm slug from ToC props in story

---
 src/components/TableOfContents/TableOfContents.stories.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/TableOfContents/TableOfContents.stories.tsx b/src/components/TableOfContents/TableOfContents.stories.tsx
index ec706509e01..9e2e923913e 100644
--- a/src/components/TableOfContents/TableOfContents.stories.tsx
+++ b/src/components/TableOfContents/TableOfContents.stories.tsx
@@ -1,8 +1,7 @@
-import * as React from "react"
 import { Stack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { ToCItem, TocNodeType } from "@/lib/types"
+import { ToCItem } from "@/lib/types"
 
 import TableOfContents from "./"
 
@@ -91,5 +90,5 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: () => <TableOfContents slug="#web3" items={tocItems} maxDepth={2} />,
+  render: () => <TableOfContents items={tocItems} maxDepth={2} />,
 }