feat(ui-components): add ChangeHistory

[Harkunwar]

Description

Adding a stateless version of ChangeHistory component which can be potentially be used without JavaScript enabled.

Validation

Tested by rendering a few different versions in Storybook

Related Issues

Related to nodejs/doc-kit#10 (comment)

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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jun 16, 2025 4:15pm

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.46%. Comparing base (1ccf19c) to head (25723f7).
Report is 5 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7869   +/-   ##
=======================================
  Coverage   75.46%   75.46%           
=======================================
  Files         101      101           
  Lines        8306     8306           
  Branches      218      218           
=======================================
  Hits         6268     6268           
  Misses       2036     2036           
  Partials        2        2           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Copilot]

Pull Request Overview

This PR introduces a new stateless ChangeHistory component to display version change logs in a non-JS dropdown, along with associated styles and Storybook stories.

• Adds ChangeHistory React component with customizable label, alignment, and change entries
• Includes CSS module for styling the dropdown and summary states
• Provides Storybook stories demonstrating default, no‐changes, left‐aligned, and large history scenarios

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
packages/ui-components/Common/ChangeHistory/index.tsx	New ChangeHistory component implementation
packages/ui-components/Common/ChangeHistory/index.module.css	Styles for the summary button and dropdown menu
packages/ui-components/Common/ChangeHistory/index.stories.tsx	Storybook demos covering various component states

Comments suppressed due to low confidence (1)

packages/ui-components/Common/ChangeHistory/index.tsx:50

• [nitpick] This ariaLabel variable shadows the outer ariaLabel prop name, which can be confusing. Consider renaming it to something like itemAriaLabel to improve clarity.

const ariaLabel = `${change.label}: ${change.versions.join(', ')}`;

[avivkeller]

Almost there!

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 97	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟠 82	🟢 96	🟢 100	🟠 82	🔗
/en/about/previous-releases	🟢 99	🟢 96	🟢 100	🟠 83	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