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}
-
+
+
{
-
+
)}
+
-
-