From 9dd3b4b74aeab7a9ef1333fe29bbb9376ce1ea59 Mon Sep 17 00:00:00 2001 From: dognose24 Date: Thu, 9 Jul 2026 00:00:23 +0800 Subject: [PATCH 1/2] Premium Analytics: Cover Top Platforms dimension in stories Expose the platformDimension toolbar attribute as a Storybook control with a dedicated ByOS story, matching the Locations/UTM Insights story pattern, and update the stale body-dropdown wording in the story docs. Co-Authored-By: Claude Fable 5 --- .../changelog/align-control-widget-stories | 4 ++ .../stories/top-platforms-widget.stories.tsx | 49 ++++++++++++++----- 2 files changed, 42 insertions(+), 11 deletions(-) create mode 100644 projects/packages/premium-analytics/changelog/align-control-widget-stories diff --git a/projects/packages/premium-analytics/changelog/align-control-widget-stories b/projects/packages/premium-analytics/changelog/align-control-widget-stories new file mode 100644 index 000000000000..ca48ad900024 --- /dev/null +++ b/projects/packages/premium-analytics/changelog/align-control-widget-stories @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Cover the Top Platforms browser/OS toolbar dimension in Storybook. diff --git a/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx b/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx index e00f883d126e..a1f02ae3c916 100644 --- a/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx @@ -8,7 +8,7 @@ import { import { registerReportMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import { registerStatsMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-stats-mocks'; import TopPlatformsRender from '../render'; -import widgetDefinition from '../widget'; +import widgetDefinition, { type TopPlatformsAttributes } from '../widget'; import type { Decorator, Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -27,6 +27,7 @@ const storyWidgetType = { interface TopPlatformsStoryControls { withComparison: boolean; + platformDimension: NonNullable< TopPlatformsAttributes[ 'platformDimension' ] >; } interface TopPlatformsDashboardStoryProps @@ -39,12 +40,19 @@ const withWidgetCanvas: Decorator = Story => ( ); -function renderTopPlatformsWidget( { withComparison }: TopPlatformsStoryControls ) { - return ( - - ); +function getTopPlatformsAttributes( { + withComparison, + platformDimension, +}: TopPlatformsStoryControls ): ComponentProps< typeof TopPlatformsRender >[ 'attributes' ] { + return { + max: 10, + platformDimension, + reportParams: getDefaultQueryParams( withComparison ), + }; +} + +function renderTopPlatformsWidget( controls: TopPlatformsStoryControls ) { + return ; } function TopPlatformsDashboardRender( props: WidgetRenderProps< unknown > ) { @@ -53,6 +61,7 @@ function TopPlatformsDashboardRender( props: WidgetRenderProps< unknown > ) { function TopPlatformsDashboardStory( { withComparison, + platformDimension, ...dashboardArgs }: TopPlatformsDashboardStoryProps ) { return ( @@ -63,7 +72,7 @@ function TopPlatformsDashboardStory( { renderComponent={ TopPlatformsDashboardRender as ComponentType< WidgetRenderProps< unknown > > } - attributes={ { max: 10, reportParams: getDefaultQueryParams( withComparison ) } } + attributes={ getTopPlatformsAttributes( { withComparison, platformDimension } ) } /> ); } @@ -77,12 +86,17 @@ const meta = { control: 'boolean', description: 'Include previous-period comparison report params.', }, + platformDimension: { + control: 'radio', + options: [ 'browser', 'platform' ], + description: 'The "View by" toolbar attribute rendered by the widget host.', + }, }, parameters: { docs: { description: { component: - 'The "Top Platforms" widget. Shows browser and OS breakdown as a ranked leaderboard. The active dimension (Browser / OS) is switched via a runtime dropdown in the widget body.', + 'The "Top Platforms" widget. Shows browser and OS breakdown as a ranked leaderboard. The active dimension is the `platformDimension` attribute (`relevance: \'high\'`), exposed as a control by the widget host.', }, }, }, @@ -94,13 +108,20 @@ type DashboardStory = StoryObj< TopPlatformsDashboardStoryProps >; export const Default: StoryObj< TopPlatformsStoryControls > = { render: renderTopPlatformsWidget, - args: { withComparison: false }, + args: { withComparison: false, platformDimension: 'browser' }, decorators: [ withWidgetCanvas ], }; export const WithComparison: StoryObj< TopPlatformsStoryControls > = { render: renderTopPlatformsWidget, - args: { withComparison: true }, + args: { withComparison: true, platformDimension: 'browser' }, + decorators: [ withWidgetCanvas ], +}; + +// OS view — the `platformDimension` attribute set to operating systems. +export const ByOS: StoryObj< TopPlatformsStoryControls > = { + render: renderTopPlatformsWidget, + args: { withComparison: false, platformDimension: 'platform' }, decorators: [ withWidgetCanvas ], }; @@ -109,6 +130,7 @@ export const WidgetDashboardWithWidget: DashboardStory = { args: { ...DEFAULT_WIDGET_DASHBOARD_STORY_ARGS, withComparison: true, + platformDimension: 'browser', }, argTypes: { ...widgetDashboardWithWidgetArgTypes, @@ -116,5 +138,10 @@ export const WidgetDashboardWithWidget: DashboardStory = { control: 'boolean', description: 'Include previous-period comparison report params.', }, + platformDimension: { + control: 'radio', + options: [ 'browser', 'platform' ], + description: 'The "View by" toolbar attribute rendered by the widget host.', + }, }, }; From a63496147f837d0260eec4f1831500695b1bdb4a Mon Sep 17 00:00:00 2001 From: dognose24 Date: Thu, 9 Jul 2026 00:13:24 +0800 Subject: [PATCH 2/2] Address review: render host toolbar control in dashboard story (comment claude-r2) --- .../top-platforms/stories/top-platforms-widget.stories.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx b/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx index a1f02ae3c916..aff8489e686d 100644 --- a/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx @@ -10,7 +10,7 @@ import { registerStatsMocks } from '../../../packages/widgets-toolkit/src/storie import TopPlatformsRender from '../render'; import widgetDefinition, { type TopPlatformsAttributes } from '../widget'; import type { Decorator, Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -22,6 +22,10 @@ const storyWidgetType = { name: widgetDefinition.name, title: widgetDefinition.title, icon: widgetDefinition.icon, + // attributes/example let the dashboard host render the real "View by" + // toolbar control for the `relevance: 'high'` attribute, as in Locations. + attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], + example: widgetDefinition.example, presentation: 'framed' as const, };