From 18664de72521c51ca7f1ba4d5ddc19ad54427102 Mon Sep 17 00:00:00 2001
From: Olivia Tournois <o.tournois@gmail.com>
Date: Fri, 28 Sep 2018 11:13:34 +0200
Subject: [PATCH] feat(stark-ui): implementation of reference-block component

ISSUES CLOSED: #622
---
 .../demo/action-bar/action-bar.component.html |  1 +
 .../demo/action-bar/action-bar.component.ts   |  9 +++++
 .../demo/breadcrumb/breadcrumb.component.html |  1 +
 .../demo/breadcrumb/breadcrumb.component.ts   |  9 +++++
 .../demo-collapsible.component.html           |  1 +
 .../collapsible/demo-collapsible.component.ts | 20 +++++++++--
 .../date-picker/date-picker.component.html    |  1 +
 .../demo/date-picker/date-picker.component.ts | 12 +++++++
 .../date-range-picker.component.html          |  1 +
 .../date-range-picker.component.ts            |  9 +++++
 .../dropdown/demo-dropdown.component.html     |  1 +
 .../demo/dropdown/demo-dropdown.component.ts  | 10 ++++++
 .../demo/footer/demo-footer.component.html    |  5 +--
 .../app/demo/footer/demo-footer.component.ts  | 13 +++++++
 .../keyboard-directives.component.html        |  1 +
 .../keyboard-directives.component.ts          | 17 +++++++++
 .../demo-language-selector.component.html     |  1 +
 .../demo-language-selector.component.ts       | 19 ++++++++--
 .../src/app/demo/logout/logout.component.html |  1 +
 .../src/app/demo/logout/logout.component.ts   | 19 ++++++++--
 .../pagination/demo-pagination.component.html |  2 ++
 .../pagination/demo-pagination.component.ts   | 12 +++++++
 .../demo-pretty-print.component.html          |  2 ++
 .../demo-pretty-print.component.ts            | 12 +++++++
 .../demo/sidebar/demo-sidebar.component.html  |  2 ++
 .../demo/sidebar/demo-sidebar.component.ts    | 19 ++++++++--
 .../src/app/demo/slider/slider.component.html |  1 +
 .../src/app/demo/slider/slider.component.ts   | 13 +++++++
 .../app/demo/table/demo-table.component.html  |  2 ++
 .../app/demo/table/demo-table.component.ts    | 21 +++++++++++
 .../demo-toast-notification.component.html    |  2 ++
 .../demo-toast-notification.component.ts      | 19 ++++++++--
 showcase/src/app/shared/index.ts              |  1 +
 .../_reference-block.component.scss           | 36 +++++++++++++++++++
 .../src/app/shared/reference-block/index.ts   |  2 ++
 .../reference-block.component.html            | 10 ++++++
 .../reference-block.component.ts              | 33 +++++++++++++++++
 .../reference-block/reference-link.intf.ts    |  4 +++
 showcase/src/app/shared/shared.module.ts      |  7 ++--
 showcase/src/styles/styles.scss               |  1 +
 40 files changed, 336 insertions(+), 16 deletions(-)
 create mode 100644 showcase/src/app/shared/reference-block/_reference-block.component.scss
 create mode 100644 showcase/src/app/shared/reference-block/index.ts
 create mode 100644 showcase/src/app/shared/reference-block/reference-block.component.html
 create mode 100644 showcase/src/app/shared/reference-block/reference-block.component.ts
 create mode 100644 showcase/src/app/shared/reference-block/reference-link.intf.ts

diff --git a/showcase/src/app/demo/action-bar/action-bar.component.html b/showcase/src/app/demo/action-bar/action-bar.component.html
index 5ec6097c4b..5b8daf58bd 100644
--- a/showcase/src/app/demo/action-bar/action-bar.component.html
+++ b/showcase/src/app/demo/action-bar/action-bar.component.html
@@ -17,3 +17,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		</example-viewer>
 	</div>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/action-bar/action-bar.component.ts b/showcase/src/app/demo/action-bar/action-bar.component.ts
