feat(stark-ui): implement collapsible feature

ISSUES CLOSED: NationalBankBelgium#595

greenkeeper.json

@@ -12,10 +12,5 @@
       ]
     }
   },
-  "ignore": [
-    "@types/node",
-    "class-validator",
-    "typescript",
-    "tslint-sonarts"
-  ]
+  "ignore": ["@types/node", "class-validator", "typescript", "tslint-sonarts"]
 }

packages/rollup.config.common-data.js

@@ -20,6 +20,7 @@ const globals = {
 	"@angular/material/checkbox": "ngMaterial.checkbox",
 	"@angular/material/core": "ngMaterial.core",
 	"@angular/material/dialog": "ngMaterial.dialog",
+	"@angular/material/expansion": "ngMaterial.expansion",
 	"@angular/material/icon": "ngMaterial.icon",
 	"@angular/material/input": "ngMaterial.input",
 	"@angular/material/list": "ngMaterial.list",

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

@@ -11,6 +11,10 @@ $color-theme: (
     color: #323232,
     contrast: $light-primary-text
   ),
+  black-opaque: (
+    color: #000,
+    contrast: $light-primary-text
+  ),
   neutral: (
     color: #bfbfbf,
     contrast: $light-primary-text
@@ -32,11 +36,9 @@ $color-theme: (
     contrast: $dark-primary-text
   )
 );
-
 @if variable-exists(stark-color-theme) {
   $color-theme: map-merge($color-theme, $stark-color-theme);
 }
-
 $primary-palette: (
   50: #e3f2fd,
   100: #bbdefb,
@@ -137,6 +139,7 @@ $backgrounds: (
   status-bar: map_get($mat-grey, 300),
   app-bar: map_get($mat-grey, 100),
   background: #f6f9fa,
+  background-light: rgba(#000, 0.02),
   hover: rgba(black, 0.04),
   card: #fff,
   dialog: #fff,
@@ -170,7 +173,6 @@ $base-theme: (
   accent-palette: mat-palette($accent-palette),
   warn-palette: mat-palette($warning-palette)
 );
-
 // font-size, line-height, font-weight
 // https://material.angular.io/guide/typography
 $typography-theme: (

packages/stark-ui/src/modules.ts

@@ -2,6 +2,7 @@ export * from "./modules/action-bar";
 export * from "./modules/app-logo";
 export * from "./modules/app-logout";
 export * from "./modules/breadcrumb";
+export * from "./modules/collapsible";
 export * from "./modules/app-sidebar";
 export * from "./modules/keyboard-directives";
 export * from "./modules/date-picker";

packages/stark-ui/src/modules/collapsible.ts

@@ -0,0 +1,2 @@
+export * from "./collapsible/collapsible.module";
+export * from "./collapsible/components";

packages/stark-ui/src/modules/collapsible/collapsible.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { StarkCollapsibleComponent } from "./components";
+import { MatExpansionModule } from "@angular/material/expansion";
+import { MatIconModule } from "@angular/material/icon";
+import { CommonModule } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+
+@NgModule({
+	declarations: [StarkCollapsibleComponent],
+	imports: [CommonModule, MatExpansionModule, MatIconModule, TranslateModule],
+	exports: [StarkCollapsibleComponent]
+})
+export class StarkCollapsibleModule {}

packages/stark-ui/src/modules/collapsible/components.ts

@@ -0,0 +1 @@
+export * from "./components/collapsible.component";

packages/stark-ui/src/modules/collapsible/components/_collapsible-theme.scss

@@ -0,0 +1,51 @@
+/* ============================================================================== */
+/*  S t a r k   C o l l a p s i b l e   -   T h e m e                             */
+/* ============================================================================== */
+/* stark-ui: src/modules/collapsible/components/_collapsible-theme.scss */
+
+@mixin stark-collapsible-color($color_high, $color_low) {
+  .mat-expansion-panel {
+    box-shadow: $elevation-1;
+    &.mat-expanded {
+      box-shadow: $elevation-16;
+    }
+
+    .mat-expansion-panel-header {
+      border-bottom: 1px solid rgba($color: $color_low, $alpha: 0.12);
+      background-color: rgba($color: $color_high, $alpha: 0.02);
+      &:not(.mat-expanded) {
+        &:hover {
+          background-color: rgba($color: $color_low, $alpha: 0.02);
+        }
+      }
+      &.mat-expanded {
+        background-color: rgba($color: $color_high, $alpha: 1);
+      }
+    }
+
+    .mat-expansion-panel-body {
+      background-color: rgba($color: $color_high, $alpha: 0.02);
+    }
+  }
+}
+
+.stark-collapsible {
+  @include stark-collapsible-color(
+    map-get(map-get($color-theme, white-transp), color),
+    map-get(map-get($color-theme, black-opaque), color)
+  );
+
+  .mat-expansion-panel-header-description {
+    color: mat-color(map-get($base-theme, primary-palette), 900);
+  }
+
+  .mat-expansion-panel-header-title {
+    color: mat-color(map-get($base-theme, primary-palette), 500);
+  }
+
+  .stark-collapsible-icon {
+    color: mat-color(map-get($base-theme, primary-palette), 500);
+  }
+}
+
+/* END stark-ui: src/modules/collapsible/components/_collapsible-theme.scss */

packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss

@@ -0,0 +1,44 @@
+/* ============================================================================== */
+/*  S t a r k   C o l l a p s i b l e                                             */
+/* ============================================================================== */
+/* stark-ui: packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss */
+
+.stark-collapsible {
+  .mat-expansion-panel {
+    transition: box-shadow 150ms linear;
+
+    &.mat-expanded {
+      .mat-expansion-panel-header-title {
+        .stark-collapsible-icon {
+          &.spin {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+
+    .mat-expansion-panel-header {
+      padding-right: 0;
+    }
+
+    .mat-expansion-panel-body {
+      padding-top: 16px;
+    }
+
+    .mat-expansion-panel-header-title {
+      align-items: center;
+      .stark-collapsible-title {
+        font-size: mat-font-size($typography-config, subheading-1);
+        font-weight: mat-font-weight($typography-config, subheading-1);
+        line-height: mat-line-height($typography-config, subheading-1);
+      }
+    }
+
+    .stark-collapsible-icon {
+      transition: transform 150ms linear;
+      margin-right: 6px;
+    }
+  }
+}
+
+/* END stark-ui: packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss */

packages/stark-ui/src/modules/collapsible/components/collapsible.component.html

@@ -0,0 +1,14 @@
+<mat-expansion-panel class="stark-collapsible" 
+					 id="{{ htmlId }}"
+					 [expanded]="isExpanded"
+					 hideToggle>
+	<mat-expansion-panel-header 
+			(click)="toggleCollapsible()">
+		<mat-panel-title>
+			<mat-icon [ngClass]="{ 'spin' : iconSpinningEnabled }" class="stark-collapsible-icon" starkSvgViewBox [svgIcon]="icon"></mat-icon>
+			<span class="stark-collapsible-title" translate>{{ titleLabel }}</span>
+		</mat-panel-title>
+	</mat-expansion-panel-header>
+
+	<ng-content></ng-content>
+</mat-expansion-panel>

packages/stark-ui/src/modules/collapsible/components/collapsible.component.spec.ts

@@ -0,0 +1,95 @@
+/*tslint:disable:completed-docs*/
+import { NO_ERRORS_SCHEMA } from "@angular/core";
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
+import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
+import { StarkCollapsibleComponent } from "../components";
+
+describe("CollapsibleComponent", () => {
+	let component: StarkCollapsibleComponent;
+	let fixture: ComponentFixture<StarkCollapsibleComponent>;
+
+	/**
+	 * async beforeEach
+	 */
+	beforeEach(async(() => {
+		return (
+			TestBed.configureTestingModule({
+				imports: [],
+				declarations: [StarkCollapsibleComponent],
+				providers: [{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }],
+				schemas: [NO_ERRORS_SCHEMA] // tells the Angular compiler to ignore unrecognized elements and attributes (svgIcon)
+			})
+				/**
+				 * Compile template and css
+				 */
+				.compileComponents()
+		);
+	}));
+
+	/**
+	 * Synchronous beforeEach
+	 */
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StarkCollapsibleComponent);
+		component = fixture.componentInstance;
+
+		// inputs
+		component.htmlId = "toto";
+		component.titleLabel = "titre";
+		component.iconSpinningEnabled = true;
+
+		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.htmlId).not.toBeNull();
+			expect(component.htmlId).toBeDefined();
+			expect(component.htmlId).toBe("toto");
+
+			expect(component.isExpanded).not.toBeNull();
+			expect(component.isExpanded).toBeDefined();
+			expect(component.isExpanded).toBe(false);
+
+			expect(component.titleLabel).not.toBeNull();
+			expect(component.titleLabel).toBeDefined();
+			expect(component.titleLabel).toBe("titre");
+
+			expect(component.iconSpinningEnabled).not.toBeNull();
+			expect(component.iconSpinningEnabled).toBeDefined();
+			expect(component.iconSpinningEnabled).toBe(true);
+		});
+	});
+
+	describe("@Input()", () => {
+		it("should have modified the view accordingly", () => {
+			const actionBar: HTMLElement = fixture.nativeElement.querySelector("#" + component.htmlId);
+			expect(actionBar).toBeDefined();
+
+			const matIcon: HTMLElement = fixture.nativeElement.querySelector("mat-icon");
+			expect(matIcon.className).toContain("spin");
+		});
+	});
+
+	describe("toggleCollapsible()", () => {
+		it("should change the isExpanded value and send it as output", () => {
+			const exp: boolean = component.isExpanded;
+
+			// Test output
+			component.isExpandedChange.subscribe((value: boolean) => {
+				expect(value).toBe(!exp);
+			});
+
+			component.toggleCollapsible();
+
+			expect(component.isExpanded).toBe(!exp);
+		});
+	});
+});

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

@@ -0,0 +1,83 @@
+import { Component, EventEmitter, HostBinding, Inject, Input, OnInit, Output } from "@angular/core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+
+/**
+ * Name of the component
+ */
+const componentName: string = "stark-collapsible";
+
+/**
+ * Component to display an accordion around included html using angular material's expansion panel.
+ */
+@Component({
+	selector: "stark-collapsible",
+	templateUrl: "./collapsible.component.html"
+})
+export class StarkCollapsibleComponent implements OnInit {
+	/**
+	 * Adds class="stark-app-logo" attribute on the host component
+	 */
+	@HostBinding("class")
+	public class: string = componentName;
+
+	/**
+	 * ID to set to the collapsible
+	 */
+	@Input()
+	public htmlId: string;
+
+	/**
+	 * Icon to use in the header (based on Material Design Icons)
+	 */
+	@Input()
+	public icon: "chevron-right" | string = "chevron-right";
+
+	/**
+	 * Boolean value triggering the collapsing of the collapsible
+	 */
+	@Input()
+	public isExpanded: boolean = false;
+
+	/**
+	 * Output value giving the collapse state of the collapsible
+	 * NOTE : isExpandedChange is used with isExpanded to create a two-way binding (using a banana in the box "[(isExpanded)]" ).
+	 * For more info, see : https://angular.io/guide/template-syntax#two-way-binding---
+	 */
+	@Output()
+	public isExpandedChange: EventEmitter<boolean> = new EventEmitter();
+
+	/**
+	 * String or translation key that will be displayed in the title part of the header.
+	 */
+	@Input()
+	public titleLabel: string;
+
+	/**
+	 * Design options related to the component
+	 */
+	@Input()
+	public iconSpinningEnabled: boolean = false;
+
+	/**
+	 * Class constructor
+	 * @param logger - The logger of the application
+	 */
+	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {
+		// empty constructor
+	}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.logger.debug(componentName + ": component initialized");
+	}
+
+	/**
+	 * Switch and triggers the dispatch of the collapse state information.
+	 */
+	public toggleCollapsible(): void {
+		this.isExpanded = !this.isExpanded;
+		this.isExpandedChange.emit(this.isExpanded);
+	}
+}

showcase/src/app/app.component.html

@@ -19,6 +19,9 @@
 			<a mat-list-item uiSref="demo-card" uiSrefActive="active">
 				<span matLine>Card</span>
 			</a>
+			<a mat-list-item uiSref="demo-collapsible" uiSrefActive="active">
+				<span matLine>Collapsible</span>
+			</a>
 			<a mat-list-item uiSref="demo-colors" uiSrefActive="active">
 				<span matLine>Colors</span>
 			</a>