From 44669a18f425949332e406c3870894991983f551 Mon Sep 17 00:00:00 2001 From: Denis Bourguignon Date: Wed, 22 Aug 2018 11:29:05 +0200 Subject: [PATCH] feat(stark-ui): implement collapsible feature ISSUES CLOSED: #595 --- greenkeeper.json | 7 +- packages/rollup.config.common-data.js | 1 + .../stark-ui/assets/styles/_variables.scss | 8 +- packages/stark-ui/src/modules.ts | 1 + packages/stark-ui/src/modules/collapsible.ts | 2 + .../modules/collapsible/collapsible.module.ts | 13 +++ .../src/modules/collapsible/components.ts | 1 + .../components/_collapsible-theme.scss | 51 ++++++++++ .../components/_collapsible.component.scss | 44 +++++++++ .../components/collapsible.component.html | 14 +++ .../components/collapsible.component.spec.ts | 95 +++++++++++++++++++ .../components/collapsible.component.ts | 83 ++++++++++++++++ showcase/src/app/app.component.html | 3 + showcase/src/app/app.routes.ts | 4 +- .../demo-collapsible.component.html | 47 +++++++++ .../demo-collapsible.component.scss | 12 +++ .../collapsible/demo-collapsible.component.ts | 18 ++++ showcase/src/app/demo/collapsible/index.ts | 1 + showcase/src/app/demo/demo.module.ts | 7 +- showcase/src/app/demo/index.ts | 1 + .../collapsible/collapsible-custom.css | 8 ++ .../collapsible/collapsible-custom.html | 32 +++++++ .../collapsible/collapsible-custom.ts | 17 ++++ .../collapsible/collapsible-default.css | 3 + .../collapsible/collapsible-default.html | 8 ++ .../collapsible/collapsible-default.ts | 17 ++++ showcase/src/assets/translations/en.json | 10 ++ showcase/src/assets/translations/fr.json | 10 ++ showcase/src/assets/translations/nl.json | 10 ++ showcase/src/styles/_stark-styles.scss | 2 + 30 files changed, 519 insertions(+), 11 deletions(-) create mode 100644 packages/stark-ui/src/modules/collapsible.ts create mode 100644 packages/stark-ui/src/modules/collapsible/collapsible.module.ts create mode 100644 packages/stark-ui/src/modules/collapsible/components.ts create mode 100644 packages/stark-ui/src/modules/collapsible/components/_collapsible-theme.scss create mode 100644 packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss create mode 100644 packages/stark-ui/src/modules/collapsible/components/collapsible.component.html create mode 100644 packages/stark-ui/src/modules/collapsible/components/collapsible.component.spec.ts create mode 100644 packages/stark-ui/src/modules/collapsible/components/collapsible.component.ts create mode 100644 showcase/src/app/demo/collapsible/demo-collapsible.component.html create mode 100644 showcase/src/app/demo/collapsible/demo-collapsible.component.scss create mode 100644 showcase/src/app/demo/collapsible/demo-collapsible.component.ts create mode 100644 showcase/src/app/demo/collapsible/index.ts create mode 100644 showcase/src/assets/examples/collapsible/collapsible-custom.css create mode 100644 showcase/src/assets/examples/collapsible/collapsible-custom.html create mode 100644 showcase/src/assets/examples/collapsible/collapsible-custom.ts create mode 100644 showcase/src/assets/examples/collapsible/collapsible-default.css create mode 100644 showcase/src/assets/examples/collapsible/collapsible-default.html create mode 100644 showcase/src/assets/examples/collapsible/collapsible-default.ts diff --git a/greenkeeper.json b/greenkeeper.json index f9ad8e8a15..075b316d11 100644 --- a/greenkeeper.json +++ b/greenkeeper.json @@ -12,10 +12,5 @@ ] } }, - "ignore": [ - "@types/node", - "class-validator", - "typescript", - "tslint-sonarts" - ] + "ignore": ["@types/node", "class-validator", "typescript", "tslint-sonarts"] } diff --git a/packages/rollup.config.common-data.js b/packages/rollup.config.common-data.js index 68d2074a3e..85a8026db2 100644 --- a/packages/rollup.config.common-data.js +++ b/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", diff --git a/packages/stark-ui/assets/styles/_variables.scss b/packages/stark-ui/assets/styles/_variables.scss index 7a03053fb7..ffe974c5ae 100644 --- a/packages/stark-ui/assets/styles/_variables.scss +++ b/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: ( diff --git a/packages/stark-ui/src/modules.ts b/packages/stark-ui/src/modules.ts index abda9c2bad..41fdb6d668 100644 --- a/packages/stark-ui/src/modules.ts +++ b/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"; diff --git a/packages/stark-ui/src/modules/collapsible.ts b/packages/stark-ui/src/modules/collapsible.ts new file mode 100644 index 0000000000..62eee47468 --- /dev/null +++ b/packages/stark-ui/src/modules/collapsible.ts @@ -0,0 +1,2 @@ +export * from "./collapsible/collapsible.module"; +export * from "./collapsible/components"; diff --git a/packages/stark-ui/src/modules/collapsible/collapsible.module.ts b/packages/stark-ui/src/modules/collapsible/collapsible.module.ts new file mode 100644 index 0000000000..fdb0de86af --- /dev/null +++ b/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 {} diff --git a/packages/stark-ui/src/modules/collapsible/components.ts b/packages/stark-ui/src/modules/collapsible/components.ts new file mode 100644 index 0000000000..18d00d7041 --- /dev/null +++ b/packages/stark-ui/src/modules/collapsible/components.ts @@ -0,0 +1 @@ +export * from "./components/collapsible.component"; diff --git a/packages/stark-ui/src/modules/collapsible/components/_collapsible-theme.scss b/packages/stark-ui/src/modules/collapsible/components/_collapsible-theme.scss new file mode 100644 index 0000000000..434576b3b9 --- /dev/null +++ b/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 */ diff --git a/packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss b/packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss new file mode 100644 index 0000000000..f7d35e0b9b --- /dev/null +++ b/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 */ diff --git a/packages/stark-ui/src/modules/collapsible/components/collapsible.component.html b/packages/stark-ui/src/modules/collapsible/components/collapsible.component.html new file mode 100644 index 0000000000..3eee69b4d3 --- /dev/null +++ b/packages/stark-ui/src/modules/collapsible/components/collapsible.component.html @@ -0,0 +1,14 @@ + + + + + {{ 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 new file mode 100644 index 0000000000..b2973a2b1c --- /dev/null +++ b/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; + + /** + * 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); + }); + }); +}); diff --git a/packages/stark-ui/src/modules/collapsible/components/collapsible.component.ts b/packages/stark-ui/src/modules/collapsible/components/collapsible.component.ts new file mode 100644 index 0000000000..c2b06ffa3c --- /dev/null +++ b/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 = 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); + } +} diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html index c57ed5fe25..1147eb6723 100644 --- a/showcase/src/app/app.component.html +++ b/showcase/src/app/app.component.html @@ -19,6 +19,9 @@ Card + + Collapsible + Colors diff --git a/showcase/src/app/app.routes.ts b/showcase/src/app/app.routes.ts index 60a24dbe96..1d38357e8b 100644 --- a/showcase/src/app/app.routes.ts +++ b/showcase/src/app/app.routes.ts @@ -14,8 +14,9 @@ import { DemoLanguageSelectorComponent, LogoutComponent, DemoPrettyPrintComponent, - SliderComponent, TableComponent, + SliderComponent, + DemoCollapsibleComponent, DemoTypographyComponent } from "./demo"; import { HomeComponent } from "./home"; @@ -30,6 +31,7 @@ export const APP_STATES: Ng2StateDeclaration[] = [ { name: "demo-breadcrumb", url: "/demo/breadcrumb", component: DemoBreadcrumbComponent }, { name: "demo-button", url: "/demo/button", component: ButtonComponent }, { name: "demo-card", url: "/demo/card", component: DemoCardComponent }, + { name: "demo-collapsible", url: "/demo/collapsible", component: DemoCollapsibleComponent }, { name: "demo-colors", url: "/demo/colors", component: DemoColorsComponent }, { name: "demo-date-picker", url: "/demo/date-picker", component: DatePickerComponent }, { name: "demo-date-range-picker", url: "/demo/date-range-picker", component: DateRangePickerComponent }, diff --git a/showcase/src/app/demo/collapsible/demo-collapsible.component.html b/showcase/src/app/demo/collapsible/demo-collapsible.component.html new file mode 100644 index 0000000000..620d5228d1 --- /dev/null +++ b/showcase/src/app/demo/collapsible/demo-collapsible.component.html @@ -0,0 +1,47 @@ + + + {{ 'SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT' | translate }} + + + {{ collapsed[0] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }} + + + + + {{ 'SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT' | translate }} + + + {{ 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" }} + diff --git a/showcase/src/app/demo/collapsible/demo-collapsible.component.scss b/showcase/src/app/demo/collapsible/demo-collapsible.component.scss new file mode 100644 index 0000000000..cce4875c33 --- /dev/null +++ b/showcase/src/app/demo/collapsible/demo-collapsible.component.scss @@ -0,0 +1,12 @@ +.collapsible-demo-button { + margin-top: 16px; +} + +.collapsible-demo-line { + margin-top: 32px; + margin-bottom: 32px; +} + +.collapsible-demo-status { + margin-left: 24px; +} diff --git a/showcase/src/app/demo/collapsible/demo-collapsible.component.ts b/showcase/src/app/demo/collapsible/demo-collapsible.component.ts new file mode 100644 index 0000000000..fbe44ad8da --- /dev/null +++ b/showcase/src/app/demo/collapsible/demo-collapsible.component.ts @@ -0,0 +1,18 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: "showcase-demo-collapsible", + styleUrls: ["./demo-collapsible.component.scss"], + templateUrl: "./demo-collapsible.component.html" +}) +export class DemoCollapsibleComponent { + public collapsed: boolean[] = [false, true, false, true, false, false, false]; + + public constructor() { + // empty constructor + } + + public toggleCollapsible(nb: number): void { + this.collapsed[nb] = !this.collapsed[nb]; + } +} diff --git a/showcase/src/app/demo/collapsible/index.ts b/showcase/src/app/demo/collapsible/index.ts new file mode 100644 index 0000000000..e8f52fc09b --- /dev/null +++ b/showcase/src/app/demo/collapsible/index.ts @@ -0,0 +1 @@ +export * from "./demo-collapsible.component"; diff --git a/showcase/src/app/demo/demo.module.ts b/showcase/src/app/demo/demo.module.ts index 1a532ca955..2762ea6647 100644 --- a/showcase/src/app/demo/demo.module.ts +++ b/showcase/src/app/demo/demo.module.ts @@ -22,6 +22,7 @@ import { DemoColorsComponent } from "./colors/demo-colors.component"; import { ButtonComponent } from "./button/button.component"; import { DatePickerComponent } from "./date-picker/date-picker.component"; import { DateRangePickerComponent } from "./date-range-picker/date-range-picker.component"; +import { DemoCollapsibleComponent } from "./collapsible/demo-collapsible.component"; import { DemoSidebarComponent } from "./sidebar/demo-sidebar.component"; import { DemoDropdownComponent } from "./dropdown/demo-dropdown.component"; import { ExampleViewerComponent } from "./example-viewer/example-viewer.component"; @@ -47,7 +48,8 @@ import { StarkPrettyPrintModule, StarkSliderModule, StarkSvgViewBoxModule, - StarkTableModule + StarkTableModule, + StarkCollapsibleModule } from "@nationalbankbelgium/stark-ui"; import { MAT_DATE_FORMATS } from "@angular/material/core"; @@ -79,12 +81,14 @@ import { MAT_DATE_FORMATS } from "@angular/material/core"; StarkSliderModule, StarkSvgViewBoxModule, StarkTableModule, + StarkCollapsibleModule, StarkAppLogoutModule ], declarations: [ ActionBarComponent, DemoBreadcrumbComponent, ButtonComponent, + DemoCollapsibleComponent, DatePickerComponent, DateRangePickerComponent, DemoCardComponent, @@ -114,6 +118,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core"; DatePickerComponent, DateRangePickerComponent, DemoDropdownComponent, + DemoCollapsibleComponent, DemoTypographyComponent, ExampleViewerComponent, HeaderComponent, diff --git a/showcase/src/app/demo/index.ts b/showcase/src/app/demo/index.ts index f5f539bd3c..1cd7f14176 100644 --- a/showcase/src/app/demo/index.ts +++ b/showcase/src/app/demo/index.ts @@ -1,6 +1,7 @@ export * from "./action-bar"; export * from "./breadcrumb"; export * from "./button"; +export * from "./collapsible"; export * from "./colors"; export * from "./card"; export * from "./date-picker"; diff --git a/showcase/src/assets/examples/collapsible/collapsible-custom.css b/showcase/src/assets/examples/collapsible/collapsible-custom.css new file mode 100644 index 0000000000..8d6a06788e --- /dev/null +++ b/showcase/src/assets/examples/collapsible/collapsible-custom.css @@ -0,0 +1,8 @@ +.collapsible-demo-button { + margin-top: 16px; +} + +.collapsible-demo-line { + margin-top: 32px; + margin-bottom: 32px; +} diff --git a/showcase/src/assets/examples/collapsible/collapsible-custom.html b/showcase/src/assets/examples/collapsible/collapsible-custom.html new file mode 100644 index 0000000000..102a8fd5a6 --- /dev/null +++ b/showcase/src/assets/examples/collapsible/collapsible-custom.html @@ -0,0 +1,32 @@ + + {{ 'SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT' | translate }} + + +
+ + + {{ 'SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT' | translate }} + + + +
+ + {{ 'SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT' | translate }} + + diff --git a/showcase/src/assets/examples/collapsible/collapsible-custom.ts b/showcase/src/assets/examples/collapsible/collapsible-custom.ts new file mode 100644 index 0000000000..e9e08efc38 --- /dev/null +++ b/showcase/src/assets/examples/collapsible/collapsible-custom.ts @@ -0,0 +1,17 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: "showcase-demo-collapsible", + templateUrl: "./demo-collapsible.component.html" +}) +export class CollapsibleExample { + public collapsed: boolean[] = [true, false, true]; + + public constructor() { + // empty constructor + } + + public toggleCollapsible(nb: number): void { + this.collapsed[nb] = !this.collapsed[nb]; + } +} diff --git a/showcase/src/assets/examples/collapsible/collapsible-default.css b/showcase/src/assets/examples/collapsible/collapsible-default.css new file mode 100644 index 0000000000..efc9344607 --- /dev/null +++ b/showcase/src/assets/examples/collapsible/collapsible-default.css @@ -0,0 +1,3 @@ +.collapsible-demo-button { + margin-top: 16px; +} diff --git a/showcase/src/assets/examples/collapsible/collapsible-default.html b/showcase/src/assets/examples/collapsible/collapsible-default.html new file mode 100644 index 0000000000..bc1df260ed --- /dev/null +++ b/showcase/src/assets/examples/collapsible/collapsible-default.html @@ -0,0 +1,8 @@ + + {{ 'SHOWCASE.DEMO.COLLAPSIBLE.HTML_CONTENT' | translate }} + + diff --git a/showcase/src/assets/examples/collapsible/collapsible-default.ts b/showcase/src/assets/examples/collapsible/collapsible-default.ts new file mode 100644 index 0000000000..67fcc8738a --- /dev/null +++ b/showcase/src/assets/examples/collapsible/collapsible-default.ts @@ -0,0 +1,17 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: "showcase-demo-collapsible", + templateUrl: "./demo-collapsible.component.html" +}) +export class CollapsibleExample { + public collapsed: boolean = false; + + public constructor() { + // empty constructor + } + + public toggleCollapsible(): void { + this.collapsed = !this.collapsed; + } +} diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 0b2e61d49e..babe5465ba 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -30,6 +30,16 @@ "CODE": "Here, the code to display this card:", "TITLE": "Stark Cards" }, + "COLLAPSIBLE": { + "CLOSED": "Closed", + "CUSTOM_ICON": "Custom icon", + "DEFAULT_ICON": "Default icon", + "HTML_CONTENT": "Any HTML content", + "OPEN": "Open", + "TITLE_0": "Default icon collapsible title", + "TITLE_1": "Custom icon collapsible title", + "TOGGLE_COLLAPSIBLE": "Toggle collapsible" + }, "COLORS": { "ADVANCED": { "DETAILS": "Angular Material uses three color palettes: a primary palette, an accent palette and a warn palette. Stark gives you the ability to define those palettes through a SCSS map called $stark-base-theme. This map contains 3 properties, one for each Angular Material's palette and you need to use a SCSS function called mat-palette() in order to instantiate Angular Material theming the right way. Note that you need to import Angular Material's theming before using the mat-palette() function.", diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index a0d72e80ef..309c4fa14e 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -30,6 +30,16 @@ "CODE": "Voici le code correspondant à cette carte:", "TITLE": "Stark Cartes" }, + "COLLAPSIBLE": { + "CLOSED": "Fermé", + "CUSTOM_ICON": "Icône custom", + "DEFAULT_ICON": "Icône par défaut", + "HTML_CONTENT": "N'impoerte quel contenu HTML", + "OPEN": "Ouvert", + "TITLE_0": "Titre du collapsible avec icône par défaut", + "TITLE_1": "Titre du collapsible avec icône custom", + "TOGGLE_COLLAPSIBLE": "Ouvrir/fermer le collapsible" + }, "COLORS": { "ADVANCED": { "DETAILS": "Angular Material utilise trois palettes de couleurs: primary, accent et warn. Stark donne la possibilité de définir ces palettes de couleur via une map SCSS nommée $stark-base-theme. Cette map contient 3 propriétés, une pour chaque palette d'Angular Material et la fonction mat-palette() doit être utilisée pour configurer correctement Stark et Angular Material. A noter que cette fonction est définit par Angular Material donc le theme de Angular Material doit être importer au préalable.", diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 424cf2ab99..4a09c52833 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -30,6 +30,16 @@ "CODE": "Hier is de code om een kaart te tonen:", "TITLE": "Stark Kaarten" }, + "COLLAPSIBLE": { + "CLOSED": "Gesloten", + "CUSTOM_ICON": "Aangepast icon", + "DEFAULT_ICON": "Standaard pictogram", + "HTML_CONTENT": "Alle HTML-inhoud", + "OPEN": "Open", + "TITLE_0": "Standaard icon collapsible titel", + "TITLE_1": "Aangepast icon collapsible titel", + "TOGGLE_COLLAPSIBLE": "Collapsible omschakelen" + }, "COLORS": { "ADVANCED": { "DETAILS": "Angular Material gebruikt drie kleurenpaletten: een primair palet, een accentpalet en een waarschuwingspalet. Stark biedt je de mogelijkheid om deze paletten te definiëren aan de hand van een SCSS map met de naam $stark-base-theme. Deze map bevat 3 eigenschappen, één voor elk Angular Material palet. Je moet de SCSS functie met de naam mat-palette() gebruiken om de Angular Material thematisering op correcte wijze te instantiëren. Merk op dat je het thema van Angular Materiaal moet importeren voordat je de functie mat-palette() gebruikt.", diff --git a/showcase/src/styles/_stark-styles.scss b/showcase/src/styles/_stark-styles.scss index 83e92fc266..6bc83ddaa5 100644 --- a/showcase/src/styles/_stark-styles.scss +++ b/showcase/src/styles/_stark-styles.scss @@ -12,6 +12,8 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i @import "~@nationalbankbelgium/stark-ui/src/modules/app-sidebar/components/app-sidebar-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/app-sidebar/components/app-sidebar.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/breadcrumb/components/breadcrumb.component"; +@import "~@nationalbankbelgium/stark-ui/src/modules/collapsible/components/collapsible-theme"; +@import "~@nationalbankbelgium/stark-ui/src/modules/collapsible/components/collapsible.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/date-range-picker/components/date-range-picker.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/language-selector/components/language-selector.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/slider/components/slider-theme";