diff --git a/services/app-api/src/resolvers/rate/generateRateCertificationName.ts b/services/app-api/src/resolvers/rate/generateRateCertificationName.ts index dda02a8bf4..0b0d7bd118 100644 --- a/services/app-api/src/resolvers/rate/generateRateCertificationName.ts +++ b/services/app-api/src/resolvers/rate/generateRateCertificationName.ts @@ -7,6 +7,16 @@ const naturalSort = (a: string, b: string): number => { return a.localeCompare(b, 'en', { numeric: true }) } +const formatProgramNamesForDisplay = (statePrograms: ProgramArgType[], + rateProgramIDs: string[]): string[] => programNames(statePrograms, rateProgramIDs) +.sort(naturalSort) +.map((n) => + n + .replace(/\s/g, '-') + .replace(/[^a-zA-Z0-9+]/g, '') + .toUpperCase() +) + const generateRateCertificationName = ( rateFormData: RateFormEditableType, stateCode: string, @@ -35,15 +45,7 @@ const generateRateCertificationName = ( const certifiedDate = rateDateCertified ? `-${formatRateNameDate(rateDateCertified)}` : '' - const pNames = programNames(statePrograms, rateProgramIDs) - .sort(naturalSort) - .map((n) => - n - .replace(/\s/g, '-') - .replace(/[^a-zA-Z0-9+]/g, '') - .toUpperCase() - ) - .join('-') + const pNames = formatProgramNamesForDisplay(statePrograms, rateProgramIDs).join('-') let rateName = `MCR-${stateCode.toUpperCase()}` @@ -71,4 +73,4 @@ const generateRateCertificationName = ( return rateName } -export { generateRateCertificationName } +export { generateRateCertificationName, formatProgramNamesForDisplay } diff --git a/services/app-web/src/components/FormContainer/FormContainer.module.scss b/services/app-web/src/components/FormContainer/FormContainer.module.scss new file mode 100644 index 0000000000..967666ebb9 --- /dev/null +++ b/services/app-web/src/components/FormContainer/FormContainer.module.scss @@ -0,0 +1,8 @@ +@use '../../styles/custom.scss' as custom; +@use '../../styles/uswdsImports.scss' as uswds; + +.formPage { + flex: 1 0 auto; + display: flex; + flex-direction: column; +} diff --git a/services/app-web/src/components/FormContainer/FormContainer.test.tsx b/services/app-web/src/components/FormContainer/FormContainer.test.tsx new file mode 100644 index 0000000000..3397707b8e --- /dev/null +++ b/services/app-web/src/components/FormContainer/FormContainer.test.tsx @@ -0,0 +1,20 @@ +import { screen } from '@testing-library/react' +import { FormContainer } from "./FormContainer" +import { renderWithProviders } from '../../testHelpers' + +describe('FormContainer', () => { + it('render children and custom classses on container element', ()=>{ + renderWithProviders(

test heading

) + expect( + screen.getByRole('heading', { + name: 'test heading', + }) + ).toBeInTheDocument() + expect( + screen.getByTestId("hasTestID") + ).toBeInTheDocument() + expect( + screen.getByTestId("hasTestID") + ).toHaveClass('test-class') + }) +}) diff --git a/services/app-web/src/pages/StateSubmission/FormContainer.tsx b/services/app-web/src/components/FormContainer/FormContainer.tsx similarity index 53% rename from services/app-web/src/pages/StateSubmission/FormContainer.tsx rename to services/app-web/src/components/FormContainer/FormContainer.tsx index 65480bf269..58c8cba715 100644 --- a/services/app-web/src/pages/StateSubmission/FormContainer.tsx +++ b/services/app-web/src/components/FormContainer/FormContainer.tsx @@ -1,17 +1,21 @@ import { GridContainer } from '@trussworks/react-uswds' -import styles from './StateSubmissionForm.module.scss' +import classnames from 'classnames' +import styles from './FormContainer.module.scss' type FormContainerProps = { id: string children: React.ReactNode & JSX.IntrinsicElements['div'] + className?: string } export const FormContainer = ( props: FormContainerProps ): React.ReactElement => { - const { id, children } = props + const { id, className, children } = props + + const classes = classnames(styles.formPage, className) return ( - + {children} ) diff --git a/services/app-web/src/pages/LinkYourRates/LinkRateSelect/LinkRateSelect.tsx b/services/app-web/src/pages/LinkYourRates/LinkRateSelect/LinkRateSelect.tsx index 0cfe6ffa6e..563b466940 100644 --- a/services/app-web/src/pages/LinkYourRates/LinkRateSelect/LinkRateSelect.tsx +++ b/services/app-web/src/pages/LinkYourRates/LinkRateSelect/LinkRateSelect.tsx @@ -70,6 +70,8 @@ export const LinkRateSelect = ({ const rateNames: LinkRateOptionType[] = rates.map((rate) => { const revision = rate.revisions[0] + const rateProgramIDs = revision.formData.rateProgramIDs.length > 0 ? revision.formData.rateProgramIDs: revision.formData.deprecatedRateProgramIDs + return { value: rate.id, label: @@ -80,7 +82,7 @@ export const LinkRateSelect = ({ 'Unknown rate certification', rateProgramIDs: programNames( rate.state.programs, - revision.formData.rateProgramIDs + rateProgramIDs, ).join(', '), rateDateStart: formatCalendarDate(revision.formData.rateDateStart), rateDateEnd: formatCalendarDate(revision.formData.rateDateEnd), diff --git a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss index e70f8501d5..01a5722b79 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss @@ -1,49 +1,43 @@ @use '../../styles/custom.scss' as custom; @use '../../styles/uswdsImports.scss' as uswds; -.background { - width: 100%; - flex: 1 0 auto; - display: flex; - flex-direction: column; - background-color: none; - align-items: center; -} -.gridContainer { - @include custom.default-page-container; - max-width: custom.$mcr-container-standard-width-fixed; - flex-direction: column; - margin: 2rem; - padding: 1rem; -} - -.formContainer { - max-width: custom.$mcr-container-standard-width-fixed; - > [class^='usa-fieldset'] { - padding: uswds.units(4); - margin-bottom: uswds.units(2); - margin-top: uswds.units(2); - background: custom.$mcr-foundation-white; - border: 1px solid custom.$mcr-gray-lighter; - @include uswds.u-radius('md'); - } +$mcr-single-page-width: 40rem; - h2 { - margin-top: 0; - } +// Notes for future refactor to single page UI +// We should be overriding usa-form max-width across the application, rather than per form page. Let uswds always take the width of its parent by default +// From figma seems like like single page page width is 40rem but we have $mcr-container-standard-width-fixed set to 50rem - look at this in future refactor - cross check with design. +// Are single page forms supposed to be the same width as the state submission form? Probably - in which case we should be sharing as many styles tokens as possible. +.replaceRatePage { + justify-content: center; + flex-direction: row; - > div[class^='usa-form-group']:not(:first-of-type) { - margin-top: 2.5rem; - } + form[class^='usa-form']{ + max-width: 100% !important; + display: flex; + flex-direction: column; + width: $mcr-single-page-width; + } + .formInnerContainer { + border: 0; + margin-top: 2rem; + margin-bottom: 2rem; + background: custom.$mcr-foundation-white; + padding: 2rem; + width: $mcr-single-page-width; - &[class^='usa-form'] { - min-width: 100%; - max-width: 100%; + h2 { + margin-top: 0; + } - @include uswds.at-media(tablet) { - min-width: 40rem; - max-width: 20rem; - margin: 0 auto; + > div[class^='usa-form-group']:not(:first-of-type) { + margin-top: 2.5rem; + } + >fieldset{ + border: 0; + margin: 0; + padding:0 } } + } + diff --git a/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx b/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx index c14a98bd5c..4efab2ecd9 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx @@ -1,7 +1,6 @@ import { ButtonGroup, FormGroup, - GridContainer, Label, } from '@trussworks/react-uswds' import React, { useEffect } from 'react' @@ -35,6 +34,8 @@ import { ErrorSummaryProps, ErrorSummary, } from '../../components/Form/ErrorSummary/ErrorSummary' +import { FormContainer } from '../../components/FormContainer/FormContainer' +import { LinkedRateSummary } from '../StateSubmission/RateDetails/LinkedRateSummary' export interface ReplaceRateFormValues { replacementRateID: string @@ -155,8 +156,7 @@ export const ReplaceRate = (): React.ReactElement => { } return ( -
- + {replaceError && } { > {({ errors, values, handleSubmit }) => ( { headingRef={errorSummaryHeadingRef} /> )} - +

Replace a rate review

{withdrawnRateRevisionName} -
+
Withdraw and replace rate on contract @@ -252,7 +251,9 @@ export const ReplaceRate = (): React.ReactElement => { />
- +
+ + { -
+ )} +
-
-
+ ) } diff --git a/services/app-web/src/pages/StateSubmission/Contacts/Contacts.tsx b/services/app-web/src/pages/StateSubmission/Contacts/Contacts.tsx index 859cb827f5..6751a7ad32 100644 --- a/services/app-web/src/pages/StateSubmission/Contacts/Contacts.tsx +++ b/services/app-web/src/pages/StateSubmission/Contacts/Contacts.tsx @@ -29,7 +29,7 @@ import { DynamicStepIndicator, SectionCard, } from '../../../components' -import { FormContainer } from '../FormContainer' +import { FormContainer } from '../../../components/FormContainer/FormContainer' import { useCurrentRoute, useHealthPlanPackageForm, diff --git a/services/app-web/src/pages/StateSubmission/ContractDetails/ContractDetails.tsx b/services/app-web/src/pages/StateSubmission/ContractDetails/ContractDetails.tsx index 9a7a8128d0..3d2fde2ac0 100644 --- a/services/app-web/src/pages/StateSubmission/ContractDetails/ContractDetails.tsx +++ b/services/app-web/src/pages/StateSubmission/ContractDetails/ContractDetails.tsx @@ -80,8 +80,11 @@ import { StatutoryRegulatoryAttestationDescription, StatutoryRegulatoryAttestationQuestion, } from '../../../constants/statutoryRegulatoryAttestation' -import { FormContainer } from '../FormContainer' -import { useCurrentRoute, useRouteParams } from '../../../hooks' +import { FormContainer } from '../../../components/FormContainer/FormContainer' +import { + useCurrentRoute, + useRouteParams, +} from '../../../hooks' import { useAuth } from '../../../contexts/AuthContext' import { ErrorOrLoadingPage } from '../ErrorOrLoadingPage' import { PageBannerAlerts } from '../PageBannerAlerts' diff --git a/services/app-web/src/pages/StateSubmission/Documents/Documents.tsx b/services/app-web/src/pages/StateSubmission/Documents/Documents.tsx index f243401de9..89e82e3341 100644 --- a/services/app-web/src/pages/StateSubmission/Documents/Documents.tsx +++ b/services/app-web/src/pages/StateSubmission/Documents/Documents.tsx @@ -18,7 +18,7 @@ import classNames from 'classnames' import { ErrorSummary } from '../../../components/Form' import { activeFormPages } from '../StateSubmissionForm' import { RoutesRecord } from '../../../constants' -import { FormContainer } from '../FormContainer' +import { FormContainer } from '../../../components/FormContainer/FormContainer' import { useAuth } from '../../../contexts/AuthContext' import { useCurrentRoute, diff --git a/services/app-web/src/pages/StateSubmission/New/NewStateSubmissionForm.tsx b/services/app-web/src/pages/StateSubmission/New/NewStateSubmissionForm.tsx index fc98bd177c..16f1f64e35 100644 --- a/services/app-web/src/pages/StateSubmission/New/NewStateSubmissionForm.tsx +++ b/services/app-web/src/pages/StateSubmission/New/NewStateSubmissionForm.tsx @@ -4,7 +4,7 @@ import { DynamicStepIndicator } from '../../../components/DynamicStepIndicator' import { STATE_SUBMISSION_FORM_ROUTES } from '../../../constants/routes' import stylesForm from '../StateSubmissionForm.module.scss' import stylesSideNav from '../../SubmissionSideNav/SubmissionSideNav.module.scss' -import { FormContainer } from '../FormContainer' +import { FormContainer } from '../../../components/FormContainer/FormContainer' import { SubmissionType } from '../SubmissionType/SubmissionType' import { GridContainer } from '@trussworks/react-uswds' diff --git a/services/app-web/src/pages/StateSubmission/StateSubmissionForm.tsx b/services/app-web/src/pages/StateSubmission/StateSubmissionForm.tsx index 912d2c1bac..93bd60f578 100644 --- a/services/app-web/src/pages/StateSubmission/StateSubmissionForm.tsx +++ b/services/app-web/src/pages/StateSubmission/StateSubmissionForm.tsx @@ -25,7 +25,7 @@ import { SubmissionType } from './SubmissionType' import { UnlockedHealthPlanFormDataType } from '../../common-code/healthPlanFormDataType' import { ContractFormData } from '../../gen/gqlClient' import { RateDetails } from './RateDetails' -import styles from './StateSubmissionForm.module.scss' +import formContainerStyles from '../../components/FormContainer/FormContainer.module.scss' import { SideNavOutletContextType } from '../SubmissionSideNav/SubmissionSideNav' // Can move this AppRoutes on future pass - leaving it here now to make diff clear @@ -45,7 +45,7 @@ export const StateSubmissionForm = (): React.ReactElement => { return (