Feat/180,189 Preprint provider overview

src/app/core/components/breadcrumb/breadcrumb.component.scss

@@ -1,7 +1,9 @@
 @use "assets/styles/variables" as var;
 
 .breadcrumbs {
-  color: var.$dark-blue-1;
+  color: var(--header-color, var.$dark-blue-1);
   font-weight: 600;
   text-transform: capitalize;
+  background-color: var(--header-background-color);
+  background-image: var(--header-background-image-url);
 }

src/app/core/components/header/header.component.html

@@ -1,14 +1,14 @@
 <header class="header flex align-items-center justify-content-between">
   <osf-breadcrumb />
 
-  <div class="dropdown-button ml-auto">
+  <div class="header-dropdown-button ml-auto">
     <p-button
       class="custom-dark-hover"
       icon="fas fa-chevron-down"
       iconPos="right"
       [label]="currentUser()?.fullName"
       (click)="menu.toggle($event)"
-    ></p-button>
+    />
 
     <p-menu appendTo="body" #menu [model]="items" popup>
       <ng-template #item let-item>

src/app/core/components/header/header.component.scss

@@ -6,4 +6,6 @@
   padding: mix.rem(12px) mix.rem(24px);
   height: mix.rem(52px);
   width: 100%;
+  background-color: var(--header-background-color);
+  background-image: var(--header-background-image-url);
 }

src/app/features/preprints/components/advisory-board/advisory-board.component.html

@@ -1,7 +1,7 @@
 @if (htmlContent()) {
   <section
     [ngClass]="{ 'osf-preprint-service': isLandingPage() }"
-    class="advisory-board-section py-5 px-3 flex flex-column md:py-6 md:px-4"
+    class="preprints-advisory-board-section pt-3 pb-5 px-3 flex flex-column md:pt-4 md:pb-6 md:px-4"
     [innerHTML]="htmlContent()"
   ></section>
 }

src/app/features/preprints/components/advisory-board/advisory-board.component.scss

@@ -1,15 +0,0 @@
-@use "assets/styles/variables" as var;
-@use "assets/styles/mixins" as mix;
-
-.advisory-board-section {
-  background: var(--preprints-branding-hero-background-image-url);
-
-  &.osf-preprint-service {
-    background-image: none;
-    background-color: var(--preprints-branding-primary-color);
-  }
-}
-
-.m-b-lg {
-  margin-bottom: mix.rem(24px);
-}

src/app/features/preprints/components/browse-by-subjects/browse-by-subjects.component.html

@@ -1,25 +1,20 @@
-<section class="py-5 px-3 flex flex-column bg-white gap-6 md:py-6 md:px-4">
+<section class="preprints-browse-by-subjects-section py-5 px-3 flex flex-column bg-white gap-6 md:py-6 md:px-4">
   <h2 class="text-2xl">{{ 'preprints.browseBySubjects.title' | translate }}</h2>
   <section class="grid">
-    @if (isLoading()) {
+    @if (areSubjectsLoading() || isProviderLoading()) {
       @for (_ of skeletonArray; track $index) {
-        <p-card class="col-12 p-1 md:col-6 md:p-2">
-          <div class="flex justify-content-center">
-            <p-skeleton width="10rem" height="1.5rem"></p-skeleton>
-          </div>
-        </p-card>
+        <p-skeleton class="col-12 md:col-6" height="4rem" />
       }
     } @else {
       @for (subject of subjects(); track subject) {
-        <p-card class="col-12 p-1 md:col-6 md:p-2">
-          <div class="provider-subject">
-            <h3 class="text-center">
-              <a class="subject-link" routerLink="/search" [queryParams]="linksToSearchPageForSubject()[$index]">{{
-                subject.text
-              }}</a>
-            </h3>
-          </div>
-        </p-card>
+        <p-button
+          class="provider-subject col-12 md:col-6"
+          styleClass="w-full p-4"
+          [label]="subject.text"
+          severity="secondary"
+          [routerLink]="isLandingPage() ? '/search' : 'discover'"
+          [queryParams]="linksToSearchPageForSubject()[$index]"
+        />
       }
     }
   </section>

src/app/features/preprints/components/browse-by-subjects/browse-by-subjects.component.scss

@@ -1,7 +0,0 @@
-@use "assets/styles/variables" as var;
-
-.provider-subject {
-  .subject-link {
-    color: var.$dark-blue-1;
-  }
-}

src/app/features/preprints/components/browse-by-subjects/browse-by-subjects.component.ts

@@ -1,6 +1,6 @@
 import { TranslateModule } from '@ngx-translate/core';
 
-import { Card } from 'primeng/card';
+import { Button } from 'primeng/button';
 import { Skeleton } from 'primeng/skeleton';
 
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
@@ -13,7 +13,7 @@ import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'osf-browse-by-subjects',
-  imports: [Card, RouterLink, Skeleton, TranslateModule],
+  imports: [RouterLink, Skeleton, TranslateModule, Button],
   templateUrl: './browse-by-subjects.component.html',
   styleUrl: './browse-by-subjects.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -32,6 +32,8 @@ export class BrowseBySubjectsComponent {
       ]),
     }));
   });
