fix(core): update Layout Panel to latest design (#9499)

SAP · Mar 10, 2023 · 3e51e74 · 3e51e74
1 parent 52711cc
commit 3e51e74
Show file tree

Hide file tree

Showing 15 changed files with 201 additions and 32 deletions.
diff --git a/libs/core/src/lib/layout-panel/layout-panel-footer/layout-panel-footer.component.spec.ts b/libs/core/src/lib/layout-panel/layout-panel-footer/layout-panel-footer.component.spec.ts
@@ -1,28 +1,52 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { LayoutPanelFooterComponent, FooterPosition } from './layout-panel-footer.component';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 
-import { LayoutPanelFooterComponent } from './layout-panel-footer.component';
+@Component({
+    selector: 'fd-test-layout-panel-footer',
+    template: `<fd-layout-panel-footer [position]="position"> </fd-layout-panel-footer> `
+})
+class TestLayoutPanelFooterComponent {
+    @ViewChild(LayoutPanelFooterComponent, { static: true, read: ElementRef })
+    layoutPanelFooterElementRef: ElementRef;
+
+    position: FooterPosition;
+}
 
 describe('LayoutPanelFooterComponent', () => {
-    let component: LayoutPanelFooterComponent;
-    let fixture: ComponentFixture<LayoutPanelFooterComponent>;
+    let layoutPanelFooterElementRef: ElementRef;
+    let testComponent: TestLayoutPanelFooterComponent;
+    let fixture: ComponentFixture<TestLayoutPanelFooterComponent>;
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            declarations: [LayoutPanelFooterComponent]
+            declarations: [LayoutPanelFooterComponent, TestLayoutPanelFooterComponent]
         }).compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(LayoutPanelFooterComponent);
-        component = fixture.componentInstance;
+        fixture = TestBed.createComponent(TestLayoutPanelFooterComponent);
+        layoutPanelFooterElementRef = fixture.componentInstance.layoutPanelFooterElementRef;
+        testComponent = fixture.componentInstance;
         fixture.detectChanges();
     });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
+    it('Should create', () => {
+        expect(testComponent).toBeTruthy();
+        expect(layoutPanelFooterElementRef).toBeTruthy();
     });
 
-    it('should have panel footer class', () => {
-        expect(fixture.nativeElement.className).toBe('fd-layout-panel__footer');
+    it('should apply modifier class for footer content position start/left', () => {
+        testComponent.position = 'start';
+        fixture.detectChanges();
+        expect(
+            layoutPanelFooterElementRef.nativeElement.classList.contains('fd-layout-panel__footer--start')
+        ).toBeTrue();
+    });
+
+    it('should apply modifier class for footer content position end/right', () => {
+        testComponent.position = 'end';
+        fixture.detectChanges();
+        expect(layoutPanelFooterElementRef.nativeElement.classList.contains('fd-layout-panel__footer--end')).toBeTrue();
     });
 });
