Skip to content

Commit f6f0bba

Browse files
cryptalithcryptalith
committed
PD-3704
1 parent 256e4cf commit f6f0bba

16 files changed

Lines changed: 758 additions & 346 deletions

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"start-local": "npm run build-runtime-env && ng serve --disable-host-check --host 0.0.0.0",
66
"start": "npm run build-runtime-env && (ng serve --configuration=local-qa --host 0.0.0.0 & npm run start:ui-docs)",
77
"start-sandbox": "ng serve --configuration=local-sandbox --host 0.0.0.0",
8-
"start:orcid-web": "npm run build-runtime-env && ng serve --configuration=local-orcid-web --host 0.0.0.0",
8+
"start:orcid-web": "npm run build-runtime-env && ng serve --configuration=local-orcid-web --host 0.0.0.0 & npm run start:ui-docs",
99
"start:en": "ng serve --configuration=local-qa-en --disable-host-check",
1010
"start:ar": "ng serve --configuration=local-qa-ar --disable-host-check",
1111
"start:fr": "ng serve --configuration=local-qa-fr --disable-host-check",
@@ -37,7 +37,7 @@
3737
"build:ui:watch": "ng build orcid-ui --watch",
3838
"build:tokens": "ng build orcid-tokens",
3939
"build:ui-docs": "ng build orcid-ui-docs",
40-
"start:ui-docs": "ng serve orcid-ui-docs --port 8080",
40+
"start:ui-docs": "ng serve orcid-ui-docs --port 4201",
4141
"prepare": "husky"
4242
},
4343
"private": true,
@@ -110,4 +110,4 @@
110110
"typescript": "~5.8.3",
111111
"update-browserslist-db": "^1.1.3"
112112
}
113-
}
113+
}

‎projects/orcid-ui-docs/src/app/pages/record-header-loading-page/record-header-loading-page.component.spec.ts‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
import { ComponentFixture, TestBed } from '@angular/core/testing';
1+
import { ComponentFixture, TestBed } from '@angular/core/testing'
22

3-
import { RecordHeaderLoadingPageComponent } from './record-header-loading-page.component';
3+
import { RecordHeaderLoadingPageComponent } from './record-header-loading-page.component'
44

55
describe('RecordHeaderLoadingPageComponent', () => {
6-
let component: RecordHeaderLoadingPageComponent;
7-
let fixture: ComponentFixture<RecordHeaderLoadingPageComponent>;
6+
let component: RecordHeaderLoadingPageComponent
7+
let fixture: ComponentFixture<RecordHeaderLoadingPageComponent>
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
11-
imports: [RecordHeaderLoadingPageComponent]
12-
})
13-
.compileComponents();
11+
imports: [RecordHeaderLoadingPageComponent],
12+
}).compileComponents()
1413

15-
fixture = TestBed.createComponent(RecordHeaderLoadingPageComponent);
16-
component = fixture.componentInstance;
17-
fixture.detectChanges();
18-
});
14+
fixture = TestBed.createComponent(RecordHeaderLoadingPageComponent)
15+
component = fixture.componentInstance
16+
fixture.detectChanges()
17+
})
1918

2019
it('should create', () => {
21-
expect(component).toBeTruthy();
22-
});
23-
});
20+
expect(component).toBeTruthy()
21+
})
22+
})

‎projects/orcid-ui-docs/src/app/pages/record-header-loading-page/record-header-loading-page.component.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import { Component } from '@angular/core';
1+
import { Component } from '@angular/core'
22

33
@Component({
44
selector: 'app-record-header-loading-page',
55
imports: [],
66
templateUrl: './record-header-loading-page.component.html',
7-
styleUrl: './record-header-loading-page.component.scss'
7+
styleUrl: './record-header-loading-page.component.scss',
88
})
9-
export class RecordHeaderLoadingPageComponent {
10-
11-
}
9+
export class RecordHeaderLoadingPageComponent {}

‎projects/orcid-ui-docs/src/app/pages/record-header-page.component.html‎

Lines changed: 444 additions & 144 deletions
Large diffs are not rendered by default.

