support x-example for parameters

closes #297

Author: RomanHotsiy

demo/swagger.yaml

@@ -242,6 +242,7 @@ paths:
           in: header
           required: false
           type: string
+          x-example: Bearer <TOKEN>
         - name: petId
           in: path
           description: Pet id to delete

lib/components/JsonSchema/_json-schema-common.scss

@@ -64,7 +64,8 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   font-weight: bold;
 }
 
-.param-type, .param-array-format  {
+.param-type,
+.param-array-format {
   vertical-align: middle;
   line-height: $param-name-height;
   color: rgba($black, 0.4);
@@ -73,7 +74,8 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 .param-type {
   font-weight: normal;
   word-break: break-all;
-  &.array::before, &.tuple::before {
+  &.array::before,
+  &.tuple::before {
     color: $black;
     font-weight: $base-font-weight;
     .param-collection-format-multi + & {
@@ -144,7 +146,6 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 }
 
 .param:first-of-type {
-
   > .param-name::before {
     content: '';
     display: block;
@@ -158,7 +159,6 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 
 .param:last-of-type,
 .param.last {
-
   > .param-name {
     position: relative;
 
@@ -236,14 +236,24 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   }
 }
 
+.param-example {
+  font-size: 0.95em;
+
+  &::before {
+    content: 'Example: ';
+  }
+}
+
 .param-enum-value,
-.param-default-value {
-  background-color: $background-color;
-  border: 1px solid rgba($secondary-color, 0.2);
+.param-default-value,
+.param-example-value {
+  font-family: Courier, monospace;
+  background-color: rgba($secondary-color, 0.02);
+  border: 1px solid rgba($secondary-color, 0.1);
   margin: 2px 3px;
-  padding: 0 5px;
-  border-radius: 2px;
-  color: $secondary-color;
+  padding: 0.1em 0.2em 0.2em;
+  border-radius: $border-radius;
+  color: $text-color;
   display: inline-block;
   min-width: 20px;
   text-align: center;

lib/components/ParamsList/params-list.html

@@ -22,6 +22,9 @@ <h5 class="param-list-header" *ngIf="params.length"> Parameters </h5>
             <div class="param-default" *ngIf="param.default != null">
               <span class="param-default-value">{{param.default | json}}</span>
             </div>
+            <div class="param-example" *ngIf="param.example != null">
+              <span class="param-example-value">{{param.example | json}}</span>
+            </div>
             <div *ngIf="param.enum || param._enumItem" class="param-enum">
               <span *ngFor="let enumItem of param.enum" class="param-enum-value {{enumItem.type}}">
                 {{enumItem.val | json}}

lib/components/Redoc/redoc.scss

@@ -275,16 +275,11 @@ footer {
   code {
     font-family: Courier, monospace;
     background-color: rgba(38,50,56,0.04);
-    padding: 0.1em 0 0.2em 0;
+    padding: 0.1em 0.2em 0.2em;
     font-size: 1em;
     border-radius: $border-radius;
     color: $red;
-    border: 1px solid rgba(38,50,56,0.1);
-
-    &:before, &:after {
-      letter-spacing: -0.2em;
-      //content: "\00a0";
-    }
+    border: 1px solid rgba(38,50,56, 0.1);
   }
 
   p:last-of-type {

lib/services/schema-helper.service.ts

@@ -119,6 +119,9 @@ const injectors = {
         injectTo._displayType = propertySchema.title ?
           `${propertySchema.title} (${propertySchema.type})` : propertySchema.type;
       }
+      if (injectTo['x-example'] && !propertySchema.example) {
+        injectTo.example = propertySchema['x-example'];
+      }
       injectTo._widgetType = 'trivial';
     }
   },