refactor(design-system)!: remove deprecated DsSystemStatus component [AR-53409] (#339)

mmurawski-dn · web-flow · commit fc888472d47d · 2026-04-15T14:19:53.000+02:00
diff --git a/.changeset/loose-stamps-study.md b/.changeset/loose-stamps-study.md
@@ -0,0 +1,7 @@
+---
+'@drivenets/design-system': major
+'@drivenets/eslint-plugin-design-system': major
+---
+
+Remove deprecated component `DsSystemStatus`
+Remove deprecation eslint rules for `DsSystemStatus`
diff --git a/packages/design-system/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss b/packages/design-system/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss
@@ -9,7 +9,7 @@ $color-secondary-default: var(--action-cta3);
 $color-secondary-hover: var(--neutral-4);
 $color-secondary-disabled: var(--action-disabled);
 
-$color-error-default: var(--system-status-error);
+$color-error-default: var(--background-background-negative);
 $color-error-hover: var(--utility-error);
 $color-error-active: var(--utility-error);
 $color-error-disabled: var(--action-disabled);
diff --git a/packages/design-system/src/components/ds-drawer/ds-drawer.stories.tsx b/packages/design-system/src/components/ds-drawer/ds-drawer.stories.tsx
@@ -6,8 +6,7 @@ import DsDrawer from './ds-drawer';
 import { DsButton } from '../ds-button';
 import { DsTextInput } from '../ds-text-input';
 import { DsIcon } from '../ds-icon';
-// TODO: Use DsStatusBadge instead.
-import { DsSystemStatus } from '../ds-system-status';
+import { DsStatusBadge } from '../ds-status-badge';
 import styles from './ds-drawer.stories.module.scss';
 import { DsTypography } from '../ds-typography';
 import type { DsDrawerProps } from './ds-drawer.types';
@@ -82,7 +81,7 @@ export const Default: Story = {
 			<>
 				<DsDrawer.Header>
 					<DsDrawer.Title>
-						Default Drawer <DsSystemStatus status="healthy" label="Active" />
+						Default Drawer <DsStatusBadge status="active" label="Active" />
 					</DsDrawer.Title>
 					<div className={styles.headerActions}>
 						<button className={styles.expand} aria-label="Expand">
@@ -179,7 +178,7 @@ export const WithTabs: Story = {
 			<>
 				<DsDrawer.Header>
 					<DsDrawer.Title>
-						Drawer with Tabs <DsSystemStatus status="healthy" label="Active" />
+						Drawer with Tabs <DsStatusBadge status="active" label="Active" />
 					</DsDrawer.Title>
 					<div className={styles.headerActions}>
 						<button className={styles.expand} aria-label="Expand">
diff --git a/packages/design-system/src/components/ds-system-status/ds-system-status.module.scss b/packages/design-system/src/components/ds-system-status/ds-system-status.module.scss
diff --git a/packages/design-system/src/components/ds-system-status/ds-system-status.stories.ts b/packages/design-system/src/components/ds-system-status/ds-system-status.stories.ts
diff --git a/packages/design-system/src/components/ds-system-status/ds-system-status.tsx b/packages/design-system/src/components/ds-system-status/ds-system-status.tsx
diff --git a/packages/design-system/src/components/ds-system-status/ds-system-status.types.ts b/packages/design-system/src/components/ds-system-status/ds-system-status.types.ts
diff --git a/packages/design-system/src/components/ds-system-status/index.ts b/packages/design-system/src/components/ds-system-status/index.ts
diff --git a/packages/design-system/src/components/ds-table/stories/components/progress-infographic/progress-infographic.module.scss b/packages/design-system/src/components/ds-table/stories/components/progress-infographic/progress-infographic.module.scss
@@ -1,3 +1,5 @@
+@use '../../../../../styles/root_updated';
+
 .progressInfographic {
 	width: 100%;
 	height: 20px;
@@ -17,15 +19,15 @@
 		transition: width 0.3s ease-in-out;
 
 		&--low {
-			background-color: var(--system-status-error);
+			background-color: var(--background-background-negative);
 		}
 
 		&--medium {
-			background-color: var(--system-status-info);
+			background-color: var(--background-background-info-strong);
 		}
 
 		&--high {
-			background-color: var(--system-status-ok);
+			background-color: var(--background-background-positive-strong);
 		}
 	}
 }
diff --git a/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss b/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss
@@ -20,15 +20,15 @@
 	color: var(--white);
 
 	&--single {
-		background-color: var(--system-status-ok);
+		background-color: var(--background-background-positive-strong);
 	}
 
 	&--relationship {
-		background-color: var(--system-status-info);
+		background-color: var(--background-background-info-strong);
 	}
 
 	&--complicated {
-		background-color: var(--system-status-error);
+		background-color: var(--background-background-negative);
 	}
 }
 
@@ -328,5 +328,5 @@
 }
 
 .destructiveAction {
-	color: var(--system-status-error);
+	color: var(--background-background-negative);
 }
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
@@ -43,7 +43,6 @@ export * from './components/ds-smart-tabs';
 export * from './components/ds-spinner';
 export * from './components/ds-status-badge';
 export * from './components/ds-stepper';