diff --git a/libs/core/src/lib/layout-panel/layout-panel-footer/layout-panel-footer.component.ts b/libs/core/src/lib/layout-panel/layout-panel-footer/layout-panel-footer.component.ts
@@ -1,24 +1,52 @@
-import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';
-
-/**
- * Layout Panel footer can be utilized for pagination, secondary actions, add more data, etc.
- *
- * ```html
- * <fd-layout-panel>
- *     <fd-layout-panel-footer>
- *         Some text can go here!
- *     </fd-layout-panel-footer>
- * </fd-layout-panel>
- * ```
- */
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { applyCssClass } from '@fundamental-ngx/cdk/utils';
+import { CssClassBuilder } from '@fundamental-ngx/cdk/utils';
+import { Nullable } from '@fundamental-ngx/cdk/utils';
+
+export type FooterPosition = 'start' | 'end';
+
 @Component({
     selector: 'fd-layout-panel-footer',
     templateUrl: './layout-panel-footer.component.html',
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class LayoutPanelFooterComponent {
+export class LayoutPanelFooterComponent implements OnInit, CssClassBuilder {
+    /** Apply user custom styles */
+    @Input()
+    class: string;
+
+    /**
+     * Footer variations, can be start (left aligned), end (right aligned) or null for default.
+     * The default value will render the content of the footer in the middle.
+     */
+    @Input() position: Nullable<FooterPosition>;
+
+    /** @hidden */
+    constructor(private readonly _elementRef: ElementRef<HTMLElement>) {}
+
+    /** @hidden */
+    ngOnInit(): void {
+        this.buildComponentCssClass();
+    }
+
+    /** @hidden */
+    ngOnChanges(): void {
+        this.buildComponentCssClass();
+    }
+
+    /** @hidden */
+    @applyCssClass
+    buildComponentCssClass(): string[] {
+        return [
+            'fd-layout-panel__footer',
+            this.position ? `fd-layout-panel__footer--${this.position}` : '',
+            this.class
+        ];
+    }
+
     /** @hidden */
-    @HostBinding('class.fd-layout-panel__footer')
-    fdLayoutPanelFooterClass = true;
+    elementRef(): ElementRef<HTMLElement> {
+        return this._elementRef;
+    }
 }
diff --git a/libs/core/src/lib/layout-panel/layout-panel-title/layout-panel-title.directive.spec.ts b/libs/core/src/lib/layout-panel/layout-panel-title/layout-panel-title.directive.spec.ts
@@ -4,7 +4,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { LayoutPanelModule } from '../layout-panel.module';
 
 @Component({
-    template: ` <h1 #directiveElement fd-layout-panel-title>Test Text</h1> `
+    template: ` <h5 #directiveElement fd-layout-panel-title>Test Text</h5> `
 })
 class TestComponent {
     @ViewChild('directiveElement')
@@ -33,6 +33,6 @@ describe('LayoutPanelTitleDirective', () => {
     });
 
     it('should assign class', () => {
-        expect(component.ref.nativeElement.className).toBe('fd-layout-panel__title');
+        expect(component.ref.nativeElement.className).toBe('fd-title fd-title--h5');
     });
 });
diff --git a/libs/core/src/lib/layout-panel/layout-panel-title/layout-panel-title.directive.ts b/libs/core/src/lib/layout-panel/layout-panel-title/layout-panel-title.directive.ts
@@ -15,6 +15,6 @@ import { Directive, HostBinding } from '@angular/core';
 })
 export class LayoutPanelTitleDirective {
     /** @hidden */
-    @HostBinding('class.fd-layout-panel__title')
-    fdLayoutPanelTitleClass = true;
+    @HostBinding('class')
+    fdLayoutPanelTitleClass = 'fd-title fd-title--h5';
 }
diff --git a/libs/core/src/lib/layout-panel/layout-panel.component.scss b/libs/core/src/lib/layout-panel/layout-panel.component.scss
@@ -1,4 +1,5 @@
 @import 'fundamental-styles/dist/layout-panel';
