Charts: Add SegmentedBar component

projects/js-packages/charts/changelog/add-new-chart-categorybar

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Charts: Add SegmentedBar component for horizontal segmented progress bars

projects/js-packages/charts/package.json

@@ -82,6 +82,12 @@
 			"import": "./dist/providers/index.js",
 			"require": "./dist/providers/index.cjs"
 		},
+		"./segmented-bar": {
+			"jetpack:src": "./src/components/segmented-bar/index.ts",
+			"import": "./dist/components/segmented-bar/index.js",
+			"require": "./dist/components/segmented-bar/index.cjs"
+		},
+		"./segmented-bar/style.css": "./dist/components/segmented-bar/index.css",
 		"./style.css": "./dist/index.css",
 		"./tooltip": {
 			"jetpack:src": "./src/components/tooltip/index.ts",
@@ -132,6 +138,9 @@
 			"bar-list-chart": [
 				"./dist/components/bar-list-chart/index.d.ts"
 			],
+			"segmented-bar": [
+				"./dist/components/segmented-bar/index.d.ts"
+			],
 			"leaderboard-chart": [
 				"./dist/components/leaderboard-chart/index.d.ts"
 			],

projects/js-packages/charts/src/components/segmented-bar/index.ts

@@ -0,0 +1,9 @@
+export { default as SegmentedBar, SegmentedBarUnresponsive } from './segmented-bar';
+export type { SegmentedBarResponsiveConfig } from './segmented-bar';
+
+export type {
+	SegmentedBarProps,
+	SegmentedBarSegment,
+	SegmentedBarMarker,
+	SegmentedBarMode,
+} from './types';

projects/js-packages/charts/src/components/segmented-bar/segmented-bar.module.scss

@@ -0,0 +1,95 @@
+.segmentedBar {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+
+	&--empty {
+		display: block;
+		background-color: #e5e7eb;
+		border-radius: 4px;
+	}
+
+	&__bar {
+		display: flex;
+		width: 100%;
+		position: relative;
+		overflow: visible;
+	}
+
+	&__segment {
+		height: 100%;
+		flex-shrink: 0;
+		transition: opacity 0.15s ease;
+		cursor: default;
+
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+
+	&__marker {
+		position: absolute;
+		width: 2px;
+		transform: translateX(-50%);
+		pointer-events: none;
+		z-index: 1;
+
+		&--animated {
+			transition: left 0.5s ease-out;
+		}
+
+		// Triangle indicator at top
+		&::before {
+			content: "";
+			position: absolute;
+			top: -4px;
+			left: 50%;
+			transform: translateX(-50%);
+			border-left: 4px solid transparent;
+			border-right: 4px solid transparent;
+			border-top: 4px solid currentColor;
+		}
+	}
+
+	&__labels {
+		display: flex;
+		position: relative;
+		margin-top: 4px;
+		height: 16px;
+		font-size: 12px;
+		color: #6b7280;
+	}
+
+	&__label {
+		position: absolute;
+		transform: translateX(-50%);
+		white-space: nowrap;
+
+		// First label aligned to left edge
+		&:first-child {
+			transform: translateX(0);
+		}
+
+		// Last label aligned to right edge
+		&:last-child {
+			transform: translateX(-100%);
+		}
+	}
+
+	&__tooltip {
+		background-color: #1f2937;
+		color: #fff;
+		padding: 4px 8px;
+		border-radius: 4px;
+		font-size: 12px;
+		white-space: nowrap;
+	}
+
+	&__tooltipLabel {
+		font-weight: 500;
+	}
+
+	&__tooltipValue {
+		font-weight: 400;
+	}
+}