Skip to content

Commit 8d2d6f0

Browse files
cryptalithcryptalith
committed
ENGAGE-243
1 parent 0bb52be commit 8d2d6f0

56 files changed

Lines changed: 1373 additions & 26 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.

‎projects/orcid-registry-ui/AGENTS.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Orcid Registry UI — Agent Notes (for future GPTs)
2+
3+
This package (`projects/orcid-registry-ui`, published as `@orcid/registry-ui`) contains **feature-oriented UI components** for the main orcid-angular application only. It is not intended for reuse outside this project.
4+
5+
> **Note for future agents:** This file is intended to be edited over time. Any section—relevant or not—may be updated, trimmed, or reorganized so the document stays lean and useful for future agents. Prefer keeping only what helps the next AI work effectively with this library.
6+
7+
## Library scope: orcid-registry-ui vs orcid-ui
8+
9+
- **orcid-ui** (`@orcid/ui`): Fully **agnostic** UI building blocks. No feature names or domain-specific wording. Open source–friendly and reusable across any ORCID or non-ORCID project. Components use Angular Material when possible and design tokens for styling.
10+
11+
- **orcid-registry-ui** (`@orcid/registry-ui`): **Registry-specific** components for the orcid-angular app only. May use feature names (e.g. “Import your works”, “Permission notifications”). Builds on **orcid-ui** components, Angular Material, and **orcid-tokens**. More flexible and app-coupled.
12+
13+
## Conventions
14+
15+
- **Package entry**: `projects/orcid-registry-ui/src/public-api.ts`
16+
- **Components**: `projects/orcid-registry-ui/src/lib/components/**`
17+
- Prefer **standalone components**. Use `@orcid/ui` for base primitives (modals, action surfaces, etc.) and **orcid-tokens** CSS variables for layout/color/typography.
18+
- Dialogs that use the shared modal chrome should use `OrcidModalComponent` and `ORCID_MODAL_DIALOG_PANEL_CLASS` from `@orcid/ui` when opening with `MatDialog`.
19+
20+
## Dependencies
21+
22+
- Peer: `@angular/common`, `@angular/core`, `@angular/material`, `@orcid/ui`, `rxjs`
23+
- The host app (orcid-angular) supplies `@orcid/ui` and design tokens (e.g. via `tokens.css`).
24+
25+
## Building
26+
27+
- From repo root: `ng build orcid-registry-ui` (or use the npm script if defined).
28+
29+
## Docs site (`projects/orcid-ui-docs`)
30+
31+
Registry-ui doc pages live under **`src/app/pages/orcid-registry-ui/`** (orcid-ui pages live under `pages/orcid-ui/`). When adding a new registry-ui component doc:
32+
33+
- Add the page in `projects/orcid-ui-docs/src/app/pages/orcid-registry-ui/<name>-page.component.{ts,html,scss}`
34+
- Import `DocumentationPageComponent` from `'../../components/documentation-page/documentation-page.component'`
35+
- Register a lazy route in `app.routes.ts` pointing to `./pages/orcid-registry-ui/<name>-page.component`
36+
- Add a sidebar link under the “Orcid Registry UI” section in `docs-shell.component.html`

