Skip to content

Commit ddd7d82

Browse files
cryptalithcryptalith
authored
Merge pull request #2742 from ORCID/lmendoza/PD-3855
Lmendoza/pd 3855
2 parents 05fb9f1 + ed9883c commit ddd7d82

63 files changed

Lines changed: 2901 additions & 344 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎SUPPORTED_BROWSERS.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22

33
> This file is auto-generated from `.browserslistrc` during the prebuild step. Do not edit manually.
44
5-
| Browser | Minimum version |
6-
| ---------------- | --------------- |
7-
| Android WebView | 142 or newer |
8-
| Apple Safari | 16.4 or newer |
9-
| Google Chrome | 115 or newer |
10-
| Microsoft Edge | 115 or newer |
11-
| Mozilla Firefox | 115 or newer |
12-
| Opera | 101 or newer |
13-
| Opera Mobile | 80 or newer |
14-
| Samsung Internet | 23 or newer |
5+
| Browser | Minimum version |
6+
|---------|-----------------|
7+
| Android WebView | 142 or newer |
8+
| Apple Safari | 16.4 or newer |
9+
| Google Chrome | 115 or newer |
10+
| Microsoft Edge | 115 or newer |
11+
| Mozilla Firefox | 116 or newer |
12+
| Opera | 101 or newer |
13+
| Opera Mobile | 80 or newer |
14+
| Samsung Internet | 23 or newer |

‎angular.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,33 @@
442442
}
443443
}
444444
},
445+
"orcid-registry-ui": {
446+
"projectType": "library",
447+
"root": "projects/orcid-registry-ui",
448+
"sourceRoot": "projects/orcid-registry-ui/src",
449+
"prefix": "orcid",
450+
"architect": {
451+
"build": {
452+
"builder": "@angular/build:ng-packagr",
453+
"configurations": {
454+
"production": {
455+
"tsConfig": "projects/orcid-registry-ui/tsconfig.lib.prod.json"
456+
},
457+
"development": {
458+
"tsConfig": "projects/orcid-registry-ui/tsconfig.lib.json"
459+
}
460+
},
461+
"defaultConfiguration": "production"
462+
},
463+
"test": {
464+
"builder": "@angular/build:karma",
465+
"options": {
466+
"tsConfig": "projects/orcid-registry-ui/tsconfig.spec.json",
467+
"polyfills": ["zone.js", "zone.js/testing"]
468+
}
469+
}
470+
}
471+
},
445472
"orcid-tokens": {
446473
"projectType": "library",
447474
"root": "projects/orcid-tokens",

‎projects/orcid-registry-ui/ng-package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3+
"dest": "../../dist/orcid-registry-ui",
4+
"lib": {
5+
"entryFile": "src/public-api.ts"
6+
}
7+
}

‎projects/orcid-registry-ui/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "@orcid/registry-ui",
3+
"version": "0.0.1",
4+
"peerDependencies": {
5+
"@angular/common": "^20.1.0",
6+
"@angular/core": "^20.1.0",
7+
"@angular/material": "^20.1.0",
8+
"@orcid/ui": "^0.0.1",
9+
"rxjs": "~7.8.0"
10+
},
11+
"dependencies": {
12+
"tslib": "^2.3.0"
13+
},
14+
"publishConfig": {
15+
"access": "public"
16+
},
17+
"sideEffects": false
18+
}

‎projects/orcid-registry-ui/src/lib/components/permission-notifications/permission-notifications.component.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<orcid-action-surface-container [title]="title" [subtitle]="subtitle">
2+
<div class="permission-notifications__list">
3+
<orcid-action-surface
4+
*ngFor="let notification of visibleNotifications; let index = index"
5+
[icon]="notification.icon"
6+
[iconColor]="notification.iconColor ?? 'var(--orcid-color-state-notice-dark, #ff9c00)'"
7+
>
8+
<span text [innerHTML]="getTrustedHtml(notification.text)"></span>
9+
<div actions>
10+
<ng-container *ngFor="let action of notification.actions; let actionIndex = index">
11+
<ng-container [ngSwitch]="action.variant">
12+
<button
13+
*ngSwitchCase="'flat'"
14+
mat-flat-button
15+
[orcidBrandSecondaryDarkButton]="!action.color"
16+
[color]="action.color"
17+
[disabled]="action.disabled"
18+
[ngClass]="{
19+
'registry-underline-button': action.underline
20+
}"
21+
(click)="onActionClick(notification, index, action, actionIndex)"
22+
>
23+
{{ action.label }}
24+
</button>
25+
<button
26+
*ngSwitchCase="'stroked'"
27+
mat-stroked-button
28+
[color]="action.color"
29+
[disabled]="action.disabled"
30+
[ngClass]="{ 'registry-underline-button': action.underline }"
31+
(click)="onActionClick(notification, index, action, actionIndex)"
32+
>
33+
{{ action.label }}
34+
</button>
35+
<button
36+
*ngSwitchDefault
37+
mat-button
38+
[color]="action.color"
39+
[disabled]="action.disabled"
40+
[orcidUnderlineButton]="action.underline"
41+
(click)="onActionClick(notification, index, action, actionIndex)"
42+
>
43+
{{ action.label }}
44+
</button>
45+
</ng-container>
46+
</ng-container>
47+
</div>
48+
</orcid-action-surface>
49+
</div>
50+
</orcid-action-surface-container>

