feat(stark-ui): implement Collapsible component

ISSUES CLOSED: NationalBankBelgium#595
Dedepon · Aug 27, 2018 · ecb4f55 · ecb4f55
1 parent ce79cc1
commit ecb4f55
Show file tree

Hide file tree

Showing 10 changed files with 10,903 additions and 25,340 deletions.
diff --git a/packages/stark-build/package-lock.json b/packages/stark-build/package-lock.json
diff --git a/packages/stark-core/package-lock.json b/packages/stark-core/package-lock.json
diff --git a/packages/stark-testing/package-lock.json b/packages/stark-testing/package-lock.json
diff --git a/packages/stark-ui/package-lock.json b/packages/stark-ui/package-lock.json
diff --git a/packages/stark-ui/src/modules/collapsible/components/collapsible.component.html b/packages/stark-ui/src/modules/collapsible/components/collapsible.component.html
@@ -1,19 +1,19 @@
 <mat-expansion-panel class="stark-collapsible" 
-					 [ngClass]="{ 'spin' : options.spin }"
+					 [ngClass]="{ 'spin' : options?.spin }"
 					 id="{{ htmlId }}"
 					 [expanded]="isExpanded"
 					 hideToggle>
 	<mat-expansion-panel-header 
-			[collapsedHeight]="options.collapsedHeight"
-			[expandedHeight]="options.expandedHeight"
+			[collapsedHeight]="options?.collapsedHeight"
+			[expandedHeight]="options?.expandedHeight"
 			(click)="toggleCollapsible()">
 		<mat-panel-title>
-			<mat-icon *ngIf="options.iconPosition === 'left'" class="stark-collapsible-icon" starkSvgViewBox [svgIcon]="icon"></mat-icon>
+			<mat-icon *ngIf="options?.iconPosition === 'left'" class="stark-collapsible-icon" starkSvgViewBox [svgIcon]="icon"></mat-icon>
 			<span class="stark-collapsible-title" translate>{{ titleLabel }}</span>
 		</mat-panel-title>
 		<mat-panel-description>
 			<span class="stark-collapsible-subtitle" translate>{{ subTitleLabel }}</span>
-			<mat-icon *ngIf="options.iconPosition === 'right'" class="stark-collapsible-icon" starkSvgViewBox [svgIcon]="icon"></mat-icon>
+			<mat-icon *ngIf="options?.iconPosition === 'right'" class="stark-collapsible-icon" starkSvgViewBox [svgIcon]="icon"></mat-icon>
 		</mat-panel-description>
 	</mat-expansion-panel-header>
 

