fix(stark-demo): change default behaviour of collapsible icon

- rotate the default icon by 90deg when the collapsible is open - small refactor ISSUES CLOSED: #1013
NationalBankBelgium · Apr 1, 2019 · 3737371 · 3737371
1 parent c5c34c6
commit 3737371
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 94 deletions.
diff --git a/packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss b/packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss
@@ -7,14 +7,13 @@
   .mat-expansion-panel {
     transition: box-shadow 150ms linear;
 
-    &.mat-expanded {
-      .mat-expansion-panel-header-title {
-        .stark-collapsible-icon {
-          &.spin {
-            transform: rotate(180deg);
-          }
-        }
-      }
+    .stark-collapsible-icon {
+      transition: transform 150ms linear;
+      margin-right: 6px;
+    }
+
+    &.mat-expanded .stark-collapsible-icon.spin {
+      transform: rotate(90deg);
     }
 
     .mat-expansion-panel-header {
@@ -34,11 +33,6 @@
         line-height: mat-line-height($typography-config, subheading-1);
       }
     }
-
-    .stark-collapsible-icon {
-      transition: transform 150ms linear;
-      margin-right: 6px;
-    }
   }
 }
 

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,7 +1,10 @@
 <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>
+			<mat-icon [ngClass]="{ spin: _isDefaultIcon }"
+					  class="stark-collapsible-icon"
+					  starkSvgViewBox
+					  [svgIcon]="icon"></mat-icon>
 			<span class="stark-collapsible-title" translate>{{ titleLabel }}</span>
 		</mat-panel-title>
 	</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
@@ -37,7 +37,6 @@ describe("CollapsibleComponent", () => {
 		// inputs
 		component.htmlId = "toto";
 		component.titleLabel = "titre";
-		component.iconSpinningEnabled = true;
 
 		fixture.detectChanges(); // trigger initial data binding
 	});
@@ -62,9 +61,7 @@ describe("CollapsibleComponent", () => {
 			expect(component.titleLabel).toBeDefined();
 			expect(component.titleLabel).toBe("titre");
 
-			expect(component.iconSpinningEnabled).not.toBeNull();
-			expect(component.iconSpinningEnabled).toBeDefined();
-			expect(component.iconSpinningEnabled).toBe(true);
+			expect(component._isDefaultIcon).toBe(true);
 		});
 	});
 

diff --git a/packages/stark-ui/src/modules/collapsible/components/collapsible.component.ts b/packages/stark-ui/src/modules/collapsible/components/collapsible.component.ts
@@ -7,6 +7,11 @@ import { AbstractStarkUiComponent } from "../../../common/classes/abstract-compo
  */
 const componentName: string = "stark-collapsible";
 
+/**
+ * The default icon for a collapsible
+ */
+const DEFAULT_COLLAPSIBLE_ICON: string = "chevron-right";
+
 /**
  * Component to display an accordion around included html using angular material's expansion panel.
  */
@@ -30,7 +35,25 @@ export class StarkCollapsibleComponent extends AbstractStarkUiComponent implemen
 	 * Icon to use in the header (based on Material Design Icons)
 	 */
 	@Input()
