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

.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`

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);

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">

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);
 		}
 	}
 }

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);
 }

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';

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,

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,

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 />'],
 

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'),