-export * from './components/ds-system-status';
 export * from './components/ds-table';
 export * from './components/ds-tabs';
 export * from './components/ds-tag';
diff --git a/packages/design-system/src/styles/_colors.scss b/packages/design-system/src/styles/_colors.scss
@@ -27,13 +27,6 @@ $colors: (
 	action-active-light: #c7d8ff,
 	action-hover-light: #e0eaff,
 	action-disabled: #b0b4bf,
-	// System Status
-	system-status-ok: #067a00,
-	system-status-info: #005dcf,
-	system-status-error: #d70a00,
-	system-status-alert: #d04d07,
-	system-status-in-progress: #1513da,
-	system-status-pending: #8836d6,
 	// Utility
 	utility-ok: #d6f5cf,
 	utility-info: #c4dcff,
diff --git a/packages/design-system/vitest.config.ts b/packages/design-system/vitest.config.ts
@@ -24,7 +24,6 @@ export default defineConfig({
 				'**/ds-chip/**',
 				'**/ds-chip-group/**',
 				'**/ds-date-input/**',
-				'**/ds-system-status/**',
 			],
 			thresholds: {
 				lines: 90,
diff --git a/packages/eslint-plugin/src/__tests__/no-deprecated.test.ts b/packages/eslint-plugin/src/__tests__/no-deprecated.test.ts
@@ -31,17 +31,6 @@ ruleTester.run(
 	},
 );
 
-ruleTester.run('no-deprecated-ds-system-status', plugin.rules['no-deprecated-ds-system-status'], {
-	valid: ['<DsStatusBadge />'],
-
-	invalid: [
-		{
-			code: '<DsSystemStatus />',
-			errors: [{ message: `DsSystemStatus is deprecated. Use DsStatusBadge instead.` }],
-		},
-	],
-});
-
 ruleTester.run('no-deprecated-ds-chip', plugin.rules['no-deprecated-ds-chip'], {
 	valid: ['<DsTag />', '<DsTagFilter />'],
 
diff --git a/packages/eslint-plugin/src/index.ts b/packages/eslint-plugin/src/index.ts
@@ -12,12 +12,6 @@ const eslintPlugin = createPlugin(
 		message: `Using the 'legacy' design for DsButton is deprecated. Use 'v1.2' instead.`,
 	},
 
-	{
-		name: 'no-deprecated-ds-system-status',
-		selector: JSXElement('DsSystemStatus'),
-		message: `DsSystemStatus is deprecated. Use DsStatusBadge instead.`,
-	},
-
 	{
 		name: 'no-deprecated-ds-chip',
 		selector: JSXElement('DsChip'),

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../../styles/root_updated';`
	`2`	`+`
`1`	`3`	`.progressInfographic {`
`2`	`4`	`width: 100%;`
`3`	`5`	`height: 20px;`
`@@ -17,15 +19,15 @@`
`17`	`19`	`transition: width 0.3s ease-in-out;`
`18`	`20`
`19`	`21`	`&--low {`
`20`		`- background-color: var(--system-status-error);`
	`22`	`+ background-color: var(--background-background-negative);`
`21`	`23`	`}`
`22`	`24`
`23`	`25`	`&--medium {`
`24`		`- background-color: var(--system-status-info);`
	`26`	`+ background-color: var(--background-background-info-strong);`
`25`	`27`	`}`
`26`	`28`
`27`	`29`	`&--high {`
`28`		`- background-color: var(--system-status-ok);`
	`30`	`+ background-color: var(--background-background-positive-strong);`
`29`	`31`	`}`
`30`	`32`	`}`
`31`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,15 +20,15 @@`
`20`	`20`	`color: var(--white);`
`21`	`21`
`22`	`22`	`&--single {`
`23`		`- background-color: var(--system-status-ok);`
	`23`	`+ background-color: var(--background-background-positive-strong);`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`&--relationship {`
`27`		`- background-color: var(--system-status-info);`
	`27`	`+ background-color: var(--background-background-info-strong);`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`&--complicated {`
`31`		`- background-color: var(--system-status-error);`
	`31`	`+ background-color: var(--background-background-negative);`
`32`	`32`	`}`
`33`	`33`	`}`
`34`	`34`
`@@ -328,5 +328,5 @@`
`328`	`328`	`}`
`329`	`329`
`330`	`330`	`.destructiveAction {`
`331`		`- color: var(--system-status-error);`
	`331`	`+ color: var(--background-background-negative);`
`332`	`332`	`}`