From ecf8ce57e85953b7ef054ac0c7117f8f223fbb76 Mon Sep 17 00:00:00 2001 From: Nick Gaydosh Date: Wed, 11 Oct 2023 15:48:34 -0400 Subject: [PATCH] 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 --- packages/web-components/package.json | 2 +- .../src/components/va-date/va-date.tsx | 30 +---------- .../va-memorable-date/va-memorable-date.tsx | 37 ++------------ .../src/utils/date-utils.spec.ts | 50 ++++++------------- .../web-components/src/utils/date-utils.ts | 27 ++++------ 5 files changed, 30 insertions(+), 116 deletions(-) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 2fb3aed32..020d25d88 100644 --- 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 index 5575f962e..3052c13e1 100644 --- 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 index b402ee086..404f80cae 100644 --- 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 { )} - +
{monthDisplay}
@@ -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 index 56cd939ef..1383f998d 100644 --- 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); diff --git a/packages/web-components/src/utils/date-utils.ts b/packages/web-components/src/utils/date-utils.ts index eb37f6500..20e3b61a9 100644 --- a/packages/web-components/src/utils/date-utils.ts +++ b/packages/web-components/src/utils/date-utils.ts @@ -217,17 +217,6 @@ export function checkIsNaN( return false; } -interface ValidateConfig { - component: Components.VaDate | Components.VaMemorableDate, - year: number, - month: number, - day: number, - monthYearOnly?: boolean, - yearTouched?: boolean, - monthTouched?: boolean, - dayTouched?: boolean, -} - /** * This is used to validate date components and: * 1. Indicate which field fails the built-in validation @@ -235,7 +224,12 @@ interface ValidateConfig { * * It relies on the component's mutable props. */ -export function validate({ component, year, month, day, monthYearOnly, yearTouched, monthTouched, dayTouched }: ValidateConfig) : void { +export function validate( + component: Components.VaDate | Components.VaMemorableDate, + year: number, + month: number, + day: number, + monthYearOnly : boolean = false) : void { const maxDay = daysForSelectedMonth(year, month); if (component.required && (!year || !month || (!monthYearOnly && !day))) { @@ -247,8 +241,8 @@ export function validate({ component, year, month, day, monthYearOnly, yearTouch } // Begin built-in validation. - // Empty fields are acceptable when field is untouched. Otherwise must pass validation - if (yearTouched && (!year || year < minYear || year > maxYear)) { + // Empty fields are acceptable unless the component is marked as required + if (year && (year < minYear || year > maxYear)) { component.invalidYear = true; component.error = 'year-range'; } @@ -258,7 +252,7 @@ export function validate({ component, year, month, day, monthYearOnly, yearTouch // Check day before month so that the month error message has a change to override // We don't know the upper limit on days until we know the month - if (dayTouched && !monthYearOnly && (!day || day < minMonths || day > maxDay)) { + if (!monthYearOnly && (day < minMonths || day > maxDay)) { component.invalidDay = true; component.error = 'day-range'; } @@ -268,7 +262,8 @@ export function validate({ component, year, month, day, monthYearOnly, yearTouch // The month error message will trigger if the month is outside of the acceptable range, // but also if the day is invalid and there isn't a month value. - if (monthTouched && (!month || month < minMonths || month > maxMonths)) { + if ((month && (month < minMonths || month > maxMonths)) || + (!month && component.invalidDay)) { component.invalidMonth = true; component.error = 'month-range'; }