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

Author: mmurawski-dn

.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

@@ -5,8 +5,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 { DsDrawerColumns, 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">
@@ -165,7 +164,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-system-status/ds-system-status.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-system-status/ds-system-status.stories.ts

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