diff --git a/packages/stark-ui/assets/themes/_app-header-theme.scss b/packages/stark-ui/assets/themes/_app-header-theme.scss index 14f89f60ff..4ad9430559 100644 --- a/packages/stark-ui/assets/themes/_app-header-theme.scss +++ b/packages/stark-ui/assets/themes/_app-header-theme.scss @@ -2,7 +2,7 @@ .stark-app-header { background: #123b71 url(/assets/images/app-header.png) top right no-repeat; color: #fff; - & .md-button.md-icon-button { + & .mat-icon-button { min-width: 0; min-height: 0; line-height: 48px; @@ -21,7 +21,6 @@ .stark-header-extra { position: absolute; display: flex; - top: 0; right: 0; } .stark-header-mobile, @@ -97,18 +96,6 @@ line-height: 48px; } -/* dense mode */ -.dense-mode { - & .stark-app-header .md-button.md-icon-button { - height: 40px; - line-height: 0; - & svg { - height: 20px; - width: 20px; - } - } -} - .stark-page-header { position: relative; } @@ -144,15 +131,8 @@ .stark-app-bar { display: flex; line-height: 48px; - & .md-button.md-icon-button { - margin: 0; - padding: 8px; - color: #fff; - } - & > .md-button.md-icon-button { - margin-top: 4px; - } - & .stark-app-logout .md-button { + padding-top: 4px; + & .stark-app-logout button { background-color: $message-alert; color: #fff; &:hover { diff --git a/showcase/karma.conf.ci.js b/showcase/karma.conf.ci.js index 932a88e9b6..e3356dbbc7 100644 --- a/showcase/karma.conf.ci.js +++ b/showcase/karma.conf.ci.js @@ -1,4 +1,15 @@ /** * Load karma config from Stark */ -module.exports = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.ci.js"); +const defaultKarmaCIConfig = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.ci.js").rawKarmaConfig; +const karmaTypescriptExclusions = require("./karma.conf").karmaTypescriptExclusions; + +// start customizing the KarmaCI configuration from stark-testing +const starkShowcaseSpecificConfiguration = Object.assign({}, defaultKarmaCIConfig, { + exclude: [...defaultKarmaCIConfig.exclude, ...karmaTypescriptExclusions] +}); + +// export the configuration function that karma expects and simply return the stark configuration +module.exports = config => { + return config.set(starkShowcaseSpecificConfiguration); +}; diff --git a/showcase/karma.conf.js b/showcase/karma.conf.js index 591912df55..12eba512ad 100644 --- a/showcase/karma.conf.js +++ b/showcase/karma.conf.js @@ -1,4 +1,26 @@ /** * Load karma config from Stark */ -module.exports = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.js"); +const helpers = require("./node_modules/@nationalbankbelgium/stark-testing/helpers"); + +/** + * Load karma config from Stark + */ +const defaultKarmaConfig = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.js").rawKarmaConfig; + +// entry files of the "@nationalbankbelgium/stark-ui" module imported in mock files +const karmaTypescriptExclusions = [...defaultKarmaConfig.exclude, "src/assets/examples/*"]; + +// start customizing the KarmaCI configuration from stark-testing +const starkShowcaseSpecificConfiguration = Object.assign({}, defaultKarmaConfig, { + // list of files to exclude + exclude: karmaTypescriptExclusions +}); + +// export the configuration function that karma expects and simply return the stark configuration +module.exports = { + default: function(config) { + return config.set(starkShowcaseSpecificConfiguration); + }, + karmaTypescriptExclusions: karmaTypescriptExclusions +}; diff --git a/showcase/package.json b/showcase/package.json index fb32f7e310..7d600dd807 100644 --- a/showcase/package.json +++ b/showcase/package.json @@ -121,13 +121,15 @@ "@angular/platform-browser-dynamic": "6.0.4", "@angular/platform-server": "6.0.4", "@angular/router": "6.0.4", - "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.3-8c85d07.tgz", - "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.3-8c85d07.tgz", + "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.3-6796ad0.tgz", + "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.3-6796ad0.tgz", "@uirouter/visualizer": "6.0.0", + "angular-highlight-js": "^2.0.1", "basscss": "^8.0.2", "core-js": "2.5.7", "eligrey-classlist-js-polyfill": "1.2.20180112", "event-source-polyfill": "0.0.12", + "highlight.js": "^9.12.0", "http-server": "0.11.1", "ngrx-store-freeze": "0.2.4", "ngrx-store-logger": "0.2.2", @@ -139,8 +141,8 @@ "zone.js": "0.8.26" }, "devDependencies": { - "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.3-8c85d07.tgz", - "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.3-8c85d07.tgz", + "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.3-6796ad0.tgz", + "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.3-6796ad0.tgz", "@types/core-js": "2.5.0", "@types/hammerjs": "2.0.35", "@types/node": "8.10.15", diff --git a/showcase/src/app/app.component.css b/showcase/src/app/app.component.css index f1738fba12..3f9657f821 100644 --- a/showcase/src/app/app.component.css +++ b/showcase/src/app/app.component.css @@ -1,9 +1,4 @@ html, body { height: 100%; - font-family: Arial, Helvetica, sans-serif; -} - -a.active { - background-color: #888; } diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html index 4fe84b226e..940f3d5304 100644 --- a/showcase/src/app/app.component.html +++ b/showcase/src/app/app.component.html @@ -1,5 +1,34 @@ - +
+
+
+ + + -
- -
+ + +
+ +
+
+
+
+ + + + + + Home + + + Example Viewer + + + + +
+ +
+ + + \ No newline at end of file diff --git a/showcase/src/app/app.module.ts b/showcase/src/app/app.module.ts index cf9529d9d9..0e4654ca21 100644 --- a/showcase/src/app/app.module.ts +++ b/showcase/src/app/app.module.ts @@ -9,6 +9,14 @@ import { storeFreeze } from "ngrx-store-freeze"; import { storeLogger } from "ngrx-store-logger"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { MatIconRegistry } from "@angular/material"; +import { MatButtonModule } from "@angular/material/button"; +import { MatCardModule } from "@angular/material/card"; +import { MatIconModule } from "@angular/material/icon"; +import { MatSortModule } from "@angular/material/sort"; +import { MatTableModule } from "@angular/material/table"; +import { MatListModule } from "@angular/material/list"; +import { MatSidenavModule } from "@angular/material/sidenav"; +import { SharedModule } from "./shared/shared.module"; import { STARK_APP_CONFIG, @@ -53,6 +61,7 @@ import { NoContentComponent } from "./no-content"; import "../styles/styles.pcss"; // load SASS styles import "../styles/styles.scss"; +import { DemoComponent } from "./demo/demo.component"; /* tslint:enable */ // Application wide providers @@ -111,7 +120,7 @@ export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger */ @NgModule({ bootstrap: [AppComponent], - declarations: [AppComponent, HomeComponent, NoContentComponent], + declarations: [AppComponent, HomeComponent, NoContentComponent, DemoComponent], /** * Import Angular's modules. */ @@ -119,6 +128,13 @@ export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger BrowserModule, BrowserAnimationsModule, FormsModule, + MatButtonModule, + MatCardModule, + MatIconModule, + MatSortModule, + MatTableModule, + MatListModule, + MatSidenavModule, StoreModule.forRoot(reducers, { metaReducers }), @@ -131,6 +147,7 @@ export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger TranslateModule.forRoot(), NgIdleModule.forRoot(), NgIdleKeepaliveModule.forRoot(), // FIXME: disabled in stark-app-config.json for now until json-server is integrated + SharedModule, StarkHttpModule.forRoot(), StarkLoggingModule.forRoot(), StarkSessionModule.forRoot(), diff --git a/showcase/src/app/app.routes.ts b/showcase/src/app/app.routes.ts index ef2c9363f5..c7efe82a98 100644 --- a/showcase/src/app/app.routes.ts +++ b/showcase/src/app/app.routes.ts @@ -1,9 +1,10 @@ +import { DemoComponent } from "./demo"; import { HomeComponent } from "./home"; import { NoContentComponent } from "./no-content"; import { Ng2StateDeclaration } from "@uirouter/angular"; export const APP_STATES: Ng2StateDeclaration[] = [ - { name: "index", url: "/", component: HomeComponent }, - { name: "home", url: "/home", component: HomeComponent }, + { name: "home", url: "/", component: HomeComponent }, + { name: "demo-example-viewer", url: "/demo-example-viewer", component: DemoComponent }, { name: "otherwise", url: "/otherwise", component: NoContentComponent } ]; diff --git a/showcase/src/app/demo/demo.component.html b/showcase/src/app/demo/demo.component.html new file mode 100644 index 0000000000..61a678db5b --- /dev/null +++ b/showcase/src/app/demo/demo.component.html @@ -0,0 +1,11 @@ + +

Raised Buttons

+
+ + + + + + Link +
+ \ No newline at end of file diff --git a/showcase/src/app/demo/demo.component.scss b/showcase/src/app/demo/demo.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/showcase/src/app/demo/demo.component.spec.ts b/showcase/src/app/demo/demo.component.spec.ts new file mode 100644 index 0000000000..eeb2e200bf --- /dev/null +++ b/showcase/src/app/demo/demo.component.spec.ts @@ -0,0 +1,26 @@ +import { HttpClientModule } from "@angular/common/http"; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; +import { DemoComponent } from "./demo.component"; +import { SharedModule } from "../shared/shared.module"; + +describe("DemoComponent", () => { + let component: DemoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + return TestBed.configureTestingModule({ + declarations: [DemoComponent], + imports: [HttpClientModule, SharedModule] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DemoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/showcase/src/app/demo/demo.component.ts b/showcase/src/app/demo/demo.component.ts new file mode 100644 index 0000000000..ff0d412841 --- /dev/null +++ b/showcase/src/app/demo/demo.component.ts @@ -0,0 +1,8 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: "showcase-demo", + templateUrl: "./demo.component.html", + styleUrls: ["./demo.component.scss"] +}) +export class DemoComponent {} diff --git a/showcase/src/app/demo/index.ts b/showcase/src/app/demo/index.ts new file mode 100644 index 0000000000..ced8212a57 --- /dev/null +++ b/showcase/src/app/demo/index.ts @@ -0,0 +1 @@ +export * from "./demo.component"; diff --git a/showcase/src/app/home/home.component.html b/showcase/src/app/home/home.component.html index ad1d113ede..bebe0dba8d 100644 --- a/showcase/src/app/home/home.component.html +++ b/showcase/src/app/home/home.component.html @@ -1,8 +1,19 @@
-

SHOWCASE.HOME.TITLE

- -
- - Coming soon! - -
+
+ + + +

Angular Material components

+ + + +
+ + + + + +
+ + +
\ No newline at end of file diff --git a/showcase/src/app/home/home.component.pcss b/showcase/src/app/home/home.component.pcss deleted file mode 100644 index f3b33aaced..0000000000 --- a/showcase/src/app/home/home.component.pcss +++ /dev/null @@ -1,9 +0,0 @@ -:root { - --my-color: #00f; -} - -div { - & h4 { - color: var(--my-color); - } -} diff --git a/showcase/src/app/home/home.component.scss b/showcase/src/app/home/home.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/showcase/src/app/home/home.component.ts b/showcase/src/app/home/home.component.ts index c794454fbf..5c38ed7c40 100644 --- a/showcase/src/app/home/home.component.ts +++ b/showcase/src/app/home/home.component.ts @@ -6,7 +6,7 @@ import { AppState } from "../app.service"; @Component({ selector: "home", // providers: [], - styleUrls: ["./home.component.pcss"], + styleUrls: ["./home.component.scss"], templateUrl: "./home.component.html" }) export class HomeComponent implements OnInit { diff --git a/showcase/src/app/shared/example-viewer/_example-viewer-theme.scss b/showcase/src/app/shared/example-viewer/_example-viewer-theme.scss new file mode 100644 index 0000000000..04d2337581 --- /dev/null +++ b/showcase/src/app/shared/example-viewer/_example-viewer-theme.scss @@ -0,0 +1,101 @@ +example-viewer { + .example-viewer-wrapper { + background-color: #fff; + margin: 4px; + } + .example-viewer-title { + color: #fff; + background-color: mat-color(map-get($base-theme, primary-palette), 700); + } + .mat-tab-body { + background-color: mat-color($mat-light-theme-background, card); + } + .example-viewer-body { + background-color: mat-color($mat-light-theme-background, card); + } + .example-source code { + font-family: mat-font-family($typography-config); + font-size: 15px; + line-height: 24px; + } + .example-source { + border-bottom: 1px solid mat-color($mat-light-theme-foreground, divider); + overflow-x: scroll; + } + + .hljs { + display: block; + overflow-x: auto; + padding: 1em; + background: #fafafa; + color: #37474f; + -webkit-font-smoothing: antialiased; + text-size-adjust: 100%; + font: 300 100%/1 Roboto Mono, monospace; + font-size: 14px; + } + .hljs > *::selection, + .hljs-section { + background-color: #d6edea; + } + .hljs-comment { + color: #b0bec5; + font-style: italic; + } + .hljs-tag, + .hljs-selector-tag, + .hljs-regexp, + .hljs-meta { + color: #9c27b0; + } + .hljs-string, + .hljs-subst { + color: #0d904f; + } + .hljs-number, + .hljs-variable, + .hljs-template-variable { + color: #80cbc4; + } + .hljs-name, + .hljs-keyword, + .hljs-type, + .hljs-attribute { + color: #3b78e7; + } + .hljs-title, + .hljs-function > .hljs-title, + .hljs-symbol, + .hljs-bullet, + .hljs-built_in, + .hljs-builtin-name, + .hljs-link { + color: #6182b8; + } + .hljs-params { + color: #d81b60; + } + .hljs-addition { + color: #3b78e7; + display: inline-block; + width: 100%; + } + .hljs-deletion { + color: #e53935; + display: inline-block; + width: 100%; + } + .hljs-selector-id, + .hljs-selector-class { + color: #8796b0; + } + .hljs-emphasis { + font-style: italic; + } + .hljs-strong { + font-weight: bold; + } + .hljs-link { + text-decoration: underline; + } +} diff --git a/showcase/src/app/shared/example-viewer/example-viewer.component.ts b/showcase/src/app/shared/example-viewer/example-viewer.component.ts new file mode 100644 index 0000000000..66b56b54e2 --- /dev/null +++ b/showcase/src/app/shared/example-viewer/example-viewer.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit, Input } from "@angular/core"; +import { HttpErrorResponse } from "@angular/common/http"; +import { FileService } from "./file.service"; + +@Component({ + selector: "example-viewer", + templateUrl: "./example-viewer.html", + styleUrls: ["./example-viewer.scss"], + providers: [FileService] +}) +export class ExampleViewerComponent implements OnInit { + @Input() public extensions: Array = ["HTML", "TS", "CSS"]; + @Input() public filesPath: string; + @Input() public title: string; + + public filesContent: Array = []; + public showSource: boolean = false; + + public constructor(private service: FileService) {} + + public ngOnInit(): void { + this.fetchFiles(); + } + + public fetchFiles(): void { + this.extensions.forEach((extension: string) => { + this.service + .fetchFile("/assets/examples/" + this.filesPath + "." + extension.toLowerCase()) + .subscribe( + (data: string) => this.addFileContent({ extension: extension, file: data }), + (error: HttpErrorResponse) => console.log(error) + ); + }); + } + + public addFileContent(fileContent: Object): void { + this.filesContent.push(fileContent); + } + + public toggleSourceView(): void { + this.showSource = !this.showSource; + } + + public trackFilesContent(_index: number, file: any): string { + return file.extension; + } +} diff --git a/showcase/src/app/shared/example-viewer/example-viewer.html b/showcase/src/app/shared/example-viewer/example-viewer.html new file mode 100644 index 0000000000..0b27a57b02 --- /dev/null +++ b/showcase/src/app/shared/example-viewer/example-viewer.html @@ -0,0 +1,23 @@ +
+
+

{{ title }}

+ + +
+ +
+ + +
+
+
+ + +
+ +
+ +
+
\ No newline at end of file diff --git a/showcase/src/app/shared/example-viewer/example-viewer.scss b/showcase/src/app/shared/example-viewer/example-viewer.scss new file mode 100644 index 0000000000..047e8d1268 --- /dev/null +++ b/showcase/src/app/shared/example-viewer/example-viewer.scss @@ -0,0 +1,43 @@ +:host { + display: block; + padding: 20px 0; +} + +.example-viewer-wrapper { + h3 { + margin-top: 10px; + } +} + +.example-viewer-title { + align-content: center; + align-items: center; + display: flex; + justify-content: center; + padding: 8px 20px; +} + +.example-viewer-title-spacer { + flex: 1 1 auto; +} + +.example-source-copy { + position: absolute; + top: 8px; + display: none; +} + +.example-source-wrapper:hover { + .example-source-copy { + display: inline-block; + } +} + +.example-source { + padding: 0 30px 10px 30px; + min-height: 150px; +} + +.example-viewer-body { + padding: 30px; +} diff --git a/showcase/src/app/shared/example-viewer/example-viewer.spec.ts b/showcase/src/app/shared/example-viewer/example-viewer.spec.ts new file mode 100644 index 0000000000..7e0196d13f --- /dev/null +++ b/showcase/src/app/shared/example-viewer/example-viewer.spec.ts @@ -0,0 +1,92 @@ +import { HttpClientModule } from "@angular/common/http"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { async, ComponentFixtureAutoDetect, ComponentFixture, TestBed } from "@angular/core/testing"; +import { MatButtonModule, MatIconModule, MatTabsModule, MatTooltipModule } from "@angular/material"; +import * as hljs from "highlight.js"; +import { HighlightJsModule, HIGHLIGHT_JS } from "angular-highlight-js"; + +import { ExampleViewerComponent } from "./example-viewer.component"; +import { FileService } from "./file.service"; +import { throwError, of } from "rxjs"; + +export function highlightJsFactory(): any { + return hljs; +} +describe("ExampleViewerComponent", () => { + let component: ExampleViewerComponent; + let fileService: FileService; + let fixture: ComponentFixture; + + beforeEach(async(() => { + return TestBed.configureTestingModule({ + declarations: [ExampleViewerComponent], + imports: [ + BrowserAnimationsModule, + HttpClientModule, + HighlightJsModule.forRoot({ + provide: HIGHLIGHT_JS, + useFactory: highlightJsFactory + }), + MatButtonModule, + MatIconModule, + MatTabsModule, + MatTooltipModule + ], + providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }, FileService] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ExampleViewerComponent); + component = fixture.componentInstance; + fileService = fixture.debugElement.injector.get(FileService as any); + }); + + describe("@Input() title", () => { + it("should change the title according to the @Input", () => { + const h2: any = fixture.nativeElement.querySelector(".example-viewer-title-spacer h2"); + component.title = "Test title"; + fixture.detectChanges(); + expect(h2.textContent).toContain(component.title); + }); + }); + + describe("@Input() extensions", () => { + it("should show the tabs when the file exist", () => { + spyOn(fileService, "fetchFile").and.returnValue(of("test")); + component.fetchFiles(); + const button: any = fixture.nativeElement.querySelector(".example-viewer-title button"); + button.click(); + const tabs: any = fixture.nativeElement.querySelectorAll(".mat-tab-labels .mat-tab-label"); + expect(tabs.length).toBe(component.extensions.length); + }); + }); + + describe("fetchFiles()", () => { + it("should not do anything when the file doesn't exist", () => { + spyOn(component, "addFileContent"); + spyOn(fileService, "fetchFile").and.returnValue(throwError("http failure")); + component.fetchFiles(); + expect(component.addFileContent).not.toHaveBeenCalled(); + expect(fileService.fetchFile).toHaveBeenCalledTimes(component.extensions.length); + }); + + it("should call the callback when the file exists", () => { + spyOn(component, "addFileContent"); + spyOn(fileService, "fetchFile").and.returnValue(of("test")); + component.fetchFiles(); + expect(component.addFileContent).toHaveBeenCalledTimes(component.extensions.length); + expect(fileService.fetchFile).toHaveBeenCalledTimes(component.extensions.length); + }); + }); + + describe("toggleSourceView()", () => { + it("should toggle the showSource property", () => { + component.showSource = true; + component.toggleSourceView(); + expect(component.showSource).toBe(false); + component.toggleSourceView(); + expect(component.showSource).toBe(true); + }); + }); +}); diff --git a/showcase/src/app/shared/example-viewer/file.service.ts b/showcase/src/app/shared/example-viewer/file.service.ts new file mode 100644 index 0000000000..30f805d5e4 --- /dev/null +++ b/showcase/src/app/shared/example-viewer/file.service.ts @@ -0,0 +1,12 @@ +import { Injectable } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { Observable } from "rxjs"; + +@Injectable() +export class FileService { + public constructor(private http: HttpClient) {} + + public fetchFile(path: string): Observable { + return this.http.get(path, { responseType: "text" }); + } +} diff --git a/showcase/src/app/shared/shared.module.ts b/showcase/src/app/shared/shared.module.ts new file mode 100644 index 0000000000..98202a1de1 --- /dev/null +++ b/showcase/src/app/shared/shared.module.ts @@ -0,0 +1,31 @@ +import { ExampleViewerComponent } from "./example-viewer/example-viewer.component"; +import { FileService } from "./example-viewer/file.service"; +import * as hljs from "highlight.js"; +import { HighlightJsModule, HIGHLIGHT_JS } from "angular-highlight-js"; +import { MatButtonModule, MatIconModule, MatTabsModule, MatTooltipModule, MatSnackBarModule } from "@angular/material"; +import { CommonModule } from "@angular/common"; +import { NgModule } from "@angular/core"; + +export function highlightJsFactory(): any { + return hljs; +} + +@NgModule({ + imports: [ + HighlightJsModule.forRoot({ + provide: HIGHLIGHT_JS, + useFactory: highlightJsFactory + }), + MatButtonModule, + MatIconModule, + MatTooltipModule, + MatSnackBarModule, + MatTabsModule, + CommonModule + ], + providers: [FileService], + declarations: [ExampleViewerComponent], + entryComponents: [ExampleViewerComponent], + exports: [ExampleViewerComponent] +}) +export class SharedModule {} diff --git a/showcase/src/assets/examples/test.css b/showcase/src/assets/examples/test.css new file mode 100644 index 0000000000..9771bda678 --- /dev/null +++ b/showcase/src/assets/examples/test.css @@ -0,0 +1,5 @@ +.example-button-row { + display: flex; + align-items: center; + justify-content: space-around; +} diff --git a/showcase/src/assets/examples/test.html b/showcase/src/assets/examples/test.html new file mode 100644 index 0000000000..b613be2c65 --- /dev/null +++ b/showcase/src/assets/examples/test.html @@ -0,0 +1,6 @@ + + Sidenav content + Main content + + +
Please open on Stackblitz to see result
\ No newline at end of file diff --git a/showcase/src/assets/examples/test.ts b/showcase/src/assets/examples/test.ts new file mode 100644 index 0000000000..18a0d47075 --- /dev/null +++ b/showcase/src/assets/examples/test.ts @@ -0,0 +1,11 @@ +import { Component } from "@angular/core"; + +/** + * @title Button varieties + */ +@Component({ + selector: "button-types-example", + templateUrl: "button-types-example.html", + styleUrls: ["button-types-example.css"] +}) +export class ButtonTypesComponent {} diff --git a/showcase/src/styles/_sidenav_temp.scss b/showcase/src/styles/_sidenav_temp.scss new file mode 100644 index 0000000000..48b5b63fcf --- /dev/null +++ b/showcase/src/styles/_sidenav_temp.scss @@ -0,0 +1,22 @@ +mat-sidenav.mat-drawer { + background-color: #16385a; + width: 200px; +} + +mat-sidenav.mat-drawer .mat-nav-list { + padding-top: 0; +} + +mat-sidenav.mat-drawer .mat-nav-list .mat-list-item { + color: #fff; + font-size: 13px; +} + +mat-sidenav.mat-drawer .mat-list-item:hover a { + background-color: rgba($color: #fff, $alpha: 0.3); +} + +mat-sidenav.mat-drawer .mat-list-item-focus.active, +mat-sidenav.mat-drawer a.active { + background-color: rgba($color: #fff, $alpha: 0.4); +} diff --git a/showcase/src/styles/_theme.scss b/showcase/src/styles/_theme.scss index 6900985cbd..a88057b49c 100644 --- a/showcase/src/styles/_theme.scss +++ b/showcase/src/styles/_theme.scss @@ -6,3 +6,5 @@ @import "~@nationalbankbelgium/stark-ui/assets/themes/card-theme"; @import "~@nationalbankbelgium/stark-ui/assets/themes/table-theme"; @import "~@nationalbankbelgium/stark-ui/assets/themes/app-header-theme"; + +@import "../app/shared/example-viewer/example-viewer-theme"; diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss index ab6d895545..29d3d35328 100644 --- a/showcase/src/styles/styles.scss +++ b/showcase/src/styles/styles.scss @@ -1,3 +1,4 @@ @import "theme"; +@import "sidenav_temp"; @import "~basscss/css/basscss.css"; @import "~normalize.css/normalize.css"; diff --git a/showcase/tsconfig.app.json b/showcase/tsconfig.app.json index 343de0966b..69bbfbf955 100644 --- a/showcase/tsconfig.app.json +++ b/showcase/tsconfig.app.json @@ -1,5 +1,5 @@ { "extends": "./tsconfig.json", "compilerOptions": {}, - "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.e2e.ts"] + "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.e2e.ts", "src/assets"] } diff --git a/showcase/tsconfig.json b/showcase/tsconfig.json index 622e31a585..4af2ea9a0b 100644 --- a/showcase/tsconfig.json +++ b/showcase/tsconfig.json @@ -11,5 +11,5 @@ "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"] } }, - "exclude": ["node_modules", "dist"] + "exclude": ["node_modules", "dist", "src/assets"] } diff --git a/showcase/tsconfig.spec.json b/showcase/tsconfig.spec.json index 2c7b284162..1e24eba637 100644 --- a/showcase/tsconfig.spec.json +++ b/showcase/tsconfig.spec.json @@ -2,5 +2,6 @@ "extends": "./tsconfig.json", "compilerOptions": { "module": "commonjs" - } + }, + "exclude": ["src/assets"] } diff --git a/starter/package.json b/starter/package.json index 0701512ea0..899854aafb 100644 --- a/starter/package.json +++ b/starter/package.json @@ -124,8 +124,8 @@ "@angular/platform-browser-dynamic": "6.0.4", "@angular/platform-server": "6.0.4", "@angular/router": "6.0.4", - "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.3-8c85d07.tgz", - "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.3-8c85d07.tgz", + "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.3-6796ad0.tgz", + "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.3-6796ad0.tgz", "@uirouter/visualizer": "6.0.0", "core-js": "2.5.7", "eligrey-classlist-js-polyfill": "1.2.20180112", @@ -140,8 +140,8 @@ "zone.js": "0.8.26" }, "devDependencies": { - "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.3-8c85d07.tgz", - "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.3-8c85d07.tgz", + "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.3-6796ad0.tgz", + "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.3-6796ad0.tgz", "@types/core-js": "2.5.0", "@types/hammerjs": "2.0.35", "@types/node": "8.10.15",