From cf6c0c2c2c1826bffed2959add8778df1282f3ea Mon Sep 17 00:00:00 2001
From: Romuald Caplier <romuald.caplier@camptocamp.com>
Date: Fri, 24 May 2024 15:34:11 +0200
Subject: [PATCH] feat(datahub): make related-record-card.component having an
 base class and extra class

---
 .../related-record-card.component.html        |  2 +-
 .../related-record-card.component.ts          | 23 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
index 932c405b23..85fb920c14 100644
--- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
+++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
@@ -1,5 +1,5 @@
 <a
-  class="w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]"
+  [class]="classList"
   [routerLink]="['/dataset', record.uniqueIdentifier]"
   target="_blank"
 >
diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts
index f883b3c31b..c166ea575d 100644
--- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts
+++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
 
 @Component({
@@ -8,5 +8,26 @@ import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RelatedRecordCardComponent {
+  private readonly baseClasses: string
+
   @Input() record: CatalogRecord
+  @Input() extraClass = ''
+
+  constructor() {
+    this.baseClasses = [
+      'w-72',
+      'h-96',
+      'overflow-hidden',
+      'rounded-lg',
+      'bg-white',
+      'cursor-pointer',
+      'block',
+      'hover:-translate-y-2 ',
+      'duration-[180ms]',
+    ].join(' ')
+  }
+
+  get classList() {
+    return `${this.baseClasses} ${this.extraClass}`
+  }
 }