Skip to content

Commit

Permalink
fix(stark-demo): change default behaviour of collapsible icon
Browse files Browse the repository at this point in the history
  - rotate the default icon by 90deg when the collapsible is open
  - small refactor

ISSUES CLOSED: #1013
  • Loading branch information
carlo-nomes committed Apr 1, 2019
1 parent c5c34c6 commit 3737371
Show file tree
Hide file tree
Showing 9 changed files with 77 additions and 94 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -34,11 +33,6 @@
line-height: mat-line-height($typography-config, subheading-1);
}
}

.stark-collapsible-icon {
transition: transform 150ms linear;
margin-right: 6px;
}
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ describe("CollapsibleComponent", () => {
// inputs
component.htmlId = "toto";
component.titleLabel = "titre";
component.iconSpinningEnabled = true;

fixture.detectChanges(); // trigger initial data binding
});
Expand All @@ -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);
});
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand All @@ -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
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Original file line number Diff line number Diff line change
@@ -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"
}
];
}
}
29 changes: 14 additions & 15 deletions showcase/src/assets/examples/collapsible/collapsible-custom.html
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit 3737371

Please sign in to comment.