feature: Add new public header

src/app/cdk/side-bar/side-bar/side-bar.component.html

@@ -4,17 +4,22 @@
   [attr.aria-label]="regionPersonalInformation"
   *ngIf="!hideOrcidId || !orcidId"
 >
-  <h2 class="sr-only" i18n="@@shared.personalInformation">
+  <h2
+    class="orc-font-body-large"
+    [ngClass]="{'sr-only': isPublicRecord ? !newRecordHeaderTogglz : true }"
+    i18n="@@shared.personalInformation">
     Personal information
   </h2>
-  <app-side-bar-id
-    *ngIf="!hideOrcidId"
-    [ngClass]="{
-      mobile: !platform.columns12
-    }"
-    [id]="isPublicRecord || userSession?.userInfo?.EFFECTIVE_USER_ORCID"
-    [privateView]="!isPublicRecord"
-  ></app-side-bar-id>
+  <ng-container *ngIf="!newRecordHeaderTogglz">
+    <app-side-bar-id
+      *ngIf="!hideOrcidId"
+      [ngClass]="{
+        mobile: !platform.columns12
+      }"
+      [id]="isPublicRecord || userSession?.userInfo?.EFFECTIVE_USER_ORCID"
+      [privateView]="!isPublicRecord"
+    ></app-side-bar-id>
+  </ng-container>
 
   <ng-container *ngIf="!orcidId">
     <app-panel

src/app/cdk/side-bar/side-bar/side-bar.component.ts

@@ -40,6 +40,7 @@ export class SideBarComponent implements OnInit, OnDestroy {
   @Input() isPublicRecord: string
   @Input() orcidId = false
   @Input() hideOrcidId = false
+  @Input() newRecordHeaderTogglz: boolean
 
   modalCountryComponent = ModalCountryComponent
   modalEmailComponent = ModalEmailComponent
@@ -65,6 +66,7 @@ export class SideBarComponent implements OnInit, OnDestroy {
   countriesOpenState = false
   externalIdentifierOpenState = false
   emailsOpenState = false
+  recordWithIssues: boolean
 
   regionPersonalInformation = $localize`:@@shared.personalInformation:Personal information`
   fragment: string
@@ -105,7 +107,8 @@ export class SideBarComponent implements OnInit, OnDestroy {
       })
       .pipe(takeUntil(this.$destroy))
       .subscribe((userRecord) => {
-        if (!this.orcidId && userRecord?.userInfo?.RECORD_WITH_ISSUES) {
+        this.recordWithIssues = userRecord?.userInfo?.RECORD_WITH_ISSUES
+        if (!this.orcidId && this.recordWithIssues) {
           this.orcidId = true
         }
         this.userRecord = userRecord

src/app/record/components/record-header/record-header.component.html

@@ -0,0 +1,79 @@
+<mat-progress-bar *ngIf="loadingUserRecord" mode="indeterminate" color="accent"></mat-progress-bar>
+<div class="row record-header" [ngClass]="{ 'mobile': !platform.columns12 }">
+  <section [id]="'names'" role="region" [attr.aria-label]="regionNames">
+    <div class="names-wrapper" *ngIf="userRecord?.names || userRecord?.otherNames">
+      <div class="row names">
+        <h1 [ngClass]="{
+            'orc-font-heading-small': !platform.columns12,
+            'orc-font-heading': platform.columns12
+          }">
+          <ng-container *ngIf="creditName">{{ creditName }}</ng-container>
+          <ng-container *ngIf="!!!creditName && (givenNames || familyName)">
+            <ng-container *ngIf="givenNames">{{ givenNames + ' ' }}</ng-container>
+            {{ familyName }}
+          </ng-container>
+        </h1>
+      </div>
+      <div class="row other-names" [ngClass]="{ 'mobile': !platform.columns12 }">
+        <p class="orc-font-body" *ngIf="otherNames">{{ otherNames }}</p>
+      </div>
+    </div>
+    <div class="issue" *ngIf="userInfo?.RECORD_WITH_ISSUES">
+      <h1 [ngClass]="{
+        'orc-font-heading-small': !platform.columns12,
+        'orc-font-heading': platform.columns12
+        }">
+        <ng-container *ngIf="userInfo.IS_DEACTIVATED === 'true' && !userInfo.PRIMARY_RECORD"
+          i18n="@@summary.recordIsDeactivated">This record has been deactivated
+        </ng-container>
+        <ng-container
+          *ngIf="userInfo.IS_LOCKED === 'true' && !(userInfo.IS_DEACTIVATED === 'true' && !userInfo.PRIMARY_RECORD)"
+          i18n="@@summary.recordIsLocked">This record is locked
+        </ng-container>
+        <ng-container *ngIf="userInfo.PRIMARY_RECORD" i18n="@@summary.recordIsDeprecated">This record has been
+          deprecated</ng-container>
+      </h1>
+    </div>
+    <div class="no-public-information"
+      *ngIf="!recordWithIssues && affiliations === 0 && !(!!!creditName && (givenNames || familyName))">
+      <h1 [ngClass]="{
+              'orc-font-heading-small': !platform.columns12,
+              'orc-font-heading': platform.columns12
+              }">
+        <ng-container i18n="@@record.noPublicInfo">No public information available.
+        </ng-container>
+      </h1>
+    </div>
+  </section>
+  <mat-divider class="divider"></mat-divider>
+  <section [id]="'orcid-id'" role="region" [attr.aria-label]="regionOrcidId">
+    <div class="row id-wrapper">
+      <div class="col" [ngClass]="{
+          'orc-font-body-small': !platform.columns12,
+          'orc-font-body': platform.columns12
+          }" dir="ltr">
+        <div>
+          <img class="orcid-logo" [ngClass]="{ mobile: !platform.columns12 }" src="assets/vectors/orcid.logo.icon.svg"
+            alt="orcid logo" />
+        </div>
+        <h2 [ngClass]="{
+            'orc-font-body': !platform.columns12,
+            'orc-font-body-large': platform.columns12
+          }">{{ orcidId }}</h2>
+        <div class="buttons-wrapper" [ngClass]="{
+            row: !platform.columns12,
+            mobile: !platform.columns12
+          }">
+          <button mat-icon-button class="orc-font-small-print" [matTooltip]="tooltipCopy"
+          [attr.aria-label]="ariaLabelCopyOrcidId" (click)="clipboard()">
+            <mat-icon class="material-icons" class="icon">content_copy</mat-icon>
+          </button>
+          <button mat-icon-button class="orc-font-small-print" [matTooltip]="tooltipPrintableVersion"
+            [attr.aria-label]="ariaLabelViewPrintable" (click)="printRecord()">
+            <mat-icon class="material-icons" class="icon">print</mat-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>

