@adyen/eslint-plugin-bento 2.8.0 → 2.10.0

package/rules/deprecation-bento-timeline-item-variant-prop/README.md

@@ -0,0 +1,25 @@
+# deprecation-bento-timeline-item-variant-prop
+
+## Description
+
+The `variant` prop in the following components is deprecated:
+
+- `bento-timeline-item`
+
+Please use `status` instead.
+
+## Rule Details
+
+This rule reports usages of the deprecated item.
+
+### ❌ Incorrect
+
+```html
+<bento-timeline-item variant="SUCCESS" /> <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
+```
+
+### ✅ Correct
+
+```html
+<bento-timeline-item status="green" /> <bento-timeline-item status="red" />
+```

package/rules/deprecation-bento-timeline-item-variant-prop/__tests__/deprecation-bento-timeline-item-variant-prop.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <bento-timeline-item variant="SUCCESS" />
+        <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
+        <bento-timeline-item :variant="BentoTimelineItemVariant.SUCCESS" />
+    </div>
+</template>
+
+<script setup></script>

package/rules/deprecation-bento-timeline-item-variant-prop/__tests__/eslint.config.js

@@ -0,0 +1,26 @@
+// eslint.config.js
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            // Register the specific rule we are testing
+            '@adyen/bento/deprecation-bento-timeline-item-variant-prop': ['warn', { autofix: true }],
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.integration.test.ts

@@ -0,0 +1,31 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
+    it('should lint with warning', () => {
+        // Load .eslintrc
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        // Load the test file generated alongside this one
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-bento-timeline-item-variant-prop.vue');
+
+        // Execute the linter
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        // 3 examples: static, shorthand, longhand
+        expect(result[0].warningCount).toBe(3);
+
+        // Verify the message structure on the first error found.
+        // Since the rule is the same for all components, checking the first one confirms the message is correct.
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-bento-timeline-item-variant-prop',
+            severity: 1,
+
+            messageId: 'deprecation',
+            message: `The "variant" prop is deprecated. Please use "status" instead.`,
+
+            fix: expect.objectContaining({
+                text: expect.stringContaining('status'),
+            }),
+        });
+    });
+});

package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.js

@@ -0,0 +1,78 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Deprecates usage of variant prop in bento-timeline-item',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-bento-timeline-item-variant-prop/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecation: `The "variant" prop is deprecated. Please use "status" instead.`,
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
+
+        /* ------------------------------------------------ */
+        /* PROP DEPRECATION                                 */
+        /* ------------------------------------------------ */
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            // 1. STATIC: value="foo"
+            [`VElement:matches([name="bento-timeline-item"], [name="BentoTimelineItem"]) > VStartTag > VAttribute[directive=false][key.name="variant"]`](
+                node
+            ) {
+                context.report({
+                    node,
+                    messageId: 'deprecation',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node.key, 'status');
+                        },
+                    }),
+                });
+            },
+
+            // 2. DYNAMIC: :value="foo" or v-bind:value="foo"
+            [`VElement:matches([name="bento-timeline-item"], [name="BentoTimelineItem"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="variant"]`](
+                node
+            ) {
+                context.report({
+                    node,
+                    messageId: 'deprecation',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node.key.argument, 'status');
+                        },
+                    }),
+                });
+            },
+        });
+    },
+};

package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.test.ts

