Add RequestSamples component

lib/components/Method/method.html

@@ -18,8 +18,8 @@
   </div>
   <div class="method-samples">
     <div *ngIf="data.bodyParam">
-      <header> Body sample </header>
+      <request-samples [pointer]="pointer" [bodySchemaPtr]="data.bodyParam._pointer">
-      <schema-sample pointer="{{data.bodyParam._pointer}}/schema"> </schema-sample>
+      </request-samples>
     </div>
     <div>
       <responses-samples pointer="{{pointer}}/responses"> </responses-samples>

lib/components/Method/method.js

@@ -6,12 +6,13 @@ import ParamsList from '../ParamsList/params-list';
 import ResponsesList from '../ResponsesList/responses-list';
 import ResponsesSamples from '../ResponsesSamples/responses-samples';
 import SchemaSample from '../SchemaSample/schema-sample';
+import RequestSamples from '../RequestSamples/request-samples';
 
 @RedocComponent({
   selector: 'method',
   templateUrl: './lib/components/Method/method.html',
   styleUrls: ['./lib/components/Method/method.css'],
-  directives: [ParamsList, ResponsesList, ResponsesSamples, SchemaSample],
+  directives: [ParamsList, ResponsesList, ResponsesSamples, SchemaSample, RequestSamples],
   inputs: ['tag']
 })
 export default class Method extends BaseComponent {

lib/components/RequestSamples/request-samples.html

@@ -0,0 +1,10 @@
+<header *ngIf="data.bodySchemaPtr || data.samples.length"> Request samples </header>
+<schema-sample *ngIf="!data.samples.length" [pointer]="data.bodySchemaPtr"> </schema-sample>
+<tabs *ngIf="data.samples.length">
+  <tab tabTitle="json">
+    <schema-sample [pointer]="data.bodySchemaPtr"> </schema-sample>
+  </tab>
+  <tab *ngFor="#sample of data.samples" [tabTitle]="sample.lang">
+    <pre innerHtml="{{sample.source | prism:sample.lang}}"></pre>
+  </tab>
+</tabs>

lib/components/RequestSamples/request-samples.js

@@ -0,0 +1,27 @@
+'use strict';
+
+import {RedocComponent, BaseComponent} from '../base';
+import JsonPointer from '../../utils/JsonPointer';
+import {Tabs, Tab} from '../../common/components/Tabs/tabs';
+import SchemaSample from '../SchemaSample/schema-sample';
+import {PrismPipe} from '../../utils/pipes';
+
+@RedocComponent({
+  selector: 'request-samples',
+  templateUrl: './lib/components/RequestSamples/request-samples.html',
+  styleUrls: ['./lib/components/RequestSamples/request-samples.css'],
+  directives: [SchemaSample, Tabs, Tab],
+  inputs: ['bodySchemaPtr'],
+  pipes: [PrismPipe]
+})
+export default class RequestSamples extends BaseComponent {
+  constructor(schemaMgr) {
+    super(schemaMgr);
+  }
+
+  prepareModel() {
+    this.data = {};
+    this.data.bodySchemaPtr = JsonPointer.join(this.bodySchemaPtr, 'schema');
+    this.data.samples = this.componentSchema['x-code-samples'] || [];
+  }
+}

lib/components/RequestSamples/request-samples.scss

@@ -0,0 +1,31 @@
+@import '../../common/styles/variables';
+
+header {
+  font-size: 16px;
+  margin: 5px 0;
+  color: $sample-panel-headers-color;
+  text-transform: uppercase;
+  font-weight: normal;
+}
+
+:host > tabs > ul li {
+  font-size: 13px;
+  margin: 2px 0;
+  padding: 2px 10px;
+  color: #8A9094;
+  line-height: 1.25;
+  color: $sample-panel-headers-color;
+
+  &.active {
+    background-color: white;
+    color: #666;
+  }
+}
+
+:host tabs ul {
+  padding-top: 10px;
+}
+
+pre {
+  overflow-x: auto;
+}