Rollback memorable date (#904)

* Rollback changes made in 2123-memorable-date-validation for conflicting with another memorable date change * Bump web-components package.json version
department-of-veterans-affairs · Oct 11, 2023 · ecf8ce5 · ecf8ce5
1 parent 41675cc
commit ecf8ce5
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 116 deletions.
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/web-components",
-  "version": "4.45.30",
+  "version": "4.45.31",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/web-components/src/components/va-date/va-date.tsx b/packages/web-components/src/components/va-date/va-date.tsx
@@ -103,10 +103,6 @@ export class VaDate {
   @Prop({ mutable: true }) invalidMonth: boolean = false;
   @Prop({ mutable: true }) invalidYear: boolean = false;
 
-  private dayTouched: boolean = false;
-  private monthTouched: boolean = false;
-  private yearTouched: boolean = false;
-
   /**
    * Whether or not an analytics event will be fired.
    */
@@ -153,16 +149,7 @@ export class VaDate {
     this.setValue(year, month, day);
     // Run built-in validation. Any custom validation
     // will happen afterwards
-    validate({
-               component: this,
-               year,
-               month,
-               day,
-               monthYearOnly: this.monthYearOnly,
-               yearTouched: this.yearTouched,
-               monthTouched: this.monthTouched,
-               dayTouched: this.dayTouched
-             });
+    validate(this, year, month, day, this.monthYearOnly);
     this.dateBlur.emit(event);
 
     if (this.enableAnalytics) {
@@ -204,18 +191,6 @@ export class VaDate {
     this.dateChange.emit(event);
   };
 
-  private handleMonthBlur = () => {
-    this.monthTouched = true;
-  }
-
-  private handleDayBlur = () => {
-    this.dayTouched = true;
-  }
-
-  private handleYearBlur = () => {
-    this.yearTouched = true;
-  }
-
   render() {
     const {
       required,
@@ -261,7 +236,6 @@ export class VaDate {
               // Value must be a string
               value={month?.toString()}
               onVaSelect={handleDateChange}
-              onBlur={this.handleMonthBlur}
               invalid={this.invalidMonth}
               class="select-month"
               aria-label="Please enter two digits for the month"
@@ -282,7 +256,6 @@ export class VaDate {
                 // Value must be a string
                 value={daysForSelectedMonth.length < day ? '' : day?.toString()}
                 onVaSelect={handleDateChange}
-                onBlur={this.handleDayBlur}
                 invalid={this.invalidDay}
                 class="select-day"
                 aria-label="Please enter two digits for the day"
@@ -306,7 +279,6 @@ export class VaDate {
               value={year ? year.toString() : ''}
               invalid={this.invalidYear}
               onInput={handleDateChange}
-              onBlur={this.handleYearBlur}
               class="input-year"
               inputmode="numeric"
               type="text"

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
@@ -113,10 +113,6 @@ export class VaMemorableDate {
   @Prop({ mutable: true }) invalidMonth: boolean = false;
   @Prop({ mutable: true }) invalidYear: boolean = false;
 
-  private dayTouched: boolean = false;
-  private monthTouched: boolean = false;
-  private yearTouched: boolean = false;
-
   private handleDateBlur = (event: FocusEvent) => {
     const [year, month, day] = (this.value || '').split('-');
     const yearNum = Number(year);
@@ -141,15 +137,7 @@ export class VaMemorableDate {
 
     // Built-in validation is run after custom so internal errors override
     // custom errors, e.g. Show invalid date instead of custom error
-    validate({
-               component: this,
-               year: yearNum,
-               month: monthNum,
-               day: dayNum,
-               yearTouched: this.yearTouched,
-               monthTouched: this.monthTouched,
-               dayTouched: this.dayTouched
-             });
+    validate(this, yearNum, monthNum, dayNum);
 
     if (this.enableAnalytics) {
       const detail = {
@@ -188,18 +176,6 @@ export class VaMemorableDate {
     this.dateChange.emit(event);
   };
 
-  private handleMonthBlur = () => {
-    this.monthTouched = true;
-  }
-
-  private handleDayBlur = () => {
-    this.dayTouched = true;
-  }
-
-  private handleYearBlur = () => {
-    this.yearTouched = true;
-  }
-
   /**
    * Whether or not an analytics event will be fired.
    */
@@ -217,7 +193,7 @@ export class VaMemorableDate {
   componentLibraryAnalytics: EventEmitter;
 
   componentDidLoad() {
-    // We are setting the error on each va-text-input for screen readers, but do not want to show it visually. 
+    // We are setting the error on each va-text-input for screen readers, but do not want to show it visually.
     const textInputs = this.el.shadowRoot.querySelectorAll('va-text-input, va-select');
     textInputs.forEach((input) => {
       input.shadowRoot.querySelector('#input-error-message').classList.add('sr-only');
@@ -281,7 +257,6 @@ export class VaMemorableDate {
             aria-describedby={describedbyIds}
             invalid={this.invalidMonth}
             onVaSelect={handleDateChange}
-            onBlur={this.handleMonthBlur}
             class='usa-form-group--month-select'
             reflectInputError={error === 'month-range' ? true : false}
             value={month ? String(parseInt(month)) : month}
@@ -309,7 +284,6 @@ export class VaMemorableDate {
           // if NaN provide empty string
           value={month?.toString()}
           onInput={handleDateChange}
-          onBlur={this.handleMonthBlur}
           class="usa-form-group--month-input memorable-date-input"
             reflectInputError={error === 'month-range' ? true : false}
           inputmode="numeric"
@@ -339,7 +313,7 @@ export class VaMemorableDate {
               )}
             </span>
             <slot />
-            
+
             <div class="usa-memorable-date">
               {monthDisplay}
               <div class="usa-form-group usa-form-group--day">
@@ -355,7 +329,6 @@ export class VaMemorableDate {
                   // if NaN provide empty string
                   value={day?.toString()}
                   onInput={handleDateChange}
-                  onBlur={this.handleDayBlur}
                   class="usa-form-group--day-input memorable-date-input"
                   reflectInputError={error === 'day-range' ? true : false}
                   inputmode="numeric"
@@ -376,7 +349,6 @@ export class VaMemorableDate {
                   // if NaN provide empty string
                   value={year?.toString()}
                   onInput={handleDateChange}
-                  onBlur={this.handleYearBlur}
                   class="usa-form-group--year-input memorable-date-input"
                   reflectInputError={error === 'year-range' ? true : false}
                   inputmode="numeric"
@@ -418,7 +390,6 @@ export class VaMemorableDate {
                 // if NaN provide empty string
                 value={month?.toString()}
                 onInput={handleDateChange}
-                onBlur={this.handleMonthBlur}
                 class="input-month memorable-date-input"
                 inputmode="numeric"
                 type="text"
@@ -436,7 +407,6 @@ export class VaMemorableDate {
                 // if NaN provide empty string
                 value={day?.toString()}
                 onInput={handleDateChange}
-                onBlur={this.handleDayBlur}
                 class="input-day memorable-date-input"
                 inputmode="numeric"
                 type="text"
@@ -454,7 +424,6 @@ export class VaMemorableDate {
                 // if NaN provide empty string
                 value={year?.toString()}
                 onInput={handleDateChange}
-                onBlur={this.handleYearBlur}
                 class="input-year memorable-date-input"
                 inputmode="numeric"
                 type="text"

diff --git a/packages/web-components/src/utils/date-utils.spec.ts b/packages/web-components/src/utils/date-utils.spec.ts
@@ -26,9 +26,8 @@ describe('validate', () => {
     const year = 1500;
     const month = 1;
     const day = 1;
-    const yearTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, yearTouched} );
+    validate(memorableDateComponent, year, month, day);
 
     expect(memorableDateComponent.error).toEqual(`year-range`);
     expect(memorableDateComponent.invalidYear).toEqual(true);
@@ -41,9 +40,8 @@ describe('validate', () => {
     const year = 3000;
     const month = 1;
     const day = 1;
-    const yearTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, yearTouched} );
+    validate(memorableDateComponent, year, month, day);
 
     expect(memorableDateComponent.error).toEqual(`year-range`);
     expect(memorableDateComponent.invalidYear).toEqual(true);
@@ -56,9 +54,8 @@ describe('validate', () => {
     const year = 2000;
     const month = 15;
     const day = 1;
-    const monthTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, monthTouched} );
+    validate(memorableDateComponent, year, month, day);
 
     expect(memorableDateComponent.error).toEqual('month-range');
     expect(memorableDateComponent.invalidYear).toEqual(false);
@@ -71,9 +68,8 @@ describe('validate', () => {
     const year = 2000;
     const month = 1;
     const day = 35;
-    const dayTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, dayTouched} );
+    validate(memorableDateComponent, year, month, day);
 
     expect(memorableDateComponent.error).toEqual('day-range');
     expect(memorableDateComponent.invalidYear).toEqual(false);
@@ -86,9 +82,8 @@ describe('validate', () => {
     const year = 2023;
     const month = 2;
     const day = 29;
-    const dayTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, dayTouched} );
+    validate(memorableDateComponent, year, month, day);
 
     expect(memorableDateComponent.error).toEqual('day-range');
     expect(memorableDateComponent.invalidDay).toEqual(true);
@@ -99,9 +94,8 @@ describe('validate', () => {
     const year = 2000;
     const month = 1;
     const day = null;
-    const dayTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, dayTouched} );
+    validate(memorableDateComponent, year, month, day);
 
     expect(memorableDateComponent.error).toEqual('day-range');
     expect(memorableDateComponent.invalidYear).toEqual(false);
@@ -114,10 +108,8 @@ describe('validate', () => {
     const year = 2000;
     const month = 1;
     const day = null;
-    const monthYearOnly = true
-    const dayTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, monthYearOnly, dayTouched} );;
+    validate(memorableDateComponent, year, month, day, true);
 
     expect(memorableDateComponent.error).toEqual(null);
     expect(memorableDateComponent.invalidYear).toEqual(false);
@@ -131,9 +123,8 @@ describe('validate', () => {
       const year = null;
       const month = 1;
       const day = 1;
-      const yearTouched = true;
 
-      validate({ component: memorableDateComponent, year, month, day, yearTouched} );
+      validate(memorableDateComponent, year, month, day);
 
       expect(memorableDateComponent.error).toEqual('date-error');
       expect(memorableDateComponent.invalidYear).toEqual(true);
@@ -146,9 +137,8 @@ describe('validate', () => {
       const year = 2000;
       const month = null;
       const day = 1;
-      const monthTouched = true;
 
-      validate({ component: memorableDateComponent, year, month, day, monthTouched} );
+      validate(memorableDateComponent, year, month, day);
 
       expect(memorableDateComponent.error).toEqual('date-error');
       expect(memorableDateComponent.invalidYear).toEqual(false);
@@ -161,9 +151,8 @@ describe('validate', () => {
       const year = 2000;
       const month = 1;
       const day = null;
-      const dayTouched = true;
 
-      validate({ component: memorableDateComponent, year, month, day, dayTouched} );
+      validate(memorableDateComponent, year, month, day);
 
       expect(memorableDateComponent.error).toEqual('date-error');
       expect(memorableDateComponent.invalidYear).toEqual(false);
@@ -176,10 +165,8 @@ describe('validate', () => {
       const year = 2000;
       const month = 1;
       const day = null;
-      const monthYearOnly = true;
-      const dayTouched = true;
 
-      validate({ component: memorableDateComponent, year, month, day, monthYearOnly, dayTouched} );;
+      validate(memorableDateComponent, year, month, day, true);
 
       expect(memorableDateComponent.error).toEqual(null);
       expect(memorableDateComponent.invalidYear).toEqual(false);
@@ -193,11 +180,8 @@ describe('validate', () => {
     const year = 2000;
     const month = 1;
     const day = 1;
-    const yearTouched = true;
-    const monthTouched = true;
-    const dayTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, yearTouched, monthTouched, dayTouched} );
+    validate(memorableDateComponent, year, month, day);
 
     expect(memorableDateComponent.error).toEqual(null);
     expect(memorableDateComponent.invalidYear).toEqual(false);
@@ -210,11 +194,8 @@ describe('validate', () => {
     const year = 2000;
     const month = 1;
     const day = 1;
-    const yearTouched = true;
-    const monthTouched = true;
-    const dayTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, yearTouched, monthTouched, dayTouched} );
+    validate(memorableDateComponent, year, month, day);
 
     expect(memorableDateComponent.error).toEqual('Some error');
     expect(memorableDateComponent.invalidYear).toEqual(false);
@@ -227,11 +208,8 @@ describe('validate', () => {
     const year = 2000;
     const month = null;
     const day = 500;
-    const yearTouched = true;
-    const monthTouched = true;
-    const dayTouched = true;
 
-    validate({ component: memorableDateComponent, year, month, day, yearTouched, monthTouched, dayTouched });
+    validate(memorableDateComponent, year, month, day);
 
     expect(memorableDateComponent.error).toEqual('month-range');
     expect(memorableDateComponent.invalidYear).toEqual(false);