-	public icon: "chevron-right" | string = "chevron-right";
+	public get icon(): string {
+		return this._icon;
+	}
+
+	public set icon(value: string) {
+		this._isDefaultIcon = typeof value === "undefined";
+		this._icon = typeof value === "undefined" ? DEFAULT_COLLAPSIBLE_ICON : value;
+	}
+
+	/**
+	 * for internal use only
+	 * @ignore
+	 */
+	public _isDefaultIcon: boolean = true;
+	/**
+	 * for internal use only
+	 * @ignore
+	 */
+	private _icon: string = DEFAULT_COLLAPSIBLE_ICON;
 
 	/**
 	 * Boolean value triggering the collapsing of the collapsible
@@ -52,12 +75,6 @@ export class StarkCollapsibleComponent extends AbstractStarkUiComponent implemen
 	@Input()
 	public titleLabel: string;
 
-	/**
-	 * Design options related to the component
-	 */
-	@Input()
-	public iconSpinningEnabled: boolean = false;
-
 	/**
 	 * Class constructor
 	 * @param logger - The logger of the application

diff --git a/showcase/src/app/demo-ui/pages/collapsible/demo-collapsible-page.component.html b/showcase/src/app/demo-ui/pages/collapsible/demo-collapsible-page.component.html
@@ -12,7 +12,9 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible(0)" mat-raised-button>
 			{{ "SHOWCASE.DEMO.COLLAPSIBLE.TOGGLE_COLLAPSIBLE" | translate }}
 		</button>
-		<span class="collapsible-demo-status" translate>{{ collapsed[0] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}</span>
+		<span class="collapsible-demo-status" translate>
+			{{ collapsed[0] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}
+		</span>
 	</example-viewer>
 
 	<example-viewer
@@ -21,44 +23,34 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		exampleTitle="SHOWCASE.DEMO.COLLAPSIBLE.CUSTOM_ICON"
 	>
 		<stark-collapsible
-			htmlId="secondCollapsible"
-			titleLabel="SHOWCASE.DEMO.COLLAPSIBLE.TITLE_1"
-			[(isExpanded)]="collapsed[1]"
-			[iconSpinningEnabled]="true"
-			icon="chevron-down"
+				htmlId="thirdCollapsible"
+				titleLabel="SHOWCASE.DEMO.COLLAPSIBLE.TITLE_1"
+				[(isExpanded)]="collapsed[1]"
+				icon="information"
 		>
 			{{ "SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT" | translate }}
 		</stark-collapsible>
 		<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible(1)" mat-raised-button>
 			{{ "SHOWCASE.DEMO.COLLAPSIBLE.TOGGLE_COLLAPSIBLE" | translate }}
 		</button>
-		<span class="collapsible-demo-status" translate>{{ collapsed[1] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}</span>
+		<span class="collapsible-demo-status" translate>
+			{{ collapsed[1] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}
+		</span>
 		<hr class="collapsible-demo-line" />
 		<stark-collapsible
-			htmlId="thirdCollapsible"
-			titleLabel="SHOWCASE.DEMO.COLLAPSIBLE.TITLE_1"
-			[(isExpanded)]="collapsed[2]"
-			icon="information"
+				htmlId="fourthCollapsible"
+				titleLabel="SHOWCASE.DEMO.COLLAPSIBLE.TITLE_1"
+				[(isExpanded)]="collapsed[2]"
+				icon="account-circle"
 		>
 			{{ "SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT" | translate }}
 		</stark-collapsible>
 		<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible(2)" mat-raised-button>
 			{{ "SHOWCASE.DEMO.COLLAPSIBLE.TOGGLE_COLLAPSIBLE" | translate }}
 		</button>
-		<span class="collapsible-demo-status" translate>{{ collapsed[2] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}</span>
-		<hr class="collapsible-demo-line" />
-		<stark-collapsible
-			htmlId="fourthCollapsible"
-			titleLabel="SHOWCASE.DEMO.COLLAPSIBLE.TITLE_1"
-			[(isExpanded)]="collapsed[3]"
-			icon="account-circle"
-		>
-			{{ "SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT" | translate }}
-		</stark-collapsible>
-		<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible(3)" mat-raised-button>
-			{{ "SHOWCASE.DEMO.COLLAPSIBLE.TOGGLE_COLLAPSIBLE" | translate }}
-		</button>
-		<span class="collapsible-demo-status" translate>{{ collapsed[3] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}</span>
+		<span class="collapsible-demo-status" translate>
+			{{ collapsed[2] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}
+		</span>
 	</example-viewer>
 </section>
 <stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo-ui/pages/collapsible/demo-collapsible-page.component.ts b/showcase/src/app/demo-ui/pages/collapsible/demo-collapsible-page.component.ts
@@ -1,32 +1,21 @@
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { ReferenceLink } from "../../../shared/components";
 
 @Component({
 	selector: "demo-collapsible",
 	styleUrls: ["./demo-collapsible-page.component.scss"],
 	templateUrl: "./demo-collapsible-page.component.html"
 })
-export class DemoCollapsiblePageComponent implements OnInit {
-	public collapsed: boolean[] = [false, true, false, true, false, false, false];
-	public referenceList: ReferenceLink[];
-
-	public constructor() {
-		// empty constructor
-	}
+export class DemoCollapsiblePageComponent {
+	public collapsed: boolean[] = [false, false, true];
+	public referenceList: ReferenceLink[] = [
+		{
+			label: "Stark Collapsible component",
+			url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkCollapsibleComponent.html"
+		}
+	];
 
 	public toggleCollapsible(nb: number): void {
 		this.collapsed[nb] = !this.collapsed[nb];
 	}
-
-	/**
-	 * Component lifecycle hook
-	 */
-	public ngOnInit(): void {
-		this.referenceList = [
-			{
-				label: "Stark Collapsible component",
-				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkCollapsibleComponent.html"
-			}
-		];
-	}
 }
