From 3737371d7c7f88474c5481d0cbd009504a942f72 Mon Sep 17 00:00:00 2001 From: Carlo Nomes Date: Thu, 28 Mar 2019 16:46:32 +0100 Subject: [PATCH] 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 --- .../components/_collapsible.component.scss | 20 ++++----- .../components/collapsible.component.html | 5 ++- .../components/collapsible.component.spec.ts | 5 +-- .../components/collapsible.component.ts | 31 ++++++++++---- .../demo-collapsible-page.component.html | 42 ++++++++----------- .../demo-collapsible-page.component.ts | 29 ++++--------- .../collapsible/collapsible-custom.html | 29 +++++++------ .../collapsible/collapsible-custom.ts | 6 +-- .../collapsible/collapsible-default.ts | 4 -- 9 files changed, 77 insertions(+), 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 index 9f34d54600..a6b998c617 100644 --- 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 index 1d2614329d..615d53705f 100644 --- 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 @@ - + {{ titleLabel }} 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 index dd25defe06..fcad33ae86 100644 --- 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 index d0da79b157..a684c331c9 100644 --- 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 index 18fc3973a0..8e8f9eb162 100644 --- 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 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

- {{ collapsed[0] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }} + + {{ collapsed[0] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }} + SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST exampleTitle="SHOWCASE.DEMO.COLLAPSIBLE.CUSTOM_ICON" > {{ "SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT" | translate }} - {{ collapsed[1] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }} + + {{ collapsed[1] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }} +
{{ "SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT" | translate }} - {{ collapsed[2] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }} -
- - {{ "SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT" | translate }} - - - {{ collapsed[3] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }} + + {{ collapsed[2] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }} + 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 index 274d1e5ed8..14583190b6 100644 --- 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,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { ReferenceLink } from "../../../shared/components"; @Component({ @@ -6,27 +6,16 @@ import { ReferenceLink } from "../../../shared/components"; 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 index 8a1ce5bfa3..6dae12cd13 100644 --- a/showcase/src/assets/examples/collapsible/collapsible-custom.html +++ b/showcase/src/assets/examples/collapsible/collapsible-custom.html @@ -1,22 +1,21 @@ -Any HTML content - - -
- -Any HTML content - +
-Any HTML content - + diff --git a/showcase/src/assets/examples/collapsible/collapsible-custom.ts b/showcase/src/assets/examples/collapsible/collapsible-custom.ts index f2d448bd85..9b5c0f7a25 100644 --- 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 index 804aa18100..43c1d99bf4 100644 --- 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; }