Add a11y-use-next-tooltip rule

docs/rules/use-next-tooltip.md

@@ -0,0 +1,16 @@
+# Recommends to use the `next` tooltip instead of the current stable one.
+
+## Rule details
+
+This rule recommends using the tooltip that is imported from `@primer/react/next` instead of the main entrypoint. The components that are exported from `@primer/react/next` are recommended over the main entrypoint ones because `next` components are reviewed and remediated for accessibility issues.
+👎 Examples of **incorrect** code for this rule:
+
+```tsx
+import {Tooltip} from '@primer/react'
+```
+
+👍 Examples of **correct** code for this rule:
+
+```tsx
+import {Tooltip} from '@primer/react/next'
+```

src/rules/__tests__/use-next-tooltip.test.js

@@ -0,0 +1,32 @@
+const rule = require('../use-next-tooltip')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+})
+
+ruleTester.run('use-next-tooltip', rule, {
+  valid: [
+    `import {Tooltip} from '@primer/react/next'`,
+    `import {UnderlineNav, Button} from '@primer/react';
+   import {Tooltip} from '@primer/react/next';`,
+    `import {UnderlineNav, Button} from '@primer/react';
+   import {Tooltip, SelectPanel} from '@primer/react/next';`
+  ],
+  invalid: [
+    {
+      code: `import {Tooltip} from '@primer/react'`,
+      errors: [{messageId: 'useNextTooltip'}]
+    },
+    {
+      code: `import {Tooltip, Button} from '@primer/react'`,
+      errors: [{messageId: 'useNextTooltip'}]
+    }
+  ]
+})

src/rules/use-next-tooltip.js

@@ -0,0 +1,36 @@
+'use strict'
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'recommends the use of @primer/react/next Tooltip component',
+      category: 'Best Practices',
+      recommended: true
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      useNextTooltip: 'Please use @primer/react/next Tooltip component that has accessibility improvements'
+    }
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== '@primer/react') {
+          return
+        }
+        const hasTooltip = node.specifiers.some(
+          specifier => specifier.imported && specifier.imported.name === 'Tooltip'
+        )
+        if (!hasTooltip) {
+          return
+        }
+        context.report({
+          node,
+          messageId: 'useNextTooltip'
+        })
+      }
+    }
+  }
+}