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

package/src/index.html

@@ -62,6 +62,7 @@
 						<li><a href="#text-inputs">Text inputs</a></li>
 						<li><a href="#date-input">Date input</a></li>
 						<li><a href="#step-indicator">Step indicator</a></li>
+						<li><a href="#search-box">Search Box</a></li>
 						<li><a href="#form">Form example</a></li>
 					</ol>
 					<hr />
@@ -176,58 +177,280 @@
 					<div>
 						<h2 id="card">Card Collection & Card</h2>
 						<div>
+							<h3>Basic cards (no images)</h3>
 							<ontario-card-collection cards-per-row="4">
-								<ontario-card-collection cards-per-row="2">
-									<ontario-card
-										card-type="horizonal"
-										label="Card Title 1"
-										image="https://picsum.photos/200/300"
-										card-link="https://google.ca"
-										horizontal-image-position-type="left"
-										horizontal-image-size-type="one-fourth"
-										description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
-									>
-									</ontario-card>
-									<ontario-card
-										card-type="horizonal"
-										label="Card Title 2"
-										image="https://picsum.photos/200/300"
-										horizontal-image-position-type="left"
-										horizontal-image-size-type="one-fourth"
-										description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
-									>
-									</ontario-card>
-								</ontario-card-collection>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 3"
-									image="https://picsum.photos/200/300"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									label="Card Title 1"
+								>
+								</ontario-card>
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									header-colour="sky"
+									label="Card Title 2"
+								>
+								</ontario-card>
+								<ontario-card label="Card Title 3"> </ontario-card>
+								<ontario-card header-colour="sky" label="Card Title 4"> </ontario-card>
+							</ontario-card-collection>
+
+							<h3>Basic cards with 4:3 images</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/225"
+									label="Card Title 1"
+								>
+								</ontario-card>
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/225"
+									header-colour="sky"
+									label="Card Title 2"
+								>
+								</ontario-card>
+								<ontario-card image="https://picsum.photos/300/225" label="Card Title 3"> </ontario-card>
+								<ontario-card header-colour="sky" image="https://picsum.photos/300/225" label="Card Title 4">
+								</ontario-card>
+							</ontario-card-collection>
+
+							<h3>Basic cards with 16:9 images</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/169"
+									label="Card Title 1"
+								>
+								</ontario-card>
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/169"
+									header-colour="sky"
+									label="Card Title 2"
+								>
+								</ontario-card>
+								<ontario-card image="https://picsum.photos/300/169" label="Card Title 3"> </ontario-card>
+								<ontario-card header-colour="sky" image="https://picsum.photos/300/169" label="Card Title 4">
+								</ontario-card>
+							</ontario-card-collection>
+
+							<h3>Basic cards with 2:1 images</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/150"
+									label="Card Title 1"
+								>
+								</ontario-card>
+								<ontario-card
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/300/150"
+									header-colour="sky"
+									label="Card Title 2"
+								>
+								</ontario-card>
+								<ontario-card image="https://picsum.photos/300/150" label="Card Title 3"> </ontario-card>
+								<ontario-card header-colour="sky" image="https://picsum.photos/300/150" label="Card Title 4">
+								</ontario-card>
+							</ontario-card-collection>
+
+							<h3>Horizontal cards with left align 9:16 images (one-fourth size)</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-fourth"
+									label="Card Title 1"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									header-colour="sky"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 2"
 								>
 								</ontario-card>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 4"
-									image="https://picsum.photos/200/300"
+									layout="horizontal"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 3"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-fourth"
+									label="Card Title 4"
+								>
+								</ontario-card>
+							</ontario-card-collection>
+
+							<h3>Horizontal cards with left align 9:16 images (one-third size)</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									layout="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+									label="Card Title 1"
 								>
 								</ontario-card>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 5"
-									image="https://picsum.photos/200/300"
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									header-colour="sky"
 									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+									label="Card Title 2"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+									label="Card Title 3"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+									label="Card Title 4"
+								>
+								</ontario-card>
+							</ontario-card-collection>
+
+							<h3>Horizontal cards with right align 9:16 images (one-fourth size)</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
 									horizontal-image-size-type="one-fourth"
+									label="Card Title 1"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									header-colour="sky"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 2"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 3"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-fourth"
+									label="Card Title 4"
+								>
+								</ontario-card>
+							</ontario-card-collection>
+
+							<h3>Horizontal cards with right align 9:16 images (one-third size)</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-third"
+									label="Card Title 1"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									image="https://picsum.photos/169/300"
+									header-colour="sky"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-third"
+									label="Card Title 2"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-third"
+									label="Card Title 3"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									image="https://picsum.photos/169/300"
+									horizontal-image-position-type="right"
+									horizontal-image-size-type="one-third"
+									label="Card Title 4"
+								>
+								</ontario-card>
+							</ontario-card-collection>
+
+							<h3>Edge cases</h3>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									header-colour="orange"
+									label="Card Title 1 Card Title 1 Card Title 1"
+									image="https://picsum.photos/200/300"
+								>
+								</ontario-card>
+								<ontario-card
+									header-colour="sky"
+									label="Card Title 2"
+									image="https://picsum.photos/200/300"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 								>
 								</ontario-card>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 6"
