DSC-2715 Created new component for the submission legend

(cherry picked from commit f57ec9d46b7ba7675300be1ae68536e736ea8f52)

Author: Mattia Vianelli

src/app/submission/form/submission-form.component.html

@@ -8,13 +8,14 @@
           [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
           <div class="clearfix"></div>
         </div>
-      }
+      <ds-submission-legend *ngIf="showSubmissionLegend" class="submission-form-header-legend">
+      </ds-submission-legend>
       <div class="submission-form-header-item mb-3 mb-sm-0 flex-sm-grow-1 flex-md-grow-0">
         @if (!isSectionHidden) {
           <ds-submission-form-collection
             [currentCollectionId]="collectionId"
             [currentDefinition]="definitionId"
-                                           [entityType]="entityType"
+            [entityType]="entityType"
             [submissionId]="submissionId"
             [collectionModifiable]="collectionModifiable"
             [isReadonly]="isSectionReadonly"

src/app/submission/form/submission-form.component.scss

@@ -9,6 +9,10 @@
   flex-grow: 1;
 }
 
+.submission-form-header-legend {
+  width: 100%;
+}
+
 .submission-form-footer {
   border-radius: var(--bs-card-border-radius);
   bottom: 0;

src/app/submission/submission-legend/submission-legend.component.html

@@ -0,0 +1 @@
+<p [innerHTML]="legendText | translate"></p>

src/app/submission/submission-legend/submission-legend.component.scss

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+p {
+  display: inline-block;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  background-color: #fff;
+  font-size: 0.875rem;
+  color: #212529;
+}

src/app/submission/submission-legend/submission-legend.component.spec.ts

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

src/app/submission/submission-legend/submission-legend.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ds-submission-legend',
+  templateUrl: './submission-legend.component.html',
+  styleUrls: ['./submission-legend.component.scss']
+})
+export class SubmissionLegendComponent {
+  legendText = 'submission.sections.general.legend';
+}

src/assets/i18n/en.json5

@@ -7368,6 +7368,8 @@
 
   "submission.sections.general.sections_not_valid": "There are incomplete sections.",
 
+  "submission.sections.general.legend": "<h3><b>Mandatory Fields</b></h3><p>Fields marked with an asterisk (*) must be completed before the submision can be finalized.</p>",
+
   "submission.sections.identifiers.info": "The following identifiers will be created for your item:",
 
   "submission.sections.identifiers.no_handle": "No handles have been minted for this item.",