@@ -0,0 +1,66 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationBentoTimelineItemVariantProp from './deprecation-bento-timeline-item-variant-prop';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
+    ruleTester.run('deprecation-bento-timeline-item-variant-prop', deprecationBentoTimelineItemVariantProp, {
+        valid: [
+            {
+                name: 'Valid usage for bento-timeline-item',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-timeline-item status="val" />
+                </template>
+                `,
+            },
+        ],
+        invalid: [
+            {
+                name: 'Invalid: autofix disabled (explicit false)',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item variant="val" /></template>`,
+                output: null,
+                options: [{ autofix: false }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: autofix disabled (no options)',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="val" /></template>`,
+                output: null,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-timeline-item: Static
+            {
+                name: 'Invalid: Static prop on bento-timeline-item',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item variant="val" /></template>`,
+                output: `<template><bento-timeline-item status="val" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-timeline-item: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-timeline-item',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="val" /></template>`,
+                output: `<template><bento-timeline-item :status="val" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+        ],
+    });
+});

package/rules/deprecation-components-aria-label-prop/README.md

@@ -0,0 +1,62 @@
+# deprecation-components-aria-label-prop
+
+## Description
+
+The `ariaLabel` prop in the following components is deprecated:
+
+- `bento-dropdown`
+- `bento-input-field`
+- `bento-pagination`
+- `bento-popover`
+- `bento-segmented-control`
+
+Please use `aria-label` instead.
+
+## Rule Details
+
+This rule reports usages of the deprecated `ariaLabel` prop (camelCase). The replacement `aria-label` is the native HTML
+attribute, which the components already pick up via `attrs['aria-label']`.
+
+### ❌ Incorrect
+
+```html
+<bento-dropdown ariaLabel="value" /> <bento-dropdown :ariaLabel="value" />
+```
+
+```html
+<bento-input-field ariaLabel="value" /> <bento-input-field :ariaLabel="value" />
+```
+
+```html
+<bento-pagination ariaLabel="value" /> <bento-pagination :ariaLabel="value" />
+```
+
+```html
+<bento-popover ariaLabel="value" /> <bento-popover :ariaLabel="value" />
+```
+
+```html
+<bento-segmented-control ariaLabel="value" /> <bento-segmented-control :ariaLabel="value" />
+```
+
+### ✅ Correct
+
+```html
+<bento-dropdown aria-label="value" />
+```
+
+```html
+<bento-input-field aria-label="value" />
+```
+
+```html
+<bento-pagination aria-label="value" />
+```
+
+```html
+<bento-popover aria-label="value" />
+```
+
+```html
+<bento-segmented-control aria-label="value" />
+```

package/rules/deprecation-components-aria-label-prop/__tests__/deprecation-components-aria-label-prop.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <bento-dropdown ariaLabel="value" />
+        <bento-dropdown :ariaLabel="value" />
+        <bento-dropdown v-bind:ariaLabel="value" />
+
+        <bento-input-field ariaLabel="value" />
+        <bento-input-field :ariaLabel="value" />
+        <bento-input-field v-bind:ariaLabel="value" />
+
+        <bento-pagination ariaLabel="value" />
+        <bento-pagination :ariaLabel="value" />
+        <bento-pagination v-bind:ariaLabel="value" />
+
+        <bento-popover ariaLabel="value" />
+        <bento-popover :ariaLabel="value" />
+        <bento-popover v-bind:ariaLabel="value" />
+
+        <bento-segmented-control ariaLabel="value" />
+        <bento-segmented-control :ariaLabel="value" />
+        <bento-segmented-control v-bind:ariaLabel="value" />
+    </div>
+</template>
+
+<script setup></script>

package/rules/deprecation-components-aria-label-prop/__tests__/eslint.config.js

@@ -0,0 +1,26 @@
+// eslint.config.js
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            // Register the specific rule we are testing
+            '@adyen/bento/deprecation-components-aria-label-prop': 'warn',
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-components-aria-label-prop/deprecation-components-aria-label-prop.integration.test.ts

@@ -0,0 +1,36 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-components-aria-label-prop', () => {
+    it('should lint with warning', () => {
+        // Load .eslintrc
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        // Load the test file generated alongside this one
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-components-aria-label-prop.vue');
+
+        // Execute the linter
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        /* ------------------------------------------------ */
+        /* CASE 2: SINGLE REPLACEMENT                       */
+        /* ------------------------------------------------ */
+
+        // For props, we generate 3 examples (static, shorthand, longhand) FOR EACH component.
+        // Total = (Number of Components) * 3
+        const numberOfComponents = 5;
+        expect(result[0].warningCount).toBe(numberOfComponents * 3);
+
+        // Verify the message structure on the first error found.
+        // Since the rule is the same for all components, checking the first one confirms the message is correct.
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-components-aria-label-prop',
+            severity: 1,
+
+            messageId: 'deprecation',
+            message: `The "ariaLabel" prop is deprecated. Please use "aria-label" instead.`,
+        });
+
+        // Without autofix option, no fix should be present
+        expect(result[0].messages[0].fix).toBeUndefined();
+    });
+});

package/rules/deprecation-components-aria-label-prop/deprecation-components-aria-label-prop.js

@@ -0,0 +1,79 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Deprecates usage of ariaLabel prop in bento-dropdown, bento-input-field, bento-pagination, bento-popover, bento-segmented-control',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-components-aria-label-prop/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecation: `The "ariaLabel" prop is deprecated. Please use "aria-label" instead.`,
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
+
+        /* ------------------------------------------------ */
+        /* CASE 2: PROP DEPRECATION (Multiple Components)   */
+        /* ------------------------------------------------ */
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            // 1. STATIC: ariaLabel="foo" (parser lowercases to "arialabel")
+            [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"], [name="bento-input-field"], [name="BentoInputField"], [name="bento-pagination"], [name="BentoPagination"], [name="bento-popover"], [name="BentoPopover"], [name="bento-segmented-control"], [name="BentoSegmentedControl"]) > VStartTag > VAttribute[directive=false][key.name="arialabel"]`](
+                node
+            ) {
+                context.report({
+                    node,
+                    messageId: 'deprecation',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node.key, 'aria-label');
+                        },
+                    }),
+                });
+            },
+
+            // 2. DYNAMIC: :ariaLabel="foo" or v-bind:ariaLabel="foo" (parser lowercases to "arialabel")
+            [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"], [name="bento-input-field"], [name="BentoInputField"], [name="bento-pagination"], [name="BentoPagination"], [name="bento-popover"], [name="BentoPopover"], [name="bento-segmented-control"], [name="BentoSegmentedControl"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="arialabel"]`](
+                node
+            ) {
+                context.report({
+                    node,
+                    messageId: 'deprecation',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node.key.argument, 'aria-label');
+                        },
+                    }),
+                });
+            },
+        });
+    },
+};

