From 2fca5c816ecbdd9ecaadf440a429611363ae4412 Mon Sep 17 00:00:00 2001 From: Denis Bourguignon Date: Wed, 5 Sep 2018 10:37:46 +0200 Subject: [PATCH] feat(stark-ui): implements footer component --- .../common/translations/translations/en.ts | 6 + .../common/translations/translations/fr.ts | 6 + .../common/translations/translations/nl.ts | 6 + .../assets/styles/_old-variables.scss | 2 + .../stark-ui/assets/styles/_variables.scss | 7 -- packages/stark-ui/src/modules.ts | 1 + packages/stark-ui/src/modules/app-footer.ts | 2 + .../modules/app-footer/app-footer.module.ts | 11 ++ .../src/modules/app-footer/components.ts | 1 + .../components/_app-footer-theme.scss | 21 ++++ .../components/_app-footer.component.scss | 28 +++++ .../components/app-footer.component.html | 29 +++++ .../components/app-footer.component.spec.ts | 106 ++++++++++++++++++ .../components/app-footer.component.ts | 81 +++++++++++++ .../components/_app-sidebar.component.scss | 2 +- showcase/src/app/app.component.html | 8 ++ showcase/src/app/app.module.ts | 2 + showcase/src/app/app.routes.ts | 2 + showcase/src/app/demo/demo.module.ts | 3 + .../demo/footer/demo-footer.component.html | 12 ++ .../app/demo/footer/demo-footer.component.ts | 22 ++++ showcase/src/app/demo/footer/index.ts | 1 + showcase/src/app/demo/index.ts | 1 + showcase/src/assets/translations/en.json | 8 ++ showcase/src/assets/translations/fr.json | 8 ++ showcase/src/assets/translations/nl.json | 8 ++ showcase/src/styles/_stark-styles.scss | 2 + 27 files changed, 378 insertions(+), 8 deletions(-) create mode 100644 packages/stark-ui/src/modules/app-footer.ts create mode 100644 packages/stark-ui/src/modules/app-footer/app-footer.module.ts create mode 100644 packages/stark-ui/src/modules/app-footer/components.ts create mode 100644 packages/stark-ui/src/modules/app-footer/components/_app-footer-theme.scss create mode 100644 packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss create mode 100644 packages/stark-ui/src/modules/app-footer/components/app-footer.component.html create mode 100644 packages/stark-ui/src/modules/app-footer/components/app-footer.component.spec.ts create mode 100644 packages/stark-ui/src/modules/app-footer/components/app-footer.component.ts create mode 100644 showcase/src/app/demo/footer/demo-footer.component.html create mode 100644 showcase/src/app/demo/footer/demo-footer.component.ts create mode 100644 showcase/src/app/demo/footer/index.ts diff --git a/packages/stark-core/src/common/translations/translations/en.ts b/packages/stark-core/src/common/translations/translations/en.ts index 51b4847f70..4fa23eb4ef 100644 --- a/packages/stark-core/src/common/translations/translations/en.ts +++ b/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" diff --git a/packages/stark-core/src/common/translations/translations/fr.ts b/packages/stark-core/src/common/translations/translations/fr.ts index 728c8cde3f..2e1909b4eb 100644 --- a/packages/stark-core/src/common/translations/translations/fr.ts +++ b/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" diff --git a/packages/stark-core/src/common/translations/translations/nl.ts b/packages/stark-core/src/common/translations/translations/nl.ts index b439b723f9..ffeef828ce 100644 --- a/packages/stark-core/src/common/translations/translations/nl.ts +++ b/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" diff --git a/packages/stark-ui/assets/styles/_old-variables.scss b/packages/stark-ui/assets/styles/_old-variables.scss index eea1ed809b..103f6f31ef 100644 --- a/packages/stark-ui/assets/styles/_old-variables.scss +++ b/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); diff --git a/packages/stark-ui/assets/styles/_variables.scss b/packages/stark-ui/assets/styles/_variables.scss index 76cce1d906..eef0504600 100644 --- a/packages/stark-ui/assets/styles/_variables.scss +++ b/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: diff --git a/packages/stark-ui/src/modules.ts b/packages/stark-ui/src/modules.ts index 7eddcf3373..77afbb9662 100644 --- a/packages/stark-ui/src/modules.ts +++ b/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"; diff --git a/packages/stark-ui/src/modules/app-footer.ts b/packages/stark-ui/src/modules/app-footer.ts new file mode 100644 index 0000000000..a9cc188684 --- /dev/null +++ b/packages/stark-ui/src/modules/app-footer.ts @@ -0,0 +1,2 @@ +export * from "./app-footer/app-footer.module"; +export * from "./app-footer/components"; diff --git a/packages/stark-ui/src/modules/app-footer/app-footer.module.ts b/packages/stark-ui/src/modules/app-footer/app-footer.module.ts new file mode 100644 index 0000000000..c67b04f3a7 --- /dev/null +++ b/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 {} diff --git a/packages/stark-ui/src/modules/app-footer/components.ts b/packages/stark-ui/src/modules/app-footer/components.ts new file mode 100644 index 0000000000..58a0afe9f9 --- /dev/null +++ b/packages/stark-ui/src/modules/app-footer/components.ts @@ -0,0 +1 @@ +export * from "./components/app-footer.component"; diff --git a/packages/stark-ui/src/modules/app-footer/components/_app-footer-theme.scss b/packages/stark-ui/src/modules/app-footer/components/_app-footer-theme.scss new file mode 100644 index 0000000000..77c07b182b --- /dev/null +++ b/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 */ diff --git a/packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss b/packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss new file mode 100644 index 0000000000..bff274be58 --- /dev/null +++ b/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 */ diff --git a/packages/stark-ui/src/modules/app-footer/components/app-footer.component.html b/packages/stark-ui/src/modules/app-footer/components/app-footer.component.html new file mode 100644 index 0000000000..058b4e6e34 --- /dev/null +++ b/packages/stark-ui/src/modules/app-footer/components/app-footer.component.html @@ -0,0 +1,29 @@ + diff --git a/packages/stark-ui/src/modules/app-footer/components/app-footer.component.spec.ts b/packages/stark-ui/src/modules/app-footer/components/app-footer.component.spec.ts new file mode 100644 index 0000000000..bd69a73bda --- /dev/null +++ b/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; + + 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); + }); + }); +}); diff --git a/packages/stark-ui/src/modules/app-footer/components/app-footer.component.ts b/packages/stark-ui/src/modules/app-footer/components/app-footer.component.ts new file mode 100644 index 0000000000..37c795fdc9 --- /dev/null +++ b/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"); + } +} diff --git a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss index 48e7bfef93..3a064436cb 100644 --- a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss +++ b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss @@ -15,7 +15,7 @@ } .mat-sidenav-container { - min-height: 100%; + min-height: calc(100% - #{$stark-footer-size}); } .mat-sidenav { diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html index 66baa03ab5..85330553ee 100644 --- a/showcase/src/app/app.component.html +++ b/showcase/src/app/app.component.html @@ -56,6 +56,9 @@ Slider + + Stark footer + Stark header @@ -159,4 +162,9 @@