src/app/record/components/record-header/record-header.component.scss

@@ -0,0 +1,75 @@
+.record-header {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 32px;
+  margin-bottom: 32px;
+  align-items: flex-start;
+  gap: 16px;
+  word-break: break-all;
+
+  h1,p {
+    margin: 0;
+  }
+
+  h2 {
+    margin: auto;
+    font-weight: normal;
+  }
+
+  .divider {
+    width: 100%;
+    height: 2px;
+  }
+
+  .names-wrapper {
+    .names {
+      line-height: 40px;
+    }
+
+    .other-names {
+      line-height: 24px;
+    }
+
+    .other-names.mobile {
+      justify-content: center;
+    }
+  }
+
+  .issue {
+    h1 {
+      font-weight: normal;
+    }
+  }
+
+  .id-wrapper {
+    align-items: center;
+
+    .col {
+      padding: 0 !important
+    }
+
+    .orcid-logo {
+      width: 40px;
+      margin-right: 8px;
+    }
+
+    .orcid-logo.mobile {
+      width: 32px;
+    }
+
+    .buttons-wrapper {
+      margin-left: 16px;
+    }
+
+    .buttons-wrapper.mobile {
+      justify-content: center;
+      margin-left: 0;
+    }
+  }
+}
+
+.record-header.mobile {
+  justify-content: center;
+  padding: 18px;
+}

src/app/record/components/record-header/record-header.component.scss-theme.scss

@@ -0,0 +1,25 @@
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin top-bar-public-names-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, accent);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $config: mat.define-legacy-typography-config();
+
+  .record-header {
+    color: $orcid-light-primary-text;
+    background: mat.get-color-from-palette($primary, 900);
+  }
+
+  .divider {
+    background: mat.get-color-from-palette($primary, 700);
+  }
+
+  .other-names {
+    color: mat.get-color-from-palette($primary, 50);
+  }
+}
+@include top-bar-public-names-theme($orcid-app-theme);

src/app/record/components/record-header/record-header.component.spec.ts

