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

package/src/components/ontario-card/test/ontario-cards.spec.tsx

@@ -7,18 +7,32 @@ describe('ontario-card', () => {
 			components: [OntarioCard],
 			html: `<ontario-card></ontario-card>`,
 		});
-		expect(page.root).toEqualHtml(`
-      <ontario-card>
-				<mock:shadow-root>
-					<li class="ontario-card ontario-card__card-type--basic ontario-card__header-type--default ontario-card__description-false">
-						<div class="ontario-card__text-container">
-							<h2 class="ontario-card__heading">
-								<a href="#"></a>
-							</h2>
-						</div>
-					</li>
-				</mock:shadow-root>
-      </ontario-card>
-    `);
+		expect(page.root).toMatchSnapshot();
 	});
+
+	it('should render a label', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCard],
+			html: `<ontario-card label="Card Title 1"></ontario-card>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+
+	it('should render a header colour on the label', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCard],
+			html: `<ontario-card label="Card Title 1" header-colour="sky"></ontario-card>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+
+	it('should render a description', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCard],
+			html: `<ontario-card description="Lorem ipsum"></ontario-card>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+
+	// Don't think we can test images unless we point to a local path
 });

package/src/components/ontario-card-collection/readme.md

@@ -20,9 +20,9 @@ Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow
 ```html
 <ontario-card-collection cards-per-row="2">
 	<ontario-card
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 1"
-		image="https://picsum.photos/200/300"
+		image="https://picsum.photos/300/225"
 		card-link="https://google.ca"
 		horizontal-image-position-type="left"
 		horizontal-image-size-type="one-fourth"
@@ -30,9 +30,9 @@ Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow
 	>
 	</ontario-card>
 	<ontario-card
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 2"
-		image="https://picsum.photos/200/300"
+		image="https://picsum.photos/300/225"
 		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"
@@ -43,21 +43,21 @@ Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow
 
 <OntarioCardCollection cards-per-row="2">
 	<OntarioCard
-		card-type="horizontal"
+		layout="horizontal"
 		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"
+		image="https://picsum.photos/300/225"
+		cardLink="https://google.ca"
+		horizontalImagePositionType="left"
+		horizontalImageSizeType="one-fourth"
 		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 	>
 	</OntarioCard>
 	<OntarioCard
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 2"
-		image="https://picsum.photos/200/300"
-		horizontal-image-position-type="left"
-		horizontal-image-size-type="one-fourth"
+		image="https://picsum.photos/300/225"
+		horizontalImagePositionType="left"
+		horizontalImageSizeType="one-fourth"
 		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 	>
 	</OntarioCard>

package/src/components/ontario-checkbox/ontario-checkboxes.scss

@@ -16,7 +16,6 @@ $ontario-checkboxes-size: globalFunctions.px-to-rem(28);
 $ontario-checkboxes-size-mobile: globalFunctions.px-to-rem(32);
 $ontario-checkbox-border-size: globalFunctions.px-to-rem(2);
 $ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);
-$ontario-input-border-width: 0.125rem;
 
 :host {
 	--checkbox-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z' fill='%231a1a1a'/%3E%3Cpath d='M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z' fill='%23fff'/%3E%3C/svg%3E");

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

@@ -57,10 +57,6 @@
 
 .ontario-service-subheader .ontario-header-button {
 	display: flex;
-
-	&:last-of-type {
-		display: none;
-	}
 }
 
 .ontario-service-subheader .ontario-header-button {

package/src/components/ontario-hint-text/readme.md

@@ -67,6 +67,7 @@ Promise<string | undefined>
 - [ontario-dropdown-list](../ontario-dropdown-list)
 - [ontario-input](../ontario-input)
 - [ontario-radio-buttons](../ontario-radio-buttons)
+- [ontario-search-box](../ontario-search-box)
 - [ontario-textarea](../ontario-textarea)
 
 ### Graph
@@ -77,6 +78,7 @@ graph TD;
   ontario-dropdown-list --> ontario-hint-text
   ontario-input --> ontario-hint-text
   ontario-radio-buttons --> ontario-hint-text
+  ontario-search-box --> ontario-hint-text
   ontario-textarea --> ontario-hint-text
   style ontario-hint-text fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/src/components/ontario-radio-buttons/ontario-radio-buttons.scss

@@ -19,7 +19,6 @@
 $ontario-radios-size: 32px;
 $ontario-radios-size-mobile: 36px;
 $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-radios-size), 2);
