fix: allow different panel headers (#765)

* panel docs + small fixes

* new docs fix

docs/modules/documentation/containers/panel/examples/panel-example.component.html

@@ -1,7 +1,7 @@
 <fd-panel>
     <fd-panel-header>
         <fd-panel-head>
-            <fd-panel-title>Panel Title</fd-panel-title>
+            <h2 fd-panel-title>Panel Title</h2>
             <fd-panel-description>Panel Description</fd-panel-description>
         </fd-panel-head>
         <fd-panel-actions>

docs/modules/documentation/utilities/api-files.ts

@@ -128,7 +128,7 @@ export const API_FILES = {
         'PanelGridComponent',
         'PanelHeaderComponent',
         'PanelHeadComponent',
-        'PanelTitleComponent'
+        'PanelTitleDirective'
     ],
     popover: [
         'PopoverComponent',

library/src/lib/panel/panel-actions.component.spec.ts → library/src/lib/panel/panel-actions/panel-actions.component.spec.ts

@@ -21,4 +21,8 @@ describe('PanelActionsComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should have class assigned', () => {
+        expect(fixture.nativeElement.className).toBe('fd-panel__actions');
+    });
 });

library/src/lib/panel/panel-actions/panel-actions.component.ts

@@ -0,0 +1,25 @@
+import { Component, HostBinding } from '@angular/core';
+
+/**
+ * Panel level actions such as add, remove, delete, sort, etc.
+ *
+ * ```html
+ * <fd-panel>
+ *     <fd-panel-header>
+ *         <fd-panel-actions>
+ *             <button fd-button (click)="action()">Action</button>
+ *         </fd-panel-actions>
+ *     </fd-panel-header>
+ * </fd-panel>
+ * ```
+ */
+@Component({
+    selector: 'fd-panel-actions',
+    templateUrl: './panel-actions.component.html'
+})
+export class PanelActionsComponent {
+
+    /** @hidden */
+    @HostBinding('class.fd-panel__actions')
+    fdPanelActionsClass: boolean = true;
+}

library/src/lib/panel/panel-body.component.spec.ts → library/src/lib/panel/panel-body/panel-body.component.spec.ts

@@ -21,4 +21,14 @@ describe('PanelBodyComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should have body class', () => {
+        expect(fixture.nativeElement.className).toBe('fd-panel__body');
+    });
+
+    it('should support edge bleeding', () => {
+        component.bleed = true;
+        fixture.detectChanges();
+        expect(fixture.nativeElement.className).toContain('fd-panel__body--bleed');
+    });
 });

library/src/lib/panel/panel-body/panel-body.component.ts

@@ -0,0 +1,30 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+/**
+ * Main content of the panel can that hold lists, table, tree, text, form or any other information.
+ *
+ * ```html
+ * <fd-panel>
+ *     <fd-panel-body>
+ *         Some text can go here!
+ *     </fd-panel-body>
+ * </fd-panel>
+ * ```
+ */
+@Component({
+    selector: 'fd-panel-body',
+    templateUrl: './panel-body.component.html',
+    styles: [':host {display: block;}']
+})
+export class PanelBodyComponent {
+
+    /** @hidden */
+    @HostBinding('class.fd-panel__body')
+    fdPanelBodyClass: boolean = true;
+
+    /** Whether the edges of the panel should have bleeding padding. */
+    @Input()
+    @HostBinding('class.fd-panel__body--bleed')
+    bleed: boolean = false;
+
+}

library/src/lib/panel/panel-description/panel-description.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+/**
+ * Description of the panel title.
+ *
+ * ```html
+ * <fd-panel>
+ *     <fd-panel-header>
+ *         <fd-panel-head>
+ *             <fd-panel-description>This is a description for a panel title!</fd-panel-description>
+ *         </fd-panel-head>
+ *     </fd-panel-header>
+ * </fd-panel>
+ * ```
+ */
+@Component({
+    selector: 'fd-panel-description',
+    templateUrl: './panel-description.component.html'
+})
+export class PanelDescriptionComponent {}

library/src/lib/panel/panel-filters.component.spec.ts → library/src/lib/panel/panel-filters/panel-filters.component.spec.ts

@@ -21,4 +21,8 @@ describe('PanelFiltersComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should have panel filters class', () => {
+        expect(fixture.nativeElement.className).toBe('fd-panel__filters');
+    });
 });

library/src/lib/panel/panel-filters/panel-filters.component.ts

@@ -0,0 +1,24 @@
+import { Component, HostBinding } from '@angular/core';
+
+/**
+ * Panel level filters that is specific to the data being displayed within the panel.
+ *
+ * ```html
+ * <fd-panel>
+ *     <fd-panel-filters>
+ *         Some text can go here!
+ *     </fd-panel-filters>
+ * </fd-panel>
+ * ```
+ */
+@Component({
+    selector: 'fd-panel-filters',
+    templateUrl: './panel-filters.component.html',
+    styles: [':host {display: block}']
+})
+export class PanelFiltersComponent {
+
+    /** @hidden */
+    @HostBinding('class.fd-panel__filters')
+    fdPanelFiltersClass: boolean = true;
+}

