diff --git a/.github/workflows/deploy-demo.yaml b/.github/workflows/deploy-demo.yaml
index c2ae152420..2532282bc6 100644
--- 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
index d127b80876..3b7bd98fab 100644
--- 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/packages/demo/src/app/intranet-layout/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.html b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.html
new file mode 100644
index 0000000000..82739a275c
--- /dev/null
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.html
@@ -0,0 +1,36 @@
+
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-condensed/intranet-header-demo-condensed.component.ts
new file mode 100644
index 0000000000..1097c1d78d
--- /dev/null
+++ b/packages/demo/src/app/intranet-layout/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
index 4dcfcd43f8..6354890437 100644
--- 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
index bec56f3428..607b8732b1 100644
--- 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 @@ Intranet-Header "postweb"
[languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
>
+
+With condensed top navigation
+
+
+
+
+
diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.ts b/packages/demo/src/app/intranet-layout/intranet-layout.component.ts
index 6f0ccb9be5..ecb088c5f0 100644
--- 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
index bda724eefa..1b866045d9 100644
--- 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
index b69838702f..e048acb2c4 100644
--- 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/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts
index 16e17d36e7..3d7bf904a5 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts
+++ b/packages/intranet-header-workspace/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/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts
index 5fadaaa14b..8ddbcc95b8 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts
@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
template: `
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-navigation-condensed-header/samples-navigation-condensed-header.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-navigation-condensed-header/samples-navigation-condensed-header.component.html
new file mode 100644
index 0000000000..0821c32829
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-navigation-condensed-header/samples-navigation-condensed-header.component.html
@@ -0,0 +1,17 @@
+
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-navigation-condensed-header/samples-navigation-condensed-header.component.spec.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-navigation-condensed-header/samples-navigation-condensed-header.component.spec.ts
new file mode 100644
index 0000000000..db578a736e
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/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;
+
+ 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/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-navigation-condensed-header/samples-navigation-condensed-header.component.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-navigation-condensed-header/samples-navigation-condensed-header.component.ts
new file mode 100644
index 0000000000..e971b3646f
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/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
index fcc1452a19..25de0649c0 100644
--- 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"]
}
diff --git a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html
index 864ead9012..32f2a18bda 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html
@@ -2,37 +2,44 @@