‎projects/orcid-ui-docs/src/app/pages/skeleton-placeholder-page.component.html‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,47 @@
1-
<app-documentation-page title="Skeleton Placeholder"
2-
description="A generalized shimmering placeholder component for loading states.">
3-
<div controls>
4-
<div class="controls-grid">
5-
<mat-form-field appearance="outline">
6-
<mat-label>Shape</mat-label>
7-
<mat-select [(ngModel)]="config.shape">
8-
<mat-option value="square">Square</mat-option>
9-
<mat-option value="circle">Circle</mat-option>
10-
</mat-select>
11-
</mat-form-field>
1+
<app-documentation-page
2+
title="Skeleton Placeholder"
3+
description="A generalized shimmering placeholder component for loading states."
4+
>
5+
<div controls>
6+
<div class="controls-grid">
7+
<mat-form-field appearance="outline">
8+
<mat-label>Shape</mat-label>
9+
<mat-select [(ngModel)]="config.shape">
10+
<mat-option value="square">Square</mat-option>
11+
<mat-option value="circle">Circle</mat-option>
12+
</mat-select>
13+
</mat-form-field>
1214

13-
<mat-form-field appearance="outline">
14-
<mat-label>Width</mat-label>
15-
<input matInput [(ngModel)]="config.width" />
16-
</mat-form-field>
15+
<mat-form-field appearance="outline">
16+
<mat-label>Width</mat-label>
17+
<input matInput [(ngModel)]="config.width" />
18+
</mat-form-field>
1719

18-
<mat-form-field appearance="outline">
19-
<mat-label>Height</mat-label>
20-
<input matInput [(ngModel)]="config.height" />
21-
</mat-form-field>
22-
</div>
20+
<mat-form-field appearance="outline">
21+
<mat-label>Height</mat-label>
22+
<input matInput [(ngModel)]="config.height" />
23+
</mat-form-field>
2324
</div>
25+
</div>
2426

25-
<div examples>
26-
<div class="example-group">
27-
<h4>Playground</h4>
28-
<div class="example-container">
29-
<orcid-skeleton-placeholder [shape]="config.shape" [width]="config.width"
30-
[height]="config.height"></orcid-skeleton-placeholder>
31-
</div>
32-
</div>
27+
<div examples>
28+
<div class="example-group">
29+
<h4>Playground</h4>
30+
<div class="example-container">
31+
<orcid-skeleton-placeholder
32+
[shape]="config.shape"
33+
[width]="config.width"
34+
[height]="config.height"
35+
></orcid-skeleton-placeholder>
36+
</div>
3337
</div>
38+
</div>
3439

35-
<div inputs>
36-
<ul>
37-
<li><code>shape</code>: 'square' | 'circle' (default: 'square')</li>
38-
<li><code>width</code>: string (default: '100%')</li>
39-
<li><code>height</code>: string (default: '100%')</li>
40-
</ul>
41-
</div>
42-
</app-documentation-page>
40+
<div inputs>
41+
<ul>
42+
<li><code>shape</code>: 'square' | 'circle' (default: 'square')</li>
43+
<li><code>width</code>: string (default: '100%')</li>
44+
<li><code>height</code>: string (default: '100%')</li>
45+
</ul>
46+
</div>
47+
</app-documentation-page>

‎projects/orcid-ui-docs/src/app/pages/skeleton-placeholder-page.component.ts‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
1-
import { Component } from '@angular/core';
2-
import { CommonModule } from '@angular/common';
3-
import { FormsModule } from '@angular/forms';
4-
import { MatFormFieldModule } from '@angular/material/form-field';
5-
import { MatInputModule } from '@angular/material/input';
6-
import { MatSelectModule } from '@angular/material/select';
7-
import { SkeletonPlaceholderComponent } from '@orcid/ui';
8-
import { DocumentationPageComponent } from '../components/documentation-page/documentation-page.component';
1+
import { Component } from '@angular/core'
2+
import { CommonModule } from '@angular/common'
3+
import { FormsModule } from '@angular/forms'
4+
import { MatFormFieldModule } from '@angular/material/form-field'
5+
import { MatInputModule } from '@angular/material/input'
6+
import { MatSelectModule } from '@angular/material/select'
7+
import { SkeletonPlaceholderComponent } from '@orcid/ui'
8+
import { DocumentationPageComponent } from '../components/documentation-page/documentation-page.component'
99

