feat(eslint): automigration for the gap utilities

.changeset/slow-swans-wink.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added information in the migration guide regarding the update on the gap utility classes.

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

@@ -189,6 +189,20 @@ export class MigrationV99Component extends LitElement {
                     <li><code>*-5</code> is now <code>*-48</code></li>
                   </ul>
                 </li>
+                <li class="mb-16">
+                  <p>
+                    The gap classes naming (<code>gap-*</code>, <code>row-gap-*</code>,
+                    <code>column-gap-*</code>) has changed to pixel-based names
+                    <span class="tag tag-sm tag-danger">breaking</span> <span class="tag tag-sm tag-info">🪄 migration rule</span>
+                  </p>
+                  <ul>
+                    <li><code>*-1</code> is now <code>*-4</code></li>
+                    <li><code>*-2</code> is now <code>*-8</code></li>
+                    <li><code>*-3</code> is now <code>*-16</code></li>
+                    <li><code>*-4</code> is now <code>*-24</code></li>
+                    <li><code>*-5</code> is now <code>*-48</code></li>
+                  </ul>
+                </li>
               </ul>
 
               <h5>Utilities</h5>

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

@@ -0,0 +1,36 @@
+# `no-deprecated-gap-utilities`
+
+Flags all deprecated bootstrap gap utility classes and replaces them with the new ones.
+
+- Type: problem
+- 🔧 Supports autofix (--fix)
+
+## Class list
+
+The classes that are handled by this rule are the following ones:
+
+- Starts with one of those gap class names: `gap-*`, `column-gap-*`, `row-gap-*`
+- Then, has either no breakpoint or one of the following breakpoint: `*sm-*`,`*md-*`,`*lg-*`, `*xl-*`
+- Ends with one of the following class values: `*1`, `*2`, `*3`, `*4`, `*5`
+
+## Rule Options
+
+This rule does not have any configuration options.
+
+## Example
+
+### ❌ Invalid Code
+
+```html
+<div class="gap-3">Content</div>
+<div class="column-gap-sm-5">Content</div>
+<div class="row-gap-lg-1">Content</div>
+```
+
+### ✅ Valid Code
+
+```html
+<div class="gap-8">Content</div>
+<div class="column-gap-sm-16">Content</div>
+<div class="row-gap-lg-24">Content</div>
+```

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

@@ -6,6 +6,7 @@ import noUnnumberedBorderRadiusRule, {
 import { rules as noDeprecatedSpacingUtilities } from './no-deprecated-spacing-utilities';
 import { rules as noDeprecatedGutterUtilities } from './no-deprecated-gutter-utilities';
 import { rules as noDeprecatedSizingUtilities } from './no-deprecated-sizing-utilities';
+import { rules as noDeprecatedGapUtilities } from './no-deprecated-gap-utilities';
 import noFormTextRule, { name as noFormTextRuleName } from './no-form-text';
 import noDeprecatedFontWeightRule, {
   name as noDeprecatedFontWeightRuleName,
@@ -34,10 +35,12 @@ export const htmlMigrationRules = {
   [noDeprecatedSpacingUtilities[1].name]: noDeprecatedSpacingUtilities[1].rule,
   [noDeprecatedSizingUtilities[0].name]: noDeprecatedSizingUtilities[0].rule,
   [noDeprecatedSizingUtilities[0].name]: noDeprecatedSizingUtilities[1].rule,
-  [noFormTextRuleName]: noFormTextRule,
-  [noDeprecatedFontWeightRuleName]: noDeprecatedFontWeightRule,
   [noDeprecatedGutterUtilities[0].name]: noDeprecatedGutterUtilities[0].rule,
   [noDeprecatedGutterUtilities[1].name]: noDeprecatedGutterUtilities[1].rule,
+  [noDeprecatedGapUtilities[0].name]: noDeprecatedGapUtilities[0].rule,
+  [noDeprecatedGapUtilities[1].name]: noDeprecatedGapUtilities[1].rule,
+  [noFormTextRuleName]: noFormTextRule,
+  [noDeprecatedFontWeightRuleName]: noDeprecatedFontWeightRule,
   [noDeprecatedShadowUtilitiesRuleName]: noDeprecatedShadowUtilitiesRule,
   [noDeprecatedHClearfixName]: noDeprecatedHClearfix,
   [noDeprecatedHVisuallyhiddenRuleName]: noDeprecatedHVisuallyhiddenRule,

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

@@ -0,0 +1,32 @@
+import { bootstrapSizeMap } from '../../../utils/common-data';
+import {
+  arrayToMap,
+  createTwoPhasesClassUpdateRule,
+  setUpClassesMutations,
+  TwoPhasesData,
+} from '../../../utils/two-phases-classes-update';
+
+// Class names
+const classNames = ['gap-', 'column-gap-', 'row-gap-'];
+
+export const data: TwoPhasesData = setUpClassesMutations(
+  arrayToMap(classNames),
+  bootstrapSizeMap,
+  'deprecatedGapUtilities',
+);
+
+export const rules = createTwoPhasesClassUpdateRule({
+  name: 'no-deprecated-gap-utilities',
+  phases: [
+    {
+      ...data.phases[0],
+      description:
+        'Flags deprecated bootstrap gap utility classes and replaces them with final ones with a temporary name (phase 1).',
+    },
+    {
+      ...data.phases[1],
+      description:
+        'Flags deprecated bootstrap gap utility classes and replaces the temporary class names with the final ones.',
+    },
+  ],
+});

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

@@ -0,0 +1,7 @@
+import { rules, data } from '../../../../src/rules/html/migrations/no-deprecated-gap-utilities';
+import { generatedDataTester } from '../../../utils/generated-data-tester';
+
+const validClasses = ['gap-sm-16', 'column-gap-md-48', 'row-gap-md-24'];
+
+generatedDataTester(rules[0].name, rules[0].rule, data.phases[0].mutations, validClasses);
+generatedDataTester(rules[1].name, rules[1].rule, data.phases[1].mutations, validClasses);