Merge pull request #133 from mobify/release-2.6.0

🔖 Release 2.6.0

Author: Marlow Payne

.gitignore

@@ -1 +1,2 @@
+*.sw[a-z]
 .idea/

CHANGELOG

@@ -1,3 +1,8 @@
+Pending Release
+    -
+2.6.0
+    - Remove `variable-for-property` rule from sass-lint [#126](https://github.com/mobify/mobify-code-style/pull/126)
+    - Add the eslint jsx-a11y plugin through a new `mobify-es6-react-a11y` configuration [#129](https://github.com/mobify/mobify-code-style/pull/129)
 2.5.3
     - Fix #123 by using react/jsx-wrap-multilines rule
     - Migrate CSSComb documentation from Confluence to code style repo

css/.sass-lint.yml

@@ -323,9 +323,7 @@ rules:
   trailing-semicolon: 2
   url-quotes: 1 # Only warn here, since sass-lint doesn't understand helpers in urls
   variable-for-property:
-    - 2
-    - properties:
-        - font
+    - 0
   variable-name-format:
     - 2
     - allow-leading-underscore: true

es6/README.md

@@ -5,10 +5,44 @@ Included is a default ESLint configuration, `mobify-es6.yml` written for ESLint
 - `eslint-plugin-import`
 - `eslint-import-resolver-webpack`
 
-The lint configuration is the definitive source for rules; this document explains the most notable ones. `eslint <source-files> --fix` will fix most formatting issues, such as spacing. 
+The lint configuration is the definitive source for rules; this document explains the most notable ones. `eslint <source-files> --fix` will fix most formatting issues, such as spacing.
 
 If React/JSX is in use, use the React default configuration `mobify-es6-react.yml`, which also requires the `eslint-plugin-react` module.
 
+JSX accessibility linting is available with the `mobify-es6-react-a11y.yml` configuration. It requires the additional modules:
+
+- `eslint-plugin-react`
+- `eslint-plugin-jsx-a11y`
+
+## Global Names and Environments
+
+By default, the lint configuration only assumes the standard set of
+global names in the browser environment are defined. If writing a
+script that runs in a different environment, such as a worker or Node,
+add an `eslint-env` directive at the top of the file, e.g.:
+```javascript
+/* eslint-env node */
+```
+
+If you have defined or are using a global that is not associated with
+any environment, you can define it for the linter in one of two
+ways. If the global is only used in a single file or single place,
+define it in that file by inserting a `global` directive at the top of
+the file:
+```javascript
+/* global myGlobal anotherGlobal Mobify */
+```
+
+If, instead, it is used throughout your project, add it to the
+`.eslintrc.yml` file for that project, with
+```yaml
+globals:
+    myGlobal: true
+    anotherGlobal: false
+```
+The boolean value indicates whether the global is to be treated as
+read-only (`false`) or read-write (`true`).
+
 ## Overriding Lint Rules
 
 Some of the lint rules disallow uncommon but valid behaviour that is easily confused with/typoed from much more common behaviour. If you need to use the disallowed behaviour on purpose, use an explicit lint override in the source.
@@ -35,21 +69,21 @@ if (x > y)
     return x - y
 else
     return y - x
-    
-for (let item of cartItems) 
+
+for (let item of cartItems)
     console.log(item)
-    
+
 //good!
 if (x > y) {
     return x - y
 } else {
     return y - x
 }
-    
+
 for (let item of cartItems) {
     console.log(item)
 }
-   
+
 ```
 
 ## Avoid 'Yoda' conditions
@@ -91,12 +125,12 @@ return {
 It is clearer to use dot notation instead of bracket notation when it is available (i.e. when the property name is a constant, identifier-legal string).
 
 ```javascript
-// Bad 
+// Bad
 console.log(myObj['prop'])
 
 // Good
 console.log(myObj.prop)
-``` 
+```
 
 ## Use ES6 `import` rather than `require`
 
@@ -138,7 +172,7 @@ export const func3 = () => { console.log(3) }
 
 ## Don't use semicolons
 
-With ES6 (and the current lint rules!) we have finally arrived at an environment where automatic semicolon insertion won't cause problems. So don't use them. 
+With ES6 (and the current lint rules!) we have finally arrived at an environment where automatic semicolon insertion won't cause problems. So don't use them.
 
 ## Prefer template strings to string concatenation
 
@@ -159,9 +193,9 @@ Ternary expressions can be helpful, but can also lead to unclear code. If multip
 
 ```javascript
 // Bad
-let name = (item 
-	? item.name 
-	: (defaultItem 
+let name = (item
+	? item.name
+	: (defaultItem
 		? defaultItem.name
 		: defaultName
 	)
@@ -222,7 +256,7 @@ return fetch('http://mysite.com/api')
     .then(function(response) {
         return response.json()
     })
-    
+
 // Good
 return fetch('http://mysite.com/api')
     .then((response) => {
@@ -232,7 +266,7 @@ return fetch('http://mysite.com/api')
 // Also good
 return fetch('http://mysite.com/api')
     .then((response) => response.json())
-    
+
 // Still fine
 element.addEventListener('click', function(event) {
 	console.log(this.id)
@@ -270,7 +304,7 @@ This is more readable and prevents unexpected results when commenting out lines.
 let x = 5,
     y = 10,
     z = 100
-    
+
 // Good
 let x = 5
 let y = 10
@@ -354,11 +388,11 @@ class MyComponent extends React.Component {
 	componentDidMount() {
 		this.props.sendAnalytics()
 	}
-	
+
 	render() {
 		return <div>{this.props.content}</div>
 	}
-}	
+}
 ```
 
 ## Use plain functions for stateless components
@@ -370,7 +404,7 @@ React now allows stateless components to be implemented as pure functions rather
 class MyComponent extends React.Component {
 	render() {
 		return (
-			<ul> 
+			<ul>
 				{this.props.items.map((item) => <li>{item.content}</li>}
 			</ul>
 		)
@@ -390,7 +424,7 @@ const MyComponent = ({items}) => {
 
 # JSX
 
-## Self-close component elements if possible 
+## Self-close component elements if possible
 
 ```javascript
 // Bad
@@ -400,4 +434,3 @@ const MyComponent = ({items}) => {
 // Good
 <MyComponent prop1="test" prop2={10+2} />
 ```
-

es6/mobify-es6-react-a11y.yml

@@ -0,0 +1,9 @@
+extends:
+  - './mobify-es6-react.yml'
+  - 'plugin:jsx-a11y/recommended'
+plugins:
+  - jsx-a11y
+rules:
+  # JSX A11y rules
+  jsx-a11y/href-no-hash: [1, 'Link']
+  jsx-a11y/img-has-alt: [1, 'Image']

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobify-code-style",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "description": "Code style guide and linting tools for Mobify",
   "repository": {
     "type": "git",