index 258d700ad6..02ec615c17 100644
--- a/showcase/src/app/demo/action-bar/action-bar.component.ts
+++ b/showcase/src/app/demo/action-bar/action-bar.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkAction, StarkActionBarConfig } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-action-bar",
@@ -10,6 +11,7 @@ export class ActionBarComponent implements OnInit {
 	public actions: StarkAction[];
 	public actionBarConfig: StarkActionBarConfig;
 	public alternativeActions: StarkAction[];
+	public referenceList: ReferenceLink[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
@@ -62,6 +64,13 @@ export class ActionBarComponent implements OnInit {
 			}
 		];
 
+		this.referenceList = [
+			{
+				label: "Stark Action Bar component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkActionBarComponent.html"
+			}
+		];
+
 		this.actionBarConfig = {
 			actions: this.actions,
 			isPresent: true
diff --git a/showcase/src/app/demo/breadcrumb/breadcrumb.component.html b/showcase/src/app/demo/breadcrumb/breadcrumb.component.html
index e8b59a8fdd..185a23787d 100644
--- a/showcase/src/app/demo/breadcrumb/breadcrumb.component.html
+++ b/showcase/src/app/demo/breadcrumb/breadcrumb.component.html
@@ -12,3 +12,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		</stark-breadcrumb>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/breadcrumb/breadcrumb.component.ts b/showcase/src/app/demo/breadcrumb/breadcrumb.component.ts
index 73fb0b9b56..26ee29e639 100644
--- a/showcase/src/app/demo/breadcrumb/breadcrumb.component.ts
+++ b/showcase/src/app/demo/breadcrumb/breadcrumb.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkBreadcrumbConfig } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 const componentName: string = "demo-breadcrumb";
 
 /**
@@ -12,12 +13,20 @@ const componentName: string = "demo-breadcrumb";
 })
 export class DemoBreadcrumbComponent implements OnInit {
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+	public referenceList: ReferenceLink[];
 
 	/**
 	 * Component lifecycle hook
 	 */
 	public ngOnInit(): void {
 		this.logger.debug(componentName + ": controller initialized");
+
+		this.referenceList = [
+			{
+				label: "Stark Breadcrumb component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkBreadcrumbComponent.html"
+			}
+		];
 	}
 
 	public breadcrumbConfig: StarkBreadcrumbConfig = {
diff --git a/showcase/src/app/demo/collapsible/demo-collapsible.component.html b/showcase/src/app/demo/collapsible/demo-collapsible.component.html
index 373531388d..947b782175 100644
--- a/showcase/src/app/demo/collapsible/demo-collapsible.component.html
+++ b/showcase/src/app/demo/collapsible/demo-collapsible.component.html
@@ -49,3 +49,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<span class="collapsible-demo-status" translate>{{ collapsed[3] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}</span>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/collapsible/demo-collapsible.component.ts b/showcase/src/app/demo/collapsible/demo-collapsible.component.ts
index fbe44ad8da..f6066b422f 100644
--- a/showcase/src/app/demo/collapsible/demo-collapsible.component.ts
+++ b/showcase/src/app/demo/collapsible/demo-collapsible.component.ts
@@ -1,18 +1,32 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-collapsible",
 	styleUrls: ["./demo-collapsible.component.scss"],
 	templateUrl: "./demo-collapsible.component.html"
 })
-export class DemoCollapsibleComponent {
+export class DemoCollapsibleComponent implements OnInit {
 	public collapsed: boolean[] = [false, true, false, true, false, false, false];
+	public referenceList: ReferenceLink[];
 
 	public constructor() {
-		// empty constructor
+		//empty constructor
 	}
 
 	public toggleCollapsible(nb: number): void {
 		this.collapsed[nb] = !this.collapsed[nb];
 	}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.referenceList = [
+			{
+				label: "Stark Collapsible component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkCollapsibleComponent.html"
+			}
+		];
+	}
 }
diff --git a/showcase/src/app/demo/date-picker/date-picker.component.html b/showcase/src/app/demo/date-picker/date-picker.component.html
index 0fa7cd7eb0..5a3508ec78 100644
--- a/showcase/src/app/demo/date-picker/date-picker.component.html
+++ b/showcase/src/app/demo/date-picker/date-picker.component.html
@@ -16,3 +16,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		 label="SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER" [minDate]="minDate" [maxDate]="maxDate" (dateChanged)="onDateChanged($event)"></stark-date-picker>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/date-picker/date-picker.component.ts b/showcase/src/app/demo/date-picker/date-picker.component.ts
index e2c512e4c2..fc3428abf0 100644
--- a/showcase/src/app/demo/date-picker/date-picker.component.ts
+++ b/showcase/src/app/demo/date-picker/date-picker.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkDatePickerFilter } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-date-picker",
@@ -11,9 +12,13 @@ export class DatePickerComponent implements OnInit {
 	public minDate: Date;
 	public maxDate: Date;
 	public customDateFilter: StarkDatePickerFilter;
+	public referenceList: ReferenceLink[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.currentDate = new Date();
 		this.minDate = new Date();
@@ -24,6 +29,13 @@ export class DatePickerComponent implements OnInit {
 			const day: number = date.getDay();
 			return day === 3;
 		};
+
+		this.referenceList = [
+			{
+				label: "Stark Date Picker component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkDatePickerComponent.html"
+			}
+		];
 	}
 
 	public onDateChanged(date: Date): void {
diff --git a/showcase/src/app/demo/date-range-picker/date-range-picker.component.html b/showcase/src/app/demo/date-range-picker/date-range-picker.component.html
index 2c830d141b..6690cbc746 100644
--- a/showcase/src/app/demo/date-range-picker/date-range-picker.component.html
+++ b/showcase/src/app/demo/date-range-picker/date-range-picker.component.html
@@ -11,3 +11,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<mat-checkbox [(ngModel)]="isDisabled">isDisabled</mat-checkbox>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/date-range-picker/date-range-picker.component.ts b/showcase/src/app/demo/date-range-picker/date-range-picker.component.ts
index 4cd749bf12..1a0c6af67e 100644
--- a/showcase/src/app/demo/date-range-picker/date-range-picker.component.ts
+++ b/showcase/src/app/demo/date-range-picker/date-range-picker.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkDatePickerFilter } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-date-range-picker",
@@ -13,6 +14,7 @@ export class DateRangePickerComponent implements OnInit {
 	public minDate: Date;
 	public maxDate: Date;
 	public customDateFilter: StarkDatePickerFilter;
+	public referenceList: ReferenceLink[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
@@ -28,6 +30,13 @@ export class DateRangePickerComponent implements OnInit {
 			const day: number = date.getDay();
 			return day !== 0;
 		};
+
+		this.referenceList = [
+			{
+				label: "Stark Date Range Picker component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkDateRangePickerComponent.html"
+			}
+		];
 	}
 
 	public onDateChanged(event: Object): void {
diff --git a/showcase/src/app/demo/dropdown/demo-dropdown.component.html b/showcase/src/app/demo/dropdown/demo-dropdown.component.html
index 4b464a4f3f..2eacda3a6b 100644
--- a/showcase/src/app/demo/dropdown/demo-dropdown.component.html
+++ b/showcase/src/app/demo/dropdown/demo-dropdown.component.html
@@ -49,3 +49,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 			translate }}: {{ selectedServiceWhiteDropdown }}</div>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/dropdown/demo-dropdown.component.ts b/showcase/src/app/demo/dropdown/demo-dropdown.component.ts
index 05dbe004c3..775504c0fb 100644
--- a/showcase/src/app/demo/dropdown/demo-dropdown.component.ts
+++ b/showcase/src/app/demo/dropdown/demo-dropdown.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-dropdown",
@@ -15,6 +16,8 @@ export class DemoDropdownComponent implements OnInit {
 
 	public serviceDropdownOptions: any[];
 
+	public referenceList: ReferenceLink[];
+
 	/**
 	 * Component lifecycle hook
 	 */
@@ -24,6 +27,13 @@ export class DemoDropdownComponent implements OnInit {
 			{ id: "IO", value: "SHOWCASE.DEMO.DROPDOWN.IO" },
 			{ id: "CS", value: "SHOWCASE.DEMO.DROPDOWN.CS" }
 		];
+
+		this.referenceList = [
+			{
+				label: "Stark Dropdown component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkDropdownComponent.html"
+			}
+		];
 	}
 
 	public serviceDropdownOnChange(selectedValue: string): void {
diff --git a/showcase/src/app/demo/footer/demo-footer.component.html b/showcase/src/app/demo/footer/demo-footer.component.html
index e482c71469..f31e1a88ab 100644
--- a/showcase/src/app/demo/footer/demo-footer.component.html
+++ b/showcase/src/app/demo/footer/demo-footer.component.html
@@ -1,4 +1,4 @@
-<mat-card>
+<section class="stark-section">
 	<h1 translate>SHOWCASE.DEMO.FOOTER.TITLE</h1>
 	<p translate>SHOWCASE.DEMO.FOOTER.INTRO</p>
 	<stark-pretty-print [data]="footerHtml" format="html" [enableHighlighting]="true"></stark-pretty-print>
@@ -9,4 +9,5 @@ <h1 translate>SHOWCASE.DEMO.FOOTER.TITLE</h1>
 		<li [innerHTML]="'SHOWCASE.DEMO.FOOTER.INPUT2'|translate"></li>
 		<li [innerHTML]="'SHOWCASE.DEMO.FOOTER.INPUT3'|translate"></li>
 	</ul>
-</mat-card>
+</section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/footer/demo-footer.component.ts b/showcase/src/app/demo/footer/demo-footer.component.ts
index 33d1734f33..49978ea9f8 100644
--- a/showcase/src/app/demo/footer/demo-footer.component.ts
+++ b/showcase/src/app/demo/footer/demo-footer.component.ts
@@ -1,5 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-footer",
@@ -7,8 +8,13 @@ import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium
 })
 export class DemoFooterComponent implements OnInit {
 	public footerHtml: string;
+	public referenceList: ReferenceLink[];
+
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.footerHtml = `<stark-app-footer
 	legalInfoUrl="https://www.nbb.be/en/disclaimer-and-legal-information"
@@ -18,5 +24,12 @@ export class DemoFooterComponent implements OnInit {
 	<a htref="https://www.some-page.com/">Some link</a>
 
 </stark-app-footer>`;
+
+		this.referenceList = [
+			{
+				label: "Stark Footer component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkAppFooterComponent.html"
+			}
+		];
 	}
 }
