finalize styling on the summary page

Enterprise-CMCS · Oct 19, 2023 · afaccff · afaccff
1 parent 028664a
commit afaccff
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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/...ts/SubmissionSummarySection/SubmissionTypeSummarySection/SubmissionTypeSummarySection.tsx b/...ts/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
@@ -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}