-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
feat: create toc component #8560
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8560 +/- ##
==========================================
- Coverage 75.01% 74.96% -0.05%
==========================================
Files 103 103
Lines 9037 9037
Branches 311 312 +1
==========================================
- Hits 6779 6775 -4
- Misses 2256 2260 +4
Partials 2 2 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR introduces a new Table of Contents component designed for small and medium devices. The component provides a collapsible navigation aid that allows users to quickly jump to different sections of a page using heading anchors.
Changes:
- Created a new TableOfContents component with configurable depth filtering for headings
- Added Storybook stories demonstrating default and custom depth configurations
- Implemented responsive styling that displays only on small/medium devices (hidden on large screens) with dark mode support
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/ui-components/src/Common/TableOfContents/index.tsx | Main component implementation with filtering logic and collapsible details element |
| packages/ui-components/src/Common/TableOfContents/index.stories.tsx | Storybook stories demonstrating component usage with sample heading data |
| packages/ui-components/src/Common/TableOfContents/index.module.css | Styling for the component with responsive breakpoints and theme variants |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Any plan for an active item ? |
I don't think it is necessary because this component is intended to link users to sections within the same page. |
Okay make sense. also I just checked on our current metabar we didn't have this kind of thing so no problem |
AugustinMauroy
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGMT & thanks for putting effort there
|
Lighthouse Results
|
ovflowd
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SGTM!
|
Great work @araujogui . |
Description
Creates a Table-of-contents component for use on small and medium devices
Validation
Light:

Dark:

Related Issues
Related to nodejs/doc-kit#560
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.