@ongov/ontario-design-system-component-library 5.0.0-alpha.1 → 5.0.0-alpha.4

package/dist/types/components/ontario-date-input/utils/date-validation-utils.d.ts

@@ -1,5 +1,19 @@
 import { DateValidatorReturnType } from '../ontario-date-input-interface';
 import { Translations } from '../../../translations';
+/**
+ * Valid value year against minimum and maximum year range (defaulted if not provided.)
+ *
+ * Year field should be a number and not written out; it has no concept of positive and negative.
+ *
+ * Suggestion:
+ * - `< 0` B.C.E.
+ * - `>= 0` A.C.E.
+ *
+ * @param value value to check for validity
+ * @param minYear minimum valid year to validate against
+ * @param maxYear maximum valid year to validate against
+ */
+export declare const isInvalidYear: (value: string | number, minYear?: number, maxYear?: number) => boolean;
 type GetDateErrorArg = {
 	dayValue: string;
 	monthValue: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "5.0.0-alpha.1",
+	"version": "5.0.0-alpha.4",
 	"private": false,
 	"description": "Ontario Design System Component Library",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"test:unit": "stencil test --spec"
 	},
 	"dependencies": {
-		"@ongov/ontario-design-system-global-styles": "4.3.1-alpha.1",
+		"@ongov/ontario-design-system-global-styles": "5.0.0-alpha.3",
 		"@stencil/core": "^4.12.2",
 		"dotenv": "^16.3.1"
 	},
@@ -102,5 +102,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "2941db5cb66d3a161e359f36543b489922853b02"
+	"gitHead": "14b540375d2b095c2d61825af04a004708e4ff38"
 }

package/src/components/ontario-date-input/test/ontario-date-input.spec.tsx

