Skip to content

Conversation

@araujogui
Copy link
Member

Description

Creates a Table-of-contents component for use on small and medium devices

Validation

Light:
image

Dark:
image

Related Issues

Related to nodejs/doc-kit#560

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run pnpm format to ensure the code follows the style guide.
  • I have run pnpm test to check if all tests are passing.
  • I have run pnpm build to check if the website builds without errors.
  • I've covered new added functionality with unit tests if necessary.

@araujogui araujogui requested a review from a team as a code owner January 21, 2026 23:19
Copilot AI review requested due to automatic review settings January 21, 2026 23:19
@vercel
Copy link

vercel bot commented Jan 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
nodejs-org Ready Ready Preview Jan 22, 2026 4:11pm

Request Review

@github-actions
Copy link
Contributor

👋 Codeowner Review Request

The 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
Copy link

codecov bot commented Jan 21, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.96%. Comparing base (dbf3711) to head (0528249).
✅ All tests successful. No failed tests found.

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.
📢 Have feedback on the report? Share it here.

Copy link
Contributor

Copilot AI left a 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.

@AugustinMauroy
Copy link
Member

Any plan for an active item ?

@araujogui
Copy link
Member Author

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.

@AugustinMauroy
Copy link
Member

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

Copy link
Member

@AugustinMauroy AugustinMauroy left a 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

@github-actions
Copy link
Contributor

github-actions bot commented Jan 22, 2026

Lighthouse Results

URL Performance Accessibility Best Practices SEO Report
/en 🟢 98 🟢 96 🟢 100 🟢 100 🔗
/en/about 🟢 99 🟢 97 🟢 100 🟠 88 🔗
/en/about/previous-releases 🟢 99 🟢 100 🟢 100 🟢 100 🔗
/en/download 🟢 98 🟢 100 🟢 100 🟢 100 🔗
/en/download/archive/current 🟢 100 🟢 100 🟢 100 🟢 100 🔗
/en/blog 🟢 100 🟢 100 🟢 96 🟢 100 🔗

Copy link
Member

@ovflowd ovflowd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SGTM!

@malav2110
Copy link
Contributor

Great work @araujogui .
Question: Do we want to update version number in packages > ui-components > package.json by running pnpm version patch in ui-components directory ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants