feat: make page header more customizable + add grid layout capabiliti…

…es (#274)

* feat: allow specification of valueTooltip and labelTooltip

* feat: allow adding action button to header detail item

* feat: add improved grid layout capabilities to page header

* fix: fix GitHub workflow config for SB deploys

* fix: implement chromatic secret check

* fix: fix step name

* fix: improve storybook CI

* fix: improve storybook CI

* fix: remove redundant file

.github/workflows/storybook.yml

@@ -1,4 +1,4 @@
-name: Deploy Storybook
+name: Build and deploy Storybook
 on: 
   push:
     branches:

libs/angular-accelerator/src/lib/components/page-header/page-header.component.html

@@ -88,28 +88,38 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
   </div>
 
   <div
-    class="object-panel flex-column md:flex-row"
-    [class.justify-content-evenly]="objectDetails"
-    [class.justify-content-start]="!objectDetails"
+    class="object-panel"
+    [ngClass]="getObjectPanelLayoutClasses()"
   >
     <ng-container *ngIf="objectDetails">
       <div
-        class="object-info flex flex-row md:flex-column align-items-baseline md:align-items-center justify-content-between"
+        class="object-info"
+        [ngClass]="getObjectInfoLayoutClasses()"
         *ngFor="let item of objectDetails"
       >
-        <label class="flex font-medium text-600" name="object-detail-label"
-          >{{ item.label | dynamicPipe:item.labelPipe }}</label
+        <span
+          class="flex font-medium text-600 object-info-grid-label"
+          name="object-detail-label"
+          [title]="item.labelTooltip || ''"
+          >{{ item.label | dynamicPipe:item.labelPipe }}</span
         >
         <span
           *ngIf="item.icon || item.value"
-          class="flex text-900 mt-2"
+          class="flex text-900 align-items-center gap-2 object-info-grid-value"
           [ngClass]="generateItemStyle(item)"
-          [title]="item.tooltip || ''"
+          [title]="item.valueTooltip || item.tooltip || ''"
           name="object-detail-value"
         >
           <i *ngIf="item.icon" class="{{item.icon}}" name="object-detail-icon"></i>
-          {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}</span
-        >
+          {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}
+          <p-button
+            *ngIf="item.actionItemIcon && item.actionItemCallback"
+            [icon]="item.actionItemIcon"
+            styleClass="p-button-text p-0 w-full"
+            [title]="item.actionItemTooltip || ''"
+            (onClick)="item.actionItemCallback()"
+          ></p-button>
+        </span>
       </div>
     </ng-container>
     <ng-content></ng-content>

libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss

@@ -84,7 +84,6 @@
   .object-panel {
     border-top: 1px solid #cdd0d3;
     padding: 1rem;
-    display: flex;
 
     &:empty {
       display: none;
@@ -103,3 +102,15 @@
 .scale {
   transform: scale(2);
 }
+
+.object-info-grid-label {
+  flex: 1
+}
+
+.object-info-grid-value {
+  flex: 3;
+}
+
+.min-w-120 {
+  min-width: 120px !important;
+}

libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts

@@ -3,7 +3,6 @@ import { importProvidersFrom } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouterModule } from '@angular/router'
-import { TranslatePipe } from '@ngx-translate/core'
 import { action } from '@storybook/addon-actions'
 import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular'
 import { PrimeIcons } from 'primeng/api'
@@ -105,20 +104,27 @@ const demoFields: ObjectDetailItem[] = [
   {
     label: 'Venue',
     value: 'AIE Munich ',
+    tooltip: 'AIE Munich',
+    labelTooltip: 'Label Tooltip',
+    actionItemIcon: PrimeIcons.COPY,
+    actionItemTooltip: 'Copy to clipboard',
+    actionItemCallback: () => {console.log('Copy to clipboard')},
   },
   {
     label: 'Status',
-    labelPipe: TranslatePipe,
     value: 'Confirmed',
+    icon: PrimeIcons.CHECK_CIRCLE
   },
   {
     label: 'Start Date',
     value: '14.3.2022',
+    icon: PrimeIcons.CALENDAR
   },
   {
     label: 'End Date',
     value: new Date().toISOString(),
     valuePipe: DatePipe,
+    icon: PrimeIcons.CALENDAR
   },
 ]
 
@@ -342,3 +348,55 @@ export const WithObjectDetailsAndIcons = {
     showBreadcrumbs: false,
   },
 }
+
+export const DefaultLayout = {
+  render: Template,
+
+  args: {
+    header: 'My title',
+    subheader: 'My subtitle',
+    loading: false,
+    objectDetails: demoFields,
+    showBreadcrumbs: false,
+  },
+}
+
+export const ForcedColumnLayout = {
+  render: Template,
+
+  args: {
+    header: 'My title',
+    subheader: 'My subtitle',
+    loading: false,
+    objectDetails: demoFields,
+    showBreadcrumbs: false,
+    enableGridView: false
+  },
+}
+
+export const ForcedGridLayout = {
+  render: Template,
+
+  args: {
+    header: 'My title',
+    subheader: 'My subtitle',
+    loading: false,
+    objectDetails: demoFields,
+    showBreadcrumbs: false,
+    enableGridView: true
+  },
+}
+
+export const ForcedGridLayoutWithColumnAmount = {
+  render: Template,
+
+  args: {
+    header: 'My title',
+    subheader: 'My subtitle',
+    loading: false,
+    objectDetails: demoFields,
+    showBreadcrumbs: false,
+    enableGridView: true,
+    gridLayoutDesktopColumns: 4,
+  },
+}

libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts

@@ -46,19 +46,29 @@ export interface Action {
 export interface ObjectDetailItem {
   label: string
   value?: string
+  /**
+   * @deprecated Use `valueTooltip` instead
+   */
   tooltip?: string
+  labelTooltip?: string
+  valueTooltip?: string
   icon?: PrimeIcon
   labelPipe?: Type<any>
   valuePipe?: Type<any>
   valuePipeArgs?: string
   valueCssClass?: string
+  actionItemIcon?: PrimeIcon
+  actionItemCallback?: () => void
+  actionItemTooltip?: string
 }
 
 export interface HomeItem {
   menuItem: MenuItem
   page?: string
 }
 
+export type GridColumnOptions = 1 | 2 | 3 | 4 | 6 | 12
+
 @Component({
   selector: 'ocx-page-header',
   templateUrl: './page-header.component.html',
@@ -108,6 +118,12 @@ export class PageHeaderComponent implements OnInit, OnChanges {
   @Input()
   manualBreadcrumbs = false
 
+  @Input()
+  enableGridView: undefined | boolean
+
+  @Input()
+  gridLayoutDesktopColumns: undefined | GridColumnOptions
+
   @Output()
   save = new EventEmitter()
 
@@ -124,7 +140,17 @@ export class PageHeaderComponent implements OnInit, OnChanges {
 
   home$!: Observable<HomeItem>
 
-  figureImageLoadError = false;
+  figureImageLoadError = false
+
+  objectPanelGridLayoutClasses = 'grid row-gap-2 m-0'
+  objectPanelColumnLayoutClasses = 'flex flex-row justify-content-between overflow-x-auto'
+
+  objectPanelDefaultLayoutClasses = 'flex flex-column row-gap-2 md:flex-row md:justify-content-between'
+
+  objectInfoGridLayoutClasses = 'col-12 flex gap-4 md:col-6 align-items-center p-0'
+  objectInfoColumnLayoutClasses = 'flex flex-column align-items-center gap-2 min-w-120'
+
+  objectInfoDefaultLayoutClasses = 'flex flex-row md:flex-column md:align-items-center md:gap-2'
 
   protected breadcrumbs: BreadcrumbService
 
@@ -186,6 +212,28 @@ export class PageHeaderComponent implements OnInit, OnChanges {
     return style
   }
 
+  public getObjectPanelLayoutClasses() {
+    if (this.enableGridView) {
+      return this.objectPanelGridLayoutClasses
+    }
+    if (this.enableGridView === false) {
+      return this.objectPanelColumnLayoutClasses
+    }
+    return this.objectPanelDefaultLayoutClasses
+  }
+
+  public getObjectInfoLayoutClasses() {
+    if (this.enableGridView) {
+      return `${this.objectInfoGridLayoutClasses} lg:col-${
+        this.gridLayoutDesktopColumns ? 12 / this.gridLayoutDesktopColumns : 4
+      }`
+    }
+    if (this.enableGridView === false) {
+      return this.objectInfoColumnLayoutClasses
+    }
+    return this.objectInfoDefaultLayoutClasses
+  }
+
   /**
    * Generates a list of actions that should be rendered in an overflow menu
    */