Style Personal Health Care Contacts to new designs (#28295)

* Style to new designs

* Updates unit tests

* fix margins

src/applications/personalization/profile/components/personal-health-care-contacts/Contact.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
 // modeled after VA Profile's Health Benefit AssociatedPersonBio
 
@@ -39,24 +38,34 @@ const Contact = ({
     addressLine3,
     addressLine4,
   ].filter(line => !!line);
-  const showAddress = contactType.match(/next of kin/i);
+  const isNextOfKin = contactType.match(/next of kin/i);
+  let title = index === 0 ? 'Primary' : 'Secondary';
+  title = `${title} ${isNextOfKin ? 'next of kin' : 'emergency contact'}`;
+  const description = isNextOfKin
+    ? 'The person you want to represent your health care wishes if needed.'
+    : 'The person we’ll contact in an emergency.';
 
   return (
-    <div
-      data-testid={testId}
-      className={classNames({ 'vads-u-margin-top--2': index > 0 })}
-    >
-      {name}
-      <br />
-      {showAddress &&
-        addressLines.length >= 2 &&
-        addressLines.map((line, i) => (
-          <React.Fragment key={i}>
-            {line}
-            <br />
-          </React.Fragment>
-        ))}
-      {primaryPhone}
+    <div data-testid={testId}>
+      <h3 className="vads-u-font-family--sans vads-u-font-size--base vads-u-margin--0">
+        {title}
+      </h3>
+      <p className="vads-u-color--gray-medium vads-u-margin-top--0p5 vads-u-margin-bottom--0p5">
+        {description}
+      </p>
+      <p className="vads-u-margin-top--1 vads-u-margin-bottom--1">
+        {name}
+        <br />
+        {isNextOfKin &&
+          addressLines.length >= 2 &&
+          addressLines.map((line, i) => (
+            <React.Fragment key={i}>
+              {line}
+              <br />
+            </React.Fragment>
+          ))}
+        {primaryPhone}
+      </p>
     </div>
   );
 };

src/applications/personalization/profile/components/personal-health-care-contacts/Contact.unit.spec.jsx

@@ -14,28 +14,32 @@ const initialProps = {
   state: 'MA',
   zipCode: '02113',
   primaryPhone: '617-555-1111',
+  index: 0,
 };
 
 const setup = (props = {}) => render(<Contact {...initialProps} {...props} />);
 
 describe('Contact Component', () => {
   it('renders', () => {
     const { container } = setup();
+    expect(container.textContent).to.contain('Primary next of kin');
     expect(container.textContent).to.contain('Mrs. Rachel Walker Revere');
     expect(container.textContent).to.contain('19 N Square');
     expect(container.textContent).to.contain('Boston, MA 02113');
     expect(container.textContent).to.contain('617-555-1111');
   });
 
   it('renders name and phone number if addressLine1 is not present', () => {
-    const { container } = setup({ addressLine1: '' });
+    const { container } = setup({ addressLine1: '', index: 1 });
+    expect(container.textContent).to.contain('Secondary next of kin');
     expect(container.textContent).to.contain('Mrs. Rachel Walker Revere');
     expect(container.textContent).to.contain('617-555-1111');
     expect(container.textContent).not.to.contain('Boston, MA 02113');
   });
 
   it('renders name and phone number when contactType is an emergency contact', () => {
     const { container } = setup({ contactType: 'Emergency Contact' });
+    expect(container.textContent).to.contain('Primary emergency contact');
     expect(container.textContent).to.contain('Mrs. Rachel Walker Revere');
     expect(container.textContent).to.contain('617-555-1111');
     expect(container.textContent).not.to.contain('Boston, MA 02113');

src/applications/personalization/profile/components/personal-health-care-contacts/Contacts.jsx

@@ -1,67 +1,48 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
 
-import Contact from './Contact';
-
-const Instructions = ({ testId }) => (
-  <div data-testid={testId}>
-    To add a contact, call us at <HelpDeskContact testId={testId} />.
-  </div>
-);
-
-Instructions.propTypes = {
-  testId: PropTypes.string,
-};
+import { ProfileInfoCard } from '@@profile/components/ProfileInfoCard';
 
-const HelpDeskContact = ({ testId }) => (
-  <>
-    <va-telephone
-      data-testid={`${testId}-va-800-number`}
-      contact={CONTACTS.HELP_DESK}
-    />{' '}
-    (
-    <va-telephone
-      data-testid={`${testId}-va-711-number`}
-      contact={CONTACTS['711']}
-      tty
-    />
-    )
-  </>
-);
-
-HelpDeskContact.propTypes = {
-  testId: PropTypes.string,
-};
+import Contact from './Contact';
+import HelpDeskContact from './HelpDeskContact';
+import Instructions from './Instructions';
 
 const Contacts = ({ data }) => {
   const ecs = data.filter(el => el.id.match(/emergency contact/i));
   const noks = data.filter(el => el.id.match(/next of kin/i));
 
   const renderEmergencyContacts =
     ecs && ecs.length ? (
-      ecs.map((ec, i) => (
-        <Contact
-          testId={`phcc-emergency-contact-${i}`}
-          key={ec.id}
-          index={i}
-          {...ec.attributes}
-        />
-      ))
+      ecs.map((ec, i) => ({
+        value: (
+          <>
+            <Contact
+              testId={`phcc-emergency-contact-${i}`}
+              key={ec.id}
+              index={i}
+              {...ec.attributes}
+            />
+          </>
+        ),
+      }))
     ) : (
       <Instructions testId="phcc-no-ecs" />
     );
 
   const renderNextOfKin =
     noks && noks.length ? (
-      noks.map((nok, i) => (
-        <Contact
-          testId={`phcc-next-of-kin-${i}`}
-          key={nok.id}
-          index={i}
-          {...nok.attributes}
-        />
-      ))
+      noks.map((nok, i) => ({
+        value: (
+          <>
+            <Contact
+              testId={`phcc-next-of-kin-${i}`}
+              key={nok.id}
+              index={i}
+              {...nok.attributes}
+            />
+          </>
+        ),
+      }))
     ) : (
       <Instructions testId="phcc-no-nok" />
     );
@@ -86,27 +67,20 @@ const Contacts = ({ data }) => {
         </va-additional-info>
       </div>
 
-      <section className="profile-info-card">
-        <div className="row vads-u-border-color--gray-lighter vads-u-color-gray-dark vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--2 vads-u-padding-y--1p5 medium-screen:vads-u-padding--4 vads-u-border--1px">
-          <h2 className="vads-u-font-family--sans vads-u-font-size--base vads-u-margin--0">
-            Medical emergency contacts
-          </h2>
-          <p className="vads-u-color--gray-medium vads-u-margin-top--1 vads-u-margin-bottom--1">
-            The people we’ll contact in an emergency.
-          </p>
-          {renderEmergencyContacts}
-        </div>
+      <ProfileInfoCard
+        title="Emergency contacts"
+        data={renderEmergencyContacts}
+        namedAnchor="emergency-contacts"
+        level={2}
+      />
 
-        <div className="row vads-u-border-color--gray-lighter vads-u-color-gray-dark vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--2 vads-u-padding-y--1p5 medium-screen:vads-u-padding--4 vads-u-border-left--1px vads-u-border-right--1px vads-u-border-bottom--1px">
-          <h2 className="vads-u-font-family--sans vads-u-font-size--base vads-u-margin--0">
-            Next of kin contacts
-          </h2>
-          <p className="vads-u-color--gray-medium vads-u-margin-top--1 vads-u-margin-bottom--1">
-            The people you want to represent your health care wishes if needed.
-          </p>
-          {renderNextOfKin}
-        </div>
-      </section>
+      <ProfileInfoCard
+        title="Next of kin contacts"
+        data={renderNextOfKin}
+        namedAnchor="next-of-kin-contacts"
+        className="vads-u-margin-top--4"
+        level={2}
+      />
     </>
   );
 };

src/applications/personalization/profile/components/personal-health-care-contacts/HelpDeskContact.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
+
+const HelpDeskContact = ({ testId }) => (
+  <>
+    <va-telephone
+      data-testid={`${testId}-va-800-number`}
+      contact={CONTACTS.HELP_DESK}
+    />{' '}
+    (
+    <va-telephone
+      data-testid={`${testId}-va-711-number`}
+      contact={CONTACTS['711']}
+      tty
+    />
+    )
+  </>
+);
+
+HelpDeskContact.propTypes = {
+  testId: PropTypes.string,
+};
+
+export default HelpDeskContact;

src/applications/personalization/profile/components/personal-health-care-contacts/Instructions.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import HelpDeskContact from './HelpDeskContact';
+
+const Instructions = ({ testId }) => (
+  <div data-testid={testId}>
+    To add a contact, call us at <HelpDeskContact testId={testId} />.
+  </div>
+);
+
+Instructions.propTypes = {
+  testId: PropTypes.string,
+};
+
+export default Instructions;

src/applications/personalization/profile/components/personal-health-care-contacts/PersonalHealthCareContacts.unit.spec.jsx

@@ -34,7 +34,9 @@ describe('PersonalHealthCareContacts component', () => {
   it('renders', async () => {
     const { getByRole } = setup();
     await waitFor(() => {
-      getByRole('heading', { text: 'Personal health care contacts', level: 1 });
+      getByRole('heading', { name: 'Personal health care contacts', level: 1 });
+      getByRole('heading', { name: 'Emergency contacts', level: 2 });
+      getByRole('heading', { name: 'Next of kin contacts', level: 2 });
     });
   });
 

src/applications/personalization/profile/mocks/server.js

@@ -38,6 +38,8 @@ const maintenanceWindows = require('./endpoints/maintenance-windows');
 const mockLocalDSOT = require('./script/drupal-vamc-data/mockLocalDSOT');
 
 const contacts = require('../tests/fixtures/contacts.json');
+// const contactsSingleEc = require('../tests/fixtures/contacts-single-ec.json');
+// const contactsSingleNok = require('../tests/fixtures/contacts-single-nok.json');
 
 // utils
 const { debug, delaySingleResponse } = require('./script/utils');