diff --git a/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.html b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.html
index 92d538236a..5908cbadf4 100644
--- a/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.html
+++ b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.html
@@ -53,3 +53,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		</form>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.ts b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.ts
index 3dc991b5ad..8101777667 100644
--- a/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.ts
+++ b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.ts
@@ -1,5 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-on-enter-key",
@@ -14,14 +15,30 @@ export class KeyboardDirectivesComponent implements OnInit {
 
 	public logging: string;
 
+	public referenceList: ReferenceLink[];
+
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.latestInputValue = "";
 		this.inputValue1 = "";
 		this.inputValue2 = "";
 		this.inputValue3 = "";
 		this.logging = "";
+
+		this.referenceList = [
+			{
+				label: "Stark On Enter Key directive",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/directives/StarkOnEnterKeyDirective.html"
+			},
+			{
+				label: "Stark Restrict Input directive",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/directives/StarkRestrictInputDirective.html"
+			}
+		];
 	}
 
 	public onEnterKeyCallback(...paramValues: any[]): void {
diff --git a/showcase/src/app/demo/language-selector/demo-language-selector.component.html b/showcase/src/app/demo/language-selector/demo-language-selector.component.html
index 8ad16def5a..f6df90128d 100644
--- a/showcase/src/app/demo/language-selector/demo-language-selector.component.html
+++ b/showcase/src/app/demo/language-selector/demo-language-selector.component.html
@@ -9,3 +9,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<stark-language-selector mode="toolbar"></stark-language-selector>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/language-selector/demo-language-selector.component.ts b/showcase/src/app/demo/language-selector/demo-language-selector.component.ts
index daea37a060..4ccc7ed71e 100644
--- a/showcase/src/app/demo/language-selector/demo-language-selector.component.ts
+++ b/showcase/src/app/demo/language-selector/demo-language-selector.component.ts
@@ -1,10 +1,25 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-language-selector",
 	templateUrl: "./demo-language-selector.component.html"
 })
