feat(core/page-header): add page-header (#526)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · May 22, 2023 · cc6164e · cc6164e
1 parent 80ee6f9
commit cc6164e
Show file tree

Hide file tree

Showing 32 changed files with 744 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "sonarqube": "sonar-scanner",
     "visual-regression-ci": "npx playwright install chromium && yarn workspace @siemens/ix test:e2e && yarn workspace @siemens/ix-aggrid test:e2e",
     "visual-regression": "docker run --rm --network host -v $(pwd):/work/ -w /work mcr.microsoft.com/playwright:v1.32.1-focal /bin/bash -c \"CI=TRUE npm run visual-regression-ci\"",
+    "visual-regression-windows": "docker run --rm --network host -v %cd%/../..:/work/ -w /work mcr.microsoft.com/playwright:v1.32.1-focal /bin/bash -c \"CI=TRUE npm run visual-regression-ci\"",
     "test": "turbo run test",
     "prepare": "husky install"
   },

diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -56,6 +56,8 @@ import MapNavigationOverlay from 'src/preview-examples/map-navigation-overlay';
 import MessageBar from 'src/preview-examples/message-bar';
 import Modal from 'src/preview-examples/modal';
 import ModalByInstance from 'src/preview-examples/modal-by-instance';
+import PageHeader from 'src/preview-examples/page-header';
+import PageHeaderNoBack from 'src/preview-examples/page-header-no-back';
 import Pill from 'src/preview-examples/pill';
 import PopoverNews from 'src/preview-examples/popover-news';
 import Radiobutton from 'src/preview-examples/radio-button';
@@ -268,6 +270,8 @@ const routes: Routes = [
       { path: 'tooltip', component: Tooltip },
       { path: 'tooltip-title', component: TooltipTitle },
       { path: 'modal-by-instance', component: ModalByInstance },
+      { path: 'page-header', component: PageHeader },
+      { path: 'page-header-no-back', component: PageHeaderNoBack },
       { path: 'empty-state', component: EmptyState },
       { path: 'empty-state-compact', component: EmptyStateCompact },
       { path: 'empty-state-compact-break', component: EmptyStateCompactBreak },

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -64,6 +64,8 @@ import MessageBar from 'src/preview-examples/message-bar';
 import Modal from 'src/preview-examples/modal';
 import ModalByInstance from 'src/preview-examples/modal-by-instance';
 import ModalByInstanceExample from 'src/preview-examples/modal-by-instance-content';
+import PageHeader from 'src/preview-examples/page-header';
+import PageHeaderNoBack from 'src/preview-examples/page-header-no-back';
 import Pill from 'src/preview-examples/pill';
 import PopoverNews from 'src/preview-examples/popover-news';
 import Radiobutton from 'src/preview-examples/radio-button';
@@ -183,9 +185,11 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     TooltipTitle,
     ModalByInstance,
     ModalByInstanceExample,
+    PageHeader,
     EmptyState,
     EmptyStateCompact,
     EmptyStateCompactBreak,
+    PageHeaderNoBack,
   ],
   imports: [
     BrowserModule,

diff --git a/packages/angular-test-app/src/preview-examples/page-header-no-back.html b/packages/angular-test-app/src/preview-examples/page-header-no-back.html
@@ -0,0 +1,15 @@
+<ix-page-header
+  variant="Secondary"
+  headerTitle="content title"
+  headerSubtitle="subtitle content"
+>
+  <ix-icon-button icon="pen" ghost="true" variant="Primary">
+    Button1
+  </ix-icon-button>
+  <ix-icon-button icon="trashcan" ghost="true" variant="Primary">
+    Button2
+  </ix-icon-button>
+  <ix-icon-button icon="context-menu" ghost="true" variant="Primary">
+    Button3
+  </ix-icon-button>
+</ix-page-header>
diff --git a/packages/angular-test-app/src/preview-examples/page-header-no-back.ts b/packages/angular-test-app/src/preview-examples/page-header-no-back.ts
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './page-header-no-back.html',
+})
+export default class PageHeaderNoBack {}
diff --git a/packages/angular-test-app/src/preview-examples/page-header.html b/packages/angular-test-app/src/preview-examples/page-header.html
@@ -0,0 +1,9 @@
+<ix-page-header
+  hasBackButton="true"
+  headerTitle="content title"
+  headerSubtitle="subtitle content"
+>
+  <ix-button ghost="true">Button1</ix-button>
+  <ix-button ghost="true">Button2</ix-button>
+  <ix-button ghost="true">Button3</ix-button>
+</ix-page-header>
diff --git a/packages/angular-test-app/src/preview-examples/page-header.ts b/packages/angular-test-app/src/preview-examples/page-header.ts
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './page-header.html',
+})
+export default class PageHeader {}
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -1321,6 +1321,34 @@ export class IxModalExample {
 export declare interface IxModalExample extends Components.IxModalExample {}
 
 
+@ProxyCmp({
+  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant']
+})
+@Component({
+  selector: 'ix-page-header',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant'],
+})
+export class IxPageHeader {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['backButtonClick']);
+  }
+}
+
+
+export declare interface IxPageHeader extends Components.IxPageHeader {
+  /**
+   * triggered when back button is clicked
+   */
+  backButtonClick: EventEmitter<CustomEvent<void>>;
+}
+
+
 @ProxyCmp({
   inputs: ['advanced', 'count', 'i18nItems', 'i18nOf', 'i18nPage', 'itemCount', 'selectedPage', 'showItemCount']
 })

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -51,6 +51,7 @@ export const DIRECTIVES = [
   d.IxModal,
   d.IxModalContainer,
   d.IxModalExample,
+  d.IxPageHeader,
   d.IxPagination,
   d.IxPill,
   d.IxSelect,

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -4092,6 +4092,7 @@
         "ix-menu-settings",
         "ix-message-bar",
         "ix-modal-example",
+        "ix-page-header",
         "ix-pagination",
         "ix-select",
         "ix-time-picker",
@@ -4146,6 +4147,9 @@
         "ix-modal-example": [
           "ix-icon-button"
         ],
+        "ix-page-header": [
+          "ix-icon-button"
+        ],
         "ix-pagination": [
           "ix-icon-button"
         ],
@@ -6522,6 +6526,123 @@
       "parts": [],
       "listeners": []
     },
