Premium Analytics: add Top posts & pages widget to Storybook by louwie17 · Pull Request #49735 · Automattic/jetpack

louwie17 · 2026-06-18T08:01:56Z

Summary

Adds a prop-driven Top posts & pages widget and its Storybook story under Packages → Premium Analytics → Widgets → TopPosts (not under Widgets Toolkit), mimicking the widget from #49568 as a self-contained, mock-data-backed component so it can be browsed/tested in the Jetpack Storybook.

It is purely presentational: it takes already-fetched rows via props and renders the loading, error, empty, and populated states.

What's included

widgets/top-posts/ in the premium-analytics package:
- types.ts — TopPostRow (with optional previousValue)
- top-posts-widget.tsx — TopPostsWidget, rendering the most-viewed posts/pages as an overlay leaderboard (each row links to the published content)
- top-posts-widget.module.css — label-link styling
- index.ts — public exports
- stories/top-posts-widget.stories.tsx — story with mock posts/pages rows
Changelog entry for the package.

Stories

Default, WithComparison, Loading, NoViews, ErrorState, LongLabels, SizeMedium, SizeLarge.

Notes

Previous-period comparison support (colored deltas) mirrors the overlay comparison mode of the toolkit's LeaderboardChart (shares + calculateDelta).
Label text is inset (padding-inline-start) to match the chart's default overlay .label, since a custom label element bypasses that rule.
Verified locally: package typecheck passes and storybook build succeeds with the story present in the built index.

Does this pull request change what data or activity we track or use?

No

Testing instructions

This story lives in the shared Jetpack Storybook. To browse it locally:

Check out this branch and make sure dependencies are installed from the repo root (pnpm install). Node ^24.15.0 is required.

Start the Storybook dev server:

cd projects/js-packages/storybook
pnpm run storybook:dev

Open http://localhost:50240 and navigate to Packages → Premium Analytics → Widgets → TopPosts.
Step through each story and confirm it renders as expected:
- Default — populated leaderboard of posts/pages; each row links out (opens in a new tab).
- WithComparison — colored previous-period deltas and the period legend.
- Loading — chart loading overlay.
- NoViews — empty state message.
- ErrorState — error message in place of the chart.
- LongLabels — long titles truncate with an ellipsis on a single line.
- SizeMedium / SizeLarge — widget reflows correctly at the 448px and 576px container widths.

🤖 Generated with Claude Code

github-actions · 2026-06-18T08:03:25Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

jp-launch-control · 2026-06-18T08:05:14Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report

Add a prop-driven TopPostsWidget and Storybook story under Packages/Premium Analytics/Widgets/TopPosts, mimicking the "Top posts & pages" widget from #49568 as a self-contained, mock-data-backed component. The widget renders the most-viewed posts/pages as an overlay leaderboard (each row links to the published content) and supports previous-period comparison with colored deltas, mirroring the overlay comparison mode of the toolkit's LeaderboardChart. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CpN9Z3MTaLb4GxTNsGFaEQ

… story Replace the duplicated ChartThemeProvider + withChartTheme in the Top Posts widget story with the canonical decorator from the widgets-toolkit. Behavior is identical. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CpN9Z3MTaLb4GxTNsGFaEQ

…root Relocate widgets/ from premium-analytics/packages/widgets to premium-analytics/widgets. Update the story's relative import to the toolkit decorator, add widgets/**/* to the package tsconfig include, and register the new path in the Storybook projects list so stories are still discovered. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CpN9Z3MTaLb4GxTNsGFaEQ

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CpN9Z3MTaLb4GxTNsGFaEQ

In overlay-label mode the bar should read as a faint tint of the primary color so the label stays legible on top of it. We were passing `hexToRgba( primary, 0.08 )` to the chart's `primaryColor` prop, but that prop resolves through getElementStyles, which strips the alpha channel — so the bar rendered at full primary color and the intended fade never appeared. Pre-blend the primary with white instead, producing the opaque equivalent of an 8% alpha fill via charts' own `lightenHexColor` (`normalizeColorToHex` first so non-hex theme colors are handled). The result is opaque, so nothing gets stripped, and it still tracks the themed primary. Top Posts and any other consumer of this shared component inherit the fix automatically. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MtarPnJhd516aUvykDVubW

