Add button eslint rule for va-button and va-table (#984)

* Add button eslint rule

* add check for input type button

* add table tests

* typo fix

packages/eslint-plugin/index.js

@@ -15,6 +15,8 @@ module.exports = {
     'use-new-utility-classes': require('./lib/rules/use-new-utility-classes'),
     'use-workspace-imports': require('./lib/rules/use-workspace-imports'),
     'remove-expanding-group': require('./lib/rules/remove-expanding-group'),
+    'prefer-button-component': require('./lib/rules/prefer-button-component'),
+    'prefer-table-component': require('./lib/rules/prefer-table-component'),
   },
   configs: {
     recommended: require('./lib/config/recommended'),

packages/eslint-plugin/lib/config/recommended.js

@@ -187,5 +187,7 @@ module.exports = {
     '@department-of-veterans-affairs/deprecated-classes': 1,
     '@department-of-veterans-affairs/use-workspace-imports': 1,
     '@department-of-veterans-affairs/remove-expanding-group': 1,
+    '@department-of-veterans-affairs/prefer-button-component': 1,
+    '@department-of-veterans-affairs/prefer-table-component': 1,
   },
 };

packages/eslint-plugin/lib/rules/prefer-button-component.js

@@ -0,0 +1,32 @@
+const jsxAstUtils = require('jsx-ast-utils');
+
+const { elementType, getProp, getLiteralPropValue } = jsxAstUtils;
+
+const MESSAGE =
+  'The <va-button> Web Component should be used instead of the button HTML element.';
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      JSXElement(node) {
+        const anchorNode = node.openingElement;
+        const typeProp = getProp(anchorNode.attributes, 'type');
+
+        // Only display if we are on a button or input with type button
+        if (elementType(anchorNode) === 'button' || 
+          (elementType(anchorNode) === 'input' && getLiteralPropValue(typeProp) === 'button')){
+
+          context.report({
+            node,
+            message:  MESSAGE,
+          })
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin/lib/rules/prefer-table-component.js

@@ -0,0 +1,30 @@
+const jsxAstUtils = require('jsx-ast-utils');
+
+const { elementType } = jsxAstUtils;
+
+const MESSAGE =
+  'The <va-table> Web Component should be used to instead of the table HTML element.';
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      JSXElement(node) {
+        const anchorNode = node.openingElement;
+
+        // Only display if we are on a table element
+        if (elementType(anchorNode) === 'table'){
+
+          context.report({
+            node,
+            message:  MESSAGE,
+          })
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/eslint-plugin",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "ESLint plugin for va.gov projects",
   "homepage": "https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/tree/master/packages/eslint-plugin#readme",
   "bugs": {

packages/eslint-plugin/tests/lib/rules/prefer-button-component.js

@@ -0,0 +1,120 @@
+'use strict';
+
+const rule = require('../../../lib/rules/prefer-button-component');
+const RuleTester = require('eslint').RuleTester;
+
+const parserOptions = {
+  ecmaVersion: 2018,
+  // sourceType: 'module',
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+const ruleTester = new RuleTester({ parserOptions });
+
+ruleTester.run('prefer-button-component', rule, {
+  valid: [
+    {
+      code: `
+        const button = () => (<va-button
+          id="cancel"
+          onClick={handlers.onCancel}
+          text="Cancel"
+        />)
+      `,
+    }
+  ],
+  invalid: [
+    {
+      code: `
+        const button = () => (
+          <button
+          className="foo"
+          id="bar"
+          onClick={() => window.print()}
+        >
+          Print this page
+        </button>
+        )
+      `,
+      errors: [
+        {
+          message:
+            'The <va-button> Web Component should be used instead of the button HTML element.'
+        },
+      ],
+    },
+    {
+      code: `
+        const button = () => (<button
+          onClick={() => window.print()}
+        >
+          {variable}
+        </button>)
+      `,
+      errors: [
+        {
+          message:
+            'The <va-button> Web Component should be used instead of the button HTML element.'
+        },
+      ],
+     },
+     {
+      code: `
+        const button = () => (<button
+          onClick={() => window.print()}
+        >
+         Some plain text next to a {variable}
+        </button>)
+      `,
+      errors: [
+        {
+          message:
+            'The <va-button> Web Component should be used instead of the button HTML element.'
+        },
+      ]
+     },
+     {
+      code: `
+        const button = () => (<button
+          onClick={() => window.print()}
+        >
+          <span>Button Text</span>
+        </button>)
+      `,
+      errors: [
+        {
+          message:
+          'The <va-button> Web Component should be used instead of the button HTML element.'
+        },
+      ],
+    },
+    {
+      code: `
+        const button = () => (
+          <input type="button">Click me</input>
+        )
+      `,
+      errors: [
+        {
+          message:
+            'The <va-button> Web Component should be used instead of the button HTML element.'
+        },
+      ],
+    },
+    {
+      code: `
+        const button = () => (
+          <input type="button" value="Click me" />
+        )
+      `,
+      errors: [
+        {
+          message:
+            'The <va-button> Web Component should be used instead of the button HTML element.'
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin/tests/lib/rules/prefer-table-component.js

@@ -0,0 +1,73 @@
+'use strict';
+
+const rule = require('../../../lib/rules/prefer-table-component');
+const RuleTester = require('eslint').RuleTester;
+
+const parserOptions = {
+  ecmaVersion: 2018,
+  // sourceType: 'module',
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+const ruleTester = new RuleTester({ parserOptions });
+
+ruleTester.run('prefer-table-component', rule, {
+  valid: [
+    {
+      code: `
+        const table = () => (<va-table
+          id="cancel"
+          onClick={handlers.onCancel}
+          text="Cancel"
+        />)
+      `,
+    }
+  ],
+  invalid: [
+    {
+      code: `
+        const table = () => (
+          <table>
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Name</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Nov 9</td>
+                <td>Kelly</td>
+              </tr>
+              <tr>
+                <td>Dec 19</td>
+                <td>Franklin</td>
+              </tr>
+            </tbody>
+          </table>
+        )
+      `,
+      errors: [
+        {
+          message:
+            'The <va-table> Web Component should be used to instead of the table HTML element.'
+        },
+      ],
+    },
+    {
+      code: `
+        const table = () => (
+          <table></table>
+        )
+      `,
+      errors: [
+        {
+          message:
+            'The <va-table> Web Component should be used to instead of the table HTML element.'
+        },
+      ],
+    }
+  ],
+});