feat(stark-demo): add styleguide/layout page for documenting the us…

…e of Angular Flex-layout ISSUES CLOSED: NationalBankBelgium#668
carlo-nomes · Feb 5, 2019 · e1d157c · e1d157c
1 parent 3c6045c
commit e1d157c
Show file tree

Hide file tree

Showing 18 changed files with 177 additions and 4 deletions.
diff --git a/showcase/src/app/app-menu.config.ts b/showcase/src/app/app-menu.config.ts
@@ -265,6 +265,13 @@ export const APP_MENU_CONFIG: StarkMenuConfig = {
 					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/index.ts b/showcase/src/app/styleguide/pages/index.ts
@@ -3,3 +3,4 @@ export * from "./card";
 export * from "./colors";
 export * from "./header";
 export * from "./typography";
+export * from "./layout";
diff --git a/showcase/src/app/styleguide/pages/layout/index.ts b/showcase/src/app/styleguide/pages/layout/index.ts
@@ -0,0 +1 @@
+export * from "./styleguide-layout-page.component";
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,30 @@
+<h1 class="mat-display-3" translate>SHOWCASE.STYLEGUIDE.LAYOUT.TITLE</h1>
+<h2 class="mat-display-2" translate>SHOWCASE.STYLEGUIDE.LAYOUT.ANGULAR_FLEX_LAYOUT</h2>
+<p [innerHTML]="'SHOWCASE.STYLEGUIDE.LAYOUT.INTRO' | translate"></p>
+
+<example-viewer filesPath="flex-layout/flex" [extensions]="['HTML', 'SCSS']" exampleTitle="SHOWCASE.STYLEGUIDE.LAYOUT.FLEX">
+	<div class="layout-demo" fxLayout="column" fxLayout.gt-sm="row" 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>
+
+<!--FIXME: add example back when chrome is updated to 57 or higher-->
+<!--<example-viewer filesPath="flex-layout/grid" [extensions]="['HTML', 'SCSS']" exampleTitle="SHOWCASE.STYLEGUIDE.LAYOUT.GRID">-->
+<!--<div class="warning">-->
+<!--<mat-icon svgIcon="alert-circle" starkSvgViewBox></mat-icon>-->
+<!--<span [innerHTML]="'SHOWCASE.STYLEGUIDE.LAYOUT.GRID_WARNING' | translate"></span>-->
+<!--</div>-->
+<!--<div class="layout-demo" gdAuto="row" gdAuto.gt-sm="column" gdGap="10px">-->
+<!--<div>1</div>-->
+<!--<div class="accent" gdRow.gt-md="1" gdColumn.gt-md="1">-->
+<!--2-->
+<!--</div>-->
+<!--<div>3</div>-->
+<!--<div>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,14 @@
+.styleguide-layout-page {
+  .warning {
+    margin-bottom: 24px;
+
+    mat-icon > svg {
+      margin-bottom: -5px;
+    }
+  }
+
+  .layout-demo > * {
+    text-align: center;
+    padding: 10px;
+  }
+}
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,15 @@
+import { Component, HostBinding, Inject } from "@angular/core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+
+const componentName: string = "styleguide-layout-page";
+
+@Component({
+	selector: "demo-layout",
+	templateUrl: "./styleguide-layout-page.component.html"
+})
+export class StyleguideLayoutPageComponent {
+	@HostBinding("class")
+	public class: string = componentName;
+
+	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+}
diff --git a/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.theme.scss b/showcase/src/app/styleguide/pages/layout/styleguide-layout-page.theme.scss
@@ -0,0 +1,15 @@
+.styleguide-layout-page {
+  .warning {
+    color: mat-color($warning-palette, 500);
+  }
+
+  .layout-demo > * {
+    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/routes.ts b/showcase/src/app/styleguide/routes.ts
@@ -4,7 +4,8 @@ import {
 	StyleguideCardPageComponent,
 	StyleguideColorsPageComponent,
 	StyleguideHeaderPageComponent,
-	StyleguideTypographyPageComponent
+	StyleguideTypographyPageComponent,
+	StyleguideLayoutPageComponent
 } from "./pages";
 
 export const STYLEGUIDE_STATES: Ng2StateDeclaration[] = [
@@ -48,5 +49,13 @@ export const STYLEGUIDE_STATES: Ng2StateDeclaration[] = [
 			translationKey: "SHOWCASE.STYLEGUIDE.TYPOGRAPHY.TITLE"
 		},
 		views: { "@": { component: StyleguideTypographyPageComponent } }
+	},
+	{
+		name: "styleguide.layout",
+		url: "/layout",
+		data: {
+			translationKey: "SHOWCASE.STYLEGUIDE.LAYOUT.TITLE"
+		},
+		views: { "@": { component: StyleguideLayoutPageComponent } }
 	}
 ];
diff --git a/showcase/src/app/styleguide/styleguide.module.ts b/showcase/src/app/styleguide/styleguide.module.ts
@@ -12,7 +12,8 @@ import {
 	StyleguideCardPageComponent,
 	StyleguideColorsPageComponent,
 	StyleguideHeaderPageComponent,
-	StyleguideTypographyPageComponent
+	StyleguideTypographyPageComponent,
+	StyleguideLayoutPageComponent
 } from "./pages";
 
 @NgModule({
@@ -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.html b/showcase/src/assets/examples/flex-layout/flex.html
@@ -0,0 +1,13 @@
+<div class="layout-demo"
+	 fxLayout="column"
+	 fxLayout.gt-sm="row"
+	 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.scss b/showcase/src/assets/examples/flex-layout/flex.scss
@@ -0,0 +1,13 @@
+.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/examples/flex-layout/grid.html b/showcase/src/assets/examples/flex-layout/grid.html
@@ -0,0 +1,13 @@
+<div class="layout-demo"
+	 gdAuto="row"
+	 gdAuto.gt-sm="column"
+	 gdGap="10px">
+	<div>1</div>
+	<div class="accent"
+		 gdRow.gt-md="1"
+		 gdColumn.gt-md="1">
+		2
+	</div>
+	<div>3</div>
+	<div>4</div>
+</div>
diff --git a/showcase/src/assets/examples/flex-layout/grid.scss b/showcase/src/assets/examples/flex-layout/grid.scss
@@ -0,0 +1,13 @@
+.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
@@ -352,6 +352,14 @@
           "TITLE": "Based on Angular Material"
         },
         "TITLE": "Stark Typography"
+      },
+      "LAYOUT": {
+        "TITLE": "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. Full documentation is available on their <a href=\"https://github.com/angular/flex-layout/wiki/API-Documentation\"  target=\"_blank\" rel=\"noopener noreferrer\">wiki</a>.",
+        "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout",
+        "FLEX": "Flexbox",
+        "GRID_WARNING": "Warning, although certain grid directives are available through the Angular Flex-Layout library they are not completely documented. Also keep in mind CSS Grid Layout is not supported in all browsers. <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility\" target=\"_blank\" rel=\"noopener noreferrer\">MDN</a>",
+        "GRID": "Grid layout"
       }
     }
   }

diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json
@@ -352,6 +352,14 @@
           "TITLE": "Basé sur Angular Material"
         },
         "TITLE": "Typography"
+      },
+      "LAYOUT": {
+        "TITLE": "Layout",
+        "INTRO": "Nous vous suggérons d'utiliser <a href=\"https://github.com/angular/flex-layout#angular-flex-layout\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Flex-Layout</a> pour vous aider lors de la construction de l'interface de votre application. Une documentation complète est disponible sur leur <a href=\"https://github.com/angular/flex-layout/wiki/API-Documentation\"  target=\"_blank\" rel=\"noopener noreferrer\">wiki</a>.",
+        "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout",
+        "FLEX": "Flexbox",
+        "GRID_WARNING": "Attention, bien que certaines directives du grid soient disponibles dans la bibliothèque d'Angular Flex-Layout, elles ne sont pas complètement documentées.  Gardez également à l'esprit que CSS Grid Layout n'est pas pris en charge par tous les navigateurs. <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility\" target=\"_blank\" rel=\"noopener noreferrer\">MDN</a>",
+        "GRID": "Grid layout"
       }
     }
   }

diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json
@@ -352,6 +352,14 @@
           "TITLE": "Based on Angular Material"
         },
         "TITLE": "Typography"
+      },
+      "LAYOUT": {
+        "TITLE": "Layout",
+        "INTRO": "We raden aan om <a href=\"https://github.com/angular/flex-layout#angular-flex-layout\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Flex-Layout</a> te gebruiken als hulp bij het samenstellen van de lay-out van uw app. Volledige documentatie is beschikbaar op hun <a href=\"https://github.com/angular/flex-layout/wiki/API-Documentation\"  target=\"_blank\" rel=\"noopener noreferrer\">wiki</a>.",
+        "ANGULAR_FLEX_LAYOUT": "Angular Flex Layout",
+        "FLEX": "Flexbox",
+        "GRID_WARNING": "Waarschuwing, hoewel bepaalde grid directives beschikbaar zijn via de Angular Flex-Layout bibliotheek, zijn ze niet volledig gedocumenteerd. Hou er ook rekening met dat niet alle browsers CSS Grid Layout ondersteunen.  <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility\" target=\"_blank\" rel=\"noopener noreferrer\">MDN</a>",
+        "GRID": "Grid layout"
       }
     }
   }

diff --git a/showcase/src/styles/_theme.scss b/showcase/src/styles/_theme.scss
@@ -11,3 +11,4 @@ Import the local variables file first to set the correct variables, see:
 @import "../app/welcome/pages/getting-started/getting-started-page-theme";
 @import "../app/styleguide/pages/typography/styleguide-typography-page-theme";
 @import "../app/demo-ui/pages/route-search/demo-route-search-page.component-theme.scss";
+@import "../app/styleguide/pages/layout/styleguide-layout-page.theme.scss";
diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss
@@ -15,3 +15,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";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from "./styleguide-layout-page.component";