feat(stark-ui): added white theme and full width for dropdown component

ISSUES CLOSED: #642, #640

package.json

@@ -109,7 +109,7 @@
     "lint:stark-ui": "cd packages/stark-ui && npm run lint && cd ../..",
     "lint:showcase": "cd showcase && npm run lint && cd ..",
     "lint:starter": "cd starter && npm run lint && cd ..",
-    "lint:all": "npm run lint && npm run lint:stark-core && npm run lint:stark-ui && npm run lint:starter && npm run lint:showcase",
+    "lint:all": "npm run lint:stark-core && npm run lint:stark-ui && npm run lint:starter && npm run lint:showcase",
     "install:all": "npm run install:stark-build && npm run install:stark-testing && npm run install:stark-core && npm run install:stark-ui && npm run build && npm run install:starter && npm run install:showcase",
     "install:stark-build": "cd packages/stark-build && npm install --no-optional && cd ../..",
     "install:stark-core": "cd packages/stark-core && npm install --no-optional && cd ../..",

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

@@ -151,6 +151,11 @@ $button-theme: (
     contrast: $light-primary-text
   )
 );
+$dropdown-theme: (
+  white-transp: (
+    color: rgba(255, 255, 255, 0.87)
+  )
+);
 $card-theme: (
   border-radius: $border-radius
 );

packages/stark-ui/src/modules/dropdown/components/_dropdown-theme.scss

@@ -0,0 +1,28 @@
+@mixin stark-dropdown-color($color) {
+  .mat-form-field-label {
+    color: rgba($color: $color, $alpha: 0.87);
+  }
+
+  // arrow color change
+  .mat-select-arrow,
+  .mat-form-field.mat-focused .mat-select-arrow {
+    color: rgba($color: $color, $alpha: 0.87);
+  }
+
+  // arrow color change
+  .mat-select-value {
+    color: rgba($color: $color, $alpha: 0.87);
+  }
+
+  // underline color change (normal and focus)
+  .mat-form-field-underline,
+  .mat-form-field.mat-focused .mat-form-field-ripple {
+    background-color: rgba($color: $color, $alpha: 0.87);
+  }
+}
+
+.stark-dropdown {
+  &[color="white"] {
+    @include stark-dropdown-color(map-get(map-get($dropdown-theme, white-transp), color));
+  }
+}

packages/stark-ui/src/modules/dropdown/components/dropdown.component.scss → packages/stark-ui/src/modules/dropdown/components/_dropdown.component.scss

@@ -6,20 +6,33 @@
   mat-select {
     margin: 0;
   }
-  width: 150px;
+
+  .mat-form-field-infix {
+    width: 150px;
+  }
+
+  &.stark-full-width {
+    .mat-form-field-infix {
+      width: 100%;
+    }
+  }
 }
 
 @media #{$tablet-only-query} {
   .stark-dropdown {
-    width: 300px;
+    .mat-form-field-infix {
+      width: 300px;
+    }
   }
 }
 
 /* compact */
 
 @media #{$desktop-query} {
   .stark-dropdown {
-    width: 350px;
+    .mat-form-field-infix {
+      width: 350px;
+    }
   }
 }
 

packages/stark-ui/src/modules/dropdown/components/dropdown.component.ts

@@ -1,15 +1,4 @@
-import {
-	Component,
-	EventEmitter,
-	HostBinding,
-	Inject,
-	Input,
-	OnChanges,
-	OnInit,
-	Output,
-	SimpleChanges,
-	ViewEncapsulation
-} from "@angular/core";
+import { Component, EventEmitter, Inject, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 
 /**
@@ -24,15 +13,13 @@ const componentName: string = "stark-dropdown";
 @Component({
 	selector: "stark-dropdown",
 	templateUrl: "./dropdown.component.html",
-	encapsulation: ViewEncapsulation.None
+	encapsulation: ViewEncapsulation.None,
+	// We need to use host instead of @HostBinding: https://github.com/NationalBankBelgium/stark/issues/664
+	host: {
+		class: componentName
+	}
 })
 export class StarkDropdownComponent implements OnInit, OnChanges, OnInit {
-	/**
-	 * Adds class="stark-dropdown" attribute on the host component
-	 */
-	@HostBinding("class")
-	public class: string = componentName;
-
 	/**
 	 * If the dropdown will contain a default blank (optional)
 	 */

packages/stark-ui/tslint.json

@@ -25,6 +25,7 @@
       }
     ],
     "jsdoc-format": [true, "check-multiline-start"],
