[Update] Complete Your User Profile - Content text updates from Figma, Checkbox Group Status/Focus Style Update

src/components/FieldGroup.tsx

@@ -1,15 +1,13 @@
 interface FieldGroupProperties {
-  children: ReactNode
+  children: ReactNode;
 }
 
 function FieldGroup({ children }: FieldGroupProperties): JSX.Element {
   return (
-      <div
-        className="bg-[#F7F8F9] p-[1.875rem] !border !border-solid !border-cfpbBorderColor"
-      >
-        {children}
-      </div>
-  )
+    <div className='max-w-[48.125rem] !border !border-solid !border-cfpbBorderColor bg-[#F7F8F9] p-[1.875rem]'>
+      {children}
+    </div>
+  );
 }
 
-export default FieldGroup;
+export default FieldGroup;

src/components/FormParagraph.tsx

@@ -4,15 +4,14 @@ interface FormParagraphProperties {
 }
 
 /**
- * 
+ *
  * @returns FormParagraph
  */
-function FormParagraph({ children, className}: FormParagraphProperties): JSX.Element {
-  return (
-        <p className={`max-w-[41.875rem] ${className}`}>
-          {children}
-        </p>
-  )
+function FormParagraph({
+  children,
+  className = '',
+}: FormParagraphProperties): JSX.Element {
+  return <p className={`max-w-[41.875rem] ${className}`}>{children}</p>;
 }
 
-export default FormParagraph;
+export default FormParagraph;

src/components/InputErrorMessage.tsx

@@ -9,7 +9,7 @@ function InputErrorMessage({
   children,
 }: InputErrorMessageProperties): JSX.Element {
   return (
-    <div className='mt-[0.9375rem]'>
+    <div className='mt-[0.9375rem] max-w-[41.875rem]'>
       <AlertFieldLevel message={children} status='error' />
     </div>
   );

src/components/SectionIntro.tsx

@@ -0,0 +1,21 @@
+import { Heading } from 'design-system-react';
+import FormParagraph from 'components/FormParagraph';
+
+interface SectionIntroProperties {
+  heading: ReactNode;
+  children: ReactNode;
+}
+
+function SectionIntro({
+  heading = '',
+  children = '',
+}: SectionIntroProperties): JSX.Element {
+  return (
+    <div className='mb-[1.625rem] max-w-[48.125rem]'>
+      <Heading type='2'>{heading}</Heading>
+      <FormParagraph>{children}</FormParagraph>
+    </div>
+  );
+}
+
+export default SectionIntro;

src/index.css

@@ -21,23 +21,4 @@ https://v1.tailwindcss.com/docs/adding-base-styles#using-css */
   &:hover {
     color: #2284d5;
   }
-}
-
-[type='text']:focus {
-  box-shadow: none;
-}
-
-:focus:not(#financialInstitutions) {
-  outline: 1px dotted #0072ce !important;
-  outline-offset: 3px;
-}
-
-/* Checkbox Border error styling - workaround */
-.m-form-field__checkbox.error-checkbox .a-label::before, .m-form-field__radio .a-label::before {
-  @apply !border-errorColor !border-2
-}
-
-/* Workaround for styling the institution details on Profile-Form */
-.m-form-field__checkbox .invisible::before {
-  visibility: hidden;
 }

src/pages/Filing/InstitutionDetails/PageIntro.tsx

@@ -15,7 +15,7 @@ export function PageIntro(): JSX.Element {
       }
       callToAction={
         <List isLinks>
-          <ListItem className='m-list_link'>
+          <ListItem>
             <Links.UpdateInstitutionProfile isCallToAction />
           </ListItem>
         </List>

src/pages/ProfileForm/Step1Form/AssociatedFinancialInstitutions.tsx

@@ -25,22 +25,10 @@ function AssociatedFinancialInstitution({
     <div key={fiObject.lei}>
       <Checkbox
         id={`${fiObject.name} ${fiObject.lei}`}
-        className={`${hasError ? 'error-checkbox' : ''}`}
+        className={`${hasError ? 'm-form-field__checkbox__error' : ''}`}
         label={
-          <div className=''>
-            <Paragraph className='font-medium'>{fiObject.name}</Paragraph>
-          </div>
-        }
-        checked={fiObject.checked}
-        name={fiObject.lei}
-        onChange={onCheckHandler}
-        {...rest}
-      />
-      <Checkbox
-        id={`${fiObject.name} ${fiObject.lei}`}
-        labelClassName='invisible'
-        label={
-          <div className='visible'>
+          <div>
+            <Paragraph className='mb-0 font-medium'>{fiObject.name}</Paragraph>
             <Paragraph className='mb-0'>LEI: {fiObject.lei}</Paragraph>
             <Paragraph className='mb-0'>TIN: {fiObject.tax_id}</Paragraph>
             {fiObject.rssd_id ? (
@@ -50,6 +38,10 @@ function AssociatedFinancialInstitution({
             ) : null}
           </div>
         }
+        checked={fiObject.checked}
+        name={fiObject.lei}
+        onChange={onCheckHandler}
+        {...rest}
       />
     </div>
   );

src/pages/ProfileForm/Step1Form/Step1Form.tsx

@@ -12,6 +12,7 @@ import AssociatedFinancialInstitutions from './AssociatedFinancialInstitutions';
 import NoDatabaseResultError from './NoDatabaseResultError';
 import FormParagraph from 'components/FormParagraph';
 import FieldGroup from 'components/FieldGroup';
+import SectionIntro from 'components/SectionIntro';
 
 import { Button, Link, Paragraph, Heading } from 'design-system-react';
 
@@ -51,7 +52,7 @@ function Step1Form(): JSX.Element {
   const {
     isLoading,
     isError,
-    data: afData,
+    data: afData = [],
   } = useQuery({
     queryKey: [`fetch-institutions-${emailDomain}`, emailDomain],
     queryFn: async () => fetchInstitutions(auth, emailDomain),
@@ -106,7 +107,7 @@ function Step1Form(): JSX.Element {
 
     for (const object of checkedListStateArray) {
       if (object.checked) {
-        const foundObject: InstitutionDetailsApiType = afData?.find(
+        const foundObject: InstitutionDetailsApiType = afData.find(
           institutionsObject => object.lei === institutionsObject.lei,
         );
         newFinancialInstitutions.push(foundObject);
@@ -188,19 +189,16 @@ function Step1Form(): JSX.Element {
       <div className='mb-[3.75rem] mt-[2.84375rem]'>
         <Step1FormHeader />
       </div>
-      <div className='mb-[1.875rem] mt-[2.8125rem] w-full'>
+      <div className='mb-[2.8125rem] mt-[2.8125rem] w-full'>
         <Element name='step1FormErrorHeader' id='step1FormErrorHeader'>
           <Step1FormErrorHeader errors={formErrors} />
         </Element>
       </div>
-      <div className='mb-[1.625rem] mt-[2.8125rem]'>
-        <Heading type='2'>Provide your identifying information</Heading>
-        <FormParagraph>
-          Type your first name and last name in the fields below. Your email
-          address is automatically populated from{' '}
-          <Link href='#'>Login.gov</Link>.
-        </FormParagraph>
-      </div>
+      <SectionIntro heading='Provide your identifying information'>
+        {' '}
+        Type your first name and last name in the fields below. Your email
+        address is automatically populated from <Link href='#'>Login.gov</Link>.
+      </SectionIntro>
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className='mb-[3.75rem]'>
           <FieldGroup>
@@ -237,16 +235,11 @@ function Step1Form(): JSX.Element {
         <Element name='financialInstitutions'>
           {isSalesforce ? null : (
             <>
-              <div className='mb-[1.625rem]'>
-                <Heading type='2'>
-                  Select the institution you are authorized to file for
-                </Heading>
-                <FormParagraph>
-                  If there is a match between your email domain and the email
-                  domain of a financial institution in our system you will see a
-                  list of matches below.
-                </FormParagraph>
-              </div>
+              <SectionIntro heading='Select the institution you are authorized to file for'>
+                If there is a match between your email domain and the email
+                domain of a financial institution in our system you will see a
+                list of matches below.
+              </SectionIntro>
               <FieldGroup>
                 <AssociatedFinancialInstitutions
                   errors={formErrors}

src/pages/ProfileForm/Step1Form/Step1FormErrorHeader.tsx

@@ -1,4 +1,5 @@
-import { Alert, List } from 'design-system-react';
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { Alert, List, ListItem } from 'design-system-react';
 import { Link } from 'react-scroll';
 
 import { FormFieldsHeaderError as formFieldsHeaderError } from 'pages/ProfileForm/types';
@@ -43,27 +44,25 @@ function Step1FormErrorHeader({
           };
 
           return (
-            <span key={key}>
-              {/* Uses the ListLink styling */}
-              <li className='m-list_item'>
-                <Link
-                  className='m-list_link'
-                  to={key}
-                  smooth
-                  duration={300}
-                  offset={-100}
-                  onClick={onHandleFocus}
-                  onKeyPress={onHandleKeyPress}
-                  tabIndex={0}
-                >
-                  {
-                    formFieldsHeaderError[
-                      key as keyof typeof formFieldsHeaderError
-                    ]
-                  }
-                </Link>
-              </li>
-            </span>
+            <ListItem key={key}>
+              <Link
+                href='#'
+                className='m-list_link'
+                to={key}
+                smooth
+                duration={300}
+                offset={-100}
+                onClick={onHandleFocus}
+                onKeyPress={onHandleKeyPress}
+                tabIndex={0}
+              >
+                {
+                  formFieldsHeaderError[
+                    key as keyof typeof formFieldsHeaderError
+                  ]
+                }
+              </Link>
+            </ListItem>
           );
         })}
       </List>

src/pages/ProfileForm/Step2Form/Step2Form.tsx

@@ -1,71 +1,25 @@
 import { useEffect } from 'react';
-import useProfileForm from "store/useProfileForm";
+import useProfileForm from 'store/useProfileForm';
 
 import { Link, Alert } from 'design-system-react';
 import Step2FormHeader from './Step2FormHeader';
 
 import { Step2FormHeaderMessages } from './Step2FormHeader.data';
 
-interface Properties {
-}
+interface Properties {}
 
 function Step2Form({}: Properties): JSX.Element {
-  const selectedScenario = useProfileForm((state) => state.selectedScenario);
-    
-  useEffect(()=>{
-    window.scrollTo({ top: 0});
+  const selectedScenario = useProfileForm(state => state.selectedScenario);
+
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
   }, []);
-    
+
   return (
-    <div id="step2form">
+    <div id='step2form'>
       <Step2FormHeader scenario={selectedScenario} />
     </div>
-  )
+  );
 }
 
 export default Step2Form;
-
-function randomIntFromInterval(min, max) { // min and max included 
-  return Math.floor(Math.random() * (max - min + 1) + min)
-}
-
-function SummaryProfile({}: Properties): JSX.Element {
-  const profileData = useProfileForm((state) => state.profileData);
-
-  console.log("Step 2 Form profileData:", profileData);
-
-  return (
-    <>
-      <h3 className='mb-[30px]'>User profile details</h3>
-      <div className='mb-[30px]'>
-        <h4 className="mb-2">First name</h4>
-        <p>{profileData.firstName}</p>
-      </div>
-      <div className='mb-[30px]'>
-        <h4 className="mb-2">Last name</h4>
-        <p>{profileData.lastName}</p>
-      </div>
-      <div className='mb-[30px]'>
-        <h4 className="mb-2">Email address</h4>
-        <p>{profileData.email}</p>
-      </div>
-      <div className='mb-[30px]'>
-        <h4 className="mb-2">Associated financial institution(s)</h4>
-        {profileData ? profileData.financialInstitutions.map(object => {
-          const success = Boolean(randomIntFromInterval(0, 1));
-          return (
-        <div key={object.lei} className='mb-2 flex flex-row gap-[0.9375rem]'>
-          <div className="min-w-[6.25rem]">
-            <Alert isFieldLevel status={ success ? "success" : "warning"} message={ success ? "Approved" : "Pending"} />
-          </div>
-          <Link className="border-b" href="#">{`${object.name} | ${object.lei}`}</Link>
-        </div>
-        )
-        })
-        :
-        null
-        }
-      </div>
-    </>
-  );
-}

src/pages/ProfileForm/Step2Form/Step2FormHeader.data.tsx

@@ -1,5 +1,10 @@
 import { Link } from 'design-system-react';
 
+export enum ScenarioHeader {
+  Error = 'Unable to complete your user profile',
+  Status = 'User profile submission status',
+}
+
 export enum Scenario {
   // Success1,
   // Warning1,