update class names

department-of-veterans-affairs · Aug 28, 2023 · 4e74b9b · 4e74b9b
1 parent e51088c
commit 4e74b9b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/packages/web-components/src/components/va-memorable-date/test/va-memorable-date.e2e.ts b/packages/web-components/src/components/va-memorable-date/test/va-memorable-date.e2e.ts
@@ -641,8 +641,8 @@ describe('va-memorable-date', () => {
           <slot></slot>
           <span id="error-message" role="alert"></span>
           <div class="usa-memorable-date">
-            <div class="usa-form-group uswds-usa-form-group--month">
-              <va-text-input aria-describedby="dateHint" class="hydrated memorable-date-input uswds-usa-form-group--month-input" uswds=""></va-text-input>
+            <div class="usa-form-group v3-usa-form-group--month">
+              <va-text-input aria-describedby="dateHint" class="hydrated memorable-date-input v3-usa-form-group--month-input" uswds=""></va-text-input>
             </div>
             <div class="usa-form-group usa-form-group--day">
               <va-text-input aria-describedby="dateHint" class="hydrated memorable-date-input usa-form-group--day-input" uswds=""></va-text-input>
@@ -692,8 +692,8 @@ describe('va-memorable-date', () => {
           <slot></slot>
           <span id="error-message" role="alert"></span>
           <div class="usa-memorable-date">
-            <div class="usa-form-group uswds-usa-form-group--month">
-              <va-text-input aria-describedby="dateHint hint" class="hydrated memorable-date-input uswds-usa-form-group--month-input" uswds=""></va-text-input>
+            <div class="usa-form-group v3-usa-form-group--month">
+              <va-text-input aria-describedby="dateHint hint" class="hydrated memorable-date-input v3-usa-form-group--month-input" uswds=""></va-text-input>
             </div>
             <div class="usa-form-group usa-form-group--day">
               <va-text-input aria-describedby="dateHint hint" class="hydrated memorable-date-input usa-form-group--day-input" uswds=""></va-text-input>
@@ -1068,7 +1068,7 @@ describe('va-memorable-date', () => {
     const page = await newE2EPage();
     await page.setContent('<va-memorable-date value="1999-05-03" uswds />');
 
-    const month = await page.find('va-memorable-date >>> .uswds-usa-form-group--month-input');
+    const month = await page.find('va-memorable-date >>> .v3-usa-form-group--month-input');
     const day = await page.find('va-memorable-date >>> .usa-form-group--day-input');
     const year = await page.find('va-memorable-date >>> .usa-form-group--year-input');
 
@@ -1084,7 +1084,7 @@ describe('va-memorable-date', () => {
     );
 
     const date = await page.find('va-memorable-date');
-    const elementMonth = await page.find('va-memorable-date >>> .uswds-usa-form-group--month-input');
+    const elementMonth = await page.find('va-memorable-date >>> .v3-usa-form-group--month-input');
     const elementDay = await page.find('va-memorable-date >>> .usa-form-group--day-input');
     const elementYear = await page.find('va-memorable-date >>> .usa-form-group--year-input');
     const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -1133,7 +1133,7 @@ describe('va-memorable-date', () => {
     const page = await newE2EPage();
     await page.setContent('<va-memorable-date name="test" uswds />');
 
-    const elementMonth = await page.find('va-memorable-date >>> .uswds-usa-form-group--month-input');
+    const elementMonth = await page.find('va-memorable-date >>> .v3-usa-form-group--month-input');
     const handleMonth = await page.$('pierce/[name="testMonth"]');
     await handleMonth.press('2');
     await handleMonth.press('0');
@@ -1281,7 +1281,7 @@ describe('va-memorable-date', () => {
           <slot></slot>
           <span id="error-message" role="alert"></span>
           <div class="usa-memorable-date">
-            <div class="usa-form-group usa-form-group--select uswds-usa-form-group--month">
+            <div class="usa-form-group usa-form-group--select v3-usa-form-group--month">
               <va-select aria-describedby="dateHint" class="hydrated usa-form-group--month-select" uswds="">
                 <option value="1">
                   January
@@ -1369,7 +1369,7 @@ describe('va-memorable-date', () => {
           <slot></slot>
           <span id="error-message" role="alert"></span>
           <div class="usa-memorable-date">
-            <div class="usa-form-group usa-form-group--select uswds-usa-form-group--month">
+            <div class="usa-form-group usa-form-group--select v3-usa-form-group--month">
               <va-select aria-describedby="dateHint hint" class="hydrated usa-form-group--month-select" uswds="">
                 <option value="1">
                   January

diff --git a/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss b/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss
@@ -17,11 +17,11 @@
   margin-top: 16px;
 }
 
-.uswds-usa-form-group--month {
+.v3-usa-form-group--month {
   margin-right: 16px;
 }
 
-.uswds-usa-form-group--month-input {
+.v3-usa-form-group--month-input {
   width: 48px;
 }
 
@@ -38,7 +38,7 @@
   .usa-form-group--month-select {
     width: 100%;
   }
-  .uswds-usa-form-group--month.usa-form-group--select {
+  .v3-usa-form-group--month.usa-form-group--select {
     flex: 0 1 50%;
     width: 50%;
   }

diff --git a/packages/web-components/src/components/va-memorable-date/va-memorable-date.tsx b/packages/web-components/src/components/va-memorable-date/va-memorable-date.tsx
@@ -179,7 +179,7 @@ export class VaMemorableDate {
     let [currentYear, currentMonth, currentDay] = (this.value || '').split('-');
     if (target.classList.contains('input-month') || target.classList.contains('usa-form-group--month-input')
       || target.classList.contains('usa-form-group--month-select')
-      || target.classList.contains('uswds-usa-form-group--month-input')) {
+      || target.classList.contains('v3-usa-form-group--month-input')) {
       currentMonth = target.value;
     }
     if (target.classList.contains('input-day') || target.classList.contains('usa-form-group--day-input')) {
@@ -253,7 +253,7 @@ export class VaMemorableDate {
     // Fieldset has an implicit aria role of group
     if (uswds) {
       const monthDisplay = monthSelect
-        ? <div class="usa-form-group uswds-usa-form-group--month usa-form-group--select">
+        ? <div class="usa-form-group v3-usa-form-group--month usa-form-group--select">
           <va-select
             uswds
             label={i18next.t('month')}
@@ -275,7 +275,7 @@ export class VaMemorableDate {
             }
           </va-select>
         </div>
-      : <div class="usa-form-group uswds-usa-form-group--month">
+      : <div class="usa-form-group v3-usa-form-group--month">
         <va-text-input
           uswds
           label={i18next.t('month')}
@@ -288,7 +288,7 @@ export class VaMemorableDate {
           // if NaN provide empty string
           value={month?.toString()}
           onInput={handleDateChange}
-          class="uswds-usa-form-group--month-input memorable-date-input"
+          class="v3-usa-form-group--month-input memorable-date-input"
           reflectInputError={error ? true : false}
           inputmode="numeric"
           type="text"