-export class DemoLanguageSelectorComponent {
+export class DemoLanguageSelectorComponent implements OnInit {
+	public referenceList: ReferenceLink[];
+
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.referenceList = [
+			{
+				label: "Stark Language Selector component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkLanguageSelectorComponent.html"
+			}
+		];
+	}
 }
diff --git a/showcase/src/app/demo/logout/logout.component.html b/showcase/src/app/demo/logout/logout.component.html
index 99ee0aed6f..82521e7cf4 100644
--- a/showcase/src/app/demo/logout/logout.component.html
+++ b/showcase/src/app/demo/logout/logout.component.html
@@ -9,3 +9,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<stark-app-logout icon="logout"></stark-app-logout>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/logout/logout.component.ts b/showcase/src/app/demo/logout/logout.component.ts
index e0d6132354..d76e399478 100644
--- a/showcase/src/app/demo/logout/logout.component.ts
+++ b/showcase/src/app/demo/logout/logout.component.ts
@@ -1,10 +1,25 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-logout",
 	templateUrl: "./logout.component.html"
 })
-export class LogoutComponent {
+export class LogoutComponent implements OnInit {
+	public referenceList: ReferenceLink[];
+
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.referenceList = [
+			{
+				label: "Stark Logout component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkAppLogoutComponent.html"
+			}
+		];
+	}
 }