@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecordHeaderComponent } from './record-header.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { WINDOW_PROVIDERS } from 'src/app/cdk/window';
+import { PlatformInfoService } from 'src/app/cdk/platform-info';
+import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service';
+import { SnackbarService } from 'src/app/cdk/snackbar/snackbar.service';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { Overlay } from '@angular/cdk/overlay';
+import { RouterTestingModule } from '@angular/router/testing';
+import { RecordService } from 'src/app/core/record/record.service';
+
+describe('RecordHeaderComponent', () => {
+  let component: RecordHeaderComponent;
+  let fixture: ComponentFixture<RecordHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [RecordHeaderComponent],
+      providers: [
+        WINDOW_PROVIDERS,
+        RecordService ,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecordHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/record/components/record-header/record-header.component.ts

@@ -0,0 +1,106 @@
+import { Component, Inject, Input, OnInit } from '@angular/core';
+import { isEmpty } from 'lodash';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info';
+import { WINDOW } from 'src/app/cdk/window';
+import { UserService } from 'src/app/core';
+import { RecordService } from 'src/app/core/record/record.service';
+import { NamesUtil } from 'src/app/shared/utils/names.util';
+import { Assertion, UserInfo } from 'src/app/types';
+import { UserRecord } from 'src/app/types/record.local';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-record-header',
+  templateUrl: './record-header.component.html',
+  styleUrls: [
+    './record-header.component.scss',
+    './record-header.component.scss-theme.scss'
+  ]
+})
+export class RecordHeaderComponent implements OnInit {
+  $destroy: Subject<boolean> = new Subject<boolean>()
+  @Input() loadingUserRecord = true
+  @Input() isPublicRecord: string
+  @Input() affiliations: number
+
+  platform: PlatformInfo
+  recordWithIssues: boolean
+  userRecord: UserRecord
+  userInfo: UserInfo
+  environment = environment
+  givenNames = ''
+  familyName = ''
+  creditName = ''
+  otherNames = ''
+  ariaLabelName = ''
+  orcidId = ''
+
+  regionNames = $localize`:@@topBar.names:Names`
+  regionOrcidId = 'Orcid iD'
+  tooltipPrintableVersion = $localize`:@@topBar.printableRecord:Printable record`
+  tooltipCopy = $localize`:@@topBar.copyId:Copy iD`
+  privateName = $localize`:@@account.nameIsPri:Name is private`
+
+  ariaLabelCopyOrcidId = $localize`:@@topBar.ariaLabelCopyOrcidId:Copy your ORCID iD to the clipboard`
+  ariaLabelViewPrintable = $localize`:@@topBar.ariaLabelViewPrintable:View a printable version of your ORCID record (Opens in new tab)`
+
+  constructor(
+    @Inject(WINDOW) private window: Window,
+    private _platform: PlatformInfoService,
+    private _user: UserService,
+    private _record: RecordService,
+  ) { }
+
+  ngOnInit(): void {
+    this.orcidId = 'https:' + environment.BASE_URL + this.isPublicRecord
+
+    this._platform
+    .get()
+    .pipe(takeUntil(this.$destroy))
+    .subscribe((data) => {
+      this.platform = data
+    })
+
+    this._record
+      .getRecord({
+        publicRecordId: this.isPublicRecord || undefined,
+      })
+      .pipe(takeUntil(this.$destroy))
+      .subscribe((userRecord) => {
+        this.recordWithIssues = userRecord?.userInfo?.RECORD_WITH_ISSUES
+        this.userRecord = userRecord
+        this.userInfo = userRecord?.userInfo
+
+        if (!isEmpty(this.userRecord?.names)) {
+          this.givenNames = NamesUtil.getGivenNames(this.userRecord)
+          this.familyName = NamesUtil.getFamilyName(this.userRecord)
+          this.creditName = NamesUtil.getCreditName(this.userRecord)
+          this.ariaLabelName = NamesUtil.getAriaLabelName(this.userRecord, this.ariaLabelName)
+        } else {
+          if (this.affiliations > 0) {
+            this.creditName = this.privateName
+          }
+        }
+
+        if (!isEmpty(this.userRecord.otherNames?.otherNames)) {
+          this.otherNames = NamesUtil.getOtherNamesUnique(userRecord.otherNames?.otherNames)
+        }
+      })
+  }
+
+  clipboard() {
+    this.window.navigator.clipboard.writeText(
+      this.orcidId
+    )
+  }
+
+  printRecord() {
+    this.window.open(
+      environment.BASE_URL +
+        this.userRecord?.userInfo?.EFFECTIVE_USER_ORCID +
+        '/print'
+    )
+  }
+}