Merge pull request #8 from Automattic/add/check-gridicon-format

Add rule `jsx-gridicon-size` for enforcing recommended Gridicon size

packages/eslint-plugin-wpcalypso/CHANGELOG.md

@@ -1,3 +1,7 @@
+#### v1.2.0 (June 9, 2016)
+
+- New rule: [`jsx-gridicon-size`](docs/rules/jsx-gridicon-size.md)
+
 #### v1.1.4 (June 9, 2016)
 
 - Fix: i18n-no-variables should allow ES2015 template literal strings as long as there are no interpolated variables

packages/eslint-plugin-wpcalypso/README.md

@@ -48,6 +48,7 @@ Then configure the rules you want to use under the rules section.
 - [`i18n-no-placeholders-only`](docs/rules/i18n-no-placeholders-only.md): Disallow strings which include only placeholders
 - [`i18n-mismatched-placeholders`](docs/rules/i18n-mismatched-placeholders.md): Ensure placeholder counts match between singular and plural strings
 - [`i18n-named-placeholders`](docs/rules/i18n-named-placeholders.md): Disallow multiple unnamed placeholders
+- [`jsx-gridicon-size`](docs/rules/jsx-gridicon-size.md): Enforce recommended Gridicon size attributes
 
 ## License
 

packages/eslint-plugin-wpcalypso/docs/rules/jsx-gridicon-size.md

@@ -0,0 +1,19 @@
+# Enforce recommended Gridicon size attributes
+
+Gridicon JSX elements must use one of the recommended sizes.
+
+In previous incarnations, this warning could be subdued by adding a `nonStandardSize` prop to the element, but it's recommended instead to disable the rule using standard ESLint rule options ([documentation](http://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)).
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+<Gridicon size={ 20 } />
+```
+
+The following patterns are not warnings:
+
+```js
+<Gridicon size={ 18 } />
+```

packages/eslint-plugin-wpcalypso/lib/rules/jsx-gridicon-size.js

@@ -0,0 +1,39 @@
+/**
+ * @fileoverview Enforce recommended Gridicon size attributes
+ * @author Automattic
+ * @copyright 2016 Automattic. All rights reserved.
+ * See LICENSE.md file in root directory for full license.
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Constants
+//------------------------------------------------------------------------------
+
+var VALID_SIZES = [ 12, 18, 24, 36, 48, 54, 72 ];
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+var rule = module.exports = function( context ) {
+	return {
+		JSXAttribute: function( node ) {
+			if ( 'size' !== node.name.name ||
+					'JSXOpeningElement' !== node.parent.type ||
+					'Gridicon' !== node.parent.name.name ||
+					'JSXExpressionContainer' !== node.value.type ||
+					'Literal' !== node.value.expression.type ) {
+				return;
+			}
+
+			if ( -1 === VALID_SIZES.indexOf( node.value.expression.value ) ) {
+				context.report( node, rule.ERROR_MESSAGE );
+			}
+		}
+	};
+};
+
+rule.ERROR_MESSAGE = 'Gridicon size should be one of recommended sizes: ' + VALID_SIZES.join( ', ' );
+
+rule.schema = [];

packages/eslint-plugin-wpcalypso/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-wpcalypso",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "Custom ESLint rules for the WordPress.com Calypso project",
   "repository": {
     "type": "git",

packages/eslint-plugin-wpcalypso/tests/lib/rules/jsx-gridicon-size.js

@@ -0,0 +1,37 @@
+/**
+ * @fileoverview Enforce recommended Gridicon size attributes
+ * @author Automattic
+ * @copyright 2016 Automattic. All rights reserved.
+ * See LICENSE.md file in root directory for full license.
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require( '../../../lib/rules/jsx-gridicon-size' ),
+	RuleTester = require( 'eslint' ).RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+( new RuleTester() ).run( 'jsx-gridicon-size', rule, {
+	valid: [
+		{
+			code: '<Gridicon size={ 18 } />',
+			ecmaFeatures: { jsx: true }
+		}
+	],
+
+	invalid: [
+		{
+			code: '<Gridicon size={ 20 } />',
+			ecmaFeatures: { jsx: true },
+			errors: [ {
+				message: rule.ERROR_MESSAGE
+			} ]
+		}
+	]
+} );