responses samples styling

lib/common-components/Tabs/tabs.js

@@ -8,7 +8,9 @@ import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
 @View({
   template: `
     <ul>
-      <li *ng-for="#tab of tabs" [ng-class]="{active: tab.active}" (click)="selectTab(tab)">{{tab.tabTitle}}</li>
+      <li *ng-for="#tab of tabs" [ng-class]="{active: tab.active}" (click)="selectTab(tab)"
+        class="tab-{{tab.tabStatus}}"> {{tab.tabTitle}}
+      </li>
     </ul>
     <ng-content></ng-content>
   `,
@@ -37,7 +39,7 @@ export class Tabs {
 
 @Component({
   selector: 'tab',
-  inputs: ['tabTitle: tab-title']
+  inputs: ['tabTitle: tab-title', 'tabStatus: tab-status']
 })
 @View({
   template: `

lib/common-components/Tabs/tabs.scss

@@ -1,3 +1,5 @@
+@import '../../common/styles/variables';
+
 ul {
   display: block;
   margin: 0;
@@ -5,16 +7,51 @@ ul {
 }
 
 li {
+  font-size: 13px;
   list-style: none;
-  margin: 0;
+  margin: 2px 0;
+  padding: 2px 5px;
   display: inline-block;
-  padding: 5px 15px;
-  background-color: #262673;
-  border-left: 1px solid #1C1C50;
-  border-bottom: 2px solid transparent;
   cursor: pointer;
+  color: #8A9094;
+  line-height: 1.25;
+  color: $sample-panel-headers-color;
 }
 
 li.active {
-  border-bottom: 2px solid blue;
+  background-color: white;
+  color: #666;
+}
+
+.tab-success, .tab-error, .tab-redirect, .tab-info {
+  &:before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+  }
+
+
+}
+
+.tab-success:before {
+  box-shadow: 0 0 3px 0 #00aa11;
+  background-color: #00aa11;
+}
+
+.tab-error:before {
+  box-shadow: 0 0 3px 0 #E53935;
+  background-color: #E53935;
+}
+
+.tab-redirect:before {
+  box-shadow: 0 0 3px 0 #F88F00;
+  background-color: #F88F00;
+}
+
+.tab-info:before {
+  box-shadow: 0 0 3px 0 #66C2FF;
+  background-color: #66C2FF;
 }

lib/components/Method/method.html

@@ -22,7 +22,6 @@
       <schema-sample pointer="{{data.bodyParam._pointer}}/schema"> </schema-sample>
     </div>
     <div>
-      <header> Responses samples </header>
       <responses-samples pointer="{{pointer}}/responses"> </responses-samples>
     </div>
   </div>

lib/components/ResponsesSamples/responses-samples.html

@@ -1,6 +1,7 @@
-<small *ng-if="!data.responses.length"> No samples </small>
+<header *ng-if="data.responses.length"> Responses samples </header>
 <tabs *ng-if="data.responses.length">
-  <tab *ng-for="#response of data.responses" [tab-title]="response.code">
+  <tab *ng-for="#response of data.responses" tab-title="{{response.code}} {{response.description}}"
+    [tab-status]="response.type">
     <schema-sample [pointer]="response.pointer"><schema-sample>
   </tab>
 </tabs>

lib/components/ResponsesSamples/responses-samples.js

@@ -42,6 +42,14 @@ export default class ResponsesSamples extends BaseComponent {
       }
 
       resp.code = respCode;
+      resp.type = 'success';
+      if (respCode >= 300 && respCode < 400) {
+        resp.type = 'redirect';
+      } else if (respCode > 400) {
+        resp.type = 'error';
+      } else if (respCode < 100) {
+        resp.type = 'info';
+      }
       return resp;
     })
     .filter(response => hasExample(response));

lib/components/ResponsesSamples/responses-samples.scss

@@ -1,3 +1,5 @@
+@import '../../common/styles/variables';
+
 tab, tabs {
   display: block;
 }
@@ -5,3 +7,10 @@ tab, tabs {
 schema-sample {
   display: block;
 }
+
+header {
+  font-size: 16px;
+  margin: 5px 0;
+  color: $sample-panel-headers-color;
+  text-transform: uppercase;
+}