Further styling cleanup for rate summary/dashboard (#2022)

* Fix SectionHeader scss - target mcrrs styles to just that class * Undo plural change in submission count * Fixup tests * update react-select to get better a11y behaviors
Enterprise-CMCS · Nov 6, 2023 · 97adcc1 · 97adcc1
1 parent dbfcb39
commit 97adcc1
Show file tree

Hide file tree

Showing 24 changed files with 145 additions and 98 deletions.
diff --git a/services/app-web/package.json b/services/app-web/package.json
@@ -107,7 +107,7 @@
         "react-dom": "^18.2.0",
         "react-error-boundary": "^4.0.10",
         "react-router-dom": "^6.5.0",
-        "react-select": "^5.7.0",
+        "react-select": "^5.7.7",
         "sass": "^1.49.11",
         "typescript": "^4.4.4",
         "url-parse": "^1.5.2",

diff --git a/services/app-web/src/components/SectionHeader/SectionHeader.module.scss b/services/app-web/src/components/SectionHeader/SectionHeader.module.scss
@@ -13,15 +13,15 @@
     padding-bottom: units(1);
     min-height: 3rem;
 
-    &.alignTop {
+    &.hasSubheader {
         align-items: start;
+        a {
+            display: block;
+            margin-top: 17.5px;
+            padding-bottom: units(1);
+        }
     }
 
-    a {
-        display: block;
-        margin-top: 17.5px;
-        padding-bottom: units(1);
-    } 
 }
 
 .summarySectionHeaderBorder {

diff --git a/services/app-web/src/components/SectionHeader/SectionHeader.stories.tsx b/services/app-web/src/components/SectionHeader/SectionHeader.stories.tsx
@@ -20,7 +20,7 @@ WithAction.decorators = [(Story) => ProvidersDecorator(Story, {})]
 
 WithAction.args = {
     header: 'Contract details',
-    navigateTo: 'contract-details',
+    editNavigateTo: 'contract-details',
 }
 
 export const WithoutAction = Template.bind({})

diff --git a/services/app-web/src/components/SectionHeader/SectionHeader.test.tsx b/services/app-web/src/components/SectionHeader/SectionHeader.test.tsx
@@ -22,9 +22,9 @@ describe('SectionHeader', () => {
             screen.getByRole('button', { name: 'Click Me' })
         ).toBeInTheDocument()
     })
-    it('displays Edit link if navigateTo prop is passed in', () => {
+    it('displays Edit link if editNavigateTo prop is passed in', () => {
         renderWithProviders(
-            <SectionHeader header="Page 2" navigateTo="/some-edit-path">
+            <SectionHeader header="Page 2" editNavigateTo="/some-edit-path">
                 <button>Click Me</button>
             </SectionHeader>
         )

diff --git a/services/app-web/src/components/SectionHeader/SectionHeader.tsx b/services/app-web/src/components/SectionHeader/SectionHeader.tsx
@@ -5,9 +5,9 @@ import classNames from 'classnames'
 
 export type SectionHeaderProps = {
     header: string
-    navigateTo?: string
     children?: React.ReactNode
-    subHeaderComponent?: React.ReactNode
+    editNavigateTo?: string // Controls appearance of edit link to the right of main heading - should be pathname substring for use with NavLink
+    subHeaderComponent?: React.ReactNode // Controls appearance of additional component below main heading
     sectionId?: string
     headerId?: string
     hideBorder?: boolean
@@ -16,7 +16,7 @@ export type SectionHeaderProps = {
 export const SectionHeader = ({
     header,
     subHeaderComponent,
-    navigateTo,
+    editNavigateTo,
     children,
     sectionId,
     headerId,
@@ -25,7 +25,7 @@ export const SectionHeader = ({
     const classes = classNames({
         [styles.summarySectionHeader]: true,
         [styles.summarySectionHeaderBorder]: !hideBorder,
-        [styles.alignTop]: subHeaderComponent,
+        [styles.hasSubheader]: subHeaderComponent,
     })
     return (
         <div className={classes} id={sectionId}>
@@ -34,12 +34,12 @@ export const SectionHeader = ({
                 {subHeaderComponent}
             </div>
             <div>
-                {navigateTo && (
+                {editNavigateTo && (
                     <Link
                         variant="unstyled"
                         asCustom={NavLink}
                         className="usa-button usa-button--outline"
-                        to={navigateTo}
+                        to={editNavigateTo}
                     >
                         Edit <span className="srOnly">{header}</span>
                     </Link>

diff --git a/...onents/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.stories.tsx b/...onents/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.stories.tsx
@@ -24,7 +24,7 @@ WithAction.decorators = [(Story) => ProvidersDecorator(Story, {})]
 
 WithAction.args = {
     submission: mockContractAndRatesDraft(),
-    navigateTo: 'contract-details',
+    editNavigateTo: 'contract-details',
 }
 
 export const WithoutAction = Template.bind({})

diff --git a/...omponents/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.test.tsx b/...omponents/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.test.tsx
@@ -15,7 +15,7 @@ describe('ContactsSummarySection', () => {
         renderWithProviders(
             <ContactsSummarySection
                 submission={draftSubmission}
-                navigateTo="contacts"
+                editNavigateTo="contacts"
             />
         )
 
@@ -54,7 +54,7 @@ describe('ContactsSummarySection', () => {
         renderWithProviders(
             <ContactsSummarySection
                 submission={draftSubmission}
-                navigateTo="contacts"
+                editNavigateTo="contacts"
             />
         )
 

diff --git a/...src/components/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.tsx b/...src/components/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.tsx
@@ -11,7 +11,7 @@ import { DataDetail, DataDetailContactField } from '../../DataDetail'
 
 export type ContactsSummarySectionProps = {
     submission: HealthPlanFormDataType
-    navigateTo?: string
+    editNavigateTo?: string
 }
 
 export const getActuaryFirm = (actuaryContact: ActuaryContact): string => {
@@ -32,13 +32,16 @@ export const getActuaryFirm = (actuaryContact: ActuaryContact): string => {
 
 export const ContactsSummarySection = ({
     submission,
-    navigateTo,
+    editNavigateTo,
 }: ContactsSummarySectionProps): React.ReactElement => {
     const isSubmitted = submission.status === 'SUBMITTED'
 
     return (
         <section id="stateContacts" className={styles.summarySection}>
-            <SectionHeader header="State contacts" navigateTo={navigateTo} />
+            <SectionHeader
+                header="State contacts"
+                editNavigateTo={editNavigateTo}
+            />
 
             <GridContainer>
                 <Grid row>

diff --git a/...ionSummarySection/ContractDetailsSummarySection/ContractDetailsSummarySection.stories.tsx b/...ionSummarySection/ContractDetailsSummarySection/ContractDetailsSummarySection.stories.tsx
@@ -24,7 +24,7 @@ WithAction.decorators = [(Story) => ProvidersDecorator(Story, {})]
 
 WithAction.args = {
     submission: mockContractAndRatesDraft(),
-    navigateTo: 'contract-details',
+    editNavigateTo: 'contract-details',
 }
 
 export const WithoutAction = Template.bind({})

diff --git a/...issionSummarySection/ContractDetailsSummarySection/ContractDetailsSummarySection.test.tsx b/...issionSummarySection/ContractDetailsSummarySection/ContractDetailsSummarySection.test.tsx
@@ -36,7 +36,7 @@ describe('ContractDetailsSummarySection', () => {
             <ContractDetailsSummarySection
                 documentDateLookupTable={{ previousSubmissionDate: '01/01/01' }}
                 submission={testSubmission}
-                navigateTo="contract-details"
+                editNavigateTo="contract-details"
                 submissionName="MN-PMAP-0001"
             />,
             {
@@ -105,7 +105,7 @@ describe('ContractDetailsSummarySection', () => {
             <ContractDetailsSummarySection
                 documentDateLookupTable={{ previousSubmissionDate: '01/01/01' }}
                 submission={mockContractAndRatesDraft()}
-                navigateTo="contract-details"
+                editNavigateTo="contract-details"
                 submissionName="MN-PMAP-0001"
             />
         )
@@ -616,7 +616,7 @@ describe('ContractDetailsSummarySection', () => {
                     }}
                     submission={contractWithUnansweredProvisions}
                     submissionName="MN-PMAP-0001"
-                    navigateTo="contract-details"
+                    editNavigateTo="contract-details"
                 />,
                 {
                     apolloProvider: {
@@ -667,7 +667,7 @@ describe('ContractDetailsSummarySection', () => {
                     }}
                     submission={contractWithUnansweredProvisions}
                     submissionName="MN-PMAP-0001"
-                    navigateTo="contract-details"
+                    editNavigateTo="contract-details"
                 />,
                 {
                     apolloProvider: {
@@ -772,7 +772,7 @@ describe('ContractDetailsSummarySection', () => {
                     }}
                     submission={contractWithAllUnmodifiedProvisions}
                     submissionName="MN-PMAP-0001"
-                    navigateTo="contract-details"
+                    editNavigateTo="contract-details"
                 />,
                 {
                     apolloProvider: {

diff --git a/.../SubmissionSummarySection/ContractDetailsSummarySection/ContractDetailsSummarySection.tsx b/.../SubmissionSummarySection/ContractDetailsSummarySection/ContractDetailsSummarySection.tsx
@@ -37,7 +37,7 @@ import { InlineDocumentWarning } from '../../DocumentWarning'
 
 export type ContractDetailsSummarySectionProps = {
     submission: HealthPlanFormDataType
-    navigateTo?: string
+    editNavigateTo?: string
     documentDateLookupTable: DocumentDateLookupTableType
     isCMSUser?: boolean
     submissionName: string
@@ -60,7 +60,7 @@ function renderDownloadButton(zippedFilesURL: string | undefined | Error) {
 
 export const ContractDetailsSummarySection = ({
     submission,
-    navigateTo, // this is the edit link for the section. When this prop exists, summary section is loaded in edit mode
+    editNavigateTo, // this is the edit link for the section. When this prop exists, summary section is loaded in edit mode
     documentDateLookupTable,
     submissionName,
     onDocumentError,
@@ -75,7 +75,7 @@ export const ContractDetailsSummarySection = ({
     const contractSupportingDocuments = submission.documents.filter((doc) =>
         doc.documentCategories.includes('CONTRACT_RELATED' as const)
     )
-    const isEditing = !isSubmitted(submission) && navigateTo !== undefined
+    const isEditing = !isSubmitted(submission) && editNavigateTo !== undefined
     const applicableFederalAuthorities = isCHIPOnly(submission)
         ? submission.federalAuthorities.filter((authority) =>
               federalAuthorityKeysForCHIP.includes(
@@ -134,7 +134,10 @@ export const ContractDetailsSummarySection = ({
 
     return (
         <section id="contractDetailsSection" className={styles.summarySection}>
-            <SectionHeader header="Contract details" navigateTo={navigateTo}>
+            <SectionHeader
+                header="Contract details"
+                editNavigateTo={editNavigateTo}
+            >
                 {isSubmitted(submission) &&
                     !isPreviousSubmission &&
                     renderDownloadButton(zippedFilesURL)}

diff --git a/.../SubmissionSummarySection/RateDetailsSummarySection/RateDetailsSummarySection.stories.tsx b/.../SubmissionSummarySection/RateDetailsSummarySection/RateDetailsSummarySection.stories.tsx
@@ -24,7 +24,7 @@ WithAction.decorators = [(Story) => ProvidersDecorator(Story, {})]
 
 WithAction.args = {
     submission: mockContractAndRatesDraft(),
-    navigateTo: 'contract-details',
+    editNavigateTo: 'contract-details',
     submissionName: 'StoryBook',
     statePrograms: [],
 }