edu-benefits: replace .feature with va-summary-box (#33193)

* replace .feature with va-summary-box * add margin * update test
department-of-veterans-affairs · Dec 3, 2024 · 8475620 · 8475620
1 parent 13e7a47
commit 8475620
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/src/applications/edu-benefits/0994/content/benefitsEligibility.jsx b/src/applications/edu-benefits/0994/content/benefitsEligibility.jsx
@@ -4,7 +4,7 @@ export const eligibilityDescription =
   'Have you applied for VA education benefits in the past?';
 
 export const eligibilityInstructions = (
-  <div className="feature">
+  <va-summary-box class="vads-u-margin-y--3">
     <p>
       You’ll also need to complete an Application for VA Education Benefits (VA
       Form 22-1990), so we can determine if you qualify for VA education
@@ -14,5 +14,5 @@ export const eligibilityInstructions = (
       We’ll take you to that application after you’ve finished filling out this
       one.
     </p>
-  </div>
+  </va-summary-box>
 );
diff --git a/src/applications/edu-benefits/0994/tests/pages/benefitsEligibility.unit.spec.jsx b/src/applications/edu-benefits/0994/tests/pages/benefitsEligibility.unit.spec.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { mount } from 'enzyme';
-import { ERR_MSG_CSS_CLASS } from '../../../0994/constants';
 import {
   DefinitionTester,
   selectRadio,
 } from 'platform/testing/unit/schemaform-utils';
-import formConfig from '../../../0994/config/form';
+import { ERR_MSG_CSS_CLASS } from '../../constants';
+import formConfig from '../../config/form';
 
 describe('VET TEC benefits eligibility', () => {
   const page =
@@ -29,7 +29,7 @@ describe('VET TEC benefits eligibility', () => {
     );
 
     selectRadio(form, 'root_appliedForVaEducationBenefits', 'N');
-    expect(form.find('.feature').length).to.equal(1);
+    expect(form.find('va-summary-box').length).to.equal(1);
     form.unmount();
   });
 

diff --git a/src/applications/edu-benefits/10203/content/activeDuty.jsx b/src/applications/edu-benefits/10203/content/activeDuty.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 export const housingPaymentInfo = () => (
   // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-  <div className="feature" tabIndex="0">
+  <va-summary-box class="vads-u-margin-y--3" tabIndex="0">
     You can receive the Rogers STEM Scholarship while you’re on active duty, but
-    you won’t be eligible for the scholarship's housing allowance.
-  </div>
+    you won’t be eligible for the scholarship’s housing allowance.
+  </va-summary-box>
 );
diff --git a/src/applications/edu-benefits/10203/content/programDetails.jsx b/src/applications/edu-benefits/10203/content/programDetails.jsx
@@ -6,16 +6,19 @@ export const schoolStudentIdTitle = (
       <strong>Your student ID and contact details</strong>
     </p>
     <p className="school-details-notice">
-      These details will help us review your application faster, but aren't
+      These details will help us review your application faster, but aren’t
       required.
     </p>
   </div>
 );
 
 export const stemApplicantSco = (
   // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-  <div className="feature vads-u-margin-top--5" tabIndex="0">
+  <va-summary-box
+    class="vads-u-margin-top--5 vads-u-margin-bottom--3"
+    tabIndex="0"
+  >
     We’ll be reaching out to the School Certifying Official (SCO) at this school
     to confirm your eligibility for the scholarship.
-  </div>
+  </va-summary-box>
 );