update response list to use zippy

lib/components/Method/method.html

@@ -11,9 +11,7 @@
     <p *ng-if="data.methodInfo.description" class="method-description"
       inner-html="{{data.methodInfo.description | marked}}">
     </p>
-    <br>
     <params-list pointer="{{pointer}}/parameters"> </params-list>
-    <br>
     <responses-list pointer="{{pointer}}/responses"> </responses-list>
   </div>
   <div class="method-samples">

lib/components/ResponsesList/responses-list.html

@@ -1,23 +1,6 @@
-<table>
-  <thead>
-    <tr>
-      <th colspan="3"> Responses </th>
-    </tr>
-    <tr>
-      <th class="response-code"> Code </th>
-      <th class="response-description"> Description </th>
-      <th> Response schema </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ng-for="#response of data.responses">
-      <td>{{response.code}}</td>
-      <td inner-html="{{response.description | marked}}"></td>
-      <td>
+<h2 class="responses-list-header" *ng-if="data.responses.length"> Responses </h2>
+<zippy *ng-for="#response of data.responses" title="{{response.code}} {{response.description}}"
+  [type]="response.type" [empty]="!response.schema">
   <schema *ng-if="response.schema" class="schema type" pointer="{{response.pointer}}/schema">
   </schema>
-        <small *ng-if="!response.schema"> N/A </small>
-      </td>
-    </tr>
-  </tbody>
-</table>
+</zippy>

lib/components/ResponsesList/responses-list.js

@@ -3,6 +3,8 @@
 import {RedocComponent, BaseComponent} from '../base';
 import JsonPointer from '../../utils/JsonPointer';
 import JsonSchemaView from '../JsonSchemaView/json-schema-view';
+import {Zippy} from '../../common/components/Zippy/zippy';
+import {statusCodeType} from '../../utils/helpers';
 
 function isNumeric(n) {
   return (!isNaN(parseFloat(n)) && isFinite(n));
@@ -12,7 +14,7 @@ function isNumeric(n) {
   selector: 'responses-list',
   templateUrl: './lib/components/ResponsesList/responses-list.html',
   styleUrls: ['./lib/components/ResponsesList/responses-list.css'],
-  directives: [JsonSchemaView]
+  directives: [JsonSchemaView, Zippy]
 })
 export default class ResponsesList extends BaseComponent {
   constructor(schemaMgr) {
@@ -35,6 +37,7 @@ export default class ResponsesList extends BaseComponent {
       }
 
       resp.code = respCode;
+      resp.type = statusCodeType(resp.code);
       return resp;
     });
     this.data.responses = responses;

lib/components/ResponsesList/responses-list.scss

@@ -1,44 +1,6 @@
-small {
-  color: #999;
-}
-
-table {
-  width: 100%;
-  border-spacing: 0;
-  border: 2px solid darkgreen;
-}
-
-th.response-code {
-  width: 10%;
-}
-
-th.response-description {
-  width: 30%;
-}
-
-thead tr:first-child {
-  background: darkgreen;
-  color: #fff;
-  border: none;
-}
-
-thead tr:last-child th {
-  border-bottom: 3px solid #ddd;
-}
-
-tbody tr:last-child td {
-  border: none;
-}
-tbody td {
-  border-bottom: 1px solid #ddd;
-}
-
-td, th {
-  vertical-align: top;
-  padding: 10px 10px;
-  font-size: 12px;
-}
-
-th {
-  text-align: left;
+.responses-list-header {
+  font-size: 18px;
+  padding: 0.2em 0;
+  margin: 0.5em 0;
+  color: #253137;
 }