[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/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

@@ -23,21 +23,9 @@ https://v1.tailwindcss.com/docs/adding-base-styles#using-css */
   }
 }
 
-[type='text']:focus {
-  box-shadow: none;
-}
-
-:focus:not(#financialInstitutions) {
-  outline: 1px dotted #0072ce !important;
-  outline-offset: 3px;
-}
+/* TODO: Incorporate this in the DSR to match the TextInput dotted bordering based on state */
 
 /* 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/ProfileForm/Step1Form/AssociatedFinancialInstitutions.tsx

@@ -27,20 +27,8 @@ function AssociatedFinancialInstitution({
         id={`${fiObject.name} ${fiObject.lei}`}
         className={`${hasError ? 'error-checkbox' : ''}`}
         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';
 
@@ -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/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,

src/pages/ProfileForm/Step2Form/Step2FormHeader.tsx

@@ -1,26 +1,36 @@
 import { Alert } from 'design-system-react';
-import { Step2FormHeaderMessages, Scenario } from './Step2FormHeader.data';
+import {
+  Step2FormHeaderMessages,
+  Scenario,
+  ScenarioHeader,
+} from './Step2FormHeader.data';
 
 interface Step2FormHeaderProperties {
-  scenario: Scenario
+  scenario: Scenario;
 }
 
 /**
- * 
+ *
  * @returns Header for Step2Form
  */
-function Step2FormHeader({ scenario = Scenario.Success1A }: Step2FormHeaderProperties): JSX.Element {
+function Step2FormHeader({
+  scenario = Scenario.Error1,
+}: Step2FormHeaderProperties): JSX.Element {
   return (
-        <div id="Step2FormHeader" className="max-w-[670px] mb-[45px]">
-          <h1 className="mb-[30px]">{Step2FormHeaderMessages[scenario].type === "error" ? "Unable to complete registration" : "User profile submission status"}</h1>
-          <Alert
-            message={Step2FormHeaderMessages[scenario].message}
-            status={Step2FormHeaderMessages[scenario].type}
-          >
-            {Step2FormHeaderMessages[scenario].children}
-          </Alert>
-        </div>
-  )
+    <div id='Step2FormHeader' className='mb-[2.8125rem] max-w-[41.875rem]'>
+      <h1 className='mb-[1.875rem]'>
+        {Step2FormHeaderMessages[scenario].type === 'error'
+          ? ScenarioHeader.Error
+          : ScenarioHeader.Status}
+      </h1>
+      <Alert
+        message={Step2FormHeaderMessages[scenario].message}
+        status={Step2FormHeaderMessages[scenario].type}
+      >
+        {Step2FormHeaderMessages[scenario].children}
+      </Alert>
+    </div>
+  );
 }
 
-export default Step2FormHeader;
+export default Step2FormHeader;

src/pages/ProfileForm/types.ts

@@ -95,16 +95,17 @@ export type InstitutionDetailsApiCheckedType = CheckedState &
   InstitutionDetailsApiType;
 
 export const validationSchema = z.object({
-  firstName: z.string().min(1, {
+  firstName: z.string().trim().min(1, {
     message:
-      'You must enter your first name to complete your user profile and access the system.',
+      'You must enter your first name to complete your user profile and access the platform.',
   }),
-  lastName: z.string().min(1, {
+  lastName: z.string().trim().min(1, {
     message:
-      'You must enter your last name to complete your user profile and access the system.',
+      'You must enter your last name to complete your user profile and access the platform.',
   }),
   email: z
     .string()
+    .trim()
     .min(5, { message: 'You must have a valid email address' })
     .email({
       message: 'You must have a valid email address and in the correct format.',