Stark

+ + diff --git a/showcase/src/app/app.module.ts b/showcase/src/app/app.module.ts index 4eb62eff0f..911e7e723d 100644 --- a/showcase/src/app/app.module.ts +++ b/showcase/src/app/app.module.ts @@ -48,6 +48,7 @@ import { } from "@nationalbankbelgium/stark-core"; import { + StarkAppFooterModule, StarkAppLogoModule, StarkAppLogoutModule, StarkAppSidebarModule, @@ -220,6 +221,7 @@ export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger SharedModule, DemoModule, NewsModule, + StarkAppFooterModule, StarkAppLogoModule, StarkAppLogoutModule, StarkAppSidebarModule.forRoot(), diff --git a/showcase/src/app/app.routes.ts b/showcase/src/app/app.routes.ts index d78a51282b..e415941e82 100644 --- a/showcase/src/app/app.routes.ts +++ b/showcase/src/app/app.routes.ts @@ -9,6 +9,7 @@ import { DemoSidebarComponent, DemoDropdownComponent, ExampleViewerComponent, + DemoFooterComponent, HeaderComponent, KeyboardDirectivesComponent, DemoLanguageSelectorComponent, @@ -36,6 +37,7 @@ export const APP_STATES: Ng2StateDeclaration[] = [ { name: "demo-colors", url: "/demo/colors", component: DemoColorsComponent }, { name: "demo-date-picker", url: "/demo/date-picker", component: DatePickerComponent }, { name: "demo-date-range-picker", url: "/demo/date-range-picker", component: DateRangePickerComponent }, + { name: "demo-stark-footer", url: "/demo/stark-footer", component: DemoFooterComponent }, { name: "stark-header", url: "/demo/stark-header", component: HeaderComponent }, { name: "demo-example-viewer", url: "/demo/example-viewer", component: ExampleViewerComponent }, { name: "demo-keyboard-directives", url: "/demo/keyboard-directives", component: KeyboardDirectivesComponent }, diff --git a/showcase/src/app/demo/demo.module.ts b/showcase/src/app/demo/demo.module.ts index 4e810a0cee..af42b6c0fa 100644 --- a/showcase/src/app/demo/demo.module.ts +++ b/showcase/src/app/demo/demo.module.ts @@ -27,6 +27,7 @@ import { DemoSidebarComponent } from "./sidebar/demo-sidebar.component"; import { DemoDropdownComponent } from "./dropdown/demo-dropdown.component"; import { ExampleViewerComponent } from "./example-viewer/example-viewer.component"; import { HeaderComponent } from "./header/header.component"; +import { DemoFooterComponent } from "./footer/demo-footer.component"; import { KeyboardDirectivesComponent } from "./keyboard-directives/keyboard-directives.component"; import { DemoLanguageSelectorComponent } from "./language-selector/demo-language-selector.component"; import { LogoutComponent } from "./logout/logout.component"; @@ -98,6 +99,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core"; DemoTypographyComponent, ExampleViewerComponent, HeaderComponent, + DemoFooterComponent, KeyboardDirectivesComponent, DemoLanguageSelectorComponent, LogoutComponent, @@ -124,6 +126,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core"; DemoTypographyComponent, ExampleViewerComponent, HeaderComponent, + DemoFooterComponent, KeyboardDirectivesComponent, DemoLanguageSelectorComponent, LogoutComponent, diff --git a/showcase/src/app/demo/footer/demo-footer.component.html b/showcase/src/app/demo/footer/demo-footer.component.html new file mode 100644 index 0000000000..e482c71469 --- /dev/null +++ b/showcase/src/app/demo/footer/demo-footer.component.html @@ -0,0 +1,12 @@ + +

SHOWCASE.DEMO.FOOTER.TITLE

+

SHOWCASE.DEMO.FOOTER.INTRO

+ +

SHOWCASE.DEMO.FOOTER.INFO

+ +
    +
  • +
  • +
  • +
+ diff --git a/showcase/src/app/demo/footer/demo-footer.component.ts b/showcase/src/app/demo/footer/demo-footer.component.ts new file mode 100644 index 0000000000..33d1734f33 --- /dev/null +++ b/showcase/src/app/demo/footer/demo-footer.component.ts @@ -0,0 +1,22 @@ +import { Component, Inject, OnInit } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; + +@Component({ + selector: "showcase-demo-footer", + templateUrl: "./demo-footer.component.html" +}) +export class DemoFooterComponent implements OnInit { + public footerHtml: string; + public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {} + + public ngOnInit(): void { + this.footerHtml = ` + + + Some link + +`; + } +} diff --git a/showcase/src/app/demo/footer/index.ts b/showcase/src/app/demo/footer/index.ts new file mode 100644 index 0000000000..9ca8220b85 --- /dev/null +++ b/showcase/src/app/demo/footer/index.ts @@ -0,0 +1 @@ +export * from "./demo-footer.component"; diff --git a/showcase/src/app/demo/index.ts b/showcase/src/app/demo/index.ts index 1e9f1cbe62..daa6360f1d 100644 --- a/showcase/src/app/demo/index.ts +++ b/showcase/src/app/demo/index.ts @@ -9,6 +9,7 @@ export * from "./date-range-picker"; export * from "./sidebar"; export * from "./dropdown"; export * from "./example-viewer"; +export * from "./footer"; export * from "./header"; export * from "./keyboard-directives"; export * from "./language-selector"; diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 73acf0e6ec..a7151b020b 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -97,6 +97,14 @@ "EXAMPLE_VIEWER": { "TITLE": "Stark example viewer" }, + "FOOTER": { + "TITLE": "Stark App Footer Guidelines", + "INTRO": "Stark provides you a custom footer for your application. It's a standard component you can use by copying this HTML into your code", + "INFO": "This component takes 3 elements as input :", + "INPUT1": "legalInfoUrl contains the url to the legal information page.", + "INPUT2": "helpPageUrl contains the url to the help page.", + "INPUT3": "The included HTML elements will be copied inside the footer as the leftmost element." + }, "HEADER": { "COPY_PASTE": "Then you can copy/paste this HTML into your code", "EXPLAINED": "Introduction", diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index 9df8d53d86..4a72de04b7 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -97,6 +97,14 @@ "EXAMPLE_VIEWER": { "TITLE": "Stark example viewer" }, + "FOOTER": { + "TITLE": "Stark App Footer Guidelines", + "INTRO": "Stark fournit un pied de page personalisé pour votre application. Il s'agit d'un composant standard que vous pouvez utiliser en copiant ce HTML dans votre code", + "INFO": "Ce composant prend trois éléments en entrée :", + "INPUT1": "legalInfoUrl contient l'url de la page d'information légale.", + "INPUT2": "helpPageUrl contient l'url de la page d'aide.", + "INPUT3": "Les éléments HTML inclus seront copiés dans le pied de page et affichés à gauche des autres éléments." + }, "HEADER": { "COPY_PASTE": "Ensuite il faut copier/coller ce bout de code HTML", "EXPLAINED": "Introduction", diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 8cde159ec1..948eb49a0d 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -97,6 +97,14 @@ "EXAMPLE_VIEWER": { "TITLE": "Stark example viewer" }, + "FOOTER": { + "TITLE": "Stark App Footer Guidelines", + "INTRO": "Stark provides you a custom footer for your application. It's a standard component you can use by copying this HTML into your code", + "INFO": "This component takes 3 elements as input :", + "INPUT1": "legalInfoUrl contains the url to the legal information page.", + "INPUT2": "helpPageUrl contains the url to the help page.", + "INPUT3": "The included HTML elements will be copied inside the footer as the leftmost element." + }, "HEADER": { "COPY_PASTE": "Then you can copy/paste this HTML into your code", "EXPLAINED": "Introduction", diff --git a/showcase/src/styles/_stark-styles.scss b/showcase/src/styles/_stark-styles.scss index c7b2f5d207..e6f03af64b 100644 --- a/showcase/src/styles/_stark-styles.scss +++ b/showcase/src/styles/_stark-styles.scss @@ -7,6 +7,8 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i /* Stark components */ @import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo.component"; +@import "~@nationalbankbelgium/stark-ui/src/modules/app-footer/components/app-footer.component"; +@import "~@nationalbankbelgium/stark-ui/src/modules/app-footer/components/app-footer-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/action-bar/components/action-bar-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/action-bar/components/action-bar.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/app-sidebar/components/app-sidebar-theme";