feat: intranet header condensed (#4084)

Introduces a new option for the intranet header that allows to display the navigation on one line. Previous work done by @riscie and @yopemu on #3539 and backported to v8 by @gfellerph. --------- Co-authored-by: Oliver Schürch <[email protected]> Co-authored-by: Pedroso Munoz Yohandris <[email protected]> Co-authored-by: Matthias Langhard <[email protected]>
swisspost · Dec 19, 2024 · 209640f · 209640f
1 parent 1a55586
commit 209640f
Show file tree

Hide file tree

Showing 23 changed files with 2,415 additions and 1,257 deletions.
diff --git a/.github/workflows/deploy-demo.yaml b/.github/workflows/deploy-demo.yaml
@@ -8,8 +8,7 @@ name: Deploy Demo App Preview to Netlify
 on:
   workflow_run:
     workflows: ['Build Demo App']
-    types:
-      - completed
+    types: [completed]
 
 jobs:
   deploy:

diff --git a/packages/demo/src/app/app-routing.module.ts b/packages/demo/src/app/app-routing.module.ts
@@ -54,6 +54,7 @@ import { LayoutContainerComponent } from './layout-container/layout-container.co
 import { IntranetHeaderDemoRegularComponent } from './intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component';
 import { IntranetHeaderDemoBigSidebarComponent } from './intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component';
 import { IntranetHeaderDemoSmallSidebarComponent } from './intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component';
+import { IntranetHeaderDemoCondensedComponent } from './intranet-layout/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component';
 /* tslint:enable:max-line-length */
 
 const routes: Routes = [
@@ -166,6 +167,10 @@ const routes: Routes = [
         path: 'intranet-layout-sidebar-small-sidebar',
         component: IntranetHeaderDemoSmallSidebarComponent,
       },
+      {
+        path: 'intranet-layout-condensed',
+        component: IntranetHeaderDemoCondensedComponent,
+      },
     ],
   },
 ];

diff --git a/...t/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.html b/...t/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.html
@@ -0,0 +1,36 @@
+<section class="layout-container header-small">
+  <sp-intranet-header siteTitle="Condensed" searchUrl="/" [condenseHeader]="true">
+    <li class="nav-item"><a href="/postweb" class="col-auto py-3 px-5 nav-link">Home</a></li>
+    <li class="nav-item">
+      <a href="/postweb/post-informatik" class="col-auto py-3 px-5 nav-link" target="_self">
+        Post Informatik
+      </a>
+    </li>
+    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
+    <li class="nav-item">
+      <a href="/postweb/service-portal" class="col-auto py-3 px-5 nav-link">Service-Portal</a>
+    </li>
+    <li class="nav-item">
+      <a href="/postweb/die-post" class="col-auto py-3 px-5 nav-link">Die Post</a>
+    </li>
+  </sp-intranet-header>
+
+  <div class="container header-margin">
+    <main role="main" class="col-md-9 col-lg-10 p-3">
+      <h1>Content</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+        et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+        diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+        amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet.
+      </p>
+    </main>
+  </div>
+</section>
diff --git a/...out/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.ts b/...out/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.ts
@@ -0,0 +1,20 @@
+import { Component, Inject, LOCALE_ID } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ErrorService } from '../../services/error.service';
+
+@Component({
+  selector: 'app-intranet-header-condesed',
+  templateUrl: './intranet-header-demo-condensed.component.html',
+  styleUrls: ['../../intranet-layout.component.css'],
+})
+export class IntranetHeaderDemoCondensedComponent {
+  openedMenu = false;
+
+  constructor(@Inject(LOCALE_ID) public language: string, private errorService: ErrorService) {
+    // handle language for ngx-translate and for angular PIPE
+    // Handle unexpected errors
+    this.errorService.unexpectedErrorEvent.subscribe((response: HttpErrorResponse) => {
+      console.error('Unexpected error', response);
+    });
+  }
+}
diff --git a/packages/demo/src/app/intranet-layout/intranet-components.module.ts b/packages/demo/src/app/intranet-layout/intranet-components.module.ts
@@ -8,6 +8,7 @@ import { HighlightProvider } from '../common/highlight.provider';
 import { IntranetHeaderDemoRegularComponent } from './components/intranet-header-demo-regular/intranet-header-demo-regular.component';
 import { IntranetHeaderDemoBigSidebarComponent } from './components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component';
 import { IntranetHeaderDemoSmallSidebarComponent } from './components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component';
+import { IntranetHeaderDemoCondensedComponent } from './components/intranet-header-demo-condensed/intranet-header-demo-condensed.component';
 
 @NgModule({
   imports: [CommonModule, RouterModule, NgbModule, SwissPostIntranetHeaderModule, HighlightModule],
@@ -16,11 +17,13 @@ import { IntranetHeaderDemoSmallSidebarComponent } from './components/intranet-h
     IntranetHeaderDemoRegularComponent,
     IntranetHeaderDemoBigSidebarComponent,
     IntranetHeaderDemoSmallSidebarComponent,
+    IntranetHeaderDemoCondensedComponent,
   ],
   exports: [
     IntranetHeaderDemoRegularComponent,
     IntranetHeaderDemoBigSidebarComponent,
     IntranetHeaderDemoSmallSidebarComponent,
+    IntranetHeaderDemoCondensedComponent,
   ],
   providers: [HighlightProvider.Config],
 })

diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.html b/packages/demo/src/app/intranet-layout/intranet-layout.component.html
@@ -392,3 +392,24 @@ <h4 class="bold mt-5">Intranet-Header "postweb"</h4>
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
   ></code>
 </div>