-  isLoading = input.required<boolean>();
-  skeletonArray = Array.from({ length: 10 }, (_, i) => i + 1);
+  areSubjectsLoading = input.required<boolean>();
+  isProviderLoading = input.required<boolean>();
+  isLandingPage = input<boolean>(false);
+  skeletonArray = Array.from({ length: 6 }, (_, i) => i + 1);
 }

src/app/features/preprints/components/index.ts

@@ -1,3 +1,4 @@
 export { BrowseBySubjectsComponent } from './browse-by-subjects/browse-by-subjects.component';
 export { PreprintServicesComponent } from './preprint-services/preprint-services.component';
 export { AdvisoryBoardComponent } from '@osf/features/preprints/components/advisory-board/advisory-board.component';
+export { PreprintsHelpDialogComponent } from '@osf/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component';

src/app/features/preprints/components/preprint-provider-footer/preprint-provider-footer.component.html

@@ -0,0 +1,3 @@
+@if (footerHtml()) {
+  <section class="preprints-footer-section text-left bg-white px-3 md:px-4" [innerHTML]="footerHtml()"></section>
+}

src/app/features/preprints/components/preprint-provider-footer/preprint-provider-footer.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreprintProviderFooterComponent } from './preprint-provider-footer.component';
+
+describe('PreprintProviderFooterComponent', () => {
+  let component: PreprintProviderFooterComponent;
+  let fixture: ComponentFixture<PreprintProviderFooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PreprintProviderFooterComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PreprintProviderFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/preprints/components/preprint-provider-footer/preprint-provider-footer.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { StringOrNullOrUndefined } from '@core/helpers';
+
+@Component({
+  selector: 'osf-preprint-provider-footer',
+  imports: [],
+  templateUrl: './preprint-provider-footer.component.html',
+  styleUrl: './preprint-provider-footer.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PreprintProviderFooterComponent {
+  footerHtml = input.required<StringOrNullOrUndefined>();
+}

src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html

@@ -0,0 +1,71 @@
+<section class="preprints-hero-container py-5 px-3 flex flex-column gap-4 md:py-6 md:px-4">
+  <div class="flex flex-column align-items-start gap-4 md:flex-row">
+    <div class="flex align-items-center gap-2">
+      @if (isPreprintProviderLoading()) {
+        <p-skeleton width="3rem" height="1.5rem" />
+        <p-skeleton width="12rem" height="1.5rem" />
+      } @else {
+        <img
+          class="preprint-provider-hero-logo"
+          alt="Provider Logo"
+          height="40"
+          [src]="preprintProvider()!.brand.heroLogoImageUrl"
+        />
+        <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
+      }
+    </div>
+
+    @if (isPreprintProviderLoading()) {
+      <p-skeleton class="ml-auto" width="8rem" height="2rem" />
+    } @else if (preprintProvider()!.allowSubmissions) {
+      <p-button
+        class="ml-auto w-full md:w-auto preprints-branding-button"
+        styleClass="w-full md:w-auto"
+        [label]="'preprints.addPreprint' | translate: { preprintWord: preprintProvider()!.preprintWord }"
+        (click)="addPreprint()"
+      />
+    }
+  </div>
+
+  <div class="provider-description">
+    @if (isPreprintProviderLoading()) {
+      <div class="flex flex-column gap-2">
+        <p-skeleton width="40%" height="1.5rem"></p-skeleton>
+        <p-skeleton width="70%" height="1.5rem"></p-skeleton>
+
+        <p-skeleton width="10%" height="1rem"></p-skeleton>
+      </div>
+    } @else {
+      <div [innerHTML]="preprintProvider()!.descriptionHtml | decodeHtml"></div>
+      <a class="link font-bold" routerLink="/preprints">{{ 'preprints.poweredBy' | translate }}</a>
+    }
+  </div>
+
+  <div class="search-input-container">
+    <img
+      ngSrc="assets/icons/colored/question-mark.svg"
+      alt="preprints help"
+      tabindex="0"
+      role="button"
+      height="36"
+      width="36"
+      class="cursor-pointer"
+      (click)="openHelpDialog()"
+      (keydown.enter)="openHelpDialog()"
+    />
+
+    <osf-search-input
+      class="w-full"
+      [control]="searchControl"
+      [placeholder]="'preprints.searchPlaceholder' | translate"
+      (triggerSearch)="redirectToDiscoverPageWithValue()"
+    />
+  </div>
+
+  <!-- [Rni] TODO: add link to an example preprint -->
+  @if (isPreprintProviderLoading()) {
+    <p-skeleton width="10%" height="1rem" />
+  } @else {
+    <a class="link font-bold">{{ 'preprints.showExample' | translate }}</a>
+  }
+</section>

src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.scss

@@ -0,0 +1,12 @@
+@use "assets/styles/mixins" as mix;
+
+.search-input-container {
+  position: relative;
+
+  img {
+    position: absolute;
+    right: mix.rem(4px);
+    top: mix.rem(4px);
+    z-index: 1;
+  }
+}

src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreprintProviderHeroComponent } from './preprint-provider-hero.component';
+
+describe('PreprintProviderDescriptionComponent', () => {
+  let component: PreprintProviderHeroComponent;
+  let fixture: ComponentFixture<PreprintProviderHeroComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PreprintProviderHeroComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PreprintProviderHeroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts

@@ -0,0 +1,57 @@
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DialogService } from 'primeng/dynamicdialog';
+import { Skeleton } from 'primeng/skeleton';
+
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+
+import { PreprintsHelpDialogComponent } from '@osf/features/preprints/components';
+import { PreprintProviderDetails } from '@osf/features/preprints/models';
+import { SearchInputComponent } from '@shared/components';
+import { ResourceTab } from '@shared/enums';
+import { DecodeHtmlPipe } from '@shared/pipes';
+
+@Component({
+  selector: 'osf-preprint-provider-hero',
+  imports: [Button, RouterLink, SearchInputComponent, Skeleton, TranslatePipe, NgOptimizedImage, DecodeHtmlPipe],
+  templateUrl: './preprint-provider-hero.component.html',
+  styleUrl: './preprint-provider-hero.component.scss',
+  providers: [DialogService],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PreprintProviderHeroComponent {
+  protected translateService = inject(TranslateService);
+  protected dialogService = inject(DialogService);
+  private readonly router = inject(Router);
+  preprintProvider = input.required<PreprintProviderDetails | undefined>();
+  isPreprintProviderLoading = input.required<boolean>();
+  addPreprintClicked = output<void>();
+
+  protected searchControl = new FormControl<string>('');
+
+  addPreprint() {
+    this.addPreprintClicked.emit();
+  }
+
+  redirectToDiscoverPageWithValue() {
+    const searchValue = this.searchControl.value;
+
+    this.router.navigate(['/discover'], {
+      queryParams: { search: searchValue, resourceTab: ResourceTab.Preprints },
+    });
+  }
+
+  openHelpDialog() {
+    this.dialogService.open(PreprintsHelpDialogComponent, {
+      focusOnShow: false,
+      header: this.translateService.instant('preprints.helpDialog.header'),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+    });
+  }
+}

src/app/features/preprints/components/preprint-services/preprint-services.component.html

@@ -6,9 +6,9 @@ <h2 class="text-2xl text-white">{{ 'preprints.services.title' | translate }}</h2
 
   <section class="grid justify-content-center align-items-center gap-3 mt-6">
     @for (preprintProvider of preprintProvidersToAdvertise(); track preprintProvider.id) {
-      <!-- [Rni] TODO: add link to preprint provider page -->
       <a
         class="preprint-provider-grid-item"
+        [routerLink]="[preprintProvider.id]"
         [style.background-image]="'url(' + preprintProvider.whiteWideImageUrl + ')'"
         [title]="preprintProvider.name"
       ></a>

src/app/features/preprints/components/preprint-services/preprint-services.component.ts

@@ -1,12 +1,13 @@
 import { TranslateModule } from '@ngx-translate/core';
 
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 import { PreprintProviderToAdvertise } from '@osf/features/preprints/models';
 
 @Component({
   selector: 'osf-preprint-services',
-  imports: [TranslateModule],
+  imports: [TranslateModule, RouterLink],
   templateUrl: './preprint-services.component.html',
   styleUrl: './preprint-services.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.html

@@ -0,0 +1,8 @@
+<div class="dialog-content">
+  <p class="py-3">
+    {{ 'preprints.helpDialog.message' | translate }}
+    <a class="font-bold" href="https://help.osf.io/article/181-search-and-discover-preprints" target="_blank"
+      >{{ 'preprints.helpDialog.linkText' | translate }}.</a
+    >
+  </p>
+</div>

src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.scss

@@ -0,0 +1,7 @@
+@use "assets/styles/variables" as var;
+
+.dialog-content {
+  border-top: 1px solid var.$grey-2;
+  border-bottom: 1px solid var.$grey-2;
+  line-height: 2;
+}