Export enforce-button-for-link-with-no-href rule, plus some minor tidying (#461)

* add missing dash to rule name

* include enforce-button-for-link-with-no-href in exported rules

* sort list of exported rules

* add docs for enforce-button-for-link-with-no-href rule

* rename new-color-css-vars docs to match rule name

* link all docs in readme

* add changeset

* run format

Author: joshfarrant

.changeset/tough-parts-sin.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': patch
+---
+
+Export `enforce-button-for-link-with-no-href` rule, which flags `Link` components which don't have a `href`.

README.md

@@ -31,13 +31,26 @@ ESLint rules for Primer React
 
 ## Rules
 
-- [direct-slot-children](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/direct-slot-children.md)
-- [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)
-- [new-css-color-vars](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/new-css-color-vars.md)
-- [no-deprecated-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-props.md)
-- [a11y-tooltip-interactive-trigger](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-tooltip-interactive-trigger.md)
 - [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)
 - [a11y-link-in-text-block](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-link-in-text-block.md)
+- [a11y-no-duplicate-form-labels](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-no-duplicate-form-labels.md)
+- [a11y-no-title-usage](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-no-title-usage.md)
 - [a11y-remove-disable-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-remove-disable-tooltip.md)
+- [a11y-tooltip-interactive-trigger](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-tooltip-interactive-trigger.md)
 - [a11y-use-accessible-tooltip](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-use-accessible-tooltip.md)
+- [direct-slot-children](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/direct-slot-children.md)
+- [enforce-button-for-link-with-no-href](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/enforce-button-for-link-with-no-href.md)
+- [enforce-css-module-default-import](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/enforce-css-module-default-import.md)
+- [enforce-css-module-identifier-casing](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/enforce-css-module-identifier-casing.md)
+- [new-color-css-vars](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/new-color-css-vars.md)
+- [no-deprecated-entrypoints](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-entrypoints.md)
 - [no-deprecated-experimental-components](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-experimental-components.md)
+- [no-deprecated-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-props.md)
+- [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)
+- [no-unnecessary-components](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-unnecessary-components.md)
+- [no-use-responsive-value](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-use-responsive-value.md)
+- [no-wildcard-imports](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-wildcard-imports.md)
+- [prefer-action-list-item-onselect](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/prefer-action-list-item-onselect.md)
+- [spread-props-first](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/spread-props-first.md)
+- [use-deprecated-from-deprecated](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/use-deprecated-from-deprecated.md)
+- [use-styled-react-import](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/use-styled-react-import.md)

docs/rules/enforce-button-for-link-with-no-href.md

@@ -0,0 +1,41 @@
+# Enforce Button for Link with No href (enforce-button-for-link-with-no-href)
+
+Primer's `Link` component enables users to navigate between pages. Rendering it without an `href` makes the element behave like a button without the correct semantics, which negatively impacts accessibility. Use the `Button` component to trigger an action, or ensure the `Link` has a valid `href`.
+
+## Rule details
+
+This rule reports any `Link` from `@primer/react` that does not include an `href` prop.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/enforce-button-for-link-with-no-href: "error" */
+import {Link} from '@primer/react'
+;<Link onClick={handleClick}>Save changes</Link>
+```
+
+```jsx
+/* eslint primer-react/enforce-button-for-link-with-no-href: "error" */
+import {Link} from '@primer/react'
+;<Link className="text-right">Learn more</Link>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/enforce-button-for-link-with-no-href: "error" */
+import {Link} from '@primer/react'
+;<Link href="https://primer.style/react">Read the docs</Link>
+```
+
+```jsx
+/* eslint primer-react/enforce-button-for-link-with-no-href: "error" */
+import {Button, Link} from '@primer/react'
+
+<Button onClick={handleClick}>Save changes</Button>
+<Link href={issueUrl}>View issue</Link>
+```
+
+## Options
+
+This rule has no options.

docs/rules/new-css-color-vars.md docs/rules/new-color-css-vars.mddocs/rules/new-css-color-vars.md renamed to docs/rules/new-color-css-vars.md

@@ -1,27 +1,28 @@
 module.exports = {
   rules: {
-    'direct-slot-children': require('./rules/direct-slot-children'),
-    'no-deprecated-entrypoints': require('./rules/no-deprecated-entrypoints'),
-    'no-system-props': require('./rules/no-system-props'),
-    'no-deprecated-experimental-components': require('./rules/no-deprecated-experimental-components'),
-    'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),
-    'new-color-css-vars': require('./rules/new-color-css-vars'),
     'a11y-explicit-heading': require('./rules/a11y-explicit-heading'),
-    'no-deprecated-props': require('./rules/no-deprecated-props'),
     'a11y-link-in-text-block': require('./rules/a11y-link-in-text-block'),
+    'a11y-no-duplicate-form-labels': require('./rules/a11y-no-duplicate-form-labels'),
+    'a11y-no-title-usage': require('./rules/a11y-no-title-usage'),
     'a11y-remove-disable-tooltip': require('./rules/a11y-remove-disable-tooltip'),
+    'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),
     'a11y-use-accessible-tooltip': require('./rules/a11y-use-accessible-tooltip'),
-    'a11y-no-title-usage': require('./rules/a11y-no-title-usage'),
-    'a11y-no-duplicate-form-labels': require('./rules/a11y-no-duplicate-form-labels'),
-    'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
-    'no-wildcard-imports': require('./rules/no-wildcard-imports'),
+    'direct-slot-children': require('./rules/direct-slot-children'),
+    'enforce-button-for-link-with-no-href': require('./rules/enforce-button-for-link-with-no-href'),
+    'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
+    'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
+    'new-color-css-vars': require('./rules/new-color-css-vars'),
+    'no-deprecated-entrypoints': require('./rules/no-deprecated-entrypoints'),
+    'no-deprecated-experimental-components': require('./rules/no-deprecated-experimental-components'),
+    'no-deprecated-props': require('./rules/no-deprecated-props'),
+    'no-system-props': require('./rules/no-system-props'),
     'no-unnecessary-components': require('./rules/no-unnecessary-components'),
+    'no-use-responsive-value': require('./rules/no-use-responsive-value'),
+    'no-wildcard-imports': require('./rules/no-wildcard-imports'),
     'prefer-action-list-item-onselect': require('./rules/prefer-action-list-item-onselect'),
-    'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
-    'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
-    'use-styled-react-import': require('./rules/use-styled-react-import'),
     'spread-props-first': require('./rules/spread-props-first'),
-    'no-use-responsive-value': require('./rules/no-use-responsive-value'),
+    'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
+    'use-styled-react-import': require('./rules/use-styled-react-import'),
   },
   configs: {
     recommended: require('./configs/recommended'),

src/index.js

@@ -1,4 +1,4 @@
-const rule = require('../enforce-button-for-link-with-nohref')
+const rule = require('../enforce-button-for-link-with-no-href')
 const {RuleTester} = require('eslint')
 
 const ruleTester = new RuleTester({
@@ -13,7 +13,7 @@ const ruleTester = new RuleTester({
   },
 })
 
-ruleTester.run('enforce-button-for-link-with-nohref', rule, {
+ruleTester.run('enforce-button-for-link-with-no-href', rule, {
   valid: [
     // Link with href attribute
     `import {Link} from '@primer/react';