1010
@Component({
11-
selector: 'orcid-skeleton-placeholder-page',
12-
standalone: true,
13-
imports: [
14-
CommonModule,
15-
FormsModule,
16-
MatFormFieldModule,
17-
MatInputModule,
18-
MatSelectModule,
19-
SkeletonPlaceholderComponent,
20-
DocumentationPageComponent
21-
],
22-
templateUrl: './skeleton-placeholder-page.component.html',
23-
styles: [`
24-
.example-container {
25-
padding: 24px;
26-
background: #003449; /* Dark background to see the placeholder */
27-
border-radius: 4px;
28-
}
29-
`]
11+
selector: 'orcid-skeleton-placeholder-page',
12+
standalone: true,
13+
imports: [
14+
CommonModule,
15+
FormsModule,
16+
MatFormFieldModule,
17+
MatInputModule,
18+
MatSelectModule,
19+
SkeletonPlaceholderComponent,
20+
DocumentationPageComponent,
21+
],
22+
templateUrl: './skeleton-placeholder-page.component.html',
23+
styles: [
24+
`
25+
.example-container {
26+
padding: 24px;
27+
background: #003449; /* Dark background to see the placeholder */
28+
border-radius: 4px;
29+
}
30+
`,
31+
],
3032
})
3133
export class SkeletonPlaceholderPageComponent {
32-
config = {
33-
shape: 'square' as 'square' | 'circle',
34-
width: '100px',
35-
height: '100px'
36-
};
34+
config = {
35+
shape: 'square' as 'square' | 'circle',
36+
width: '100px',
37+
height: '100px',
38+
}
3739
}

‎projects/orcid-ui/src/lib/components/record-header-loading/record-header-loading.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<p>record-header-loading works!</p>
1+
<p>record-header-loading works!</p>

‎projects/orcid-ui/src/lib/components/record-header-loading/record-header-loading.component.spec.ts‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
import { ComponentFixture, TestBed } from '@angular/core/testing';
1+
import { ComponentFixture, TestBed } from '@angular/core/testing'
22

3-
import { RecordHeaderLoadingComponent } from './record-header-loading.component';
3+
import { RecordHeaderLoadingComponent } from './record-header-loading.component'
44

55
describe('RecordHeaderLoadingComponent', () => {
6-
let component: RecordHeaderLoadingComponent;
7-
let fixture: ComponentFixture<RecordHeaderLoadingComponent>;
6+
let component: RecordHeaderLoadingComponent
7+
let fixture: ComponentFixture<RecordHeaderLoadingComponent>
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
11-
imports: [RecordHeaderLoadingComponent]
12-
})
13-
.compileComponents();
11+
imports: [RecordHeaderLoadingComponent],
12+
}).compileComponents()
1413

15-
fixture = TestBed.createComponent(RecordHeaderLoadingComponent);
16-
component = fixture.componentInstance;
17-
fixture.detectChanges();
18-
});
14+
fixture = TestBed.createComponent(RecordHeaderLoadingComponent)
15+
component = fixture.componentInstance
16+
fixture.detectChanges()
17+
})
1918

2019
it('should create', () => {
21-
expect(component).toBeTruthy();
22-
});
23-
});
20+
expect(component).toBeTruthy()
21+
})
22+
})

‎projects/orcid-ui/src/lib/components/record-header-loading/record-header-loading.component.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import { Component } from '@angular/core';
1+
import { Component } from '@angular/core'
22

33
@Component({
44
selector: 'orcid-record-header-loading',
55
imports: [],
66
templateUrl: './record-header-loading.component.html',
7-
styleUrl: './record-header-loading.component.scss'
7+
styleUrl: './record-header-loading.component.scss',
88
})
9-
export class RecordHeaderLoadingComponent {
10-
11-
}
9+
export class RecordHeaderLoadingComponent {}

0 commit comments

Comments
 (0)