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

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>
 		);