adamwoodnz · 2026-06-19T01:03:53Z

@louwie17 @kangzj I added 0ec43f8 to fix the overlay label background color issue.

kangzj

I don't see any blocking issue. Happy for it to ship and iterate 👍

Address review feedback on the Top posts & pages widget: - The Loading story rendered the empty state instead of loading. The toolkit LeaderboardChart short-circuits empty data to ChartEmptyState before the loading prop reaches the base chart, so loading+empty never showed a spinner. Render WidgetLoadingOverlay directly for the initial loading-with-no-data case (matching the sibling leaderboard widgets), and let the chart own the empty state via emptyStateText. - Export WidgetLoadingOverlay from the widgets-toolkit public entry so consumers outside the toolkit can reuse it. - Use a plain "&" in the changelog entry instead of "&". Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01X6csUCvWX89ymfNSHGMXYv

louwie17 · 2026-06-19T09:11:27Z

@kangzj I addressed your feedback, this should be good for a re-review

louwie17 · 2026-06-19T09:13:24Z

@kangzj I addressed your feedback, this should be good for a re-review

Nvm, I thought a re-review was needed. Given the changes are minimal, I merged it.

github-actions Bot added [Package] Premium Analytics [Status] In Progress labels Jun 18, 2026

github-actions Bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Jun 18, 2026

github-actions Bot added [JS Package] Storybook RNA labels Jun 18, 2026

louwie17 requested review from a team June 18, 2026 08:45

louwie17 and others added 2 commits June 18, 2026 10:45

louwie17 marked this pull request as ready for review June 18, 2026 08:45

louwie17 and others added 2 commits June 18, 2026 10:45

Storybook: changelog for premium-analytics widgets discovery path

05eb446

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CpN9Z3MTaLb4GxTNsGFaEQ

louwie17 force-pushed the worktree-pa-top-posts-storybook branch from 739d2b9 to 05eb446 Compare June 18, 2026 08:46

kangzj reviewed Jun 18, 2026

View reviewed changes

Comment thread projects/packages/premium-analytics/widgets/top-posts/top-posts-widget.tsx Outdated

Comment thread projects/packages/premium-analytics/changelog/add-top-posts-widget-storybook Outdated

adamwoodnz force-pushed the worktree-pa-top-posts-storybook branch from acb8e27 to 0ec43f8 Compare June 19, 2026 01:01

kangzj previously approved these changes Jun 19, 2026

View reviewed changes

louwie17 dismissed kangzj’s stale review via 9d5a932 June 19, 2026 09:05

louwie17 merged commit 7368055 into trunk Jun 19, 2026
76 checks passed

louwie17 deleted the worktree-pa-top-posts-storybook branch June 19, 2026 09:12

github-actions Bot added [Status] UI Changes Add this to PRs that change the UI so documentation can be updated. and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. [Status] In Progress labels Jun 19, 2026

Navigation Menu

Uh oh!

Premium Analytics: add Top posts & pages widget to Storybook - #49735

Premium Analytics: add Top posts & pages widget to Storybook#49735
louwie17 merged 6 commits into
trunkfrom
worktree-pa-top-posts-storybook

louwie17 commented Jun 18, 2026 •

edited by adamwoodnz

Loading

Uh oh!

github-actions Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

adamwoodnz commented Jun 19, 2026

Uh oh!

kangzj left a comment

Uh oh!

louwie17 commented Jun 19, 2026

Uh oh!

Uh oh!

louwie17 commented Jun 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

louwie17 commented Jun 18, 2026 • edited by adamwoodnz Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What's included

Stories

Notes

Does this pull request change what data or activity we track or use?

Testing instructions

Uh oh!

github-actions Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

Uh oh!

Uh oh!

adamwoodnz commented Jun 19, 2026

Uh oh!

kangzj left a comment

Choose a reason for hiding this comment

Uh oh!

louwie17 commented Jun 19, 2026

Uh oh!

Uh oh!

louwie17 commented Jun 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

louwie17 commented Jun 18, 2026 •

edited by adamwoodnz

Loading

github-actions Bot commented Jun 18, 2026 •

edited

Loading

jp-launch-control Bot commented Jun 18, 2026 •

edited

Loading