feat(stark-demo): add \styleguid/layout\ page for documenting the u…

…se of Angular Flex-layout ISSUES CLOSED: NationalBankBelgium#668
carlo-nomes · Jan 29, 2019 · 2e51cca · 2e51cca
1 parent 051f1a8
commit 2e51cca
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 3 deletions.
diff --git a/showcase/src/app/app.component.ts b/showcase/src/app/app.component.ts
@@ -305,6 +305,13 @@ export class AppComponent implements OnInit {
 							isVisible: true,
 							isEnabled: true,
 							targetState: "styleguide.typography"
+						},
+						{
+							id: "menu-style-layout",
+							label: "Layout",
+							isVisible: true,
+							isEnabled: true,
+							targetState: "styleguide.layout"
 						}
 					]
 				}

diff --git a/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.html b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.html
@@ -0,0 +1,17 @@
+<h1 class="mat-display-3" translate>SHOWCASE.DEMO.LAYOUT.TITLE</h1>
+<h2 class="mat-display-2" translate>SHOWCASE.DEMO.LAYOUT.ANGULAR_FLEX_LAYOUT</h2>
+<p [innerHTML]="'SHOWCASE.DEMO.LAYOUT.INTRO' | translate"></p>
+
+<example-viewer filesPath="flex-layout/flex-layout"
+				[extensions]="['HTML','SCSS']"
+				exampleTitle="SHOWCASE.DEMO.LAYOUT.ANGULAR_FLEX_LAYOUT">
+	<div class="flex-layout-demo"
+		 fxLayout="column"
+		 fxLayout.gt-sm="row wrap"
+		 fxLayoutGap="10px">
+		<div fxFlex>1</div>
+		<div class="accent" fxFlex fxFlex.gt-md="75%">2</div>
+		<div fxFlex>3</div>
+		<div fxFlex>4</div>
+	</div>
+</example-viewer>
diff --git a/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.scss b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.scss
@@ -0,0 +1,13 @@
+.flex-layout-demo {
+  > * {
+    text-align: center;
+    padding: 10px;
+
+    background-color: mat-color($primary-palette, 500);
+    color: mat-contrast($primary-palette, 500);
+    &.accent {
+      background-color: mat-color($accent-palette, 500);
+      color: mat-contrast($accent-palette, 500);
+    }
+  }
+}
diff --git a/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.ts b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.component.ts
@@ -0,0 +1,10 @@
+import { Component, Inject } from "@angular/core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+
+@Component({
+	selector: "demo-layout",
+	templateUrl: "./styleguide-layout-page.component.html"
+})
+export class StyleguideLayoutPageComponent {
+	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+}
diff --git a/showcase/src/app/styleguide/routes.ts b/showcase/src/app/styleguide/routes.ts
@@ -6,6 +6,7 @@ import {
 	StyleguideHeaderPageComponent,
 	StyleguideTypographyPageComponent
 } from "./pages";
+import { StyleguideLayoutPageComponent } from "./pages/layout/styleguide-layout-page.component";
 
 export const STYLEGUIDE_STATES: Ng2StateDeclaration[] = [
 	{ name: "styleguide", url: "^/styleguide", abstract: true, parent: "app" },
@@ -33,5 +34,10 @@ export const STYLEGUIDE_STATES: Ng2StateDeclaration[] = [
 		name: "styleguide.typography",
 		url: "/typography",
 		views: { "@": { component: StyleguideTypographyPageComponent } }
+	},
+	{
+		name: "styleguide.layout",
+		url: "/layout",
+		views: { "@": { component: StyleguideLayoutPageComponent } }
 	}
 ];
diff --git a/showcase/src/app/styleguide/styleguide.module.ts b/showcase/src/app/styleguide/styleguide.module.ts
@@ -14,6 +14,7 @@ import {
 	StyleguideHeaderPageComponent,
 	StyleguideTypographyPageComponent
 } from "./pages";