+									label="Card Title 3"
+									image="https://picsum.photos/200/300"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+								>
+								</ontario-card>
+							</ontario-card-collection>
+
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card
+									layout="horizontal"
+									header-colour="orange"
+									label="Card Title 1 Card Title 1 Card Title 1"
+									image="https://picsum.photos/200/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-third"
+								>
+								</ontario-card>
+								<ontario-card
+									layout="horizontal"
+									header-colour="sky"
+									label="Card Title 2"
 									image="https://picsum.photos/200/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-fourth"
@@ -235,8 +458,8 @@
 								>
 								</ontario-card>
 								<ontario-card
-									card-type="basic"
-									label="Card Title 7"
+									layout="horizontal"
+									label="Card Title 3"
 									image="https://picsum.photos/200/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-fourth"
@@ -942,6 +1165,36 @@
 							number-of-steps="5"
 						></ontario-step-indicator>
 					</div>
+					<hr />
+
+					<!-- Search box -->
+					<script>
+						window.addEventListener('load', () => {
+							console.log('Loaded Search Box Event Listener');
+							const searchBox = document.getElementById('ontario-search-box');
+							searchBox.performSearch = async ($value) => {
+								console.log('Performing search with value:', $value);
+							};
+
+							searchBox.addEventListener('searchOnSubmit', (event) => {
+								console.log('Search Event:', event);
+							});
+						});
+					</script>
+
+					<div>
+						<h2 id="search-box">Search box</h2>
+						<ontario-search-box
+							id="ontario-search-box"
+							caption='{
+							"captionText": "Search directory",
+							"captionType": "default"
+						}'
+							hint-text="Search by employee name or organization name."
+						></ontario-search-box>
+					</div>
+
+					<hr />
 					<div>
 						<!-- Form -->
 						<form id="sample-form">
@@ -1208,24 +1461,6 @@
 		<ontario-back-to-top />
 
 		<script>
-			const changeLanguage = (e) => {
-				e.preventDefault();
-				let header = document.getElementById('ontarioHeader');
-				header.customLanguageToggle = () => {
-					setTimeout(() => {
-						window.location.href = '/french.html';
-						console.log(header);
-						console.log('Lang switch');
-					}, 5000);
-				};
-			};
-
-			window.addEventListener('load', changeLanguage);
-
-			function testFunction() {
-				alert('HELLO WORLD!');
-			}
-
 			function activateHeaderType(headerType) {
 				const ontarioHeaderElement = document.querySelector('ontario-header');
 				ontarioHeaderElement.type = headerType;

package/src/utils/common/input/input.tsx

@@ -18,7 +18,8 @@ export type InputProps = {
 	onChange?: ((event: Event) => void) | undefined;
 	onBlur?: ((event: Event) => void) | undefined;
 	onFocus?: ((event: Event) => void) | undefined;
-	ref?: (el: any) => HTMLElement;
+	onClick?: ((event: Event) => void) | undefined;
+	ref?: (el: HTMLInputElement) => HTMLElement;
 };
 
 export const Input: FunctionalComponent<InputProps> = ({
@@ -36,6 +37,7 @@ export const Input: FunctionalComponent<InputProps> = ({
 	onChange,
 	onBlur,
 	onFocus,
+	onClick,
 	ariaInvalid,
 	ariaDescribedBy,
 	ref,
@@ -58,6 +60,7 @@ export const Input: FunctionalComponent<InputProps> = ({
 			onChange={onChange}
 			onBlur={onBlur}
 			onFocus={onFocus}
+			onClick={onClick}
 			inputMode={inputMode}
 			ref={ref}
 			aria-invalid={ariaInvalid}

package/src/utils/common/input-caption/input-caption.tsx

@@ -76,20 +76,26 @@ export class InputCaption implements CaptionInfo {
 	/**
 	 * Return the `<label>` element for text inputs
 	 * @param captionFor Set the `htmlFor` attribute
+	 * @param hasHintExpander Indicate whether the component the label is for has a hint expander or not
+	 * @param disableRequiredFlag Disable the required/optional label text _(only use in highly special cases)_
 	 * @returns element containing the caption for the input
 	 */
-	getCaption = (captionFor?: string | undefined, hasHintExpander: boolean = false): HTMLElement => {
+	getCaption = (
+		captionFor?: string | undefined,
+		hasHintExpander: boolean = false,
+		disableRequiredFlag: boolean = false,
+	): HTMLElement => {
 		const captionText = this.captionText && this.captionText.toLowerCase();
 		const captionContent = this.isLegend ? (
 			<legend class={this.getClass()}>
 				{this.captionType === 'heading' ? <h1>{this.captionText}</h1> : this.captionText}
-				{this.getRequiredFlagElement()}
+				{!disableRequiredFlag && this.getRequiredFlagElement()}
 				{hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false)}
 			</legend>
 		) : (
 			<label htmlFor={captionFor} class={this.getClass()}>
 				{this.captionText}
-				{this.getRequiredFlagElement()}
+				{!disableRequiredFlag && this.getRequiredFlagElement()}
 				{hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false)}
 			</label>
 		);

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));
 }
 
 /**