feat(eslint): automigration rule for the elevation utilities

.changeset/breezy-years-roll.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added information in the migration guide regarding auto migration for the elevation utilities.

packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts

@@ -282,6 +282,7 @@ export class MigrationV99Component extends LitElement {
 
                 <li class="mb-16">
                   <p>
+                    <span data-info="automigration" class="tag tag-sm tag-info">🪄 migration rule</span>
                     The following elevation utility classes have been renamed
                   </p>
                   <ul>

packages/eslint/docs/rules/html/migrations/no-deprecated-elevation-utilities.md

@@ -0,0 +1,32 @@
+# `no-deprecated-elevation-utilities`
+
+Flags deprecated `elevation-{1|2|3|4|5}` classes and replace them with `elevation-{100|200|300|400|500}`.
+
+- Type: problem
+- 🔧 Supports autofix (--fix)
+
+## Rule Options
+
+This rule does not have any configuration options.
+
+## Example
+
+### ❌ Invalid Code
+
+```html
+<div class="elevation-1">Content</div>
+<div class="elevation-2">Content</div>
+<div class="elevation-3">Content</div>
+<div class="elevation-4">Content</div>
+<div class="elevation-5">Content</div>
+```
+
+### ✅ Valid Code
+
+```html
+<div class="elevation-100">Content</div>
+<div class="elevation-200">Content</div>
+<div class="elevation-300">Content</div>
+<div class="elevation-400">Content</div>
+<div class="elevation-500">Content</div>
+```

packages/eslint/src/rules/html/migrations/index.ts

@@ -14,6 +14,9 @@ import noDeprecatedFontWeightRule, {
 import noDeprecatedShadowUtilitiesRule, {
   name as noDeprecatedShadowUtilitiesRuleName,
 } from './no-deprecated-shadow-utilities';
+import noDeprecatedElevationUtilitiesRule, {
+  name as noDeprecatedElevationUtilitiesRuleName,
+} from './no-deprecated-elevation-utilities';
 import noDeprecatedHClearfix, {
   name as noDeprecatedHClearfixName,
 } from './no-deprecated-h-clearfix';
@@ -51,6 +54,7 @@ export const htmlMigrationRules = {
   [noFormTextRuleName]: noFormTextRule,
   [noDeprecatedFontWeightRuleName]: noDeprecatedFontWeightRule,
   [noDeprecatedShadowUtilitiesRuleName]: noDeprecatedShadowUtilitiesRule,
+  [noDeprecatedElevationUtilitiesRuleName]: noDeprecatedElevationUtilitiesRule,
   [noDeprecatedHClearfixName]: noDeprecatedHClearfix,
   [noDeprecatedHVisuallyhiddenRuleName]: noDeprecatedHVisuallyhiddenRule,
   [noDeprecatedFontSizesRuleName]: noDeprecatedFontSizesRule,

packages/eslint/src/rules/html/migrations/no-deprecated-elevation-utilities.ts

@@ -0,0 +1,24 @@
+import { createClassUpdateRule } from '../../../utils/create-class-update-rule';
+import { generateReplacedClassMessages } from '../../../utils/generate-messages';
+import { generateReplacedClassMutations } from '../../../utils/generate-mutations';
+
+export const name = 'no-deprecated-elevation-utilities';
+
+const classesMap = [
+  { old: 'elevation-1', new: 'elevation-100' },
+  { old: 'elevation-2', new: 'elevation-200' },
+  { old: 'elevation-3', new: 'elevation-300' },
+  { old: 'elevation-4', new: 'elevation-400' },
+  { old: 'elevation-5', new: 'elevation-500' },
+];
+
+export const data = generateReplacedClassMutations(classesMap);
+
+export default createClassUpdateRule({
+  name,
+  type: 'problem',
+  description:
+    'Flags deprecated "elevation-{1|2|3|4|5}" classes and replaces them with "elevation-{100|200|300|400|500}".',
+  messages: generateReplacedClassMessages(classesMap),
+  mutations: data,
+});

packages/eslint/test/rules/html/migrations/no-deprecated-elevation-utilities.spec.ts

@@ -0,0 +1,15 @@
+import rule, {
+  name,
+  data,
+} from '../../../../src/rules/html/migrations/no-deprecated-elevation-utilities';
+import { generatedDataTester } from '../../../utils/generated-data-tester';
+
+const validData = [
+  'elevation-100',
+  'elevation-200',
+  'elevation-300',
+  'elevation-400',
+  'elevation-500',
+];
+
+generatedDataTester(name, rule, data, validData);