+    {
+      "dirPath": "./src/components/page-header",
+      "filePath": "./src/components/page-header/page-header.tsx",
+      "fileName": "page-header.tsx",
+      "readmePath": "./src/components/page-header/readme.md",
+      "usagesDir": "./src/components/page-header/usage",
+      "tag": "ix-page-header",
+      "overview": "",
+      "usage": {},
+      "docs": "",
+      "docsTags": [],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [
+        "ix-icon-button",
+        "ix-typography"
+      ],
+      "dependencyGraph": {
+        "ix-page-header": [
+          "ix-icon-button",
+          "ix-typography"
+        ],
+        "ix-icon-button": [
+          "ix-icon"
+        ]
+      },
+      "props": [
+        {
+          "name": "hasBackButton",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "has-back-button",
+          "reflectToAttr": false,
+          "docs": "has back button",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "headerSubtitle",
+          "type": "string",
+          "mutable": false,
+          "attr": "header-subtitle",
+          "reflectToAttr": false,
+          "docs": "subtitle",
+          "docsTags": [],
+          "default": "undefined",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "headerTitle",
+          "type": "string",
+          "mutable": false,
+          "attr": "header-title",
+          "reflectToAttr": false,
+          "docs": "title",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"Primary\" | \"Secondary\"",
+          "mutable": false,
+          "attr": "variant",
+          "reflectToAttr": false,
+          "docs": "page header variant",
+          "docsTags": [],
+          "default": "'Primary'",
+          "values": [
+            {
+              "value": "Primary",
+              "type": "string"
+            },
+            {
+              "value": "Secondary",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "backButtonClick",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "triggered when back button is clicked",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "dirPath": "./src/components/pagination",
       "filePath": "./src/components/pagination/pagination.tsx",