@@ -1,5 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { OntarioDateInput } from '../ontario-date-input';
+import { isInvalidYear } from '../utils';
 
 describe('ontario-date-input', () => {
 	it('renders deafult state', async () => {
@@ -120,3 +121,78 @@ describe('ontario-date-input', () => {
 		`);
 	});
 });
+
+describe('date-validation-utils', () => {
+	it('is invalid year value - undefined string', () => {
+		// Note: Type system doesn't like `undefined` as `any` lets us force it for testing purposes
+		const value: any = undefined;
+
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+
+	it('is invalid year value - null string', () => {
+		// Note: Type system doesn't like `null` as `any` lets us force it for testing purposes
+		const value: any = null;
+
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+
+	it('is invalid year value - empty string', () => {
+		const value = ''; // Empty string
+
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+
+	it('is invalid year value - written out number', () => {
+		const value = 'two-thousand';
+
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+
+	it('is valid year value', () => {
+		const value = '2000';
+
+		const isValidYear = !isInvalidYear(value);
+		expect(isValidYear).toEqual(true);
+	});
+
+	it('is valid year when in range', () => {
+		const value = '2000';
+		const minYear = 1;
+		const maxYear = 9999;
+
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(true);
+	});
+
+	it('is valid year when in range but is minYear', () => {
+		const value = '2000';
+		const minYear = 2000;
+		const maxYear = 9999;
+
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(true);
+	});
+
+	it('is valid year when in range but is maxYear', () => {
+		const value = '2000';
+		const minYear = 1;
+		const maxYear = 2000;
+
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(true);
+	});
+
+	it('is invalid year when out of range', () => {
+		const value = '2000';
+		const minYear = 1;
+		const maxYear = 1999;
+
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(false);
+	});
+});

package/src/components/ontario-date-input/utils/date-validation-utils.ts

@@ -35,17 +35,31 @@ const isInvalidMonth = (value: string) => {
 	return month < MONTH_MIN_VALUE || month > MONTH_MAX_VALUE;
 };
 
-/*
- * Year field should be a number, not negative, at length at least 4 digits
+/**
+ * Valid value year against minimum and maximum year range (defaulted if not provided.)
+ *
+ * Year field should be a number and not written out; it has no concept of positive and negative.
+ *
+ * Suggestion:
+ * - `< 0` B.C.E.
+ * - `>= 0` A.C.E.
+ *
+ * @param value value to check for validity
+ * @param minYear minimum valid year to validate against
+ * @param maxYear maximum valid year to validate against
  */
-const isInvalidYear = (value: string, minYear: number = YEAR_MIN_VALUE, maxYear: number = YEAR_MAX_VALUE) => {
+export const isInvalidYear = (
+	value: string | number,
+	minYear: number = YEAR_MIN_VALUE,
+	maxYear: number = YEAR_MAX_VALUE,
+) => {
 	if (!isNumber(value)) {
 		return true;
 	}
 
 	const year = Number(value);
 
-	return year <= minYear || year > maxYear;
+	return year < minYear || year > maxYear;
 };
 
 type GetDateErrorArg = {

package/src/components/ontario-footer/test/ontario-footer.spec.tsx

@@ -58,7 +58,7 @@ describe('ontario-footer', () => {
                   <li><a class="ontario-footer__link" href="https://www.ontario.ca/feedback/contact-us">Contact</a></li>
                 </ul>
                 <div class="ontario-footer__copyright">
-                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–24</span></a>
+                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–25</span></a>
                 </div>
               </div>
             </div>
@@ -201,7 +201,7 @@ describe('ontario-footer', () => {
                   <li><a class="ontario-footer__link" href="https://www.ontario.ca/feedback/contact-us">Contact</a></li>
                 </ul>
                 <div class="ontario-footer__copyright">
-                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–24</span></a>
+                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–25</span></a>
                 </div>
               </div>
             </div>
@@ -370,7 +370,7 @@ describe('ontario-footer', () => {
                   <li><a class="ontario-footer__link" href="https://www.ontario.ca/feedback/contact-us">Contact</a></li>
                 </ul>
                 <div class="ontario-footer__copyright">
-                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–24</span></a>
+                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–25</span></a>
                 </div>
               </div>
             </div>
@@ -549,7 +549,7 @@ describe('ontario-footer', () => {
                   <li><a class="ontario-footer__link" href="https://www.ontario.ca/feedback/contact-us">Contact</a></li>
                 </ul>
                 <div class="ontario-footer__copyright">
-                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–24</span></a>
+                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–25</span></a>
                 </div>
               </div>
             </div>

package/src/components/ontario-header/ontario-header.scss

@@ -14,8 +14,8 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
 
-$ontario-search-input-padding: 7.2rem;
-$ontario-search-input-padding--mobile: 6.4rem;
+$ontario-search-padding: 7.2rem;
+$ontario-search-padding--mobile: 6.4rem;
 
 $ontario-header-logo-width: 180px;
 $ontario-header-logo-width--mobile: 45px;
@@ -304,7 +304,7 @@ $ontario-navigation-container-min-width: 290px;
 	margin-bottom: spacing.$spacing-0;
 	height: globalVariables.$standard-input-height;
 	padding-left: spacing.$spacing-3;
-	padding-right: $ontario-search-input-padding;
+	padding-right: $ontario-search-padding;
 
 	&:invalid + input[type='reset'] {
 		display: none;
@@ -346,7 +346,7 @@ $ontario-navigation-container-min-width: 290px;
 
 	@media screen and (min-width: breakpoints.$small-breakpoint) and (max-width: breakpoints.$medium-breakpoint) {
 		padding-left: spacing.$spacing-4;
-		padding-right: $ontario-search-input-padding--mobile;
+		padding-right: $ontario-search-padding--mobile;
 	}
 }
 

package/src/config.json

@@ -1,4 +1 @@
-{
-	"ONTARIO_HEADER_API_URL_EN": "https://www.ontario.ca/system/menu/main/linkset",
-	"ONTARIO_HEADER_API_URL_FR": "https://www.ontario.ca/system/menu/main-fr/linkset"
-}
+{ "ONTARIO_HEADER_API_URL_EN": "", "ONTARIO_HEADER_API_URL_FR": "" }

package/src/utils/helper/utils.spec.ts

@@ -1,4 +1,4 @@
-import { format } from './utils';
+import { format, isNumber, retrieveEnumKeys } from './utils';
 
 describe('format', () => {
 	it('returns empty string for no names defined', () => {
@@ -17,3 +17,129 @@ describe('format', () => {
 		expect(format('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique');
 	});
 });
+
+describe('isNumber', () => {
+	it('should return false if value is undefined', () => {
+		const value: any = undefined;
+
+		const result = isNumber(value);
+		expect(result).toEqual(false);
+	});
+
+	it('should return false if value that is null', () => {
+		const value: any = null;
+
+		const result = isNumber(value);
+		expect(result).toEqual(false);
+	});
+
+	it('should return true if value is a number', () => {
+		const value: number = 2000;
+
+		const result = isNumber(value);
+		expect(result).toEqual(true);
+	});
+
+	it('should return true if value is a number as a string', () => {
+		const value: string = '2000';
+
+		const result = isNumber(value);
+		expect(result).toEqual(true);
+	});
+
+	it('should return false if value is not a number string', () => {
+		const value: string = 'two-thousand';
+
+		const result = isNumber(value);
+		expect(result).toEqual(false);
+	});
+});
+
+describe('isNumber', () => {
+	it('should return false if value is undefined', () => {
+		const value: any = undefined;
+
+		const result = isNumber(value);
+		expect(result).toEqual(false);
+	});
+
+	it('should return false if value that is null', () => {
+		const value: any = null;
+
+		const result = isNumber(value);
+		expect(result).toEqual(false);
+	});
+
+	it('should return true if value is a number', () => {
+		const value: number = 2000;
+
+		const result = isNumber(value);
+		expect(result).toEqual(true);
+	});
+
+	it('should return true if value is a number as a string', () => {
+		const value: string = '2000';
+
+		const result = isNumber(value);
+		expect(result).toEqual(true);
+	});
+
+	it('should return false if value is not a number string', () => {
+		const value: string = 'two-thousand';
+
+		const result = isNumber(value);
+		expect(result).toEqual(false);
+	});
+});
+
+enum ColourEnumNumeric {
+	RED,
+	ORANGE,
+	YELLOW,
+	GREEN,
+	BLUE,
+	INDIGO,
+	VIOLET,
+}
+
+enum ColourEnumString {
+	'red' = 'Red',
+	'orange' = 'Orange',
+	'yellow' = 'Yellow',
+	'green' = 'Green',
+	'blue' = 'Blue',
+	'indigo' = 'Indigo',
+	'violet' = 'Violet',
+}
+
+describe('retrieveEnumKeys', () => {
+	it('should return empty array if enumObject is undefined', () => {
+		const expectedResult = new Array<string>(0);
+		const enumObject: any = undefined;
+
+		const result = retrieveEnumKeys(enumObject);
+		expect(result).toEqual(expectedResult);
+	});
+
+	it('should return empty array if enumObject is null', () => {
+		const expectedResult = new Array<string>(0);
+		const enumObject: any = null;
+
+		const result = retrieveEnumKeys(enumObject);
+		expect(result).toEqual(expectedResult);
+	});
+
+	it('should return keys from numerical enum', () => {
+		const expectedResult = ['RED', 'ORANGE', 'YELLOW', 'GREEN', 'BLUE', 'INDIGO', 'VIOLET'];
+
+		const result = retrieveEnumKeys(ColourEnumNumeric);
+		expect(result).toEqual(expectedResult);
+	});
+
+	it('should return keys from string enum', () => {
+		const expectedResult = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+
+		const result = retrieveEnumKeys(ColourEnumString);
+		expect(result).toEqual(expectedResult);
+	});
+});

package/src/utils/helper/utils.ts

@@ -67,7 +67,8 @@ export function removeObjectsBySpecificKey<T>(objects: T[], key: keyof T, value:
  * @returns {boolean}
  */
 export function isNumber(value: string | number): boolean {
-	return isNaN(Number(value)) === true;
+	if (value === undefined || value === null) return false;
+	return isNaN(Number(value)) === false;
 }
 
 export function isEmpty(str: string | undefined | null): boolean {
@@ -82,7 +83,8 @@ export function isEmpty(str: string | undefined | null): boolean {
  * @returns {string[]}
  */
 export function retrieveEnumKeys(enumObject: object): string[] {
-	return Object.keys(enumObject).filter(isNumber);
+	if (enumObject === undefined || enumObject === null) return new Array<string>(0);
+	return Object.keys(enumObject).filter((key) => !isNumber(key));
 }
 
 /**