feat(stark-ui): implements footer component

packages/stark-core/src/common/translations/translations/en.ts

@@ -6,6 +6,12 @@ export const translationsEn: object = {
 		APP_LOGOUT: {
 			TITLE: "Log out"
 		},
+		APP_FOOTER: {
+			COPYRIGHT: "National Bank of Belgium. All rights reserved",
+			COPYRIGHT_YEAR: "2016",
+			HELP: "Help",
+			LEGAL_INFO: "Legal information"
+		},
 		DATE_RANGE_PICKER: {
 			FROM: "From",
 			TO: "To"

packages/stark-core/src/common/translations/translations/fr.ts

@@ -6,6 +6,12 @@ export const translationsFr: object = {
 		APP_LOGOUT: {
 			TITLE: "Déconnecter"
 		},
+		APP_FOOTER: {
+			COPYRIGHT: "Banque Nationale de Belgique. Tous droits réservés",
+			COPYRIGHT_YEAR: "2016",
+			HELP: "Aide",
+			LEGAL_INFO: "Informations légales"
+		},
 		DATE_RANGE_PICKER: {
 			FROM: "De",
 			TO: "A"

packages/stark-core/src/common/translations/translations/nl.ts

@@ -6,6 +6,12 @@ export const translationsNl: object = {
 		APP_LOGOUT: {
 			TITLE: "Afmelden"
 		},
+		APP_FOOTER: {
+			COPYRIGHT: "Nationale Bank van België. Alle rechten voorbehouden",
+			COPYRIGHT_YEAR: "2016",
+			HELP: "Help",
+			LEGAL_INFO: "Juridische informatie"
+		},
 		DATE_RANGE_PICKER: {
 			FROM: "Van",
 			TO: "Tot"

packages/stark-ui/assets/styles/_old-variables.scss

@@ -18,6 +18,8 @@ $stark-header-actions-top: 78px;
 $stark-header-actions-top-desktop: 106px;
 $stark-max-content-width: 960px;
 
+$stark-footer-size: 24px;
+
 $primary-dark-text-color: map-get($mat-light-theme-foreground, base);
 $secondary-dark-text-color: rgba(0, 0, 0, 0.7);
 $tertiary-dark-text-color: rgba(0, 0, 0, 0.45);

packages/stark-ui/assets/styles/_variables.scss

@@ -30,7 +30,6 @@ $accent-palette: (
     A700: $light-primary-text
   )
 );
-
 $alert-palette: (
   50: #fae6e6,
   100: #f2c1c1,
@@ -63,7 +62,6 @@ $alert-palette: (
     A700: $dark-primary-text
   )
 );
-
 $grey-palette: (
   50: #fafafa,
   100: #f5f5f5,
@@ -96,7 +94,6 @@ $grey-palette: (
     A700: $light-primary-text
   )
 );
-
 $primary-palette: (
   50: #e0eff8,
   100: #b3d6ef,
@@ -129,7 +126,6 @@ $primary-palette: (
     A700: $dark-primary-text
   )
 );
-
 $success-palette: (
   50: #eaf5ea,
   100: #c9e7cb,
@@ -162,7 +158,6 @@ $success-palette: (
     A700: $dark-primary-text
   )
 );
-
 $warning-palette: (
   50: #fff3e0,
   100: #ffe0b3,
@@ -195,7 +190,6 @@ $warning-palette: (
     A700: $dark-primary-text
   )
 );
-
 $backgrounds: (
   status-bar: map_get($mat-grey, 300),
   app-bar: map_get($mat-grey, 100),
@@ -229,7 +223,6 @@ $foregrounds: (
   slider-off: rgba(black, 0.26),
   slider-off-active: rgba(black, 0.38)
 );
-
 // https://material.angular.io/guide/typography
 $typography-theme: (
   font-family:

packages/stark-ui/src/modules.ts

@@ -1,4 +1,5 @@
 export * from "./modules/action-bar";
+export * from "./modules/app-footer";
 export * from "./modules/app-logo";
 export * from "./modules/app-logout";
 export * from "./modules/breadcrumb";

packages/stark-ui/src/modules/app-footer.ts

@@ -0,0 +1,2 @@
+export * from "./app-footer/app-footer.module";
+export * from "./app-footer/components";

packages/stark-ui/src/modules/app-footer/app-footer.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { StarkAppFooterComponent } from "./components";
+import { TranslateModule } from "@ngx-translate/core";
+
+@NgModule({
+	declarations: [StarkAppFooterComponent],
+	imports: [CommonModule, TranslateModule],
+	exports: [StarkAppFooterComponent]
+})
+export class StarkAppFooterModule {}

packages/stark-ui/src/modules/app-footer/components.ts

@@ -0,0 +1 @@
+export * from "./components/app-footer.component";

packages/stark-ui/src/modules/app-footer/components/_app-footer-theme.scss

@@ -0,0 +1,21 @@
+/* ============================================================================== */
+/*  S t a r k   A p p   F o o t e r                                               */
+/* ============================================================================== */
+/* stark-ui: src/modules/app-footer/components/_app-footer.component.scss */
+
+@mixin stark-app-footer-color($color_high, $color_low) {
+  .stark-app-footer-container {
+    background: rgba($color: $color_low, $alpha: 1);
+    color: rgba($color: $color_high, $alpha: 0.7);
+    a {
+      display: inline-block;
+      color: rgba($color: $color_high, $alpha: 0.7);
+    }
+  }
+}
+
+.stark-app-footer {
+  @include stark-app-footer-color(mat-color($grey-palette, A100), mat-color($grey-palette, 800));
+}
+
+/* end stark-ui: src/modules/app-footer/components/_app-footer.component.scss */

packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss

@@ -0,0 +1,28 @@
+/* ============================================================================== */
+/*  S t a r k   A p p   F o o t e r                                               */
+/* ============================================================================== */
+/* stark-ui: src/modules/app-footer/components/_app-footer.component.scss */
+stark-app-footer {
+  position: relative;
+  bottom: 0;
+  width: 100%;
+}
+
+.stark-app-footer-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  line-height: 1.1;
+  padding-left: 16px;
+  padding-right: 16px;
+  height: $stark-footer-size;
+  a {
+    display: inline-block;
+  }
+  .bullet {
+    margin: 0 4px 0 4px;
+  }
+}
+
+/* end stark-ui: src/modules/app-footer/components/_app-footer.component.scss */

packages/stark-ui/src/modules/app-footer/components/app-footer.component.html

@@ -0,0 +1,29 @@
+<footer class="stark-app-footer-container">
+	<span translate>STARK.APP_FOOTER.COPYRIGHT</span>
+		&copy; 
+	<span>{{ copyrightPeriod }}</span>
+	<span class="bullet" *ngIf="legalInfoUrl">
+		&bull; 
+	</span>
+	<a *ngIf="legalInfoUrl"
+	href="{{ legalInfoUrl }}"
+	target="_blank"
+    rel="noopener noreferrer">
+		{{ 'STARK.APP_FOOTER.LEGAL_INFO' | translate }}
+	</a>
+	<span class="bullet" *ngIf="helpPageUrl">
+		&bull;
+	</span>
+	<a *ngIf="helpPageUrl"
+	href="{{ helpPageUrl }}"
+    target="_blank"
+    rel="noopener noreferrer">
+		{{ 'STARK.APP_FOOTER.HELP' | translate }}
+	</a>
+	<span class="bullet" *ngIf="footerContent.childNodes.length !== 0">
+		&bull;
+	</span>
+	<span #footerContent>
+		<ng-content></ng-content>
+	</span>
+</footer>

packages/stark-ui/src/modules/app-footer/components/app-footer.component.spec.ts

@@ -0,0 +1,106 @@
+/*tslint:disable:completed-docs*/
+import { async, ComponentFixture, inject, TestBed } from "@angular/core/testing";
+import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
+import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
+import { StarkAppFooterComponent } from "./app-footer.component";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+
+describe("AppLogoutComponent", () => {
+	let component: StarkAppFooterComponent;
+	let fixture: ComponentFixture<StarkAppFooterComponent>;
+
+	const currentYear: string = new Date().getFullYear().toString();
+
+	let translateService: TranslateService;
+	/**
+	 * async beforeEach
+	 */
+	beforeEach(async(() => {
+		return (
+			TestBed.configureTestingModule({
+				imports: [TranslateModule.forRoot()],
+				declarations: [StarkAppFooterComponent],
+				providers: [{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }, TranslateService]
+			})
+				/**
+				 * Compile template and css
+				 */
+				.compileComponents()
+		);
+	}));
+
+	// Inject module dependencies
+	beforeEach(inject([TranslateService], (_translateService: TranslateService) => {
+		translateService = _translateService;
+		translateService.addLangs(["en", "fr", "nl", "de"]);
+		translateService.setDefaultLang("en");
+	}));
+
+	/**
+	 * Synchronous beforeEach
+	 */
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StarkAppFooterComponent);
+		component = fixture.componentInstance;
+
+		// inputs
+		component.legalInfoUrl = "legal-info";
+		component.helpPageUrl = "help-page";
+
+		fixture.detectChanges(); // trigger initial data binding
+	});
+
+	describe("on initialization", () => {
+		it("should set internal component properties", () => {
+			expect(fixture).toBeDefined();
+			expect(component).toBeDefined();
+
+			expect(component.logger).not.toBeNull();
+			expect(component.logger).toBeDefined();
+
+			expect(component.$translate).not.toBeNull();
+			expect(component.$translate).toBeDefined();
+		});
+
+		it("should have been initialized", () => {
+			component.ngOnInit();
+
+			expect(component.legalInfoUrl).not.toBeNull();
+			expect(component.legalInfoUrl).toBeDefined();
+			expect(component.legalInfoUrl).toBe("legal-info");
+
+			expect(component.helpPageUrl).not.toBeNull();
+			expect(component.helpPageUrl).toBeDefined();
+			expect(component.helpPageUrl).toBe("help-page");
+
+			expect(component.copyrightPeriod).not.toBeNull();
+			expect(component.copyrightPeriod).toBeDefined();
+			expect(component.copyrightPeriod).toBe("STARK.APP_FOOTER.COPYRIGHT_YEAR - " + currentYear);
+		});
+	});
+
+	describe("getCopyrightYear()", () => {
+		it("should give back copyright year", () => {
+			// routingService.navigateTo is already a Spy
+			const cYear: string = component.getCopyrightYear();
+
+			expect(cYear).toBeDefined();
+			expect(cYear).toBe("STARK.APP_FOOTER.COPYRIGHT_YEAR");
+		});
+	});
+
+	describe("getCopyrightPeriod()", () => {
+		it("should give back copyright period", () => {
+			// routingService.navigateTo is already a Spy
+			let cPeriod: string = component.getCopyrightPeriod("toto");
+
+			expect(cPeriod).toBeDefined();
+			expect(cPeriod).toBe("toto - " + currentYear);
+
+			cPeriod = component.getCopyrightPeriod(currentYear);
+
+			expect(cPeriod).toBeDefined();
+			expect(cPeriod).toBe(currentYear);
+		});
+	});
+});

packages/stark-ui/src/modules/app-footer/components/app-footer.component.ts

@@ -0,0 +1,81 @@
+import { Component, HostBinding, Inject, Input, OnInit } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+
+/**
+ * Name of the component
+ */
+const componentName: string = "stark-app-footer";
+
+/**
+ * Component to display the application's footer.
+ */
+@Component({
+	selector: "stark-app-footer",
+	templateUrl: "./app-footer.component.html"
+})
+export class StarkAppFooterComponent implements OnInit {
+	/**
+	 * Adds class="stark-app-footer" attribute on the host component
+	 */
+	@HostBinding("class")
+	public class: string = componentName;
+
+	/**
+	 * Url for the Legal Information
+	 */
+	@Input()
+	public legalInfoUrl?: string;
+
+	/**
+	 * Url for the help page
+	 */
+	@Input()
+	public helpPageUrl?: string;
+
+	/**
+	 * Copyright period displayed.
+	 */
+	public copyrightPeriod: string;
+
+	/**
+	 * Class constructor
+	 * @param logger - The logger of the application
+	 * @param $translate - The translation service
+	 */
+	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService, public $translate: TranslateService) {
+		// empty constructor
+	}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.logger.debug(componentName + ": controller initialized");
+
+		// get the copyright period based on the value in translation file
+		this.copyrightPeriod = this.getCopyrightPeriod(this.getCopyrightYear());
+	}
+
+	/**
+	 * Creates and format the copyright period based on the starting year.
+	 * @returns The copyright period string
+	 * @param startYear - The starting year of the copyright
+	 */
+	public getCopyrightPeriod(startYear: string): string {
+		const currentYear: string = new Date().getFullYear().toString();
+		if (startYear === currentYear) {
+			return startYear;
+		} else {
+			return startYear + " - " + currentYear;
+		}
+	}
+
+	/**
+	 * Get the copyright year located in the translation file
+	 * @returns The copyright year string
+	 */
+	public getCopyrightYear(): string {
+		return this.$translate.instant("STARK.APP_FOOTER.COPYRIGHT_YEAR");
+	}
+}