-$ontario-input-border-width: 0.125rem;
 
 .ontario-radios__item {
 	position: relative;

package/src/components/ontario-search-box/assets/ontario-icon-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4z" fill="#000"/></svg>

package/src/components/ontario-search-box/assets/ontario-logo--mobile.svg

@@ -0,0 +1,6 @@
+<svg width="46" height="46" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46" fill="none" xmlns:v="https://vecta.io/nano" tabindex="-1">
+    <path d="M23 0C7.36 0 0 7.36 0 23s7.36 23 23 23 23-7.36 23-23S38.64 0 23 0" fill="#fff" />
+    <path fill-rule="evenodd"
+        d="M23 13.223c4.728-3.178 10.58-3.613 15.69-1.153l.18.128-.026.18a16.08 16.08 0 0 1-2.07 6.765c-1.405 2.41-3.4 4.408-5.8 5.79h-.025a15.71 15.71 0 0 0-.365.191c-.188.1-.38.203-.58.296.383 5.69-2.172 10.994-6.85 14.197L23 39.72l-.153-.102a15.76 15.76 0 0 1-4.805-5.176 16.12 16.12 0 0 1-2.095-7.944v-.026c0-.333.025-.692.05-1.05-5.086-2.51-8.382-7.38-8.817-13.043l-.026-.18.153-.077c2.147-1.05 4.523-1.59 6.874-1.59 2.786 0 5.494.743 7.897 2.127h.026a17.21 17.21 0 0 1 .895.564zm5.93 8.56c1.763-1.025 3.27-2.46 4.37-4.33.51-.897.894-1.82 1.176-2.69-2.888-.666-5.8-.23-8.433 1.204.23.307.383.64.537 1.076s.18 1.025.05 1.512c-.05.205-.153.4-.256.615h0c-.51.87-1.584 1.512-2.913 1.922.51-1.59-.307-2.998-1.33-3.895-.51-.46-1.1-.846-1.687-1.204a12.29 12.29 0 0 0-5.929-1.614 12.52 12.52 0 0 0-2.964.359c.894 2.844 2.71 5.15 5.265 6.714.153-.36.358-.64.664-1s.792-.666 1.278-.794a2.94 2.94 0 0 1 .664-.077c.997 0 2.096.615 3.118 1.563-1.6.36-2.428 1.768-2.683 3.1-.128.692-.204 1.384-.204 2.076 0 2.024.486 4.075 1.56 5.945.486.87 1.125 1.69 1.79 2.383 2.02-2.204 3.092-4.946 3.17-7.944-.41.05-.74 0-1.2-.077s-.97-.384-1.33-.718c-.153-.154-.307-.333-.41-.538-.51-.897-.51-2.153-.204-3.51 1.124 1.23 2.734 1.256 4.012.794a10.52 10.52 0 0 0 1.891-.871z"
+        fill="#000" />
+</svg>

package/src/components/ontario-search-box/ontario-search-box.scss

@@ -0,0 +1,141 @@
+@use 'sass:math';
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+	focusPlaceholders;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
+@use '../../styles/form.scss';
+
+$ontario-input-height: globalFunctions.px-to-rem(48);
+$ontario-search-icon-size: 2rem;
+$ontario-reset-icon-size: 1.5rem;
+$ontario-search-button-width: 5rem;
+$ontario-search-button-width--mobile: 3rem;
+$ontario-search-input-padding: 8.5rem;
+$ontario-search-input-padding--mobile: 7.75rem;
+$ontario-search-desktop-width: 34rem;
+$ontario-search-mobile-width: 20.5rem;
+
+.ontario-search__container {
+	max-width: $ontario-search-desktop-width;
+	margin-bottom: spacing.$spacing-7;
+}
+
+.ontario-search__input-container {
+	position: relative;
+}
+
+.ontario-search__input.ontario-input {
+	border: 2px solid colours.$ontario-colour-black;
+	margin-bottom: spacing.$spacing-0;
+	height: $ontario-input-height;
+	padding-left: spacing.$spacing-3;
+	padding-right: $ontario-search-input-padding;
+	width: 100%;
+
+	&:invalid + input[type='reset'] {
+		display: none;
+	}
+
+	&:focus {
+		@extend %ontario-focus;
+	}
+}
+
+input[type='reset'].ontario-search__reset {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	top: spacing.$spacing-3;
+	right: $ontario-search-button-width + spacing.$spacing-4;
+	height: $ontario-reset-icon-size;
+	width: $ontario-reset-icon-size;
+	color: colours.$ontario-colour-black;
+	margin: spacing.$spacing-0;
+	padding: spacing.$spacing-1;
+	background-size: $ontario-reset-icon-size;
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-color: transparent;
+	outline: none;
+	border: none;
+	cursor: pointer;
+
+	&:focus {
+		box-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
+	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		right: $ontario-search-button-width--mobile + spacing.$spacing-7;
+	}
+}
+
+.ontario-search__submit {
+	border: 0;
+	border-radius: 0 3px 3px 0;
+	background-color: colours.$ontario-colour-link;
+	color: colours.$ontario-colour-black;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	font-family: typography.$ontario-font-open-sans;
+	font-weight: fontWeights.$ontario-font-weights-semi-bold;
+	font-size: 1.125rem;
+	width: $ontario-search-button-width;
+	line-height: lineheight.$ontario-line-height-8;
+
+	position: absolute;
+	right: spacing.$spacing-0;
+	bottom: spacing.$spacing-0;
+	top: spacing.$spacing-0;
+	cursor: pointer;
+
+	&:hover {
+		background-color: colours.$ontario-colour-link--hover;
+		color: colours.$ontario-colour-white;
+	}
+
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
+		background-color: colours.$ontario-colour-link--hover;
+		color: colours.$ontario-colour-white;
+	}
+
+	&:active {
+		background-color: colours.$ontario-colour-link--active;
+		color: colours.$ontario-colour-white;
+	}
+
+	svg {
+		fill: colours.$ontario-colour-white;
+		margin-right: spacing.$spacing-0;
+		margin-bottom: spacing.$spacing-0;
+		width: $ontario-search-icon-size;
+		height: $ontario-search-icon-size;
+		display: inline-block;
+		vertical-align: middle;
+		overflow: hidden;
+	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		width: $ontario-search-button-width--mobile;
+	}
+}
+
+// remove default cancel button for input with type="search"
+input[type='search'].ontario-search__input::-webkit-search-decoration,
+input[type='search'].ontario-search__input::-webkit-search-cancel-button,
+input[type='search'].ontario-search__input::-webkit-search-results-button,
+input[type='search'].ontario-search__input::-webkit-search-results-decoration {
+	-webkit-appearance: none;
+}