‎projects/orcid-registry-ui/src/lib/components/permission-notifications/permission-notifications.component.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
:host {
2+
display: block;
3+
width: 100%;
4+
}
5+
6+
.permission-notifications__list {
7+
display: grid;
8+
gap: var(--orcid-space-4, 16px);
9+
}
10+
11+
.permission-notifications__list ::ng-deep .action-surface__text {
12+
font-size: var(--orcid-font-size-body-small, 14px);
13+
line-height: 21px;
14+
}
15+
16+
.registry-brand-secondary-dark:hover {
17+
background-color: var(--orcid-color-brand-secondary-dark, #085c77);
18+
}
19+
20+
.registry-brand-secondary-dark:disabled {
21+
background-color: var(--orcid-color-brand-secondary-dark, #085c77);
22+
opacity: 0.6;
23+
}
24+

‎projects/orcid-registry-ui/src/lib/components/permission-notifications/permission-notifications.component.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Component, EventEmitter, Input, Output } from '@angular/core'
2+
import { DomSanitizer } from '@angular/platform-browser'
3+
import {
4+
NgClass,
5+
NgFor,
6+
NgSwitch,
7+
NgSwitchCase,
8+
NgSwitchDefault,
9+
} from '@angular/common'
10+
import { MatButtonModule } from '@angular/material/button'
11+
import {
12+
ActionSurfaceComponent,
13+
ActionSurfaceContainerComponent,
14+
BrandSecondaryDarkButtonDirective,
15+
UnderlineButtonDirective,
16+
} from '@orcid/ui'
17+
18+
export type RegistryNotificationButtonVariant = 'text' | 'flat' | 'stroked'
19+
20+
export interface RegistryNotificationAction {
21+
id?: string
22+
label: string
23+
variant?: RegistryNotificationButtonVariant
24+
color?: 'primary' | 'accent' | 'warn'
25+
underline?: boolean
26+
disabled?: boolean
27+
}
28+
29+
export interface RegistryPermissionNotification {
30+
id?: string
31+
text: string
32+
icon?: string
33+
iconColor?: string
34+
actions: RegistryNotificationAction[]
35+
}
36+
37+
export interface RegistryNotificationActionEvent {
38+
notificationIndex: number
39+
actionIndex: number
40+
notificationId?: string
41+
actionId?: string
42+
action: RegistryNotificationAction
43+
}
44+
45+
@Component({
46+
selector: 'orcid-registry-permission-notifications',
47+
standalone: true,
48+
imports: [
49+
NgClass,
50+
NgFor,
51+
NgSwitch,
52+
NgSwitchCase,
53+
NgSwitchDefault,
54+
MatButtonModule,
55+
ActionSurfaceComponent,
56+
ActionSurfaceContainerComponent,
57+
BrandSecondaryDarkButtonDirective,
58+
UnderlineButtonDirective,
59+
],
60+
templateUrl: './permission-notifications.component.html',
61+
styleUrls: ['./permission-notifications.component.scss'],
62+
})
63+
export class PermissionNotificationsComponent {
64+
@Input() title = ''
65+
@Input() subtitle = ''
66+
@Input() notifications: RegistryPermissionNotification[] = []
67+
68+
@Output() actionClicked = new EventEmitter<RegistryNotificationActionEvent>()
69+
70+
constructor(private _sanitizer: DomSanitizer) {}
71+
72+
getTrustedHtml(text: string) {
73+
return this._sanitizer.bypassSecurityTrustHtml(text)
74+
}
75+
76+
get visibleNotifications(): RegistryPermissionNotification[] {
77+
return (this.notifications || []).slice(0, 3)
78+
}
79+
80+
onActionClick(
81+
notification: RegistryPermissionNotification,
82+
notificationIndex: number,
83+
action: RegistryNotificationAction,
84+
actionIndex: number
85+
): void {
86+
this.actionClicked.emit({
87+
notificationIndex,
88+
actionIndex,
89+
notificationId: notification.id,
90+
actionId: action.id,
91+
action,
92+
})
93+
}
94+
}

‎projects/orcid-registry-ui/src/lib/orcid-registry-ui.spec.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing'
2+
3+
import { OrcidRegistryUi } from './orcid-registry-ui'
4+
5+
describe('OrcidRegistryUi', () => {
6+
let component: OrcidRegistryUi
7+
let fixture: ComponentFixture<OrcidRegistryUi>
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [OrcidRegistryUi],
12+
}).compileComponents()
13+
14+
fixture = TestBed.createComponent(OrcidRegistryUi)
15+
component = fixture.componentInstance
16+
fixture.detectChanges()
17+
})
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy()
21+
})
22+
})

‎projects/orcid-registry-ui/src/lib/orcid-registry-ui.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Component } from '@angular/core'
2+
3+
@Component({
4+
selector: 'orcid-orcid-registry-ui',
5+
standalone: true,
6+
imports: [],
7+
template: `
8+
<section class="orcid-registry-ui-placeholder">
9+
<h1 class="orc-ui-font-heading">Orcid Registry UI library</h1>
10+
<p class="orc-ui-font-body">
11+
This is a placeholder component from <code>@orcid/registry-ui</code>.
12+
</p>
13+
</section>
14+
`,
15+
styles: `
16+
:host {
17+
display: block;
18+
padding: 1.5rem;
19+
background: var(--orcid-surface-subtle, #f5f5f5);
20+
color: var(--orcid-color-text, #222);
21+
}
22+
23+
.orcid-registry-ui-placeholder h1 {
24+
margin: 0 0 0.5rem 0;
25+
}
26+
27+
.orcid-registry-ui-placeholder p {
28+
margin: 0;
29+
}
30+
`,
31+
})
32+
export class OrcidRegistryUi {}

‎projects/orcid-registry-ui/src/public-api.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/*
2+
* Public API Surface of orcid-registry-ui
3+
*/
4+
5+
export * from './lib/orcid-registry-ui'
6+
export * from './lib/components/permission-notifications/permission-notifications.component'

0 commit comments

Comments
 (0)