diff --git a/packages/stark-ui/src/modules/collapsible/components/collapsible.component.spec.ts b/packages/stark-ui/src/modules/collapsible/components/collapsible.component.spec.ts
@@ -1,99 +1,3 @@
-/*
-describe("CollapsibleComponent", () => {
-	let element: IAugmentedJQuery;
-	let $scope: CollapsibleBindings;
-	let $compile: ICompileService;
-	let mockModule: IModule;
-	const componentMetadata: ComponentMetadata = UnitTestingUtils.getComponentMetadata(StarkCollapsibleComponent);
-	const componentName: string = componentMetadata.selector;
-
-	// component bindings values
-	const htmlId: string = "testHtmlId";
-	const titleLabel: string = "Title of collapsible";
-	const icon: string = "exit-to-app";
-
-	const collapsibleContent: string = "This is a test !";
-
-	// Inject module dependencies
-	beforeEach(() => {
-		mockModule = UnitTestingUtils.createMockModuleWithDefaultDependencies();
-		mockModule.component(componentName, componentMetadata.componentOptions);
-		UnitTestingUtils.registerDefaultMockedServices();
-	});
-
-	// Inject the mocked services
-	beforeEach(inject(($rootScope: IRootScopeService, _$compile_: ICompileService) => {
-		$compile = _$compile_;
-		$scope = <CollapsibleBindings>$rootScope.$new();
-
-		$scope.titleLabel = titleLabel;
-		$scope.htmlId = htmlId;
-		$scope.icon = icon;
-		$scope.isExpanded = undefined;
-
-		element = $compile("<stark-collapsible " +
-			"title-label='{{ titleLabel }}' " +
-			"html-id='{{ htmlId }}' " +
-			"icon= '{{ icon }}' " +
-			"is-expanded= 'isExpanded' " +
-			">" + collapsibleContent + "</stark-collapsible>")($scope);
-		// simulating the scope life cycle (so the watchers and bindings are executed)
-		$scope.$digest();
-	}));
-
-	it("should render the appropriate content", () => {
-		const collapsibleElement: IAugmentedJQuery = <IAugmentedJQuery>UnitTestingUtils.getElementBySelector(element, "div.stark-collapsible");
-		expect(collapsibleElement.hasClass("active")).toBe(false);
-		const titleElement: IAugmentedJQuery = <IAugmentedJQuery>UnitTestingUtils.getElementBySelector(element, "div.stark-collapsible-title");
-		expect(titleElement.attr("id")).toBe(htmlId);
-		const iconElement: IAugmentedJQuery = UnitTestingUtils.getElementsByTagName(titleElement, "md-icon");
-		expect(iconElement.length).toBe(1);
-		expect(iconElement.attr("md-svg-icon")).toBe(icon);
-		expect(titleElement.text()).toContain(titleLabel);
-
-		const contentElement: IAugmentedJQuery =
-			<IAugmentedJQuery>UnitTestingUtils.getElementBySelector(element, "div.stark-collapsible-content");
-		expect(contentElement.text()).toContain(collapsibleContent);
-	});
-
-	it("should render the appropriate content with default icon if not specified", () => {
-		$scope.titleLabel = titleLabel;
-		$scope.htmlId = htmlId;
-
-		element = $compile("<stark-collapsible " +
-			"title-label='{{ titleLabel }}' " +
-			"html-id='{{ htmlId }}' " +
-			">" + collapsibleContent + "</stark-collapsible>")($scope);
-		// simulating the scope life cycle (so the watchers and bindings are executed)
-		$scope.$digest();
-
-		const collapsibleElement: IAugmentedJQuery = <IAugmentedJQuery>UnitTestingUtils.getElementBySelector(element, "div.stark-collapsible");
-		expect(collapsibleElement.hasClass("active")).toBe(false);
-		const titleElement: IAugmentedJQuery = <IAugmentedJQuery>UnitTestingUtils.getElementBySelector(element, "div.stark-collapsible-title");
-		expect(titleElement.attr("id")).toBe(htmlId);
-		const iconElement: IAugmentedJQuery = UnitTestingUtils.getElementsByTagName(titleElement, "md-icon");
-		expect(iconElement.length).toBe(1);
-		expect(iconElement.attr("md-svg-icon")).toBe("chevron-right");
-		expect(titleElement.html()).toContain(titleLabel);
-
-		const contentElement: IAugmentedJQuery =
-			<IAugmentedJQuery>UnitTestingUtils.getElementBySelector(element, "div.stark-collapsible-content");
-		expect(contentElement.text()).toContain(collapsibleContent);
-	});
-
-	it("should expand the panel if isExpanded set to true", () => {
-		$scope.isExpanded = true;
-		// simulating the scope life cycle (so the watchers and bindings are executed)
-		$scope.$digest();
-
-		const collapsibleElement: IAugmentedJQuery = <IAugmentedJQuery>UnitTestingUtils.getElementBySelector(element, "div.stark-collapsible");
-		expect(collapsibleElement.hasClass("active")).toBe(true);
-	});
-
-});
-
-*/
-
 /*tslint:disable:completed-docs*/
 import { NO_ERRORS_SCHEMA } from "@angular/core";
 import { async, ComponentFixture, TestBed } from "@angular/core/testing";

diff --git a/packages/stark-ui/src/modules/collapsible/components/collapsible.component.ts b/packages/stark-ui/src/modules/collapsible/components/collapsible.component.ts
@@ -1,6 +1,6 @@
-import {Component, EventEmitter, HostBinding, Inject, Input, OnInit, Output} from "@angular/core";
+import { Component, EventEmitter, HostBinding, Inject, Input, OnInit, Output } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import {StarkCollapsibleOptions} from "@nationalbankbelgium/stark-ui";
+import { StarkCollapsibleOptions } from "@nationalbankbelgium/stark-ui";
 
 /**
  * Name of the component
@@ -21,7 +21,7 @@ export class StarkCollapsibleComponent implements OnInit {
 	/**
 	 * ID to set to the collapsible
 	 */
-	@Input() 
+	@Input()
 	public htmlId: string;
 
 	/**
@@ -47,21 +47,21 @@ export class StarkCollapsibleComponent implements OnInit {
 	 */
 	@Input()
 	public titleLabel: string;
-	
+
 	/**
 	 * String or translation key that will be displayed in the sub-title part of the header.
 	 */
 	@Input()
 	public subTitleLabel?: string;
 
 	/**
-	 * Design options related to the component 
+	 * Design options related to the component
 	 */
 	@Input()
 	public options?: StarkCollapsibleOptions;
-	
+
 	/**
-	 * Class constructor 
+	 * Class constructor
 	 * @param logger - The logger of the application
 	 */
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {
@@ -81,10 +81,10 @@ export class StarkCollapsibleComponent implements OnInit {
 		this.options = {
 			...defaultOptions,
 			...this.options
-		}
+		};
 		this.logger.debug(componentName + ": component initialized");
 	}
-	
+
 	/**
 	 * Switch and triggers the dispatch of the collapse state information.
 	 */