diff --git a/showcase/src/assets/examples/collapsible/collapsible-custom.html b/showcase/src/assets/examples/collapsible/collapsible-custom.html
@@ -1,22 +1,21 @@
-<stark-collapsible
-	htmlId="secondCollapsible"
-	titleLabel="Custom icon collapsible title"
-	[(isExpanded)]="collapsed[0]"
-	[iconSpinningEnabled]="true"
-	icon="chevron-down"
-	>Any HTML content
-</stark-collapsible>
-<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible(0)" mat-raised-button>Toggle collapsible</button>
-<hr class="collapsible-demo-line" />
-
-<stark-collapsible htmlId="thirdCollapsible" titleLabel="Custom icon collapsible title" [(isExpanded)]="collapsed[1]" icon="information"
+<stark-collapsible htmlId="thirdCollapsible"
+				   titleLabel="Custom icon collapsible title"
+				   [(isExpanded)]="collapsed[0]"
+				   icon="information"
 	>Any HTML content
 </stark-collapsible>
 
-<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible(1)" mat-raised-button>Toggle collapsible</button>
+<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible(0)" mat-raised-button>Toggle
+																										 collapsible
+</button>
 <hr class="collapsible-demo-line" />
 
-<stark-collapsible htmlId="fourthCollapsible" titleLabel="Custom icon collapsible title" [(isExpanded)]="collapsed[2]" icon="account-circle"
+<stark-collapsible htmlId="fourthCollapsible"
+				   titleLabel="Custom icon collapsible title"
+				   [(isExpanded)]="collapsed[1]"
+				   icon="account-circle"
 	>Any HTML content
 </stark-collapsible>
-<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible(2)" mat-raised-button>Toggle collapsible</button>
+<button color="primary" class="collapsible-demo-button" (click)="toggleCollapsible(1)" mat-raised-button>Toggle
+																										 collapsible
+</button>
diff --git a/showcase/src/assets/examples/collapsible/collapsible-custom.ts b/showcase/src/assets/examples/collapsible/collapsible-custom.ts
@@ -5,11 +5,7 @@ import { Component } from "@angular/core";
 	templateUrl: "./demo-collapsible.component.html"
 })
 export class DemoCollapsibleComponent {
-	public collapsed: boolean[] = [true, false, true];
-
-	public constructor() {
-		// empty constructor
-	}
+	public collapsed: boolean[] = [false, true];
 
 	public toggleCollapsible(nb: number): void {
 		this.collapsed[nb] = !this.collapsed[nb];

diff --git a/showcase/src/assets/examples/collapsible/collapsible-default.ts b/showcase/src/assets/examples/collapsible/collapsible-default.ts
@@ -7,10 +7,6 @@ import { Component } from "@angular/core";
 export class DemoCollapsibleComponent {
 	public collapsed: boolean = false;
 
-	public constructor() {
-		// empty constructor
-	}
-
 	public toggleCollapsible(): void {
 		this.collapsed = !this.collapsed;
 	}