Merge pull request #121 from mobify/release-v2.5.2

Release v2.5.2

Author: Mike Nikles

CHANGELOG

@@ -1,3 +1,11 @@
+2.5.2
+    - Fix #43 by updating all underlines in Sass code examples
+    - Fix #114 by removing invalid options from CSSComb config file
+    - Add a React rule to make sure propTypes are ordered, required ones declared first and callbacks (e.g. onChange) declared last.
+    - Update ES6 indent rule on switch statements
+    - Add ignore patterns for unused vars/args to the React configuration
+    - Ignore non-JS files and node_modules in the ES6 import module
+    - Add a new ES5 configuration ported to ESLint 2 and up
 2.5.1
     - Update line length to 200
     - Remove rule for no-unresolved import

README.md

@@ -4,17 +4,29 @@ A repo to document code standards for different languages and provide tools for
 
 [![NPM version](https://badge.fury.io/js/mobify-code-style.svg)](http://badge.fury.io/js/mobify-code-style)
 
-## JavaScript (ES5)
+## JavaScript (ES5) with Grunt
 
-Typically, we lint our javascript files using [Grunt](http://gruntjs.com/) and [grunt-eslint](https://github.com/sindresorhus/grunt-eslint). grunt-eslint is a Grunt helper for the [ESLint](http://eslint.org/) linter.
+Typically, we lint our javascript files using
+[Grunt](http://gruntjs.com/) and
+[grunt-eslint](https://github.com/sindresorhus/grunt-eslint). grunt-eslint
+is a Grunt helper for the [ESLint](http://eslint.org/) linter.
 
 To add javascript linting to your project:
 
  1. Install the NPM `mobify-code-style` and `grunt-eslint` modules.
- 2. Create a [Gruntfile](http://gruntjs.com/sample-gruntfile) if you don't have one already.
- 3. In the initConfig of your gruntfile, add a section for eslint pointing to the correct linting file.
+ 2. Create a [Gruntfile](http://gruntjs.com/sample-gruntfile) if you
+    don't have one already.
+ 3. Create an `.eslintrc.yml` file in the root of your project directory
+ 4. In the initConfig of your gruntfile, add a section for eslint pointing to the correct linting file.
+
+The `.eslintrc.yml` file should contain, to begin with:
+```yaml
+extends:
+  - './node_modules/mobify-code-style/es5/mobify-es5.yml'
+```
 
-Sample eslint config:
+
+Sample eslint Grunt config:
 
 ```javascript
 eslint:{
@@ -24,20 +36,36 @@ eslint:{
             // When true, eslint will test _only_ the rules set in the provided
             // configuration file
             reset: false,
-            config: 'node_modules/mobify-code-style/javascript/.eslintrc'
+            configFile: './.eslintrc.yml'
         }
     }
 }
 ```
 
+### Migrating from ESLint 0.x or 1.x to ESlint 2.x or 3.x
+
+If you upgrade the version of `grunt-eslint` you use from one that
+pulls in ESLint 1.x or lower to one that pulls
+in ESLint 2.x or greater, you must modify the configuration files to
+include the new style of configuration.
+
+If the Grunt config includes the default config
+`./node_modules/mobify-code-style/javascript/.eslintrc`, replace that
+with `./.eslintrc.yml`, and add an `.eslintrc.yml` to the project root
+as described above.
+
+If there are modifications to the lint configuration in the project,
+please check the migration guides at [http://eslint.org/] to port the
+modified lint config to ESLint 3.x.
+
 ## ES6/JSX
 
 We use [ESLint](http://eslint.org/) to lint ES6 and React/JSX code. If ESLint is installed in a project, we can use the configuration from this module by creating a file in the project root named `.eslintrc.yml`. If the project does not use JSX, the file contents should be
 
 ```yaml
 extends:
   - './node_modules/mobify-code-style/es6/mobify-es6.yml'
-```  
+```
 
 and for a React/JSX project:
 
@@ -46,6 +74,15 @@ extends:
   - './node_modules/mobify-code-style/es6/mobify-es6-react.yml'
 ```
 
+If using a custom Webpack configuration, add the lines:
+```yaml
+settings:
+  import/resolver:
+    webpack:
+      config: '<path-to-webpack-config>'
+```
+to the `.eslintrc.yml`
+
 Make sure to install the following NPM modules:
  - `eslint` > 3.0
  - `eslint-plugin-import`

RELEASE.md

@@ -0,0 +1,15 @@
+## Mobify Code Style
+- [ ] Branch off of `develop` and create a `release-vX.Y.Z` branch.
+- [ ] Create a new pull request with the following settings:
+      * Base: `master`
+      * Compare: `release-vX.Y.Z`
+      Paste the contents of this checklist into this pull request.
+- [ ] Increment the version in `package.json`.
+- [ ] In the CHANGELOG.md file of this release branch, change the 'To be released' header to 'vX.Y.Z'.
+- [ ] Merge `release-vX.Y.Z` into `master` using the pull request, then delete the release branch.
+- [ ] [Publish to npm](https://docs.npmjs.com/cli/publish) from the `master` branch.
+- [ ] Draft a new Github release with the following settings:
+      * Tag version: `X.Y.Z` @ `master`
+      * Release title: `X.Y.Z`
+      * Description: Use highlights from the CHANGELOG.md (only pick out the most significant changes)
+- [ ] Merge `master` into `develop` (no need for review on PR, just merge).

css/.csscomb.json

@@ -13,11 +13,9 @@
     "combinator-space": [" ", " "],
     "element-case": "lower",
     "eof-newline": true,
-    "leading-zero": null,
     "rule-indent": "    ",
     "stick-brace": " ",
     "unitless-zero": true,
-    "quotes": false,
     "remove-empty-rulesets": true,
     "space-before-closing-brace": "\n",
     "space-before-colon": "",
@@ -29,7 +27,7 @@
     "space-after-selector-delimiter": "\n",
     "space-before-selector-delimiter": "",
     "strip-spaces": true,
-    "tab-size": true,
+    "tab-size": 4,
     "unitless-zero": true,
     "sort-order": [
         [

css/comments/Readme.md

@@ -15,10 +15,10 @@ Headings in CSS comments should follow the following format:
 
 ```
 // Heading Level 1
-// ===============
+// ===
 //
 // Heading Level 2
-// ---------------
+// ---
 //
 // ### Heading Level 3 and beyond
 ```
@@ -36,16 +36,16 @@ For example...
 
 ```
 // Documentation Headings Example
-// ==============================
+// ===
 //
 // The First Example
-// -----------------
+// ---
 //
 // Notice how there is only a single line between the level 1 and 2 headings above.
 
 
 // The Second Example
-// ------------------
+// ---
 //
 // All headings that don't immediately follow another heading will have two spaces
 // above, like the heading directly above.
@@ -100,7 +100,7 @@ Bad example:
 
 ```
 // Buttons
-// =======
+// ===
 
 .button {
     display: block; // This must be a block because reasons. Reasons like because
@@ -114,7 +114,7 @@ Better example:
 
 ```
 // Buttons
-// =======
+// ===
 //
 // Notes:
 //
@@ -132,7 +132,7 @@ Notice how we can apply the same line comment to multiple lines:
 
 ```
 // Modal
-// =====
+// ===
 //
 // Notes:
 //
@@ -157,7 +157,7 @@ Example:
 
 ```
 // Checkout
-// ========
+// ===
 //
 // @url http://www.website.com/checkout
 ```
@@ -169,26 +169,26 @@ Example:
 
 ```
 // Checkout
-// ========
+// ===
 //
 // @url http://www.website.com/checkout
 
 .t-checkout {
 
     // Global
-    // ------
+    // ---
     //
     // ...
 
 
     // Your Details
-    // ------------
+    // ---
     //
     // ...
 
 
     // Credit Card Info
-    // ----------------
+    // ---
     //
     // ...
 }
@@ -198,13 +198,13 @@ Alternatively:
 
 ```
 // Checkout
-// ========
+// ===
 //
 // @url http://www.website.com/checkout
 
 
 // Global
-// ------
+// ---
 //
 // ...
 
@@ -213,7 +213,7 @@ Alternatively:
 
 
 // Your Details
-// ------------
+// ---
 //
 // ...
 
@@ -222,7 +222,7 @@ Alternatively:
 
 
 // Credit Card Info
-// ----------------
+// ---
 //
 // ...
 
@@ -235,7 +235,7 @@ the base template scope and with a level 2 heading. Example:
 
 ```
 // Checkout
-// ========
+// ===
 //
 // @url http://www.website.com/checkout
 
@@ -244,14 +244,14 @@ the base template scope and with a level 2 heading. Example:
 
 
 // Checkout: Form
-// --------------
+// ---
 
 .t-checkout__form {
 }
 
 
 // Checkout: Sidebar
-// -----------------
+// ---
 
 .t-checkout__sidebar {
 }
@@ -278,7 +278,7 @@ SCSS file.
 
 ```
 // Breadcrumbs
-// ===========
+// ===
 
 .c-breadcrumbs {
 }
@@ -293,7 +293,7 @@ use a level 2 heading for each sub-component.
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 }
@@ -308,7 +308,7 @@ Notice the lack of any "Link Arrow" heading in the following example:
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 }
@@ -331,7 +331,7 @@ Method 1: Nested
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 
@@ -344,7 +344,7 @@ Method 2: Unnested
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 }
@@ -360,14 +360,14 @@ breadcrumb link styles. That could be enough to warrant a heading:
 
 ```
 // Breadcrumbs: Link
-// -----------------
+// ---
 
 .c-breadcrumbs__link {
 }
 
 
 // Breadcrumbs: Current Link
-// -------------------------
+// ---
 
 .c-breadcrumbs__link.c--current {
 }
@@ -406,7 +406,7 @@ An example of both the doc block and dependencies can be seen here:
 
 ```
 // My Function
-// ===========
+// ===
 //
 // Standard definition section goes here.
 //