Skip to content

Commit c33bdc4

Browse files
wackerowwackerow
authored
Merge pull request #13156 from ethereum/ds-toc
DS implementation - Table of Contents
2 parents b5e7da9 + 8030741 commit c33bdc4

File tree

5 files changed

+135
-69
lines changed

5 files changed

+135
-69
lines changed

‎src/components/TableOfContents/ItemsList.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,7 @@ const ItemsList = ({
2828
<ListItem key={index} m={0} {...rest}>
2929
<ToCLink depth={depth} item={item} activeHash={activeHash} />
3030
{items && (
31-
<List
32-
key={title}
33-
fontSize="sm"
34-
lineHeight={1.6}
35-
fontWeight={400}
36-
ps={4}
37-
pe={1}
38-
m={0}
39-
>
31+
<List key={title} fontSize="sm" ps="2" m="0" mt="2" spacing="2">
4032
<ItemsList
4133
items={items}
4234
depth={depth + 1}

‎src/components/TableOfContents/TableOfContents.stories.tsx

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Stack } from "@chakra-ui/react"
2+
import { Meta, StoryObj } from "@storybook/react"
3+
4+
import { ToCItem } from "@/lib/types"
5+
6+
import TableOfContents from "./"
7+
8+
const tocItems: ToCItem[] = [
9+
{
10+
title: "The early Web",
11+
url: "#early-internet",
12+
items: [
13+
{ title: "Web 1.0: Read-Only (1990-2004)", url: "#web1" },
14+
{ title: "Web 2.0: Read-Write (2004-now)", url: "#web2" },
15+
],
16+
},
17+
{
18+
title: "Web 3.0: Read-Write-Own",
19+
url: "#web3",
20+
items: [
21+
{
22+
title: "What is Web3?",
23+
url: "#what-is-web3",
24+
items: [{ title: "Core ideas of Web3", url: "#core-ideas" }],
25+
},
26+
{
27+
title: "Why is Web3 important?",
28+
url: "#why-is-web3-important",
29+
items: [
30+
{ title: "Ownership", url: "#ownership" },
31+
{
32+
title: "Censorship resistance",
33+
url: "#censorship-resistance",
34+
},
35+
{
36+
title: "Decentralized autonomous organizations (DAOs)",
37+
url: "#daos",
38+
},
39+
],
40+
},
41+
{ title: "Identity", url: "#identity" },
42+
{
43+
title: "Native payments",
44+
url: "#native-payments",
45+
items: [
46+
{ title: "Cryptocurrency", url: "#cryptocurrency" },
47+
{ title: "Micropayments", url: "#micropayments" },
48+
{ title: "Tokenization", url: "#tokenization" },
49+
],
50+
},
51+
],
52+
},
53+
{
54+
title: "Web3 limitations",
55+
url: "#web3-limitations",
56+
items: [
57+
{ title: "Accessibility", url: "#accessibility" },
58+
{ title: "User experience", url: "#user-experience" },
59+
{ title: "Education", url: "#education" },
60+
{
61+
title: "Centralized infrastructure",
62+
url: "#centralized-infrastructure",
63+
},
64+
],
65+
},
66+
{
67+
title: "A decentralized future",
68+
url: "#decentralized-future",
69+
},
70+
{ title: "How can I get involved", url: "#get-involved" },
71+
{ title: "Further reading", url: "#further-reading" },
72+
]
73+
74+
const meta = {
75+
title: "Molecules / Navigation / TableOfContents",
76+
parameters: {
77+
layout: "fullscreen",
78+
},
79+
decorators: [
80+
(Story) => (
81+
<Stack minH="100vh" position="relative">
82+
<Story />
83+
</Stack>
84+
),
85+
],
86+
} satisfies Meta<typeof TableOfContents>
87+
88+
export default meta
89+
90+
type Story = StoryObj<typeof meta>
91+
92+
export const Default: Story = {
93+
render: () => <TableOfContents items={tocItems} maxDepth={2} />,
94+
}

‎src/components/TableOfContents/TableOfContentsLink.tsx

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import type { ToCItem } from "@/lib/types"
44

55
import { BaseLink } from "@/components/Link"
66

7-
import { useRtlFlip } from "@/hooks/useRtlFlip"
8-
97
export type TableOfContentsLinkProps = {
108
depth: number
119
item: ToCItem
@@ -17,7 +15,6 @@ const Link = ({
1715
item: { title, url },
1816
activeHash,
1917
}: TableOfContentsLinkProps) => {
20-
const { flipForRtl } = useRtlFlip()
2118
const isActive = activeHash === url
2219
const isNested = depth === 2
2320

@@ -29,16 +26,20 @@ const Link = ({
2926
const $dotBg = cssVar("dot-bg")
3027

3128
const hoverOrActiveStyle: SystemStyleObject = {
32-
color: "primary.base",
29+
color: $dotBg.reference,
3330
_after: {
3431
content: `""`,
35-
background: $dotBg.reference,
32+
backgroundColor: "background.base",
3633
border: "1px",
37-
borderColor: "primary.base",
34+
borderColor: $dotBg.reference,
3835
borderRadius: "50%",
3936
boxSize: 2,
4037
position: "absolute",
41-
insetInlineStart: "-1.29rem",
38+
// 16px is the initial list padding
39+
// 8px is the padding for each nested list
40+
// 4px is half of the width of the dot
41+
// 1px for the border
42+
"inset-inline-start": `calc(-16px - 8px * ${depth} - 4px - 1px)`,
4243
top: "50%",
4344
mt: -1,
4445
},
@@ -51,35 +52,19 @@ const Link = ({
5152
textDecoration="none"
5253
display="inline-block"
5354
position="relative"
54-
color="textTableOfContents"
55-
fontWeight="normal"
56-
mb="0.5rem !important"
55+
color="body.medium"
5756
width={{ base: "100%", lg: "auto" }}
5857
_hover={{
5958
...hoverOrActiveStyle,
6059
}}
60+
p="2"
61+
ps="0"
6162
sx={{
62-
[$dotBg.variable]: "colors.background",
63+
[$dotBg.variable]: "var(--eth-colors-primary-hover)",
6364
"&.active": {
64-
[$dotBg.variable]: "colors.primary",
65+
[$dotBg.variable]: "var(--eth-colors-primary-visited)",
6566
...hoverOrActiveStyle,
6667
},
67-
"&.nested": {
68-
_before: {
69-
content: `"⌞"`,
70-
opacity: 0.5,
71-
display: "inline-flex",
72-
position: "absolute",
73-
insetInlineStart: -3.5,
74-
top: -1,
75-
transform: flipForRtl,
76-
},
77-
"&.active, &:hover": {
78-
_after: {
79-
insetInlineStart: "-2.29rem",
80-
},
81-
},
82-
},
8368
}}
8469
>
8570
{title}

‎src/components/TableOfContents/index.tsx

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import {
44
Box,
55
BoxProps,
66
calc,
7+
Flex,
78
Icon,
89
List,
9-
ListItem,
1010
useToken,
1111
} from "@chakra-ui/react"
1212

@@ -65,7 +65,10 @@ const TableOfContents = ({
6565
}
6666

6767
return (
68-
<Box
68+
<Flex
69+
direction="column"
70+
align="start"
71+
gap={4}
6972
hideBelow={lgBp}
7073
as="aside"
7174
position="sticky"
@@ -78,33 +81,27 @@ const TableOfContents = ({
7881
overflowY="auto"
7982
{...rest}
8083
>
81-
<List {...outerListProps}>
82-
{!hideEditButton && editPath && (
83-
<ListItem mb={2}>
84-
<ButtonLink
85-
leftIcon={<Icon as={FaGithub} />}
86-
href={editPath}
87-
variant="outline"
88-
>
89-
{t("edit-page")}
90-
</ButtonLink>
91-
</ListItem>
92-
)}
93-
<ListItem>
94-
<Box mb={2} textTransform="uppercase">
95-
{t("on-this-page")}
96-
</Box>
97-
<List m={0}>
98-
<ItemsList
99-
items={items}
100-
depth={0}
101-
maxDepth={maxDepth ? maxDepth : 1}
102-
activeHash={activeHash}
103-
/>
104-
</List>
105-
</ListItem>
84+
{!hideEditButton && editPath && (
85+
<ButtonLink
86+
leftIcon={<Icon as={FaGithub} />}
87+
href={editPath}
88+
variant="outline"
89+
>
90+
{t("edit-page")}
91+
</ButtonLink>
92+
)}
93+
<Box textTransform="uppercase" color="body.medium">
94+
{t("on-this-page")}
95+
</Box>
96+
<List m={0} spacing="2" {...outerListProps}>
97+
<ItemsList
98+
items={items}
99+
depth={0}
100+
maxDepth={maxDepth ? maxDepth : 1}
101+
activeHash={activeHash}
102+
/>
106103
</List>
107-
</Box>
104+
</Flex>
108105
)
109106
}
110107

‎src/lib/utils/toc.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,14 @@ export const parseHeadingId = (heading: string): string => {
3131
*/
3232
export const outerListProps: ListProps = {
3333
borderStart: "1px solid",
34-
borderStartColor: "dropdownBorder",
34+
borderStartColor: "body.medium",
3535
borderTop: 0,
3636
fontSize: "sm",
37-
lineHeight: 1.6,
38-
fontWeight: 400,
37+
spacing: "2",
3938
m: 0,
4039
mt: 2,
4140
mb: 2,
4241
ps: 4,
43-
pe: 1,
4442
pt: 0,
4543
sx: {
4644
// TODO: Flip to object syntax with `lg` token after completion of Chakra migration

0 commit comments

Comments
 (0)