-    "no-redundant-jsdoc": true
+    "no-redundant-jsdoc": true,
+    "use-host-property-decorator": false
   }
 }

showcase/src/app/app.component.html

@@ -43,9 +43,6 @@
 			<a mat-list-item uiSref="demo-slider" uiSrefActive="active">
 				<span matLine>Slider</span>
 			</a>
-			<a mat-list-item uiSref="demo-table" uiSrefActive="active">
-				<span matLine>Table</span>
-			</a>
 			<a mat-list-item uiSref="stark-header" uiSrefActive="active">
 				<span matLine>Stark header</span>
 			</a>

showcase/src/app/app.routes.ts

@@ -5,7 +5,7 @@ import {
 	DateRangePickerComponent,
 	DemoBreadcrumbComponent,
 	DemoSidebarComponent,
-	DropdownComponent,
+	DemoDropdownComponent,
 	ExampleViewerComponent,
 	HeaderComponent,
 	KeyboardDirectivesComponent,
@@ -35,6 +35,6 @@ export const APP_STATES: Ng2StateDeclaration[] = [
 	{ name: "demo-slider", url: "/demo/slider", component: SliderComponent },
 	{ name: "demo-sidebar", url: "/demo/sidebar", component: DemoSidebarComponent },
 	{ name: "demo-table", url: "/demo/table", component: TableComponent },
-	{ name: "demo-dropdown", url: "/demo/dropdown", component: DropdownComponent },
+	{ name: "demo-dropdown", url: "/demo/dropdown", component: DemoDropdownComponent },
 	{ name: "otherwise", url: "/otherwise", component: NoContentComponent }
 ];

showcase/src/app/demo/demo.module.ts

@@ -19,7 +19,7 @@ import { ButtonComponent } from "./button/button.component";
 import { DatePickerComponent } from "./date-picker/date-picker.component";
 import { DateRangePickerComponent } from "./date-range-picker/date-range-picker.component";
 import { DemoSidebarComponent } from "./sidebar/demo-sidebar.component";
-import { DropdownComponent } from "./dropdown/dropdown.component";
+import { DemoDropdownComponent } from "./dropdown/demo-dropdown.component";
 import { ExampleViewerComponent } from "./example-viewer/example-viewer.component";
 import { HeaderComponent } from "./header/header.component";
 import { KeyboardDirectivesComponent } from "./keyboard-directives/keyboard-directives.component";
@@ -77,7 +77,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core";
 		ButtonComponent,
 		DatePickerComponent,
 		DateRangePickerComponent,
-		DropdownComponent,
+		DemoDropdownComponent,
 		ExampleViewerComponent,
 		HeaderComponent,
 		KeyboardDirectivesComponent,
@@ -97,7 +97,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core";
 		ButtonComponent,
 		DatePickerComponent,
 		DateRangePickerComponent,
-		DropdownComponent,
+		DemoDropdownComponent,
 		ExampleViewerComponent,
 		HeaderComponent,
 		KeyboardDirectivesComponent,

showcase/src/app/demo/dropdown/dropdown.component.html → showcase/src/app/demo/dropdown/demo-dropdown.component.html

@@ -1,5 +1,5 @@
 <example-viewer [extensions]="['HTML', 'TS']" filesPath="dropdown/single-required-selection" [exampleTitle]="'SHOWCASE.DEMO.DROPDOWNS.REQUIRED' | translate">
-	<stark-dropdown
+	<stark-dropdown 
 			dropdownId="serviceDropdown"
 			[options]="serviceDropdownOptions"
 			[value]="selectedService"
@@ -9,6 +9,7 @@
 			(dropdownSelectionChanged)="serviceDropdownOnChange($event)"
 			required>
 	</stark-dropdown>
+
 	<div *ngIf="selectedService"> {{ 'SHOWCASE.DEMO.DROPDOWNS.SELECTED_VALUE' | translate }}: {{ selectedService }}</div>
 </example-viewer>
 
@@ -67,3 +68,19 @@
 	</stark-dropdown>
 </example-viewer>
 
+<example-viewer class="dark" [extensions]="['HTML', 'TS', 'CSS']" filesPath="dropdown/white" [exampleTitle]="'SHOWCASE.DEMO.DROPDOWNS.WHITE' | translate">
+	<stark-dropdown
+					class="stark-full-width"
+					color="white"
+					dropdownId="serviceWhiteDropdown"
+					[options]="serviceDropdownOptions"
+					[value]="selectedServiceWhiteDropdown"
+					placeholder="SHOWCASE.DEMO.DROPDOWNS.SELECT_SERVICE"
+					optionIdProperty="id"
+					optionLabelProperty="value"
+					(dropdownSelectionChanged)="whiteDropdownOnChange($event)"
+					required>
+	</stark-dropdown>
+
+	<div class="result-display" *ngIf="selectedServiceWhiteDropdown"> {{ 'SHOWCASE.DEMO.DROPDOWNS.SELECTED_VALUE' | translate }}: {{ selectedServiceWhiteDropdown }}</div>
+</example-viewer>

showcase/src/app/demo/dropdown/demo-dropdown.component.scss

@@ -0,0 +1,7 @@
+.dark .example-viewer-body {
+  background: #333;
+}
+
+.result-display {
+  color: #fff;
+}

showcase/src/app/demo/dropdown/dropdown.component.ts → showcase/src/app/demo/dropdown/demo-dropdown.component.ts

@@ -1,17 +1,20 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 
 @Component({
 	selector: "showcase-demo-dropdown",
-	styleUrls: ["./dropdown.component.scss"],
-	templateUrl: "./dropdown.component.html"
+	styleUrls: ["./demo-dropdown.component.scss"],
+	templateUrl: "./demo-dropdown.component.html",
+	encapsulation: ViewEncapsulation.None //used here to be able to customize the example-viewer background color
 })
-export class DropdownComponent implements OnInit {
+export class DemoDropdownComponent implements OnInit {
 	public selectedService: string;
+	public selectedServiceWhiteDropdown: string;
 	public selectedServices: string[];
 	public selectedRequiredServices: string[];
 	public selectedNumber: string;
 
 	public serviceDropdownOptions: any[];
+
 	/**
 	 * Component lifecycle hook
 	 */
@@ -38,4 +41,8 @@ export class DropdownComponent implements OnInit {
 	public multipleServicesRequiredDropdownOnChange(selectedValues: string[]): void {
 		this.selectedRequiredServices = selectedValues;
 	}
+
+	public whiteDropdownOnChange(selectedValue: string): void {
+		this.selectedServiceWhiteDropdown = selectedValue;
+	}
 }

showcase/src/app/demo/dropdown/index.ts

@@ -1 +1 @@
-export * from "./dropdown.component";
+export * from "./demo-dropdown.component";

showcase/src/assets/examples/dropdown/white.css

@@ -0,0 +1,3 @@
+.result-display {
+  color: #fff;
+}

showcase/src/assets/examples/dropdown/white.html

@@ -0,0 +1,13 @@
+<stark-dropdown
+		class="stark-full-width"
+		color="white"
+		dropdownId="serviceWhiteDropdown"
+		[options]="serviceDropdownOptions"
+		[value]="selectedServiceWhiteDropdown"
+		placeholder="SHOWCASE.DEMO.DROPDOWNS.SELECT_SERVICE"
+		optionIdProperty="id"
+		optionLabelProperty="value"
+		(dropdownSelectionChanged)="whiteDropdownOnChange($event)"
+		required>
+</stark-dropdown>
+<div class="result-display" *ngIf="selectedServiceWhiteDropdown"> {{ 'SHOWCASE.DEMO.DROPDOWNS.SELECTED_VALUE' | translate }}: {{ selectedServiceWhiteDropdown }}</div>

showcase/src/assets/examples/dropdown/white.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+	selector: "showcase-demo-dropdown",
+	styleUrls: ["./white.scss"],
+	templateUrl: "./white.html"
+})
+export class WhiteDropdownComponent implements OnInit {
+	public selectedServiceWhiteDropdown: string;
+
+	public serviceDropdownOptions: any[];
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.serviceDropdownOptions = [
+			{ id: "PR", value: "IT application" },
+			{ id: "IO", value: "Informatics infrastructure and operations" },
+			{ id: "CS", value: "IT customer services" }
+		];
+	}
+
+	public whiteDropdownOnChange(selectedValue: string): void {
+		this.selectedServiceWhiteDropdown = selectedValue;
+	}
+}