+import { StyleguideLayoutPageComponent } from './pages/layout/styleguide-layout-page.component';
 
 @NgModule({
 	imports: [
@@ -33,15 +34,17 @@ import {
 		StyleguideCardPageComponent,
 		StyleguideTypographyPageComponent,
 		StyleguideColorsPageComponent,
-		StyleguideHeaderPageComponent
+		StyleguideHeaderPageComponent,
+		StyleguideLayoutPageComponent
 	],
 	entryComponents: [],
 	exports: [
 		StyleguideButtonPageComponent,
 		StyleguideCardPageComponent,
 		StyleguideTypographyPageComponent,
 		StyleguideColorsPageComponent,
-		StyleguideHeaderPageComponent
+		StyleguideHeaderPageComponent,
+		StyleguideLayoutPageComponent
 	]
 })
 export class StyleguideModule {}
diff --git a/showcase/src/assets/examples/flex-layout/flex-layout.html b/showcase/src/assets/examples/flex-layout/flex-layout.html
@@ -0,0 +1,9 @@
+<div class="flex-layout-demo"
+	 fxLayout="column"
+	 fxLayout.gt-sm="row wrap"
+	 fxLayoutGap="10px">
+	<div fxFlex>1</div>
+	<div class="accent" fxFlex fxFlex.gt-md="75%">2</div>
+	<div fxFlex>3</div>
+	<div fxFlex>4</div>
+</div>
diff --git a/showcase/src/assets/examples/flex-layout/flex-layout.scss b/showcase/src/assets/examples/flex-layout/flex-layout.scss
@@ -0,0 +1,13 @@
+.flex-layout-demo {
+  > * {
+    text-align: center;
+    padding: 10px;
+
+    background-color: mat-color($primary-palette, 500);
+    color: mat-contrast($primary-palette, 500);
+    &.accent {
+      background-color: mat-color($accent-palette, 500);
+      color: mat-contrast($accent-palette, 500);
+    }
+  }
+}
diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json
@@ -305,6 +305,11 @@
           "TITLE": "Based on Angular Material"
         },
         "TITLE": "Stark Typography"
+      },
+      "LAYOUT": {
+        "TITLE": "Stark Layout",
+        "INTRO": "We suggest using <a href=\"https://github.com/angular/flex-layout#angular-flex-layout\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Flex Layout</a> as a helper library when constructing the layout of your app.",
+        "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout"
       }
     },
     "HOMEPAGE": {

diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json
@@ -305,6 +305,10 @@
           "TITLE": "Basé sur Angular Material"
         },
         "TITLE": "Stark Typography"
+      },
+      "LAYOUT": {
+        "TITLE": "Stark Layout",
+        "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout"
       }
     },
     "HOMEPAGE": {

diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json
@@ -305,6 +305,10 @@
           "TITLE": "Based on Angular Material"
         },
         "TITLE": "Stark Typography"
+      },
+      "LAYOUT": {
+        "TITLE": "Stark Layout",
+        "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout"
       }
     },
     "HOMEPAGE": {

diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss
@@ -1,4 +1,5 @@
-@import "basscss-missing-variables.pcss"; /* FIXME: Remove this import once the issue in basscss is solved (see: https://github.com/basscss/basscss/issues/257) */
+@import "basscss-missing-variables.pcss";
+/* FIXME: Remove this import once the issue in basscss is solved (see: https://github.com/basscss/basscss/issues/257) */
 @import "~basscss/css/basscss.css";
 @import "~prismjs/themes/prism-okaidia.css";
 /*
@@ -15,3 +16,4 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i
 @import "../app/welcome/components/news-item/news-item.component";
 @import "../app/demo-ui/pages/message-pane/demo-message-pane-page.component";
 @import "../app/demo-ui/pages/app-data/demo-app-data-page.component";
+@import "../app/styleguide/pages/layout/styleguide-layout-page.component";