+@import 'fundamental-styles/dist/title';
 
 .fd-has-display-block {
     display: block;

diff --git a/libs/core/src/lib/layout-panel/layout-panel.component.spec.ts b/libs/core/src/lib/layout-panel/layout-panel.component.spec.ts
@@ -25,4 +25,10 @@ describe('LayoutPanelComponent', () => {
     it('should assign class', () => {
         expect(fixture.nativeElement.className).toContain('fd-layout-panel');
     });
+
+    it('should apply transparent background', () => {
+        component.transparent = true;
+        fixture.detectChanges();
+        expect(fixture.nativeElement.className).toContain('fd-layout-panel--transparent');
+    });
 });
diff --git a/libs/core/src/lib/layout-panel/layout-panel.component.ts b/libs/core/src/lib/layout-panel/layout-panel.component.ts
@@ -9,6 +9,8 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 
+let layoutPanelUniqueId = 0;
+
 /**
  * Layout Panels are used to encapsulate part of the content, form elements, lists, collections, etc., on a page.
  */
@@ -27,10 +29,19 @@ export class LayoutPanelComponent implements OnChanges, OnInit {
     @Input()
     backgroundImage: string;
 
+    /** Id for the layout panel element. */
+    @Input()
+    id: string = 'fd-layout-panel-' + layoutPanelUniqueId++;
+
     /** @hidden */
     @HostBinding('class.fd-layout-panel')
     fdLayoutPanelClass = true;
 
+    /** Whether the background of the panel should be transparent. */
+    @Input()
+    @HostBinding('class.fd-layout-panel--transparent')
+    transparent = false;
+
     /** @hidden */
     constructor(private elRef: ElementRef) {}
 

diff --git a/libs/docs/core/layout-panel/examples/layout-panel-example.component.html b/libs/docs/core/layout-panel/examples/layout-panel-example.component.html
@@ -1,7 +1,7 @@
 <fd-layout-panel>
     <fd-layout-panel-header>
         <fd-layout-panel-head>
-            <h2 fd-layout-panel-title>Layout Panel Title</h2>
+            <h5 fd-layout-panel-title>Layout Panel Title</h5>
             <fd-layout-panel-description>Layout Panel Description</fd-layout-panel-description>
         </fd-layout-panel-head>
         <fd-layout-panel-actions> Layout Panel Actions </fd-layout-panel-actions>

diff --git a/libs/docs/core/layout-panel/examples/layout-panel-footer-variations-example.component.html b/libs/docs/core/layout-panel/examples/layout-panel-footer-variations-example.component.html
@@ -0,0 +1,25 @@
+<fd-layout-panel>
+    <fd-layout-panel-header>
+        <fd-layout-panel-head>
+            <h5 fd-layout-panel-title>Layout Panel Title</h5>
+            <fd-layout-panel-description>Layout Panel Description</fd-layout-panel-description>
+        </fd-layout-panel-head>
+        <fd-layout-panel-actions> Layout Panel Actions </fd-layout-panel-actions>
+    </fd-layout-panel-header>
+    <fd-layout-panel-filters> Layout Panel Filters </fd-layout-panel-filters>
+    <fd-layout-panel-body> Layout Panel Body </fd-layout-panel-body>
+    <fd-layout-panel-footer position="start"> Layout Panel Footer Start </fd-layout-panel-footer>
+</fd-layout-panel>
+<br /><br />
+<fd-layout-panel>
+    <fd-layout-panel-header>
+        <fd-layout-panel-head>
+            <h5 fd-layout-panel-title>Layout Panel Title</h5>
+            <fd-layout-panel-description>Layout Panel Description</fd-layout-panel-description>
+        </fd-layout-panel-head>
+        <fd-layout-panel-actions> Layout Panel Actions </fd-layout-panel-actions>
+    </fd-layout-panel-header>
+    <fd-layout-panel-filters> Layout Panel Filters </fd-layout-panel-filters>
+    <fd-layout-panel-body> Layout Panel Body </fd-layout-panel-body>
+    <fd-layout-panel-footer position="end"> Layout Panel Footer End</fd-layout-panel-footer>
+</fd-layout-panel>
diff --git a/libs/docs/core/layout-panel/examples/layout-panel-footer-variations-example.component.ts b/libs/docs/core/layout-panel/examples/layout-panel-footer-variations-example.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-layout-panel-footer-variations-example',
+    templateUrl: './layout-panel-footer-variations-example.component.html'
+})
+export class LayoutPanelFooterVariationsExampleComponent {}
diff --git a/libs/docs/core/layout-panel/examples/layout-panel-transparent-example.component.html b/libs/docs/core/layout-panel/examples/layout-panel-transparent-example.component.html
@@ -0,0 +1,12 @@
+<fd-layout-panel [transparent]="true">
+    <fd-layout-panel-header>
+        <fd-layout-panel-head>
+            <h5 fd-layout-panel-title>Layout Panel Title</h5>
+            <fd-layout-panel-description>Layout Panel Description</fd-layout-panel-description>
+        </fd-layout-panel-head>
+        <fd-layout-panel-actions> Layout Panel Actions </fd-layout-panel-actions>
+    </fd-layout-panel-header>
+    <fd-layout-panel-filters> Layout Panel Filters </fd-layout-panel-filters>
+    <fd-layout-panel-body> Layout Panel Body </fd-layout-panel-body>
+    <fd-layout-panel-footer> Layout Panel Footer </fd-layout-panel-footer>
+</fd-layout-panel>
diff --git a/libs/docs/core/layout-panel/examples/layout-panel-transparent-example.component.ts b/libs/docs/core/layout-panel/examples/layout-panel-transparent-example.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-layout-panel-transparent-example',
+    templateUrl: './layout-panel-transparent-example.component.html'
+})
+export class LayoutPanelTransparentExampleComponent {}
diff --git a/libs/docs/core/layout-panel/layout-panel-docs.component.html b/libs/docs/core/layout-panel/layout-panel-docs.component.html
@@ -15,3 +15,29 @@
     <fd-layout-panel-edge-bleed-example></fd-layout-panel-edge-bleed-example>
 </component-example>
 <code-example [exampleFiles]="tableBleed"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="transparent" componentName="layout-panel"> Layout Panel Transparent</fd-docs-section-title>
