Add ApiLogo Component that uses x-logo option

lib/components/ApiLogo/api-logo.html

@@ -0,0 +1 @@
+<img *ngIf="data.imgUrl" [attr.src]="data.imgUrl" [ngStyle]="{'background-color': data.bgColor}">

lib/components/ApiLogo/api-logo.js

@@ -0,0 +1,22 @@
+'use strict';
+
+import {RedocComponent, BaseComponent} from '../base';
+
+@RedocComponent({
+  selector: 'api-logo',
+  styleUrls: ['./lib/components/ApiLogo/api-logo.css'],
+  templateUrl: './lib/components/ApiLogo/api-logo.html'
+})
+export default class ApiInfo extends BaseComponent {
+  constructor(schemaMgr) {
+    super(schemaMgr);
+  }
+
+  prepareModel() {
+    this.data = {};
+    let logoInfo = this.componentSchema.info['x-logo'];
+    if (!logoInfo) return;
+    this.data.imgUrl = logoInfo.url;
+    this.data.bgColor = logoInfo.backgroundColor || 'transparent';
+  }
+}

lib/components/ApiLogo/api-logo.scss

@@ -0,0 +1,10 @@
+@import '../../common/styles/variables';
+
+img {
+  max-height: 150px;
+  width: auto;
+  display: inline-block;
+  max-width: 100%;
+  padding: 0 5px;
+  box-sizing: border-box;
+}

lib/components/ApiLogo/api-logo.spec.js

@@ -0,0 +1,76 @@
+'use strict';
+
+import { getChildDebugElement } from 'tests/helpers';
+import {Component, View, provide} from 'angular2/core';
+
+import {
+  TestComponentBuilder,
+  injectAsync,
+  beforeEach,
+  beforeEachProviders,
+  it
+} from 'angular2/testing';
+
+import ApiLogo from 'lib/components/ApiLogo/api-logo';
+import SchemaManager from 'lib/utils/SchemaManager';
+
+
+describe('Redoc components', () => {
+  describe('ApiLogo Component', () => {
+    let builder;
+    let component;
+    let fixture;
+    let schemaMgr;
+
+    let schemaUrl = '/tests/schemas/api-info-test.json';
+    beforeEachProviders(() => [
+        provide(SchemaManager, {useValue: new SchemaManager()})
+    ]);
+    beforeEach(injectAsync([TestComponentBuilder, SchemaManager], (tcb, _schemaMgr) => {
+      builder = tcb;
+      schemaMgr = _schemaMgr;
+      return schemaMgr.load(schemaUrl).then(() => null, (err) => { throw err; });
+    }));
+    beforeEach((done) => {
+      builder.createAsync(TestApp).then(_fixture => {
+        fixture = _fixture;
+        component = getChildDebugElement(fixture.debugElement, 'api-logo').componentInstance;
+        fixture.detectChanges();
+        done();
+      }, err => done.fail(err));
+    });
+
+
+    it('should init component data', () => {
+      expect(component).not.toBeNull();
+      expect(component.data).not.toBeNull();
+    });
+
+    it('should not display image when no x-logo', () => {
+      component.data.should.be.empty;
+      let nativeElement = getChildDebugElement(fixture.debugElement, 'api-logo').nativeElement;
+      let imgElement = nativeElement.querySelector('img');
+      expect(imgElement).toBeNull();
+
+      // update schemaUrl to load other schema in the next test
+      schemaUrl = '/tests/schemas/extended-petstore.json';
+    });
+
+    it('should load values from spec and use transparent bgColor by default', () => {
+      component.data.imgUrl.should.endWith('petstore-logo.png');
+      component.data.bgColor.should.be.equal('transparent');
+    });
+  });
+});
+
+
+/** Test component that contains an ApiInfo. */
+@Component({selector: 'test-app'})
+@View({
+  directives: [ApiLogo],
+  providers: [SchemaManager],
+  template:
+      `<api-logo></api-logo>`
+})
+class TestApp {
+}

lib/components/Redoc/redoc.html

@@ -1,4 +1,5 @@
 <div class="side-bar">
+  <api-logo> </api-logo>
   <side-menu> </side-menu>
 </div>
 <div class="api-content">

lib/components/Redoc/redoc.js

@@ -3,6 +3,7 @@
 import {RedocComponent, BaseComponent} from '../base';
 import SchemaManager from '../../utils/SchemaManager';
 import ApiInfo from '../ApiInfo/api-info';
+import ApiLogo from '../ApiLogo/api-logo';
 import MethodsList from '../MethodsList/methods-list';
 import SideMenu from '../SideMenu/side-menu';
 import {ChangeDetectionStrategy} from 'angular2/core';
@@ -12,7 +13,7 @@ import {ChangeDetectionStrategy} from 'angular2/core';
   providers: [SchemaManager],
   templateUrl: './lib/components/Redoc/redoc.html',
   styleUrls: ['./lib/components/Redoc/redoc.css'],
-  directives: [ApiInfo, MethodsList, SideMenu],
+  directives: [ApiInfo, ApiLogo, MethodsList, SideMenu],
   changeDetection: ChangeDetectionStrategy.Default
 })
 export default class Redoc extends BaseComponent {

lib/components/Redoc/redoc.scss

@@ -14,6 +14,11 @@ api-info {
   padding: 10px 20px;
 }
 
+api-logo {
+  display: block;
+  text-align: center;
+}
+
 .side-bar {
   position: fixed;
   width: $side-bar-width;

lib/components/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import ApiInfo from './ApiInfo/api-info';
+import ApiLogo from './ApiLogo/api-logo';
 import Method from './Method/method.js';
 import MethodsList from './MethodsList/methods-list';
 import ParamsList from './ParamsList/params-list';
@@ -13,6 +14,7 @@ import JsonSchema from './JsonSchema/json-schema';
 
 const REDOC_COMPONENTS = [
   ApiInfo,
+  ApiLogo,
   JsonSchema,
   Method,
   MethodsList,
@@ -26,6 +28,7 @@ const REDOC_COMPONENTS = [
 
 export {
   ApiInfo,
+  ApiLogo,
   JsonSchema,
   Method,
   MethodsList,

tests/schemas/extended-petstore.json

@@ -8,6 +8,9 @@
     "contact": {
       "email": "apiteam@swagger.io"
     },
+    "x-logo": {
+      "url": "https://rebilly.github.io/ReDoc/petstore-logo.png"
+    },
     "license": {
       "name": "Apache 2.0",
       "url": "http://www.apache.org/licenses/LICENSE-2.0.html"