PD-3704

Author: cryptalith

projects/orcid-ui-docs/src/app/pages/panel-page.component.html

@@ -60,6 +60,13 @@
     letter-spacing: 0.5px;
   }
 
+  .example-description {
+    margin: 4px 0 12px 0;
+    color: var(--orcid-color-text-secondary, #666);
+    font-size: 0.875rem;
+    font-style: italic;
+  }
+
   // For mobile examples, ensure containers are centered in grid
   .example-container.mobile {
     margin: 0 auto;

projects/orcid-ui-docs/src/app/pages/panel-page.component.scss

@@ -8,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { MatSelectModule } from '@angular/material/select'
+import { MatTooltipModule } from '@angular/material/tooltip'
 import { DocumentationPageComponent } from '../components/documentation-page/documentation-page.component'
 
 @Component({
@@ -23,6 +24,7 @@ import { DocumentationPageComponent } from '../components/documentation-page/doc
     MatInputModule,
     MatCheckboxModule,
     MatSelectModule,
+    MatTooltipModule,
     DocumentationPageComponent,
   ],
   templateUrl: './panel-page.component.html',
@@ -35,10 +37,23 @@ export class PanelPageComponent {
     content:
       '<div>University of Example, Research Scientist</div>\n<div>2020 - Present</div>',
     footerText: 'Source: Self-asserted',
-    openState: true,
     isMobile: false,
     isPreferred: false,
-    isFeatured: false,
+    startToggleOn: false,
+    enableStartToggl: false,
+    startToggleDisabled: false,
+    startToggleTooltip: 'Click to highlight this affiliation',
+    hasExternalIds: false,
+    userVersionPresent: false,
+    showContent: true,
+  }
+
+  get showStackToggle(): boolean {
+    return (
+      this.config.hasExternalIds &&
+      this.config.userVersionPresent &&
+      !this.config.isPublicRecord
+    )
   }
 
   iconOptions = [
@@ -51,4 +66,8 @@ export class PanelPageComponent {
     { value: 'fitness_center', label: 'fitness_center' },
     { value: 'local_hospital', label: 'local_hospital' },
   ]
+
+  onToggleFeatured() {
+    console.log('Toggle button pressed')
+  }
 }

projects/orcid-ui-docs/src/app/pages/panel-page.component.ts

@@ -1,10 +1,19 @@
 <div class="orcid-panel" [class.orcid-panel--preferred]="isPreferred">
   <div class="orcid-panel__header">
     <div class="orcid-panel__header-main">
-      <div class="featured-affiliation-star" *ngIf="isAffiliation" (click)="toggleFeatured.emit()">
-        <mat-icon *ngIf="isFeatured" class="star-filled">star</mat-icon>
-        <mat-icon *ngIf="!isFeatured" class="star-outline">star_outline</mat-icon>
-      </div>
+      <button
+        mat-icon-button
+        class="featured-affiliation-star"
+        *ngIf="enableStartToggl"
+        [disabled]="startToggleDisabled"
+        [matTooltip]="startToggleTooltip"
+        (click)="toggleFeatured.emit()"
+      >
+        <mat-icon *ngIf="startToggleOn" class="star-filled">star</mat-icon>
+        <mat-icon *ngIf="!startToggleOn" class="star-outline"
+          >star_outline</mat-icon
+        >
+      </button>
       <ng-container *ngIf="showIcon">
         <mat-icon [class]="iconClass">{{ icon }}</mat-icon>
         <div class="vl"></div>
@@ -20,11 +29,11 @@ <h4 *ngIf="title" class="orc-font-body" [ngClass]="{ mobile: isMobile }">
     </div>
   </div>
 
-  <div class="orcid-panel__body" [id]="panelId + '-body'" *ngIf="openState">
+  <div class="orcid-panel__body" [id]="panelId + '-body'">
     <ng-content></ng-content>
   </div>
 
   <div class="orcid-panel__footer">
     <ng-content select="[panel-footer]"></ng-content>
   </div>
-</div>
+</div>

projects/orcid-ui/src/lib/components/panel/panel.component.html

@@ -25,7 +25,6 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 16px;
 
   mat-icon {
     flex-shrink: 0;
@@ -35,6 +34,7 @@
     border-left: 2px solid #bdbdbd;
     height: 32px;
     flex-shrink: 0;
+    margin: 0 16px;
   }
 
   h4 {
@@ -63,6 +63,12 @@
 
 .orcid-panel__body {
   padding: 16px;
+
+  &:empty {
+    padding: 0;
+    min-height: 0;
+    height: 0;
+  }
 }
 
 .orcid-panel__footer {
@@ -82,14 +88,19 @@
 }
 
 .featured-affiliation-star {
-  display: flex;
+  margin-inline-start: -12px;
+  width: 40px;
+  height: 40px;
+  display: flex !important;
   align-items: center;
-  margin-right: 8px;
-  cursor: pointer;
+  justify-content: center;
+  line-height: normal;
 
   mat-icon {
+    line-height: inherit;
+
     &.star-filled {
       color: #ffc814;
     }
   }
-}
+}

projects/orcid-ui/src/lib/components/panel/panel.component.scss

@@ -1,66 +1,31 @@
 import { CommonModule } from '@angular/common'
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
+import { MatButtonModule } from '@angular/material/button'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 @Component({
   selector: 'orcid-panel',
   standalone: true,
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule],
   templateUrl: './panel.component.html',
   styleUrls: ['./panel.component.scss'],
 })
 export class OrcidPanelComponent {
   @Input() panelId!: string
-  @Input() type:
-    | 'affiliations'
-    | 'employment'
-    | 'professional-activities'
-    | 'invited-position'
-    | 'distinction'
-    | 'membership'
-    | 'service'
-    | 'editorial-service' = 'affiliations'
-  @Input() openState = true
   @Input() isPreferred = false
-  @Input() isFeatured = false
-  @Input() isPublicRecord = false
-  @Input() hasExternalIds = false
-  @Input() userVersionPresent = false
-  @Input() displayTheStack = false
+  @Input() startToggleOn = false
+  @Input() enableStartToggl = false
+  @Input() startToggleDisabled = false
+  @Input() startToggleTooltip = ''
   @Input() icon?: string
   @Input() iconClass?: string
   @Input() title?: string
   @Input() isMobile = false
 
-  get isAffiliation(): boolean {
-    return (
-      this.type === 'employment' ||
-      this.type === 'affiliations' ||
-      this.type === 'invited-position' ||
-      this.type === 'distinction' ||
-      this.type === 'membership' ||
-      this.type === 'service' ||
-      this.type === 'editorial-service' ||
-      this.type === 'professional-activities'
-    )
-  }
-
-  @Output() displayTheStackChange = new EventEmitter<boolean>()
-  @Output() openStateChange = new EventEmitter<boolean>()
   @Output() toggleFeatured = new EventEmitter<void>()
 
   get showIcon(): boolean {
     return !!this.icon
   }
-
-  toggle() {
-    this.openState = !this.openState
-    this.openStateChange.emit(this.openState)
-  }
-
-  showStackToggle(): boolean {
-    return (
-      this.hasExternalIds && this.userVersionPresent && !this.isPublicRecord
-    )
-  }
 }

projects/orcid-ui/src/lib/components/panel/panel.component.ts

@@ -2,6 +2,7 @@
 
 :host {
   display: block;
+  background: var(--orcid-color-brand-secondary-darkest, #003449);
 }
 
 .record-header {