library/src/lib/panel/panel-footer.component.spec.ts → library/src/lib/panel/panel-footer/panel-footer.component.spec.ts

@@ -21,4 +21,8 @@ describe('PanelFooterComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should have panel footer class', () => {
+        expect(fixture.nativeElement.className).toBe('fd-panel__footer');
+    });
 });

library/src/lib/panel/panel-footer/panel-footer.component.ts

@@ -0,0 +1,23 @@
+import { Component, HostBinding } from '@angular/core';
+
+/**
+ * Panel footer can be utilized for pagination, secondary actions, add more data, etc.
+ *
+ * ```html
+ * <fd-panel>
+ *     <fd-panel-footer>
+ *         Some text can go here!
+ *     </fd-panel-footer>
+ * </fd-panel>
+ * ```
+ */
+@Component({
+    selector: 'fd-panel-footer',
+    templateUrl: './panel-footer.component.html'
+})
+export class PanelFooterComponent {
+
+    /** @hidden */
+    @HostBinding('class.fd-panel__footer')
+    fdPanelFooterClass: boolean = true;
+}

library/src/lib/panel/panel-grid.component.spec.ts → library/src/lib/panel/panel-grid/panel-grid.component.spec.ts

@@ -25,7 +25,6 @@ describe('PanelGridComponent', () => {
         expect(component).toBeTruthy();
         component.ngOnInit();
         expect(component._setProperties).toHaveBeenCalled();
-        expect(component._addClassToElement).toHaveBeenCalledWith('fd-panel-grid');
     });
 
     it('should apply the appropriate classes', () => {
@@ -34,6 +33,5 @@ describe('PanelGridComponent', () => {
         component.ngOnInit();
         expect(component._setProperties).toHaveBeenCalled();
         expect(component._addClassToElement).toHaveBeenCalledWith('fd-panel-grid--2col');
-        expect(component._addClassToElement).toHaveBeenCalledWith('fd-panel-grid--nogap');
     });
 });

library/src/lib/panel/panel-grid/panel-grid.component.ts

@@ -0,0 +1,37 @@
+import { Component, ElementRef, HostBinding, Input } from '@angular/core';
+import { AbstractFdNgxClass } from '../../utils/abstract-fd-ngx-class';
+
+/**
+ * Use a panel grid to arrange panels evenly in a grid layout.
+ */
+@Component({
+    selector: 'fd-panel-grid',
+    templateUrl: './panel-grid.component.html'
+})
+export class PanelGridComponent extends AbstractFdNgxClass {
+
+    /** Number of columns for the grid. */
+    @Input()
+    col: number;
+
+    /** Whether the grid shoul have a gap. */
+    @Input()
+    @HostBinding('class.fd-panel-grid--nogap')
+    nogap: boolean = false;
+
+    /** @hidden */
+    @HostBinding('class.fd-panel-grid')
+    fdPanelGridClass: boolean = true;
+
+    /** @hidden */
+    constructor(private elementRef: ElementRef) {
+        super(elementRef);
+    }
+
+    /** @hidden */
+    _setProperties() {
+        if (this.col) {
+            this._addClassToElement('fd-panel-grid--' + this.col + 'col');
+        }
+    }
+}

library/src/lib/panel/panel-head.component.spec.ts → library/src/lib/panel/panel-head/panel-head.component.spec.ts

@@ -21,4 +21,8 @@ describe('PanelHeadComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should have panel head class', () => {
+        expect(fixture.nativeElement.className).toBe('fd-panel__head');
+    });
 });

library/src/lib/panel/panel-head/panel-head.component.ts

@@ -0,0 +1,25 @@
+import { Component, HostBinding } from '@angular/core';
+
+/**
+ * Container for title and description.
+ *
+ * ```html
+ * <fd-panel>
+ *     <fd-panel-header>
+ *         <fd-panel-head>
+ *             <fd-panel-title>Title!</fd-panel-title>
+ *         </fd-panel-head>
+ *     </fd-panel-header>
+ * </fd-panel>
+ * ```
+ */
+@Component({
+    selector: 'fd-panel-head',
+    templateUrl: './panel-head.component.html'
+})
+export class PanelHeadComponent {
+
+    /** @hidden */
+    @HostBinding('class.fd-panel__head')
+    fdPanelHeadClass = true;
+}

library/src/lib/panel/panel-header.component.spec.ts → library/src/lib/panel/panel-header/panel-header.component.spec.ts

@@ -21,4 +21,8 @@ describe('PanelHeaderComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should have panel head class', () => {
+        expect(fixture.nativeElement.className).toBe('fd-panel__header');
+    });
 });