Add help messages for different types of parameters (fixes #26)

lib/components/ParamsList/params-list.html

@@ -1,6 +1,9 @@
 <h5 class="param-list-header" *ngIf="data.params.length"> Parameters </h5>
 <template ngFor [ngForOf]="data.params" #paramType="$implicit">
-  <header class="paramType"> {{paramType.place}} Parameters </header>
+  <header class="paramType">
+    {{paramType.place}} Parameters
+    <span class="hint--top-right hint--large" [attr.data-hint]="paramType.placeHint">?</span>
+  </header>
   <br>
   <div class="params-wrap">
     <div *ngFor="#param of paramType.params" class="param">

lib/components/ParamsList/params-list.js

@@ -42,10 +42,21 @@ export default class ParamsList extends BaseComponent {
     this.data.noParams = !(Object.keys(paramsMap).length || this.data.bodyParam);
 
     let paramsPlaces = ['path', 'query', 'formData', 'header', 'body'];
+    let placeHint = {
+      path: `Used together with Path Templating, where the parameter value is actually part
+        of the operation's URL. This does not include the host or base path of the API.
+        For example, in /items/{itemId}, the path parameter is itemId`,
+      query: `Parameters that are appended to the URL.
+        For example, in /items?id=###, the query parameter is id`,
+      formData: `Parameters that are submitted through a form.
+        application/x-www-form-urlencoded, multipart/form-data or both are usually
+        used as the content type of the request`,
+      header: 'Custom headers that are expected as part of the request'
+    };
     let params = [];
     paramsPlaces.forEach(place => {
       if (paramsMap[place] && paramsMap[place].length) {
-        params.push({place: place, params: paramsMap[place]});
+        params.push({place: place, placeHint: placeHint[place], params: paramsMap[place]});
       }
     });
     this.data.params = params;

lib/components/ParamsList/params-list.scss

@@ -1,5 +1,7 @@
 @import '../../common/styles/variables';
 
+$hint-color: #999999;
+
 .param-list-header {
   border-bottom: 1px solid rgba($text-color, .3);
   padding: 0.2em 0;
@@ -60,3 +62,29 @@ header.paramType {
   background-color: white;
   top: 0;
 }
+
+[data-hint] {
+  width: 1.2em;
+  text-align: center;
+  border-radius: 50%;
+  vertical-align: middle;
+  color: $hint-color;
+  line-height: 1.2;
+  text-transform: none;
+  cursor: help;
+  border: 1px solid $hint-color;
+  margin-left: 0.5em;
+}
+
+@media (max-width: 520px) {
+  [data-hint] {
+    float: right;
+  }
+
+  [data-hint]:after {
+    margin-left: 12px;
+    transform: translateX(-100%) translateY(-8px);
+    -moz-transform: translateX(-100%) translateY(-8px);
+    -webkit-transform: translateX(-100%) translateY(-8px);
+  }
+}

lib/utils/pipes.js

@@ -25,7 +25,9 @@ import 'prismjs/components/prism-bash.js';
 import 'prismjs/components/prism-swift.js';
 import 'prismjs/components/prism-objectivec.js';
 import 'prismjs/components/prism-scala.js';
+
 import 'prismjs/themes/prism-dark.css!css';
+import 'hint.css/hint.base.css!css';
 
 import marked from 'marked';
 

package.json

@@ -34,6 +34,7 @@
     "dependencies": {
       "angular2": "npm:angular2@^2.0.0-beta.12",
       "es6-shim": "github:es-shims/es6-shim@^0.33.6",
+      "hint.css": "npm:hint.css@^2.2.1",
       "json": "github:systemjs/plugin-json@^0.1.0",
       "json-formatter-js": "npm:json-formatter-js@^0.2.0",
       "json-pointer": "npm:json-pointer@^0.3.0",

system.config.js

@@ -44,6 +44,7 @@ System.config({
     "core-js": "npm:core-js@1.2.6",
     "css": "github:systemjs/plugin-css@0.1.18",
     "es6-shim": "github:es-shims/es6-shim@0.33.6",
+    "hint.css": "npm:hint.css@2.2.1",
     "json": "github:systemjs/plugin-json@0.1.0",
     "json-formatter-js": "npm:json-formatter-js@0.2.0",
     "json-pointer": "npm:json-pointer@0.3.0",