From f5d7ac9236c4fd1057e59b80d57e245d475178d4 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 20 Dec 2015 23:34:20 +0200 Subject: [PATCH] Add ApiLogo Component that uses x-logo option --- lib/components/ApiLogo/api-logo.html | 1 + lib/components/ApiLogo/api-logo.js | 22 +++++++ lib/components/ApiLogo/api-logo.scss | 10 ++++ lib/components/ApiLogo/api-logo.spec.js | 76 +++++++++++++++++++++++++ lib/components/Redoc/redoc.html | 1 + lib/components/Redoc/redoc.js | 3 +- lib/components/Redoc/redoc.scss | 5 ++ lib/components/index.js | 3 + tests/schemas/extended-petstore.json | 3 + 9 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 lib/components/ApiLogo/api-logo.html create mode 100644 lib/components/ApiLogo/api-logo.js create mode 100644 lib/components/ApiLogo/api-logo.scss create mode 100644 lib/components/ApiLogo/api-logo.spec.js diff --git a/lib/components/ApiLogo/api-logo.html b/lib/components/ApiLogo/api-logo.html new file mode 100644 index 00000000..3cf09f27 --- /dev/null +++ b/lib/components/ApiLogo/api-logo.html @@ -0,0 +1 @@ + diff --git a/lib/components/ApiLogo/api-logo.js b/lib/components/ApiLogo/api-logo.js new file mode 100644 index 00000000..a4e086bd --- /dev/null +++ b/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'; + } +} diff --git a/lib/components/ApiLogo/api-logo.scss b/lib/components/ApiLogo/api-logo.scss new file mode 100644 index 00000000..b2ade531 --- /dev/null +++ b/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; +} diff --git a/lib/components/ApiLogo/api-logo.spec.js b/lib/components/ApiLogo/api-logo.spec.js new file mode 100644 index 00000000..0f438c58 --- /dev/null +++ b/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: + `` +}) +class TestApp { +} diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html index a1bf3be9..b905f166 100644 --- a/lib/components/Redoc/redoc.html +++ b/lib/components/Redoc/redoc.html @@ -1,4 +1,5 @@
+
diff --git a/lib/components/Redoc/redoc.js b/lib/components/Redoc/redoc.js index 3e83ef4c..cf3b5207 100644 --- a/lib/components/Redoc/redoc.js +++ b/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 { diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index b9c279b2..6a0b39b0 100644 --- a/lib/components/Redoc/redoc.scss +++ b/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; diff --git a/lib/components/index.js b/lib/components/index.js index a00bec90..d46dead8 100644 --- a/lib/components/index.js +++ b/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, diff --git a/tests/schemas/extended-petstore.json b/tests/schemas/extended-petstore.json index 0bf23703..83e3a040 100644 --- a/tests/schemas/extended-petstore.json +++ b/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"