+
+<h4 class="bold mt-5">With condensed top navigation</h4>
+<div class="header-showcase-container p-huge-r">
+  <div class="header-showcase-page">
+    <iframe
+      title="Intranet-header example without top navigation and with sidenav"
+      src="/#/samples/intranet-layout-condensed"
+      class="w-100"
+      style="min-height: 500px"
+    ></iframe>
+  </div>
+</div>
+
+<div class="container">
+  <span class="spacer"></span>
+  <code
+    class="block"
+    [highlight]="codeTemplateCond"
+    [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
+  ></code>
+</div>
diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.ts b/packages/demo/src/app/intranet-layout/intranet-layout.component.ts
@@ -6,6 +6,8 @@ const CODE_TEMPLATE_SMALL =
   require('!!raw-loader!./components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html').default;
 const CODE_TEMPLATE_BIG =
   require('!!raw-loader!./components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html').default;
+const CODE_TEMPLATE_COND =
+  require('!!raw-loader!./components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.html').default;
 
 @Component({
   selector: 'app-intranet-layout',
@@ -30,4 +32,5 @@ export class IntranetLayoutComponent {
   codeTemplateSmall = CODE_TEMPLATE_SMALL;
   codeTemplateBig = CODE_TEMPLATE_BIG;
   codeTemplateReg = CODE_TEMPLATE_REG;
+  codeTemplateCond = CODE_TEMPLATE_COND;
 }
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts b/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
@@ -184,6 +184,19 @@ const meta: MetaComponent = {
         },
       },
     },
+    condenseHeader: {
+      name: 'condenseHeader',
+      description: 'Display the navigation on one line',
+      control: 'boolean',
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
   },
 };
 

diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.module.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.module.ts
@@ -8,12 +8,17 @@ import { SamplesSidebarComponent } from './samples/sidebar/sidebar.component';
 import { SwissPostIntranetHeaderModule } from '@swisspost/design-system-intranet-header';
 import { SamplesIndexComponent } from './samples/samples-index.component';
 import { SamplesSidebarWithSearchbarComponent } from './samples/sidebar-with-searchbar/sidebar-with-searchbar.component';
+import { SamplesNavigationCondensedHeaderComponent } from './samples/samples-navigation-condensed-header/samples-navigation-condensed-header.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'index', pathMatch: 'full' },
   { path: 'index', component: SamplesIndexComponent },
 
   { path: 'samples-navigation', component: SamplesNavigationComponent },
+  {
+    path: 'samples-navigation-with-condensed-header',
+    component: SamplesNavigationCondensedHeaderComponent,
+  },
   { path: 'samples-sidebar', component: SamplesSidebarComponent },
   { path: 'samples-sidebar-with-searchbar', component: SamplesSidebarWithSearchbarComponent },
 ];
@@ -22,6 +27,7 @@ const routes: Routes = [
   declarations: [
     AppComponent,
     SamplesNavigationComponent,
+    SamplesNavigationCondensedHeaderComponent,
     SamplesSidebarComponent,
     SamplesSidebarWithSearchbarComponent,
   ],

diff --git a/...ace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts b/...ace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts
@@ -1,3 +1,4 @@
+import 'jasmine';
 import { TestBed } from '@angular/core/testing';
 import { SamplesNavigationComponent } from './navigation.component';
 

diff --git a/...header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts b/...header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts
@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
   template: `
     <ul>
       <li><a href="samples-navigation">Samples navigation</a></li>
+      <li><a href="samples-navigation-with-condensed-header">Samples navigation with condensed header</a></li>
       <li><a href="samples-sidebar">Samples sidebar</a></li>
       <li><a href="samples-sidebar-with-searchbar">Samples sidebar with searchbar</a></li>
     </ul>

diff --git a/...es/samples-navigation-condensed-header/samples-navigation-condensed-header.component.html b/...es/samples-navigation-condensed-header/samples-navigation-condensed-header.component.html
@@ -0,0 +1,17 @@
+<section class="preview">
+  <sp-intranet-header siteTitle="Condensed" searchUrl="/" [condenseHeader]="true">
+    <li class="nav-item"><a href="/postweb" class="col-auto py-3 px-5 nav-link">Home</a></li>
+    <li class="nav-item">
+      <a href="/postweb/post-informatik" class="col-auto py-3 px-5 nav-link" target="_self">
+        Post Informatik
+      </a>
+    </li>
+    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
+    <li class="nav-item">
+      <a href="/postweb/service-portal" class="col-auto py-3 px-5 nav-link">Service-Portal</a>
+    </li>
+    <li class="nav-item">
+      <a href="/postweb/die-post" class="col-auto py-3 px-5 nav-link">Die Post</a>
+    </li>
+  </sp-intranet-header>
+</section>
diff --git a/...samples-navigation-condensed-header/samples-navigation-condensed-header.component.spec.ts b/...samples-navigation-condensed-header/samples-navigation-condensed-header.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SamplesNavigationCondensedHeaderComponent } from './samples-navigation-condensed-header.component';
+
+describe('SamplesNavigationCondensedHeaderComponent', () => {
+  let component: SamplesNavigationCondensedHeaderComponent;
+  let fixture: ComponentFixture<SamplesNavigationCondensedHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SamplesNavigationCondensedHeaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SamplesNavigationCondensedHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...ples/samples-navigation-condensed-header/samples-navigation-condensed-header.component.ts b/...ples/samples-navigation-condensed-header/samples-navigation-condensed-header.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-samples-navigation-condensed-header',
+  templateUrl: './samples-navigation-condensed-header.component.html',
+})
+export class SamplesNavigationCondensedHeaderComponent {}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/tsconfig.app.json b/packages/intranet-header-workspace/projects/intranet-header-showcase/tsconfig.app.json
@@ -5,5 +5,6 @@
     "outDir": "../../out-tsc/app",
     "types": []
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
 }