+<description>
+    For Layout Panel with transparent background set the <code>[transparent]</code>property of
+    <code>fd-layout-panel</code> to true.
+</description>
+<component-example>
+    <fd-layout-panel-transparent-example></fd-layout-panel-transparent-example>
+</component-example>
+<code-example [exampleFiles]="panelTransparent"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="footer-variations" componentName="layout-panel">
+    Layout Panel Footer Variations</fd-docs-section-title
+>
+<description>
+    By default, the content of the footer is rendered in the center. Use the <code>position</code> property of the
+    <code>fd-layout-panel-footer</code> to place the content of the footer to the left (start) or to the right (end).
+</description>
+<component-example>
+    <fd-layout-panel-footer-variations-example></fd-layout-panel-footer-variations-example>
+</component-example>
+<code-example [exampleFiles]="panelFooterVariations"></code-example>
diff --git a/libs/docs/core/layout-panel/layout-panel-docs.component.ts b/libs/docs/core/layout-panel/layout-panel-docs.component.ts
@@ -5,6 +5,8 @@ import { ExampleFile, getAssetFromModuleAssets } from '@fundamental-ngx/docs/sha
 const panelEdgeBleedSrc = 'layout-panel-edge-bleed-example.component.html';
 const panelEdgeBleedSrcTs = 'layout-panel-edge-bleed-example.component.ts';
 const panelSrc = 'layout-panel-example.component.html';
+const panelTransparentSrc = 'layout-panel-transparent-example.component.html';
+const panelFooterVariationsSrc = 'layout-panel-footer-variations-example.component.html';
 
 @Component({
     selector: 'app-layout-panel',
@@ -28,4 +30,20 @@ export class LayoutPanelDocsComponent {
             typescriptFileCode: getAssetFromModuleAssets(panelEdgeBleedSrcTs)
         }
     ];
+
+    panelTransparent: ExampleFile[] = [
+        {
+            language: 'html',
+            fileName: 'layout-panel-transparent-example',
+            code: getAssetFromModuleAssets(panelTransparentSrc)
+        }
+    ];
+
+    panelFooterVariations: ExampleFile[] = [
+        {
+            language: 'html',
+            fileName: 'layout-panel-footer-variations-example',
+            code: getAssetFromModuleAssets(panelFooterVariationsSrc)
+        }
+    ];
 }
diff --git a/libs/docs/core/layout-panel/layout-panel-docs.module.ts b/libs/docs/core/layout-panel/layout-panel-docs.module.ts
@@ -6,6 +6,8 @@ import { LayoutPanelDocsHeaderComponent } from './layout-panel-docs-header/layou
 import { LayoutPanelDocsComponent } from './layout-panel-docs.component';
 import { LayoutPanelExampleComponent } from './examples/layout-panel-examples.component';
 import { LayoutPanelEdgeBleedExampleComponent } from './examples/layout-panel-edge-bleed-example.component';
+import { LayoutPanelTransparentExampleComponent } from './examples/layout-panel-transparent-example.component';
+import { LayoutPanelFooterVariationsExampleComponent } from './examples/layout-panel-footer-variations-example.component';
 import { LayoutPanelModule } from '@fundamental-ngx/core/layout-panel';
 import { TableModule } from '@fundamental-ngx/core/table';
 
@@ -27,7 +29,9 @@ const routes: Routes = [
         LayoutPanelDocsComponent,
         LayoutPanelExampleComponent,
         LayoutPanelDocsHeaderComponent,
-        LayoutPanelEdgeBleedExampleComponent
+        LayoutPanelEdgeBleedExampleComponent,
+        LayoutPanelTransparentExampleComponent,
+        LayoutPanelFooterVariationsExampleComponent
     ],
     providers: [currentComponentProvider('layout-panel')]
 })