Skip to content

Commit

Permalink
Further styling cleanup for rate summary/dashboard (#2022)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
haworku authored Nov 6, 2023
1 parent dbfcb39 commit 97adcc1
Show file tree
Hide file tree
Showing 24 changed files with 145 additions and 98 deletions.
2 changes: 1 addition & 1 deletion services/app-web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
12 changes: 6 additions & 6 deletions services/app-web/src/components/SectionHeader/SectionHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -16,7 +16,7 @@ export type SectionHeaderProps = {
export const SectionHeader = ({
header,
subHeaderComponent,
navigateTo,
editNavigateTo,
children,
sectionId,
headerId,
Expand All @@ -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}>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ WithAction.decorators = [(Story) => ProvidersDecorator(Story, {})]

WithAction.args = {
submission: mockContractAndRatesDraft(),
navigateTo: 'contract-details',
editNavigateTo: 'contract-details',
}

export const WithoutAction = Template.bind({})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ describe('ContactsSummarySection', () => {
renderWithProviders(
<ContactsSummarySection
submission={draftSubmission}
navigateTo="contacts"
editNavigateTo="contacts"
/>
)

Expand Down Expand Up @@ -54,7 +54,7 @@ describe('ContactsSummarySection', () => {
renderWithProviders(
<ContactsSummarySection
submission={draftSubmission}
navigateTo="contacts"
editNavigateTo="contacts"
/>
)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { DataDetail, DataDetailContactField } from '../../DataDetail'

export type ContactsSummarySectionProps = {
submission: HealthPlanFormDataType
navigateTo?: string
editNavigateTo?: string
}

export const getActuaryFirm = (actuaryContact: ActuaryContact): string => {
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ WithAction.decorators = [(Story) => ProvidersDecorator(Story, {})]

WithAction.args = {
submission: mockContractAndRatesDraft(),
navigateTo: 'contract-details',
editNavigateTo: 'contract-details',
}

export const WithoutAction = Template.bind({})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe('ContractDetailsSummarySection', () => {
<ContractDetailsSummarySection
documentDateLookupTable={{ previousSubmissionDate: '01/01/01' }}
submission={testSubmission}
navigateTo="contract-details"
editNavigateTo="contract-details"
submissionName="MN-PMAP-0001"
/>,
{
Expand Down Expand Up @@ -105,7 +105,7 @@ describe('ContractDetailsSummarySection', () => {
<ContractDetailsSummarySection
documentDateLookupTable={{ previousSubmissionDate: '01/01/01' }}
submission={mockContractAndRatesDraft()}
navigateTo="contract-details"
editNavigateTo="contract-details"
submissionName="MN-PMAP-0001"
/>
)
Expand Down Expand Up @@ -616,7 +616,7 @@ describe('ContractDetailsSummarySection', () => {
}}
submission={contractWithUnansweredProvisions}
submissionName="MN-PMAP-0001"
navigateTo="contract-details"
editNavigateTo="contract-details"
/>,
{
apolloProvider: {
Expand Down Expand Up @@ -667,7 +667,7 @@ describe('ContractDetailsSummarySection', () => {
}}
submission={contractWithUnansweredProvisions}
submissionName="MN-PMAP-0001"
navigateTo="contract-details"
editNavigateTo="contract-details"
/>,
{
apolloProvider: {
Expand Down Expand Up @@ -772,7 +772,7 @@ describe('ContractDetailsSummarySection', () => {
}}
submission={contractWithAllUnmodifiedProvisions}
submissionName="MN-PMAP-0001"
navigateTo="contract-details"
editNavigateTo="contract-details"
/>,
{
apolloProvider: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import { InlineDocumentWarning } from '../../DocumentWarning'

export type ContractDetailsSummarySectionProps = {
submission: HealthPlanFormDataType
navigateTo?: string
editNavigateTo?: string
documentDateLookupTable: DocumentDateLookupTableType
isCMSUser?: boolean
submissionName: string
Expand All @@ -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,
Expand All @@ -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(
Expand Down Expand Up @@ -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)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ WithAction.decorators = [(Story) => ProvidersDecorator(Story, {})]

WithAction.args = {
submission: mockContractAndRatesDraft(),
navigateTo: 'contract-details',
editNavigateTo: 'contract-details',
submissionName: 'StoryBook',
statePrograms: [],
}
Expand Down
Loading

0 comments on commit 97adcc1

Please sign in to comment.