showcase/src/assets/translations/en.json

@@ -42,7 +42,8 @@
         "SELECT_NUMBER": "Select your lucky number",
         "SELECT_SERVICES": "Select one or more services",
         "SELECT_ONE_SERVICE": "Select at least one service",
-        "SELECT_DISABLED": "Sorry, it's disabled"
+        "SELECT_DISABLED": "Sorry, it's disabled",
+        "WHITE": "White dropdown on black background (full width)"
       },
       "HEADER": {
         "TITLE": "Stark App Header Guidelines",

showcase/src/assets/translations/fr.json

@@ -42,7 +42,8 @@
         "SELECT_NUMBER": "Sélectionnez votre chiffre porte-bonheur",
         "SELECT_SERVICES": "Sélectionnez un service ou plus",
         "SELECT_ONE_SERVICE": "Sélectionnez au moins un service",
-        "SELECT_DISABLED": "Désolé, ce dropdown est désactivé"
+        "SELECT_DISABLED": "Désolé, ce dropdown est désactivé",
+        "WHITE": "Dropdown blanc sur fond noir (largeur maximale)"
       },
       "HEADER": {
         "TITLE": "Stark App Header Guidelines",

showcase/src/assets/translations/nl.json

@@ -42,7 +42,8 @@
         "SELECT_NUMBER": "Selecteer uw geluksnummer",
         "SELECT_SERVICES": "Selecteer een of meer diensten",
         "SELECT_ONE_SERVICE": "Selecteer ten minsten een dienst",
-        "SELECT_DISABLED": "Sorry, ditdés dropdown is niet geactiveerd"
+        "SELECT_DISABLED": "Sorry, deze dropdown is niet geactiveerd",
+        "WHITE": "Witte dropdown met zwarte achtergrond (maximum breedte)"
       },
       "HEADER": {
         "TITLE": "Stark App Header Guidelines",

showcase/src/styles/_stark-styles.scss

@@ -17,4 +17,5 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i
 @import "~@nationalbankbelgium/stark-ui/src/modules/pretty-print/components/pretty-print.component";
 @import "~@nationalbankbelgium/stark-ui/src/modules/table/components/table.component";
 @import "~@nationalbankbelgium/stark-ui/src/modules/table/components/dialogs/multisort.component";
+@import "~@nationalbankbelgium/stark-ui/src/modules/dropdown/components/dropdown-theme";
 @import "~@nationalbankbelgium/stark-ui/src/modules/dropdown/components/dropdown.component";