From afaccff5c10f9738766951e599779da94dd7e590 Mon Sep 17 00:00:00 2001
From: pearl-truss <pearl@truss.works>
Date: Wed, 18 Oct 2023 21:19:31 -0400
Subject: [PATCH] finalize styling on the summary page

---
 .../SectionHeader/SectionHeader.module.scss         |  9 +++++++++
 .../src/components/SectionHeader/SectionHeader.tsx  | 13 +++++++++++--
 .../SubmissionTypeSummarySection.tsx                |  6 ++++++
 .../pages/SubmissionSummary/SubmissionSummary.tsx   |  3 ++-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/services/app-web/src/components/SectionHeader/SectionHeader.module.scss b/services/app-web/src/components/SectionHeader/SectionHeader.module.scss
index ae49b82e93..04d2ed570c 100644
--- a/services/app-web/src/components/SectionHeader/SectionHeader.module.scss
+++ b/services/app-web/src/components/SectionHeader/SectionHeader.module.scss
@@ -54,6 +54,15 @@
     justify-content: space-between;
     align-items: center;
     padding-bottom: units(2);
+
+    &.alignTop {
+        align-items: start;
+    }
+
+    a {
+        display: block;
+        margin-top: 17.5px;
+    }
 }
 
 .summarySectionHeaderBorder {
diff --git a/services/app-web/src/components/SectionHeader/SectionHeader.tsx b/services/app-web/src/components/SectionHeader/SectionHeader.tsx
index dfe9a47edd..f6457aa9ce 100644
--- a/services/app-web/src/components/SectionHeader/SectionHeader.tsx
+++ b/services/app-web/src/components/SectionHeader/SectionHeader.tsx
@@ -4,6 +4,8 @@ import styles from './SectionHeader.module.scss'
 
 export type SectionHeaderProps = {
     header: string
+    headerLinkURL?: string
+    headerLinkLabel?: string
     navigateTo?: string
     children?: React.ReactNode
     sectionId?: string
@@ -13,6 +15,8 @@ export type SectionHeaderProps = {
 
 export const SectionHeader = ({
     header,
+    headerLinkURL,
+    headerLinkLabel,
     navigateTo,
     children,
     sectionId,
@@ -23,10 +27,15 @@ export const SectionHeader = ({
         <div
             className={`${styles.summarySectionHeader} ${
                 !hideBorder ? styles.summarySectionHeaderBorder : ''
-            }`}
+            } ${headerLinkURL ? styles.alignTop : ''}`}
             id={sectionId}
         >
-            <h2 id={headerId}>{header}</h2>
+            <div>
+                <h2 id={headerId}>{header}</h2>
+            {headerLinkURL && (
+                <Link href={headerLinkURL}>{headerLinkLabel}</Link>
+            )}
+            </div>
             <div>
                 {navigateTo && (
                     <Link
diff --git a/services/app-web/src/components/SubmissionSummarySection/SubmissionTypeSummarySection/SubmissionTypeSummarySection.tsx b/services/app-web/src/components/SubmissionSummarySection/SubmissionTypeSummarySection/SubmissionTypeSummarySection.tsx
index e45f0d2772..54ff30de2f 100644
--- a/services/app-web/src/components/SubmissionSummarySection/SubmissionTypeSummarySection/SubmissionTypeSummarySection.tsx
+++ b/services/app-web/src/components/SubmissionSummarySection/SubmissionTypeSummarySection/SubmissionTypeSummarySection.tsx
@@ -18,6 +18,8 @@ export type SubmissionTypeSummarySectionProps = {
     submission: HealthPlanFormDataType
     statePrograms: Program[]
     navigateTo?: string
+    headerLinkURL?: string
+    headerLinkLabel?: string
     headerChildComponent?: React.ReactElement
     initiallySubmittedAt?: Date
     submissionName: string
@@ -27,6 +29,8 @@ export const SubmissionTypeSummarySection = ({
     submission,
     statePrograms,
     navigateTo,
+    headerLinkURL,
+    headerLinkLabel,
     headerChildComponent,
     initiallySubmittedAt,
     submissionName,
@@ -41,6 +45,8 @@ export const SubmissionTypeSummarySection = ({
         <section id="submissionTypeSection" className={styles.summarySection}>
             <SectionHeader
                 header={submissionName}
+                headerLinkURL={headerLinkURL}
+                headerLinkLabel={headerLinkLabel}
                 navigateTo={navigateTo}
                 headerId={'submissionName'}
             >
diff --git a/services/app-web/src/pages/SubmissionSummary/SubmissionSummary.tsx b/services/app-web/src/pages/SubmissionSummary/SubmissionSummary.tsx
index 57fce4c85c..45f47f0262 100644
--- a/services/app-web/src/pages/SubmissionSummary/SubmissionSummary.tsx
+++ b/services/app-web/src/pages/SubmissionSummary/SubmissionSummary.tsx
@@ -161,12 +161,13 @@ export const SubmissionSummary = (): React.ReactElement => {
                 )}
 
                 <SubmissionTypeSummarySection
+                    headerLinkURL={`/submissions/${pkg.id}/MCCRS-record-number`}
+                    headerLinkLabel='Add MC-CRS record number'
                     submission={packageData}
                     submissionName={name}
                     headerChildComponent={
                         isCMSUser ? (
                             <>
-                                <Link href={`/submissions/${pkg.id}/MCCRS-record-number`}>Add MC-CRS record number</Link>
                                 <UnlockModalButton
                                     modalRef={modalRef}
                                     disabled={disableUnlockButton}