[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/ProfileFormUtils.ts

@@ -2,7 +2,7 @@ import type {
   InstitutionDetailsApiType,
   InstitutionDetailsApiCheckedType,
   ValidationSchema,
-  FormattedUserProfileObjectType
+  FormattedUserProfileObjectType,
 } from 'pages/ProfileForm/types';
 
 export const formatUserProfileObject = (
@@ -13,12 +13,13 @@ export const formatUserProfileObject = (
   leis: userProfileObject.financialInstitutions.map(object => object.lei),
 });
 
+// Set Checkbox of associated financial institutions to `false`/unchecked
 export const formatDataCheckedState = (
   fiDataInput: InstitutionDetailsApiType[] = [],
 ): InstitutionDetailsApiCheckedType[] =>
   fiDataInput.map(object => ({ ...object, checked: false }));
 
 export default {
   formatUserProfileObject,
-  formatDataCheckedState
-}
+  formatDataCheckedState,
+};

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),
@@ -90,6 +91,7 @@ function Step1Form(): JSX.Element {
 
   useEffect(() => {
     const dataCheckedState = formatDataCheckedState(afData);
+    console.log('dataCheckedState:', dataCheckedState);
     setCheckedListState(dataCheckedState);
   }, [afData]);
 
@@ -106,7 +108,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);
@@ -141,7 +143,7 @@ function Step1Form(): JSX.Element {
     setValue('firstName', '');
     setValue('lastName', '');
     setSelectedFI([]);
-    setCheckedListState([]);
+    setCheckedListState(formatDataCheckedState(afData));
     window.scrollTo({ top: 0, behavior: 'smooth' });
   }
 
@@ -188,19 +190,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 +236,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>