‎projects/orcid-registry-ui/src/lib/components/import-works-dialog/import-works-dialog.component.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<orcid-modal [title]="title">
2+
<div orcidModalBody>
3+
<div class="import-works-dialog__intro" *ngIf="introText">
4+
<p class="import-works-dialog__intro-text">{{ introText }}</p>
5+
<a
6+
*ngIf="supportLink"
7+
class="import-works-dialog__support-link"
8+
[href]="supportLink.url"
9+
target="_blank"
10+
rel="noopener noreferrer"
11+
>
12+
{{ supportLink.label }}
13+
</a>
14+
</div>
15+
16+
<section class="import-works-dialog__section" *ngIf="certifiedLinks.length">
17+
<h3 class="import-works-dialog__section-heading">
18+
ORCID Certified Services
19+
</h3>
20+
<div class="import-works-dialog__card-list">
21+
<div
22+
*ngFor="let link of certifiedLinks"
23+
class="import-works-dialog__card import-works-dialog__card--certified"
24+
>
25+
<div class="import-works-dialog__card-icon" *ngIf="link.imageUrl || link.icon">
26+
<img *ngIf="link.imageUrl" [src]="link.imageUrl" [alt]="link.name + ' logo'" class="import-works-dialog__card-img" />
27+
<mat-icon *ngIf="!link.imageUrl && link.icon" [attr.aria-hidden]="true">{{ link.icon }}</mat-icon>
28+
</div>
29+
<div class="import-works-dialog__card-content">
30+
<p class="import-works-dialog__card-title">{{ link.name }}</p>
31+
<p class="import-works-dialog__card-description">
32+
{{ link.description }}
33+
</p>
34+
</div>
35+
<div class="import-works-dialog__card-actions">
36+
<ng-container *ngIf="link.connected; else connectCertified">
37+
<span class="import-works-dialog__connected">
38+
<span class="import-works-dialog__connected-dot" aria-hidden="true"></span>
39+
Connected
40+
</span>
41+
</ng-container>
42+
<ng-template #connectCertified>
43+
<button
44+
mat-flat-button
45+
class="import-works-dialog__btn-connect"
46+
(click)="openInNewTab(link.url)"
47+
>
48+
Connect now
49+
</button>
50+
</ng-template>
51+
</div>
52+
</div>
53+
</div>
54+
</section>
55+
56+
<section class="import-works-dialog__section import-works-dialog__section--more" *ngIf="moreServicesLinks.length">
57+
<div class="import-works-dialog__more-panel">
58+
<button
59+
type="button"
60+
class="import-works-dialog__more-header"
61+
(click)="toggleMoreServices()"
62+
[attr.aria-expanded]="moreServicesExpanded"
63+
[attr.aria-controls]="'import-works-more-list'"
64+
id="import-works-more-heading"
65+
>
66+
<mat-icon class="import-works-dialog__more-chevron" aria-hidden="true">
67+
{{ moreServicesExpanded ? 'expand_more' : 'expand_less' }}
68+
</mat-icon>
69+
<span class="import-works-dialog__more-heading-text">
70+
More Services <span class="import-works-dialog__more-count">({{ moreServicesLinks.length }})</span>
71+
</span>
72+
</button>
73+
<div
74+
id="import-works-more-list"
75+
class="import-works-dialog__more-list"
76+
role="region"
77+
[attr.aria-labelledby]="'import-works-more-heading'"
78+
[hidden]="!moreServicesExpanded"
79+
>
80+
<div
81+
*ngFor="let link of moreServicesLinks"
82+
class="import-works-dialog__card import-works-dialog__card--more"
83+
>
84+
<div class="import-works-dialog__card-icon" *ngIf="link.imageUrl || link.icon">
85+
<img *ngIf="link.imageUrl" [src]="link.imageUrl" [alt]="link.name + ' logo'" class="import-works-dialog__card-img" />
86+
<mat-icon *ngIf="!link.imageUrl && link.icon" [attr.aria-hidden]="true">{{ link.icon }}</mat-icon>
87+
</div>
88+
<div class="import-works-dialog__card-content">
89+
<p class="import-works-dialog__card-title">{{ link.name }}</p>
90+
<p class="import-works-dialog__card-description">
91+
{{ link.description }}
92+
</p>
93+
</div>
94+
<div class="import-works-dialog__card-actions">
95+
<button
96+
mat-stroked-button
97+
class="import-works-dialog__btn-connect-more"
98+
(click)="openInNewTab(link.url)"
99+
>
100+
Connect now
101+
</button>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
</section>
107+
</div>
108+
</orcid-modal>

0 commit comments

Comments
 (0)