From dc6301c6c8ad4f3aeb1778d3313b0250b94ced72 Mon Sep 17 00:00:00 2001 From: Hana Worku Date: Wed, 14 Aug 2024 17:23:36 -0500 Subject: [PATCH 1/8] styles cleanup --- .../FormContainer/FormContainer.module.scss | 8 +++++ .../FormContainer}/FormContainer.tsx | 2 +- .../pages/ReplaceRate/ReplaceRate.module.scss | 32 +++++-------------- .../src/pages/ReplaceRate/ReplaceRate.tsx | 17 +++++----- .../StateSubmission/Contacts/Contacts.tsx | 2 +- .../ContractDetails/ContractDetails.tsx | 2 +- .../StateSubmission/Documents/Documents.tsx | 2 +- .../New/NewStateSubmissionForm.tsx | 2 +- .../StateSubmission/StateSubmissionForm.tsx | 4 +-- .../SubmissionType/SubmissionType.tsx | 2 +- 10 files changed, 33 insertions(+), 40 deletions(-) create mode 100644 services/app-web/src/components/FormContainer/FormContainer.module.scss rename services/app-web/src/{pages/StateSubmission => components/FormContainer}/FormContainer.tsx (88%) 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..ff0d2b1423 --- /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; +} \ No newline at end of file diff --git a/services/app-web/src/pages/StateSubmission/FormContainer.tsx b/services/app-web/src/components/FormContainer/FormContainer.tsx similarity index 88% rename from services/app-web/src/pages/StateSubmission/FormContainer.tsx rename to services/app-web/src/components/FormContainer/FormContainer.tsx index 65480bf269..655a52cfa7 100644 --- a/services/app-web/src/pages/StateSubmission/FormContainer.tsx +++ b/services/app-web/src/components/FormContainer/FormContainer.tsx @@ -1,5 +1,5 @@ import { GridContainer } from '@trussworks/react-uswds' -import styles from './StateSubmissionForm.module.scss' +import styles from './FormContainer.module.scss' type FormContainerProps = { id: string diff --git a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss index 6a48fb3d80..5b217a529b 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss @@ -1,32 +1,12 @@ @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 { + margin: 2rem; + background: custom.$mcr-foundation-white; 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'); - } + padding: 2rem; h2 { margin-top: 0; @@ -35,6 +15,11 @@ > div[class^='usa-form-group']:not(:first-of-type) { margin-top: 2.5rem; } + >fieldset{ + border: 0; + margin: 0; + padding: 0; + } &[class^='usa-form'] { min-width: 100%; @@ -43,7 +28,6 @@ @include uswds.at-media(tablet) { min-width: 40rem; max-width: 20rem; - margin: 0 auto; } } } diff --git a/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx b/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx index c14a98bd5c..76f5c1684f 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 && } { validationSchema={ReplaceRateSchema} > {({ errors, values, handleSubmit }) => ( + <> { {withdrawnRateRevisionName} -
+
Withdraw and replace rate on contract @@ -252,7 +253,8 @@ 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 208781fd39..d2d03e7bd7 100644 --- a/services/app-web/src/pages/StateSubmission/ContractDetails/ContractDetails.tsx +++ b/services/app-web/src/pages/StateSubmission/ContractDetails/ContractDetails.tsx @@ -75,7 +75,7 @@ import { StatutoryRegulatoryAttestationDescription, StatutoryRegulatoryAttestationQuestion, } from '../../../constants/statutoryRegulatoryAttestation' -import { FormContainer } from '../FormContainer' +import { FormContainer } from '../../../components/FormContainer/FormContainer' import { useCurrentRoute, useHealthPlanPackageForm, 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 36077bb0ba..0c31874fcd 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 (
Date: Fri, 16 Aug 2024 15:39:39 -0500 Subject: [PATCH 2/8] More small tweaks --- .../rate/generateRateCertificationName.ts | 22 ++++++++++--------- .../LinkRateSelect/LinkRateSelect.tsx | 4 +++- .../pages/ReplaceRate/ReplaceRate.module.scss | 3 ++- 3 files changed, 17 insertions(+), 12 deletions(-) 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/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 5b217a529b..082f467714 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss @@ -3,7 +3,8 @@ .formContainer { - margin: 2rem; + margin-top: 2rem; + margin-bottom: 2rem; background: custom.$mcr-foundation-white; max-width: custom.$mcr-container-standard-width-fixed; padding: 2rem; From 68d951246e3e1cbbfd229da50ba9e75371730512 Mon Sep 17 00:00:00 2001 From: Hana Worku Date: Mon, 19 Aug 2024 09:50:34 -0500 Subject: [PATCH 3/8] cleanup --- .../pages/ReplaceRate/ReplaceRate.module.scss | 18 ++++-------------- .../src/pages/ReplaceRate/ReplaceRate.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 19 deletions(-) diff --git a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss index 082f467714..fed4f0a366 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss @@ -1,8 +1,8 @@ @use '../../styles/custom.scss' as custom; @use '../../styles/uswdsImports.scss' as uswds; - .formContainer { + border: 0; margin-top: 2rem; margin-bottom: 2rem; background: custom.$mcr-foundation-white; @@ -17,18 +17,8 @@ margin-top: 2.5rem; } >fieldset{ - border: 0; - margin: 0; - padding: 0; - } - - &[class^='usa-form'] { - min-width: 100%; - max-width: 100%; - - @include uswds.at-media(tablet) { - min-width: 40rem; - max-width: 20rem; - } + 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 76f5c1684f..f13b5625a0 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx @@ -164,9 +164,7 @@ export const ReplaceRate = (): React.ReactElement => { validationSchema={ReplaceRateSchema} > {({ errors, values, handleSubmit }) => ( - <> { headingRef={errorSummaryHeadingRef} /> )} - +

Replace a rate review

@@ -253,7 +251,8 @@ export const ReplaceRate = (): React.ReactElement => { /> - +
+ { - + )} + ) From cfcdfc3cf560221cb65764242408348f8b5c6514 Mon Sep 17 00:00:00 2001 From: Hana Worku Date: Tue, 20 Aug 2024 15:38:41 -0500 Subject: [PATCH 4/8] Override usa-form max width and extend FormContainer to handle classes --- .../FormContainer/FormContainer.test.tsx | 20 ++++++++++ .../FormContainer/FormContainer.tsx | 8 +++- .../pages/ReplaceRate/ReplaceRate.module.scss | 40 +++++++++++-------- .../src/pages/ReplaceRate/ReplaceRate.tsx | 2 +- 4 files changed, 50 insertions(+), 20 deletions(-) create mode 100644 services/app-web/src/components/FormContainer/FormContainer.test.tsx 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..479221257c --- /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') + }) +}) \ No newline at end of file diff --git a/services/app-web/src/components/FormContainer/FormContainer.tsx b/services/app-web/src/components/FormContainer/FormContainer.tsx index 655a52cfa7..58c8cba715 100644 --- a/services/app-web/src/components/FormContainer/FormContainer.tsx +++ b/services/app-web/src/components/FormContainer/FormContainer.tsx @@ -1,17 +1,21 @@ import { GridContainer } from '@trussworks/react-uswds' +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/ReplaceRate/ReplaceRate.module.scss b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss index fed4f0a366..70a2fbe56d 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss @@ -1,24 +1,30 @@ @use '../../styles/custom.scss' as custom; @use '../../styles/uswdsImports.scss' as uswds; -.formContainer { - border: 0; - margin-top: 2rem; - margin-bottom: 2rem; - background: custom.$mcr-foundation-white; - max-width: custom.$mcr-container-standard-width-fixed; - padding: 2rem; - - h2 { - margin-top: 0; +.replaceRatePage { + form { + max-width: custom.$mcr-container-standard-width-fixed; } + .formContainer { + border: 0; + margin-top: 2rem; + margin-bottom: 2rem; + background: custom.$mcr-foundation-white; + padding: 2rem; - > div[class^='usa-form-group']:not(:first-of-type) { - margin-top: 2.5rem; - } - >fieldset{ - border: 0; - margin: 0; - padding:0 + h2 { + margin-top: 0; + } + + > 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 f13b5625a0..c03b4807f9 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx @@ -156,7 +156,7 @@ export const ReplaceRate = (): React.ReactElement => { } return ( - + {replaceError && } Date: Wed, 21 Aug 2024 14:28:44 -0500 Subject: [PATCH 5/8] WIP --- .../src/components/FormContainer/FormContainer.module.scss | 4 +--- .../app-web/src/pages/ReplaceRate/ReplaceRate.module.scss | 1 + services/app-web/src/styles/custom.scss | 5 +++-- services/app-web/src/styles/overrides.scss | 4 ++++ 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/services/app-web/src/components/FormContainer/FormContainer.module.scss b/services/app-web/src/components/FormContainer/FormContainer.module.scss index ff0d2b1423..34fd836033 100644 --- a/services/app-web/src/components/FormContainer/FormContainer.module.scss +++ b/services/app-web/src/components/FormContainer/FormContainer.module.scss @@ -2,7 +2,5 @@ @use '../../styles/uswdsImports.scss' as uswds; .formPage { - flex: 1 0 auto; - display: flex; - flex-direction: column; + @include custom.form-page-container } \ No newline at end of file diff --git a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss index 70a2fbe56d..ccf7159a51 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss @@ -10,6 +10,7 @@ margin-top: 2rem; margin-bottom: 2rem; background: custom.$mcr-foundation-white; + max-width: custom.$mcr-container-standard-width-fixed; padding: 2rem; h2 { diff --git a/services/app-web/src/styles/custom.scss b/services/app-web/src/styles/custom.scss index f2296c6e6e..a024b04834 100644 --- a/services/app-web/src/styles/custom.scss +++ b/services/app-web/src/styles/custom.scss @@ -18,8 +18,8 @@ flex: 1 0 auto; } // We have some established width limits how far page content should stretch laterally. Right now this is controlled by CSS width properties -$mcr-container-standard-width-fixed: 50rem; -$mcr-container-max-width-fixed: 75rem; +$mcr-container-standard-width-fixed: 640px; +$mcr-container-max-width-fixed: 1130px; // Default page width and styles in MC-Review @mixin default-page-container { @@ -31,6 +31,7 @@ $mcr-container-max-width-fixed: 75rem; // Form pages have larger margin on either side @mixin form-page-container { @include container; + flex-direction: column; width: $mcr-container-standard-width-fixed; } diff --git a/services/app-web/src/styles/overrides.scss b/services/app-web/src/styles/overrides.scss index 1e01ed95dc..6488949535 100644 --- a/services/app-web/src/styles/overrides.scss +++ b/services/app-web/src/styles/overrides.scss @@ -6,12 +6,16 @@ */ @use 'mcrColors' as *; +@use 'custom' as *; // FORM FIELDS .usa-label, .usa-legend { font-weight: bold; } +.usa-form { + max-width: $mcr-container-standard-width-fixed; +} .usa-hint span { display: block; From 34e0276b113cf94583c0ee17161387b0560a42f5 Mon Sep 17 00:00:00 2001 From: Hana Worku Date: Tue, 27 Aug 2024 12:15:56 -0500 Subject: [PATCH 6/8] Revert "WIP" This reverts commit 41e9bf83e2c1720cbb334d5b1b7650efe37b164a. --- .../src/components/FormContainer/FormContainer.module.scss | 4 +++- .../app-web/src/pages/ReplaceRate/ReplaceRate.module.scss | 1 - services/app-web/src/styles/custom.scss | 5 ++--- services/app-web/src/styles/overrides.scss | 4 ---- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/services/app-web/src/components/FormContainer/FormContainer.module.scss b/services/app-web/src/components/FormContainer/FormContainer.module.scss index 34fd836033..ff0d2b1423 100644 --- a/services/app-web/src/components/FormContainer/FormContainer.module.scss +++ b/services/app-web/src/components/FormContainer/FormContainer.module.scss @@ -2,5 +2,7 @@ @use '../../styles/uswdsImports.scss' as uswds; .formPage { - @include custom.form-page-container + flex: 1 0 auto; + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss index ccf7159a51..70a2fbe56d 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss @@ -10,7 +10,6 @@ margin-top: 2rem; margin-bottom: 2rem; background: custom.$mcr-foundation-white; - max-width: custom.$mcr-container-standard-width-fixed; padding: 2rem; h2 { diff --git a/services/app-web/src/styles/custom.scss b/services/app-web/src/styles/custom.scss index a024b04834..f2296c6e6e 100644 --- a/services/app-web/src/styles/custom.scss +++ b/services/app-web/src/styles/custom.scss @@ -18,8 +18,8 @@ flex: 1 0 auto; } // We have some established width limits how far page content should stretch laterally. Right now this is controlled by CSS width properties -$mcr-container-standard-width-fixed: 640px; -$mcr-container-max-width-fixed: 1130px; +$mcr-container-standard-width-fixed: 50rem; +$mcr-container-max-width-fixed: 75rem; // Default page width and styles in MC-Review @mixin default-page-container { @@ -31,7 +31,6 @@ $mcr-container-max-width-fixed: 1130px; // Form pages have larger margin on either side @mixin form-page-container { @include container; - flex-direction: column; width: $mcr-container-standard-width-fixed; } diff --git a/services/app-web/src/styles/overrides.scss b/services/app-web/src/styles/overrides.scss index 6488949535..1e01ed95dc 100644 --- a/services/app-web/src/styles/overrides.scss +++ b/services/app-web/src/styles/overrides.scss @@ -6,16 +6,12 @@ */ @use 'mcrColors' as *; -@use 'custom' as *; // FORM FIELDS .usa-label, .usa-legend { font-weight: bold; } -.usa-form { - max-width: $mcr-container-standard-width-fixed; -} .usa-hint span { display: block; From 51a0e046795ecb7f00bcf1def1f15096d7b9a1aa Mon Sep 17 00:00:00 2001 From: Hana Worku Date: Tue, 27 Aug 2024 13:11:16 -0500 Subject: [PATCH 7/8] Implement change only on replace rates - take notes about app wide change to make in future PR --- .../pages/ReplaceRate/ReplaceRate.module.scss | 21 +++++++++++++++---- .../src/pages/ReplaceRate/ReplaceRate.tsx | 2 +- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss index 70a2fbe56d..01a5722b79 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.module.scss @@ -1,16 +1,29 @@ @use '../../styles/custom.scss' as custom; @use '../../styles/uswdsImports.scss' as uswds; +$mcr-single-page-width: 40rem; + +// 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 { - form { - max-width: custom.$mcr-container-standard-width-fixed; - } - .formContainer { + justify-content: center; + flex-direction: row; + + 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; h2 { margin-top: 0; diff --git a/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx b/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx index c03b4807f9..4efab2ecd9 100644 --- a/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx +++ b/services/app-web/src/pages/ReplaceRate/ReplaceRate.tsx @@ -180,7 +180,7 @@ export const ReplaceRate = (): React.ReactElement => { headingRef={errorSummaryHeadingRef} /> )} -
+

Replace a rate review

From c2d6ce24bb2517a6c1dab2e7e4140b48aaefc8af Mon Sep 17 00:00:00 2001 From: Hana Worku Date: Tue, 27 Aug 2024 15:00:55 -0500 Subject: [PATCH 8/8] Fix empty line --- .../src/components/FormContainer/FormContainer.module.scss | 2 +- .../app-web/src/components/FormContainer/FormContainer.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/services/app-web/src/components/FormContainer/FormContainer.module.scss b/services/app-web/src/components/FormContainer/FormContainer.module.scss index ff0d2b1423..967666ebb9 100644 --- a/services/app-web/src/components/FormContainer/FormContainer.module.scss +++ b/services/app-web/src/components/FormContainer/FormContainer.module.scss @@ -5,4 +5,4 @@ flex: 1 0 auto; display: flex; flex-direction: column; -} \ No newline at end of file +} diff --git a/services/app-web/src/components/FormContainer/FormContainer.test.tsx b/services/app-web/src/components/FormContainer/FormContainer.test.tsx index 479221257c..3397707b8e 100644 --- a/services/app-web/src/components/FormContainer/FormContainer.test.tsx +++ b/services/app-web/src/components/FormContainer/FormContainer.test.tsx @@ -17,4 +17,4 @@ describe('FormContainer', () => { screen.getByTestId("hasTestID") ).toHaveClass('test-class') }) -}) \ No newline at end of file +})