fix: Add automatic semantic release (#136)

.github/workflows/CI.yml

@@ -1,8 +1,6 @@
 name: Unit Tests and Accessibility CI
 
 on:
-  push:
-    branches: [ master ]
   pull_request:
     branches: [ master ]
 

.github/workflows/release.yml

@@ -0,0 +1,38 @@
+name: Release
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: Install dependencies
+      run: npm ci
+    - name: Build
+      run: npm run build
+    - name: Build playground
+      run: npm run playground
+    - name: Build documentation
+      run: npm run docs
+    - name: Release
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      run: npm run semantic-release
+    - name: Publish documentation to github pages
+      uses: JamesIves/github-pages-deploy-action@3.5.9
+      with:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        BRANCH: gh-pages
+        FOLDER: dist

.releaserc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  plugins: [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    ["@semantic-release/changelog", {
+      "changelogFile": "CHANGELOG.md",
+    }],
+    "@semantic-release/npm",
+    ["@semantic-release/git", {
+      "assets": ["package.json", "CHANGELOG.md"],
+      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+    }],
+    '@semantic-release/github',
+  ],
+  branch: 'master',
+  branches: ['master']
+};

README.md

@@ -2,6 +2,9 @@
 
 A JavaScript library of Web Components following Spectrum design patterns.
 
