add legendOrientation to default args in storybook

Automattic · Dec 18, 2024 · ff2a881 · ff2a881
1 parent 8fb265d
commit ff2a881
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 1 deletion.
diff --git a/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx
@@ -28,6 +28,7 @@ Default.args = {
 	data: data[ 0 ].data,
 	seriesLabel: data[ 0 ].group,
 	showLegend: false,
+	legendOrientation: 'horizontal',
 };
 
 export const WithTooltips = Template.bind( {} );

diff --git a/projects/js-packages/charts/src/components/legend/legend.module.scss b/projects/js-packages/charts/src/components/legend/legend.module.scss
@@ -25,7 +25,7 @@
 }
 
 .legend-item-label {
-	color: var(--jp-gray-80);
+	color: var(--jp-gray-80, #2c3338);
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;

diff --git a/projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx
@@ -27,6 +27,7 @@ Default.args = {
 	margin: { top: 20, right: 20, bottom: 30, left: 40 },
 	data: sampleData,
 	showLegend: false,
+	legendOrientation: 'horizontal',
 };
 
 // Story with single data series

diff --git a/projects/js-packages/charts/src/components/pie-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/pie-chart/stories/index.stories.tsx
@@ -48,6 +48,7 @@ export const Default: StoryType = {
 		theme: 'default',
 		innerRadius: 0,
 		showLegend: false,
+		legendOrientation: 'horizontal',
 	},
 };
 

diff --git a/projects/js-packages/charts/src/components/pie-semi-circle-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/pie-semi-circle-chart/stories/index.stories.tsx
@@ -66,6 +66,7 @@ Default.args = {
 	thickness: 0.4,
 	clockwise: true,
 	showLegend: false,
+	legendOrientation: 'horizontal',
 };
 
 export const WithTooltips = Template.bind( {} );