package/src/components/ontario-search-box/ontario-search-box.tsx

@@ -0,0 +1,341 @@
+import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';
+import { Input } from '../../utils/common/input/input';
+import { Language } from '../../utils/common/language-types';
+import OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';
+import { Hint } from '../../utils/common/common.interface';
+import { handleInputEvent } from '../../utils/events/event-handler';
+import {
+	InputFocusBlurEvent,
+	EventType,
+	InputInteractionEvent,
+	InputInputEvent,
+} from '../../utils/events/event-handler.interface';
+import { Caption } from '../../utils/common/input-caption/caption.interface';
+import { InputCaption } from '../../utils/common/input-caption/input-caption';
+import { default as translations } from '../../translations/global.i18n.json';
+import { constructHintTextObject } from '../../utils/components/hints/hints';
+
+@Component({
+	tag: 'ontario-search-box',
+	styleUrl: 'ontario-search-box.scss',
+	shadow: true,
+})
+export class OntarioSearchBox {
+	@Element() element: HTMLElement;
+	@AttachInternals() internals: ElementInternals;
+
+	/**
+	 * This Ref is used get a direct reference to the hint text element
+	 */
+	private hintTextRef?: HTMLOntarioHintTextElement;
+
+	/**
+	 * This Ref is used get a direct reference to the search input element
+	 */
+	private inputFieldRef?: HTMLInputElement;
+
+	/**
+	 * The language of the component.
+	 * This is used for translations. If none is passed, it will default to English.
+	 */
+	@Prop({ mutable: true }) language?: Language = 'en';
+
+	/**
+	 * The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.
+	 */
+	@Prop({ mutable: true }) elementId?: string;
+
+	/**
+	 * The value of the search term.
+	 * This is optional.
+	 */
+	@Prop({ mutable: true }) value?: string;
+
+	/**
+	* The text to display as the input label
+	*
+	* @example
+	* <ontario-search-box
+	*      caption='{
+					"captionText": "Search directory",
+					"captionType": "default"
+					}'
+				required = "true"
+	>
+	</ontario-search-box>
+	*/
+	@Prop() caption: Caption | string;
+
+	/**
+	 * This is used to determine whether the dropdown list is required or not.
+	 * This prop gets passed to the InputCaption utility to display either an optional or required flag in the label.
+	 * If no prop is set, it will default to false (optional).
+	 */
+	@Prop() required?: boolean = false;
+
+	/**
+	 * This Function to perform a search operation.
+	 * This function will be called when the search submit button is triggered.
+	 * The value argument is used for as search term to use for the search operation. This parameter is optional.
+	 * The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted.
+	 *
+	 * @example
+	 * <ontario-search-box
+	 *	  id="ontario-search-box"
+	 *	  caption='Search directory'
+	 * ></ontario-search-box>
+	 *
+	 * <script>
+	 *	window.addEventListener('load', () => {
+	 *		const searchBox = document.getElementById('ontario-search-box');
+	 *		searchBox.performSearch = async (value) => {
+	 * 			console.log('Performing search with value:', value);
+	 *		};
+	 *	});
+	 * </script>
+	 */
+	@Prop() performSearch?: (value?: string) => Promise<void>;
+
+	/**
+	 * Used to include the ontario-hint-text component for the search-box.
+	 * This is optional.
+	 */
+	@Prop() hintText?: string | Hint;
+
+	/**
+	 * Used to add a custom function to the input onInput event.
+	 */
+	@Prop() customOnInput?: (event: globalThis.Event) => void;
+
+	/**
+	 * Used to add a custom function to the input onChange event.
+	 */
+	@Prop() customOnChange?: (event: globalThis.Event) => void;
+
+	/**
+	 * Used to add a custom function to the input onBlur event.
+	 */
+	@Prop() customOnBlur?: (event: globalThis.Event) => void;
+
+	/**
+	 * Used to add a custom function to the input onFocus event.
+	 */
+	@Prop() customOnFocus?: (event: globalThis.Event) => void;
+
+	/**
+	 * Emitted when the search is submitted.
+	 * Below is an example on how to hook into the event to get the event details.
+	 *
+	 * @example
+	 *	<script>
+	 *		document.getElementById('ontario-search-box').addEventListener('searchOnSubmit', (event) => {
+	 *	 		const searchValue = event.detail;
+	 *			console.log('Search submitted with value:', searchValue);
+	 *	  };
+	 * 	</script>
+	 */
+	@Event() searchOnSubmit: EventEmitter<string>;
+
+	/**
+	 * Emitted when a input  occurs when an input has been changed.
+	 */
+	@Event() inputOnInput: EventEmitter<InputInputEvent>;
+
+	/**
+	 * Emitted when a keyboard input or mouse event occurs when an input has been changed.
+	 */
+	@Event() inputOnChange: EventEmitter<InputInteractionEvent>;
+
+	/**
+	 * Emitted when a keyboard input event occurs when an input has lost focus.
+	 */
+	@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;
+
+	/**
+	 * Emitted when a keyboard input event occurs when an input has gained focus.
+	 */
+	@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;
+
+	/**
+	 * The hint text options are re-assigned to the internalHintText array.
+	 */
+	@State() private internalHintText: Hint;
+
+	/**
+	 * Instantiate an InputCaption object for internal logic use
+	 */
+	@State() private captionState: InputCaption;
+
+	/**
+	 * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.
+	 */
+	@State() hintTextId: string | null | undefined;
+
+	/**
+	 * Watch for changes to the `hintText` prop.
+	 *
+	 * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.
+	 */
+	@Watch('hintText')
+	private parseHintText() {
+		if (this.hintText) {
+			const hintTextObject = constructHintTextObject(this.hintText);
+			this.internalHintText = hintTextObject;
+		}
+	}
+
+	/**
+	 * Watch for changes to the `caption` prop.
+	 *
+	 * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.
+	 * @param newValue: Caption | string
+	 */
+	@Watch('caption')
+	private updateCaptionState(newValue: Caption | string) {
+		this.captionState = new InputCaption(
+			this.element.tagName,
+			newValue,
+			translations,
+			this.language,
+			false,
+			this.required,
+		);
+	}
+
+	/**
+	 * Watch for changes to the `language` prop to render either the English or French translations
+	 */
+	@Watch('language')
+	updateLanguage() {
+		this.updateCaptionState(this.caption);
+	}
+
+	/**
+	 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.
+	 */
+	async componentDidLoad() {
+		this.hintTextId = await this.hintTextRef?.getHintTextId();
+	}
+
+	componentWillLoad() {
+		this.elementId = this.elementId;
+		this.parseHintText();
+		this.updateCaptionState(this.caption);
+	}
+
+	/**
+	 * Function to handle input events and the information pertaining to the input to emit.
+	 */
+	private handleEvent(event: globalThis.Event, eventType: EventType) {
+		const input = event.target as HTMLInputElement | null;
+
+		// Update the component value to match the value of the input element.
+		this.value = input?.value;
+
+		this.internals?.setFormValue?.(this.value ?? '');
+
+		handleInputEvent(
+			event,
+			eventType,
+			input,
+			this.inputOnChange,
+			this.inputOnFocus,
+			this.inputOnBlur,
+			this.inputOnInput,
+			'input',
+			this.customOnChange,
+			this.customOnFocus,
+			this.customOnBlur,
+			this.customOnInput,
+			this.element,
+		);
+	}
+
+	/**
+	 * handleSearch function is called when the search submit button is clicked
+	 */
+	async handleSearch(event: MouseEvent) {
+		event.preventDefault();
+		this.searchOnSubmit.emit(this.value);
+		this.performSearch && (await this.performSearch(this.value));
+	}
+
+	public getId(): string {
+		return this.elementId ?? '';
+	}
+
+	private getValue(): string | number {
+		return this.value ?? '';
+	}
+
+	/**
+	 *This function ensures that the focus returns to the search input field when the reset button is clicked.
+	 */
+	private setFocus(inputRef?: HTMLInputElement) {
+		if (inputRef) {
+			inputRef.focus();
+		}
+	}
+
+	/**
+	 * when the reset button is clicked this function gets called
+	 */
+	handleFocus = () => {
+		this.setFocus(this.inputFieldRef);
+	};
+
+	render() {
+		const searchInputFieldId: string = 'ontario-search-input-field';
+		return (
+			<form
+				name="searchForm"
+				id="ontario-search-form-container"
+				class="ontario-search__container ontario-columns ontario-small-10 ontario-medium-offset-3 ontario-medium-6 ontario-large-offset-0 ontario-large-6"
+				novalidate
+			>
+				{this.captionState.getCaption(searchInputFieldId, false, true) /* Note the _required_ text is disabled */}
+				{this.internalHintText && (
+					<ontario-hint-text
+						hint={this.internalHintText.hint}
+						hintContentType={this.internalHintText.hintContentType}
+						ref={(el) => (this.hintTextRef = el)}
+					></ontario-hint-text>
+				)}
+
+				<div class="ontario-search__input-container">
+					<Input
+						aria-describedBy={this.hintTextId}
+						type="search"
+						name="search"
+						id={searchInputFieldId}
+						autoComplete="off"
+						aria-autocomplete="none"
+						className="ontario-search__input ontario-input"
+						required={true}
+						ref={(el) => (this.inputFieldRef = el)}
+						onInput={(e) => this.handleEvent(e, EventType.Input)}
+						onChange={(e) => this.handleEvent(e, EventType.Change)}
+						onBlur={(e) => this.handleEvent(e, EventType.Blur)}
+						onFocus={(e) => this.handleEvent(e, EventType.Focus)}
+						value={this.getValue()}
+					></Input>
+					<Input
+						className="ontario-search__reset"
+						id="ontario-search-reset"
+						type="reset"
+						value=""
+						onClick={() => this.handleFocus()}
+					></Input>
+					<button
+						class="ontario-search__submit"
+						type="submit"
+						id="ontario-search-box__submit"
+						onClick={(e) => this.handleSearch(e)}
+					>
+						<span innerHTML={OntarioIconSearch} />
+					</button>
+				</div>
+			</form>
+		);
+	}
+}