PD-3704

Author: cryptalith

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

@@ -1,7 +1,5 @@
-<app-documentation-page
-  title="Panel"
-  description="The orcid-panel component is a versatile container used in the ORCID record UI to render affiliation stacks, professional activities, and other collapsible content. It supports multiple content projection slots, optional icon and title display, and provides built-in expand/collapse functionality. Key Features: Icon support, customizable title, content projection slots, preferred styling, collapsible body, and stack management."
->
+<app-documentation-page title="Panel"
+  description="The orcid-panel component is a versatile container used in the ORCID record UI to render affiliation stacks, professional activities, and other collapsible content. It supports multiple content projection slots, optional icon and title display, and provides built-in expand/collapse functionality. Key Features: Icon support, customizable title, content projection slots, preferred styling, collapsible body, and stack management.">
   <div controls>
     <p>Modify these values to see how they affect all examples below:</p>
     <div class="controls-grid">
@@ -21,12 +19,7 @@
 
       <mat-form-field appearance="outline" class="full-width">
         <mat-label>Content (HTML)</mat-label>
-        <textarea
-          matInput
-          [(ngModel)]="config.content"
-          rows="4"
-          placeholder="<div>Line 1</div>"
-        ></textarea>
+        <textarea matInput [(ngModel)]="config.content" rows="4" placeholder="<div>Line 1</div>"></textarea>
       </mat-form-field>
 
       <mat-form-field appearance="outline">
@@ -44,6 +37,9 @@ <h4>Stack management</h4>
       <mat-checkbox [(ngModel)]="config.isPreferred">
         Is Preferred
       </mat-checkbox>
+      <mat-checkbox [(ngModel)]="config.isFeatured">
+        Is Featured
+      </mat-checkbox>
     </div>
   </div>
 
@@ -55,15 +51,9 @@ <h4>Desktop View</h4>
       <div class="example-stack">
         <div class="example-item">
           <div class="example-container desktop">
-            <orcid-panel
-              panelId="desktop-panel"
-              [openState]="config.openState"
-              (openStateChange)="config.openState = $event"
-              [title]="config.title"
-              [icon]="config.icon || undefined"
-              [isPreferred]="config.isPreferred"
-              [isMobile]="false"
-            >
+            <orcid-panel panelId="desktop-panel" [openState]="config.openState"
+              (openStateChange)="config.openState = $event" [title]="config.title" [icon]="config.icon || undefined"
+              [isPreferred]="config.isPreferred" [isFeatured]="config.isFeatured" [isMobile]="false" type="employment">
               <div [innerHTML]="config.content"></div>
               <div panel-footer>{{ config.footerText }}</div>
             </orcid-panel>
@@ -77,15 +67,9 @@ <h4>Mobile View</h4>
       <div class="example-stack">
         <div class="example-item">
           <div class="example-container mobile">
-            <orcid-panel
-              panelId="mobile-panel"
-              [openState]="config.openState"
-              (openStateChange)="config.openState = $event"
-              [title]="config.title"
-              [icon]="config.icon || undefined"
-              [isPreferred]="config.isPreferred"
-              [isMobile]="true"
-            >
+            <orcid-panel panelId="mobile-panel" [openState]="config.openState"
+              (openStateChange)="config.openState = $event" [title]="config.title" [icon]="config.icon || undefined"
+              [isPreferred]="config.isPreferred" [isFeatured]="config.isFeatured" [isMobile]="true" type="employment">
               <div [innerHTML]="config.content"></div>
               <div panel-footer>{{ config.footerText }}</div>
             </orcid-panel>
@@ -129,4 +113,4 @@ <h3>Content Projection Slots</h3>
       <li><code>panel-footer</code>: Footer area for sources or actions</li>
     </ul>
   </div>
-</app-documentation-page>
+</app-documentation-page>

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

@@ -38,6 +38,7 @@ export class PanelPageComponent {
     openState: true,
     isMobile: false,
     isPreferred: false,
+    isFeatured: false,
   }
 
   iconOptions = [

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

@@ -1,6 +1,10 @@
 <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>
       <ng-container *ngIf="showIcon">
         <mat-icon [class]="iconClass">{{ icon }}</mat-icon>
         <div class="vl"></div>
@@ -23,4 +27,4 @@ <h4 *ngIf="title" class="orc-font-body" [ngClass]="{ mobile: isMobile }">
   <div class="orcid-panel__footer">
     <ng-content select="[panel-footer]"></ng-content>
   </div>
-</div>
+</div>

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

@@ -80,3 +80,16 @@
   cursor: pointer;
   font: inherit;
 }
+
+.featured-affiliation-star {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  cursor: pointer;
+
+  mat-icon {
+    &.star-filled {
+      color: #ffc814;
+    }
+  }
+}

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

@@ -13,6 +13,7 @@ export class OrcidPanelComponent {
   @Input() panelId!: string
   @Input() type:
     | 'affiliations'
+    | 'employment'
     | 'professional-activities'
     | 'invited-position'
     | 'distinction'
@@ -21,6 +22,7 @@ export class OrcidPanelComponent {
     | 'editorial-service' = 'affiliations'
   @Input() openState = true
   @Input() isPreferred = false
+  @Input() isFeatured = false
   @Input() isPublicRecord = false
   @Input() hasExternalIds = false
   @Input() userVersionPresent = false
@@ -30,8 +32,22 @@ export class OrcidPanelComponent {
   @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