initial toc for desktop migration

Author: pettinarip

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}

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} />,
+}

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}

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}

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