+# Important
+Please follow [Angular Commit Message Conventions](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines). To easily comply is recommended to use [cz-cli](https://github.com/commitizen/cz-cli).
+
 ## Showcase
 
 #### [Component Examples](http://opensource.adobe.com/coral-spectrum/dist/examples)
@@ -16,23 +19,23 @@ Code can be shared by copy pasting the URL. The playground is sandboxed to preve
 
 ## Spectrum
 
-The current default theme is is an implementation of the [Spectrum](https://spectrum.adobe.com) design 
-specifications, Adobe’s design system. Spectrum provides elements and tools to help product teams work more 
+The current default theme is is an implementation of the [Spectrum](https://spectrum.adobe.com) design
+specifications, Adobe’s design system. Spectrum provides elements and tools to help product teams work more
 efficiently, and to make Adobe’s applications more cohesive.
- 
-Coral Spectrum leverages the [Spectrum CSS](https://github.com/adobe/spectrum-css) framework to style 
-components including the [Spectrum SVG icons](https://spectrum.adobe.com/page/icons). 
+
+Coral Spectrum leverages the [Spectrum CSS](https://github.com/adobe/spectrum-css) framework to style
+components including the [Spectrum SVG icons](https://spectrum.adobe.com/page/icons).
 
 ## Angular, React, Vue.js compatibility
 
-Our vision is to create consistent Adobe experiences by providing a complete, easy to use library of HTML components 
+Our vision is to create consistent Adobe experiences by providing a complete, easy to use library of HTML components
 compatible with [major frameworks](https://custom-elements-everywhere.com/).
 
-To reach the goal, Coral Spectrum derives from [Custom Elements v1](https://html.spec.whatwg.org/multipage/custom-elements.html) with 
-[native support](https://caniuse.com/#feat=custom-elementsv1) thanks to broad collaboration between browser vendors. 
-The use of custom elements gives us the ability to hide many implementation details from the consumer, allowing much 
-more freedom to change the underlying markup that supports those elements. 
-This makes the exposed API smaller and more explicit, resulting in a lower risk of updates to Coral Spectrum needing to 
+To reach the goal, Coral Spectrum derives from [Custom Elements v1](https://html.spec.whatwg.org/multipage/custom-elements.html) with
+[native support](https://caniuse.com/#feat=custom-elementsv1) thanks to broad collaboration between browser vendors.
+The use of custom elements gives us the ability to hide many implementation details from the consumer, allowing much
+more freedom to change the underlying markup that supports those elements.
+This makes the exposed API smaller and more explicit, resulting in a lower risk of updates to Coral Spectrum needing to
 introduce breaking changes.
 
 ## Browser support
@@ -73,15 +76,15 @@ For mobile, Spectrum has a larger scale that enables larger tap targets on all c
 
 ## Built-in Accessibility and Keyboard support
 
-Having an inaccessible application can mean thousands of dollars of fines if you land a government contract. 
-It also means alienating an entire segment of society by making your application completely unusable to them. 
+Having an inaccessible application can mean thousands of dollars of fines if you land a government contract.
+It also means alienating an entire segment of society by making your application completely unusable to them.
 To help you avoid this, we’ve made it a rule that every Coral Spectrum component should be accessible.
 
 ## Internationalization support
- 
-Coral Spectrum provides a robust internal system for internationalization of its strings. 
+
+Coral Spectrum provides a robust internal system for internationalization of its strings.
 This is done via an internal Adobe process.
- 
+
 Supported languages are :
 
 Language family | Language tag | Language variant
@@ -110,7 +113,7 @@ Turkish | tr-TR | Standard Turkish
 
 ### Easiest way via a CDN
 
-The easiest way to consume Coral Spectrum is to use a CDN e.g. copy these lines into your html file. 
+The easiest way to consume Coral Spectrum is to use a CDN e.g. copy these lines into your html file.
 
 ```html
 <head>
@@ -120,8 +123,8 @@ The easiest way to consume Coral Spectrum is to use a CDN e.g. copy these lines
 </head>
 <body class="coral--light">
   <button is="coral-button" icon="add">My Button</button>
-</body> 
-``` 
+</body>
+```
 
 ### Copying the distribution files
 
@@ -153,7 +156,7 @@ require("@adobe/coral-spectrum/dist/css/coral.css");
 
 ### Including only the components you need
 
-If your project only requires a few components, you can use a module bundler like [Webpack](https://webpack.js.org/) to only import the components needed. 
+If your project only requires a few components, you can use a module bundler like [Webpack](https://webpack.js.org/) to only import the components needed.
 Below is an example of a Webpack config:
 
 ```js
@@ -209,11 +212,11 @@ module.exports = {
       }
     })
   ]
-};  
+};
 ```
 
 Then in your `index.js` file, you can import and use single components :
- 
+
 ```js
 // Import Component
 import {Button} from '@adobe/coral-spectrum/coral-component-button';
@@ -238,7 +241,7 @@ can be set with:
 <script data-coral-icons="dist/icons/" data-coral-icons-external="off" src="dist/bundle.min.js"></script>
 ```
 
-**Note:** Calendar, Clock and Datepicker components will leverage [moment.js](http://momentjs.com/) if available. 
+**Note:** Calendar, Clock and Datepicker components will leverage [moment.js](http://momentjs.com/) if available.
 
 ## Contributing
 
@@ -250,20 +253,22 @@ Run the following commands first :
 ```
 npm install -g gulp-cli
 npm install
-```   
- 
+```
+
 You can use below tasks to get started:
 * `gulp` to generate the build in the `dist` folder and run the dev server on `localhost:9001` by default.
 * `gulp build` to generate the build in the `dist` folder.
-* `gulp dev` to run the dev server on `localhost:9001` by default. 
+* `gulp dev` to run the dev server on `localhost:9001` by default.
 * `gulp test` to run the tests. Test reports are in `dist/coverage`.
 * `gulp docs` to build the documentation in `dist/documentation`.
-* `gulp axe` to run the accessibility checks. 
+* `gulp axe` to run the accessibility checks.
 
 Each component can be built independently e.g. `cd coral-component-button && gulp`.
 
 ### Releasing
-
+#### Automatic release:
+Merging the PR to master will trigger an automatic release Github Action. It is important to follow [Angular Commit Message Conventions](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines). It is recommended to use [cz-cli](https://github.com/commitizen/cz-cli) for easy commits.
+#### Manual releasing:
 We are currently releasing this package on `npm`.
 
 Before we get started, clean up your dependencies with the following command :
@@ -276,6 +281,6 @@ rm -rf node_modules && npm install
 Then run `gulp release`. You'll be asked to bump the version (minor version bump by default). Coral Spectrum is following
 [semantic versioning](https://docs.npmjs.com/about-semantic-versioning) (either patch, minor or major).
 
-The command will take care of increasing, tagging the version and publishing the package to `npm`.     
+The command will take care of increasing, tagging the version and publishing the package to `npm`.
 
-If everything went well, run `gulp deploy` to publish the documentation on the `gh-pages` branch else revert the version bump. 
+If everything went well, run `gulp deploy` to publish the documentation on the `gh-pages` branch else revert the version bump.