package/rules/deprecation-components-aria-label-prop/deprecation-components-aria-label-prop.test.ts

@@ -0,0 +1,194 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationComponentsAriaLabelProp from './deprecation-components-aria-label-prop';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-components-aria-label-prop', () => {
+    ruleTester.run('deprecation-components-aria-label-prop', deprecationComponentsAriaLabelProp, {
+        valid: [
+            {
+                name: 'Valid usage for bento-dropdown',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-dropdown aria-label="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-input-field',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-input-field aria-label="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-pagination',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-pagination aria-label="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-popover',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-popover aria-label="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-segmented-control',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-segmented-control aria-label="val" />
+                </template>
+                `,
+            },
+        ],
+        invalid: [
+            // bento-dropdown: Static
+            {
+                name: 'Invalid: Static prop on bento-dropdown',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-dropdown: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-dropdown',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown :ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-input-field: Static
+            {
+                name: 'Invalid: Static prop on bento-input-field',
+                filename: 'test.vue',
+                code: `<template><bento-input-field ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-input-field: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-input-field',
+                filename: 'test.vue',
+                code: `<template><bento-input-field :ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-pagination: Static
+            {
+                name: 'Invalid: Static prop on bento-pagination',
+                filename: 'test.vue',
+                code: `<template><bento-pagination ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-pagination: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-pagination',
+                filename: 'test.vue',
+                code: `<template><bento-pagination :ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-popover: Static
+            {
+                name: 'Invalid: Static prop on bento-popover',
+                filename: 'test.vue',
+                code: `<template><bento-popover ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-popover: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-popover',
+                filename: 'test.vue',
+                code: `<template><bento-popover :ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-segmented-control: Static
+            {
+                name: 'Invalid: Static prop on bento-segmented-control',
+                filename: 'test.vue',
+                code: `<template><bento-segmented-control ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-segmented-control: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-segmented-control',
+                filename: 'test.vue',
+                code: `<template><bento-segmented-control :ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+        ],
+    });
+
+    /* ------------------------------------------------ */
+    /* AUTOFIX TESTS                                    */
+    /* ------------------------------------------------ */
+    ruleTester.run('deprecation-components-aria-label-prop (autofix enabled)', deprecationComponentsAriaLabelProp, {
+        valid: [
+            {
+                name: 'Valid: aria-label (kebab-case) on bento-dropdown (autofix enabled)',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-dropdown aria-label="val" /></template>`,
+            },
+        ],
+        invalid: [
+            {
+                name: 'Autofix: static prop on bento-dropdown',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-dropdown ariaLabel="val" /></template>`,
+                output: `<template><bento-dropdown aria-label="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Autofix: dynamic prop on bento-dropdown',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-dropdown :ariaLabel="val" /></template>`,
+                output: `<template><bento-dropdown :aria-label="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Autofix: static prop on bento-segmented-control',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-segmented-control ariaLabel="val" /></template>`,
+                output: `<template><bento-segmented-control aria-label="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Autofix: v-bind longhand on bento-popover',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-popover v-bind:ariaLabel="val" /></template>`,
+                output: `<template><bento-popover v-bind:aria-label="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Autofix: does not fix when autofix is false',
+                filename: 'test.vue',
+                options: [{ autofix: false }],
+                code: `<template><bento-dropdown ariaLabel="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+        ],
+    });
+});