Develop -> Alpha

packages/ontario-design-system-component-library/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);
+	});
+});

packages/ontario-design-system-component-library/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 = {

packages/ontario-design-system-component-library/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);
+	});
+});

packages/ontario-design-system-component-library/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));
 }
 
 /**

packages/ontario-design-system-global-styles/src/styles/scss/2-tools/mixins/_grid.mixins.scss

@@ -14,6 +14,8 @@
 *  5 - Grid HTML classes
 */
 
+$modules: null;
+
 /*** 1 - Exporting grid code ***/
 /// Creates a global module.
 ///
@@ -106,7 +108,17 @@
 /// @param {boolean or string} $float
 ///   Should this float? Default: true. Options: true, false, left, right.
 
-@mixin ontario-grid-column($columns: false, $last-column: false, $center: false, $offset: false, $push: false, $pull: false, $collapse: false, $float: true, $position: false) {
+@mixin ontario-grid-column(
+	$columns: false,
+	$last-column: false,
+	$center: false,
+	$offset: false,
+	$push: false,
+	$pull: false,
+	$collapse: false,
+	$float: true,
+	$position: false
+) {
 	// If positioned for default .column, include relative position
 	// push and pull require position set
 	@if $position or $push or $pull {