diff --git a/showcase/src/app/demo/pagination/demo-pagination.component.html b/showcase/src/app/demo/pagination/demo-pagination.component.html
index d4c1e05a5c..78986f1afb 100644
--- a/showcase/src/app/demo/pagination/demo-pagination.component.html
+++ b/showcase/src/app/demo/pagination/demo-pagination.component.html
@@ -55,3 +55,5 @@ <h1 class="mat-display-2" translate>SHOWCASE.DEMO.PAGINATION.TITLE</h1>
 		</div>
 	</example-viewer>
 </section>
+
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/pagination/demo-pagination.component.ts b/showcase/src/app/demo/pagination/demo-pagination.component.ts
index 8f159778b2..c8ab1111aa 100644
--- a/showcase/src/app/demo/pagination/demo-pagination.component.ts
+++ b/showcase/src/app/demo/pagination/demo-pagination.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkPaginateEvent, StarkPaginationConfig } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-pagination",
@@ -16,9 +17,13 @@ export class DemoPaginationComponent implements OnInit {
 	public paginateEventExtended: string;
 	public paginateEventAdvanced: string;
 	public paginateEventCompact: string;
+	public referenceList: ReferenceLink[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.paginationSimpleConfig = {
 			totalItems: 20,
@@ -51,6 +56,13 @@ export class DemoPaginationComponent implements OnInit {
 			itemsPerPage: 4,
 			itemsPerPageOptions: [2, 4, 6, 8, 10, 20]
 		};
+
+		this.referenceList = [
+			{
+				label: "Stark Pagination component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkPaginationComponent.html"
+			}
+		];
 	}
 
 	public onPaginationChange(paginateEvent: StarkPaginateEvent, config: "simple" | "extended" | "advanced" | "compact"): void {
diff --git a/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html
index 14fa4b6756..35fb6633d1 100644
--- a/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html
+++ b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html
@@ -44,3 +44,5 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		</mat-tab-group>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
+
diff --git a/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts
index de247d9926..aeb5dad03f 100644
--- a/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts
+++ b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkPrettyPrintFormat } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 export interface FileType {
 	format: StarkPrettyPrintFormat;
@@ -21,9 +22,13 @@ export class DemoPrettyPrintComponent implements OnInit {
 	public selectedDataFormat: string;
 	public highlightingEnabled: boolean;
 	public unformattedData: string;
+	public referenceList: ReferenceLink[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.addCss();
 		this.addScss();
@@ -38,6 +43,13 @@ export class DemoPrettyPrintComponent implements OnInit {
 		this.selectedDataFormat = "";
 		this.highlightingEnabled = false;
 		this.dataFormats = this.fileTypes.map((fileType: FileType) => fileType.format);
+
+		this.referenceList = [
+			{
+				label: "Stark Pretty Print component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkPrettyPrintComponent.html"
+			}
+		];
 	}
 
 	public dataFormatDropdownOnChange(selectedValue: string): void {
diff --git a/showcase/src/app/demo/sidebar/demo-sidebar.component.html b/showcase/src/app/demo/sidebar/demo-sidebar.component.html
index 2d9cc78f16..9faf252d58 100644
--- a/showcase/src/app/demo/sidebar/demo-sidebar.component.html
+++ b/showcase/src/app/demo/sidebar/demo-sidebar.component.html
@@ -7,3 +7,5 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 	<button color="primary" mat-raised-button mat-button (click)="openRightSidebar()">{{ 'SHOWCASE.DEMO.SIDEBAR.OPEN_RIGHT' | translate }}</button>
 </example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
+
diff --git a/showcase/src/app/demo/sidebar/demo-sidebar.component.ts b/showcase/src/app/demo/sidebar/demo-sidebar.component.ts
index 1751131f34..bff0c6af1e 100644
--- a/showcase/src/app/demo/sidebar/demo-sidebar.component.ts
+++ b/showcase/src/app/demo/sidebar/demo-sidebar.component.ts
@@ -1,12 +1,15 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_APP_SIDEBAR_SERVICE, StarkAppSidebarService } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-sidebar",
 	styleUrls: ["./demo-sidebar.component.scss"],
 	templateUrl: "./demo-sidebar.component.html"
 })
-export class DemoSidebarComponent {
+export class DemoSidebarComponent implements OnInit {
+	public referenceList: ReferenceLink[];
+
 	public constructor(@Inject(STARK_APP_SIDEBAR_SERVICE) public sidebarService: StarkAppSidebarService) {}
 
 	public openMenu(): void {
@@ -20,4 +23,16 @@ export class DemoSidebarComponent {
 	public openRightSidebar(): void {
 		this.sidebarService.openRight();
 	}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.referenceList = [
+			{
+				label: "Stark Sidebar component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkAppSidebarComponent.html"
+			}
+		];
+	}
 }
diff --git a/showcase/src/app/demo/slider/slider.component.html b/showcase/src/app/demo/slider/slider.component.html
index f06d4e22be..8d30b759ad 100644
--- a/showcase/src/app/demo/slider/slider.component.html
+++ b/showcase/src/app/demo/slider/slider.component.html
@@ -78,3 +78,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		</div>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/slider/slider.component.ts b/showcase/src/app/demo/slider/slider.component.ts
index e357939b33..0519848622 100644
--- a/showcase/src/app/demo/slider/slider.component.ts
+++ b/showcase/src/app/demo/slider/slider.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkSliderConfig } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 export enum SLIDER_HANDLES {
 	lower = 0,
@@ -13,6 +14,8 @@ export enum SLIDER_HANDLES {
 	styleUrls: ["./slider.component.scss"]
 })
 export class SliderComponent implements OnInit {
+	public referenceList: ReferenceLink[];
+
 	public SLIDER_HANDLES: typeof SLIDER_HANDLES = SLIDER_HANDLES;
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public loggingService: StarkLoggingService) {}
@@ -105,12 +108,22 @@ export class SliderComponent implements OnInit {
 		}
 	};
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.loggingService.debug("Hello from the `Slider` component");
 		this.isSimpleHorizontalSliderEnabled = true;
 		this.isHorizontalRangeSliderEnabled = true;
 		this.isSimpleVerticalSliderEnabled = true;
 		this.isVerticalRangeSliderEnabled = true;
+
+		this.referenceList = [
+			{
+				label: "Stark Slider component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkSliderComponent.html"
+			}
+		];
 	}
 
 	/***
diff --git a/showcase/src/app/demo/table/demo-table.component.html b/showcase/src/app/demo/table/demo-table.component.html
index 31df83211d..f28c08d762 100644
--- a/showcase/src/app/demo/table/demo-table.component.html
+++ b/showcase/src/app/demo/table/demo-table.component.html
@@ -55,3 +55,5 @@ <h1 translate>SHOWCASE.DEMO.TABLE.WITH_TRANSCLUDED_ACTION_BAR</h1>
 		</stark-table>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
+
diff --git a/showcase/src/app/demo/table/demo-table.component.ts b/showcase/src/app/demo/table/demo-table.component.ts
index 54a9fba492..3a630b8b65 100644
--- a/showcase/src/app/demo/table/demo-table.component.ts
+++ b/showcase/src/app/demo/table/demo-table.component.ts
@@ -7,6 +7,7 @@ import {
 	StarkAction
 } from "@nationalbankbelgium/stark-ui";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-table",
@@ -15,6 +16,8 @@ import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium
 	encapsulation: ViewEncapsulation.None //Here to add a shadow inside the table, we will fix that when we take care of #509
 })
 export class DemoTableComponent implements OnInit {
+	public referenceList: ReferenceLink[];
+
 	public getTitle = (data: any): string => {
 		return "~" + data.title.label;
 	};
@@ -42,6 +45,9 @@ export class DemoTableComponent implements OnInit {
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.dummyData = [
 			{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
@@ -217,5 +223,20 @@ export class DemoTableComponent implements OnInit {
 				}
 			]
 		};
+
+		this.referenceList = [
+			{
+				label: "Stark Table component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkTableComponent.html"
+			},
+			{
+				label: "Stark Table - Column component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkTableColumnComponent.html"
+			},
+			{
+				label: "Stark Table - Multisort Dialog component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkTableMultisortDialogComponent.html"
+			}
+		];
 	}
 }
diff --git a/showcase/src/app/demo/toast/demo-toast-notification.component.html b/showcase/src/app/demo/toast/demo-toast-notification.component.html
index fab4051bcf..2d31f81fac 100644
--- a/showcase/src/app/demo/toast/demo-toast-notification.component.html
+++ b/showcase/src/app/demo/toast/demo-toast-notification.component.html
@@ -10,3 +10,5 @@
 	<br/>
 	<div class="toast-demo-message">{{ messageText | translate }}</div>
 </example-viewer>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
+
diff --git a/showcase/src/app/demo/toast/demo-toast-notification.component.ts b/showcase/src/app/demo/toast/demo-toast-notification.component.ts
index 760e738738..35cd3a120f 100644
--- a/showcase/src/app/demo/toast/demo-toast-notification.component.ts
+++ b/showcase/src/app/demo/toast/demo-toast-notification.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import {
 	STARK_TOAST_NOTIFICATION_SERVICE,
@@ -7,6 +7,7 @@ import {
 	StarkToastMessage,
 	StarkMessageType
 } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "showcase-demo-toast-notification",
@@ -16,7 +17,9 @@ import {
 /**
  * Component to demo the toast notifications
  */
-export class DemoToastComponent {
+export class DemoToastComponent implements OnInit {
+	public referenceList: ReferenceLink[];
+
 	/**
 	 * Message, or ID of message displayed in the message in the message box (translations applies).
 	 */
@@ -116,4 +119,16 @@ export class DemoToastComponent {
 	public hideToast(): void {
 		this.toastService.hide();
 	}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.referenceList = [
+			{
+				label: "Stark Toast Notification component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkToastNotificationComponent.html"
+			}
+		];
+	}
 }
diff --git a/showcase/src/app/shared/index.ts b/showcase/src/app/shared/index.ts
index 86acda6578..dbaeeb77f0 100644
--- a/showcase/src/app/shared/index.ts
+++ b/showcase/src/app/shared/index.ts
@@ -1,2 +1,3 @@
 export * from "./example-viewer";
+export * from "./reference-block";
 export * from "./shared.module";
diff --git a/showcase/src/app/shared/reference-block/_reference-block.component.scss b/showcase/src/app/shared/reference-block/_reference-block.component.scss
new file mode 100644
index 0000000000..816d0d3a7c
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/_reference-block.component.scss
@@ -0,0 +1,36 @@
+/* ============================================================================== */
+/*  S t a r k   R e f e r e n c e   B l o c k                                     */
+/* ============================================================================== */
+/* stark-ui: src/modules/reference-block/components/reference-block.component.scss */
+.reference-block {
+  background-color: #fff;
+  border: solid 1px color(mat-color($grey-palette, 300));
+  padding-left: 10px;
+  padding-top: 10px;
+  border-radius: 5px;
+  box-shadow: color(mat-color($grey-palette, 200));
+  position: relative;
+  margin-bottom: 15px;
+
+  & mat-icon {
+    display: inline-flex;
+    margin-right: 15px;
+  }
+  & ul {
+    margin-top: 5px;
+  }
+
+  & a {
+    text-decoration: none;
+  }
+  & a:hover {
+    background-color: $offwhite;
+    color: $md-primary;
+  }
+}
+.reference-title {
+  display: inline-flex;
+  font-weight: bold;
+}
+
+/* end src/modules/reference-block/components/reference-block.component.scss  */
diff --git a/showcase/src/app/shared/reference-block/index.ts b/showcase/src/app/shared/reference-block/index.ts
new file mode 100644
index 0000000000..dc9446e8f1
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/index.ts
@@ -0,0 +1,2 @@
+export * from "./reference-block.component";
+export * from "./reference-link.intf";
diff --git a/showcase/src/app/shared/reference-block/reference-block.component.html b/showcase/src/app/shared/reference-block/reference-block.component.html
new file mode 100644
index 0000000000..18391e6513
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/reference-block.component.html
@@ -0,0 +1,10 @@
+<div class="reference-block">
+<mat-icon svgIcon="file-multiple"></mat-icon>
+	<div class="reference-title">Reference</div>
+	<ul>
+		<li *ngFor="let link of links;  trackBy: trackItemFn; let last=last">
+			<a [attr.href]="link.url" target="_blank" rel="noopener noreferrer">{{ link.label }}</a>
+			<span *ngIf="!last"></span>
+		</li>
+	</ul>
+</div>
diff --git a/showcase/src/app/shared/reference-block/reference-block.component.ts b/showcase/src/app/shared/reference-block/reference-block.component.ts
new file mode 100644
index 0000000000..28c050600f
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/reference-block.component.ts
@@ -0,0 +1,33 @@
+import { ReferenceLink } from "./reference-link.intf";
+import { Component, Inject, Input, OnInit } from "@angular/core";
+import { StarkLoggingService, STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
+
+const componentName: string = "stark-reference-block";
+
+/**
+ * Component to display a list of URLS to documentation
+ */
+@Component({
+	selector: "stark-reference-block",
+	templateUrl: "./reference-block.component.html"
+})
+export class ReferenceBlockComponent implements OnInit {
+	@Input()
+	public links: ReferenceLink[];
+
+	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.logger.debug(componentName + ": controller initialized");
+	}
+
+	/**
+	 * @ignore
+	 */
+	public trackItemFn(_index: number, item: any): string {
+		return item;
+	}
+}
diff --git a/showcase/src/app/shared/reference-block/reference-link.intf.ts b/showcase/src/app/shared/reference-block/reference-link.intf.ts
new file mode 100644
index 0000000000..b5e34dcfa7
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/reference-link.intf.ts
@@ -0,0 +1,4 @@
+export interface ReferenceLink {
+	url: string;
+	label: string;
+}
diff --git a/showcase/src/app/shared/shared.module.ts b/showcase/src/app/shared/shared.module.ts
index d7fe68b5f0..4f6f09f4b6 100644
--- a/showcase/src/app/shared/shared.module.ts
+++ b/showcase/src/app/shared/shared.module.ts
@@ -1,5 +1,6 @@
 import { ExampleViewerComponent } from "./example-viewer/example-viewer.component";
 import { FileService } from "./example-viewer/file.service";
+import { ReferenceBlockComponent } from "./reference-block/reference-block.component";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCardModule } from "@angular/material/card";
 import { MatIconModule } from "@angular/material/icon";
@@ -26,8 +27,8 @@ import { FlexLayoutModule } from "@angular/flex-layout";
 		TranslateModule
 	],
 	providers: [FileService],
-	declarations: [ExampleViewerComponent],
-	entryComponents: [ExampleViewerComponent],
-	exports: [ExampleViewerComponent, FlexLayoutModule]
+	declarations: [ExampleViewerComponent, ReferenceBlockComponent],
+	entryComponents: [ExampleViewerComponent, ReferenceBlockComponent],
+	exports: [ExampleViewerComponent, ReferenceBlockComponent, FlexLayoutModule]
 })
 export class SharedModule {}
diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss
index 03fffd876b..1c15a581f4 100644
--- a/showcase/src/styles/styles.scss
+++ b/showcase/src/styles/styles.scss
@@ -2,6 +2,7 @@
 @import "stark-styles.scss";
 
 @import "../app/news/news-component/news.component";
+@import "../app/shared/reference-block/reference-block.component";
 
 @import "~basscss/css/basscss.css";
 @import "~prismjs/themes/prism-okaidia.css";