npm - @ongov/ontario-design-system-component-library - Versions diffs - 4.3.0 → 5.0.0-alpha.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (148) hide show

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

@@ -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-language-toggle/ontario-language-toggle.tsx CHANGED Viewed

@@ -1,10 +1,12 @@
 import { Component, Prop, State, Event, EventEmitter, Watch, h, Fragment } from '@stencil/core';
-import { Language } from '../../utils/common/language-types';
-import { validateLanguage } from '../../utils/validation/validation-functions';
+import { supportedLanguages, Language } from '../../utils/common/language-types';
 import { default as translations } from '../../translations/global.i18n.json';
 import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { printArray, getRootHTMLElement } from '../../utils/helper/utils';
 @Component({
 	tag: 'ontario-language-toggle',
@@ -12,7 +14,14 @@ import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-even
 	shadow: true,
 })
 export class OntarioLanguageToggle {
-	@Prop({ mutable: true }) language: Language | string;
+	/**
+	 * The language of the component.
+	 *
+	 * In most cases, the language toggle should be the source of truth for determining the site language.
+	 *
+	 * Only pass a language value here if necessary.
+	 */
+	@Prop({ mutable: true }) language?: Language;
 	/**
 	 * The size of the language toggle button.
@@ -38,89 +47,227 @@ export class OntarioLanguageToggle {
 	@State() translations: any = translations;
 	/**
-	 * An event to set the Document's HTML lang property, and emit the toggled language to other components.
+	 * Internal state used as the source of truth for component language.
+	 */
+	@State() private languageState: Language;
+	/**
+	 * Internal state used to render the text on the language toggle UI.
+	 */
+	@State() private oppositeLanguageLabel: { fullWord: string; abbreviation: Language } | undefined = undefined;
+	/**
+	 * Updates the language and languageState props when changes to the language prop are detected.
 	 */
-	@Event() setAppLanguage: EventEmitter<string>;
-	setAppLanguageHandler() {
-		let lang: string | Language;
+	@Watch('language')
+	updateLanguage() {
 		if (this.language) {
-			lang = this.language;
-		} else if (document.documentElement.lang) {
-			lang = document.documentElement.lang;
-		} else {
-			lang = 'en';
+			if (!validateValueAgainstArray(this.language, supportedLanguages)) {
+				this.showLanguageWarning(this.language);
+				this.language = this.translations.siteLanguage.abbreviation.en as Language;
+			}
+			this.languageState = this.language;
 		}
+		this.setAppLanguageHandler();
+	}
+	/**
+	 * Event that fires during the setAppLanguageHandler() method.
+	 *
+	 * The event contains the current language (after language logic has already occurred).
+	 */
+	@Event() setAppLanguage: EventEmitter<Language>;
+	/**
+	 * Event that fires when the language toggle is pressed/clicked.
+	 *
+	 * The event contains the oldLanguage along with the newLanguage.
+	 */
+	@Event() headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;
+	/**
+	 * This function sets the languageState (if not already set).
+	 *
+	 * It also emits the setAppLanguage() event, updates the component language label, and
+	 * updates the <html> tag lang attribute with the languageState value.
+	 *
+	 * It gets called by the connectedCallback() component lifecycle hook, and by the
+	 * updateLanguage() method, which is fired on the watch for the language prop.
+	 */
+	private setAppLanguageHandler() {
+		const defaultLang = this.translations.siteLanguage.abbreviation.en;
+		const rootLang = getRootHTMLElement()?.lang;
+		// If languageState is not set, set it equal to the following cadence:
+		// language prop value, <html> tag lang attribute, or default to "en"
+		if (!this.languageState) {
+			if (this.language) {
+				this.languageState = this.language;
+			} else if (rootLang) {
+				if (validateValueAgainstArray(rootLang, supportedLanguages)) {
+					this.languageState = rootLang as Language;
+				} else {
+					this.showLanguageWarning(rootLang, 'document');
+					this.languageState = defaultLang;
+				}
+			} else {
+				this.languageState = defaultLang;
+			}
+		}
+		this.setAppLanguage.emit(this.languageState);
-		this.language = lang;
-		this.setAppLanguage.emit(lang);
+		this.oppositeLanguageLabel = {
+			fullWord: this.getOppositeLanguageFullWord(),
+			abbreviation: this.getOppositeLanguageAbbrievation(),
+		};
-		this.updateHTMLLang(lang);
+		this.updateHTMLLang();
 	}
 	/**
 	 * An event that emits to other components that the language toggle button has been toggled.
+	 *
+	 * @param {Language} oldLanguage - The language prior to the language toggle being pressed.
+	 * @param {globalThis.Event} event - event that triggered the function (e.g. onclick).
 	 */
-	@Event() headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;
-	handleHeaderLanguageToggled(language: string, event?: globalThis.Event) {
-		const toggledLanguage = language === 'en' ? 'fr' : 'en';
-		this.language = toggledLanguage;
+	private handleHeaderLanguageToggled(oldLanguage: Language, event?: globalThis.Event) {
+		this.languageState =
+			oldLanguage === this.translations.siteLanguage.abbreviation.en
+				? this.translations.siteLanguage.abbreviation.fr
+				: this.translations.siteLanguage.abbreviation.en;
-		this.headerLanguageToggled.emit({ oldLanguage: language, newLanguage: toggledLanguage });
+		this.headerLanguageToggled.emit({ oldLanguage: oldLanguage, newLanguage: this.languageState });
-		this.updateHTMLLang(toggledLanguage);
+		this.updateHTMLLang();
 		if (this.customLanguageToggle && event) {
 			this.customLanguageToggle(event);
 		}
 	}
-	@Watch('language')
-	updateLanguage() {
-		this.language = validateLanguage(this.language);
-		this.setAppLanguageHandler();
+	/**
+	 * Prints a warning message to the console about using an incorrect language for the component.
+	 *
+	 * @param {string} lang - The incorrect language that was received.
+	 * @param {string} type - prop/document | Where the incorrect language is coming from.
+	 */
+	private showLanguageWarning(lang: string, type: 'prop' | 'document' = 'prop') {
+		const propOrDocumentMessage =
+			type === 'prop' ? `The language prop value of ${lang} ` : `The HTML document lang attribute value of ${lang} `;
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addRegularText(propOrDocumentMessage)
+			.addRegularText('is not a valid language value for the ')
+			.addMonospaceText(' <ontario-language-toggle> ')
+			.addRegularText(`component. Valid language values are ${printArray([...supportedLanguages])}. `)
+			.addRegularText(`A default language value of ${this.translations.siteLanguage.abbreviation.en} will be applied.`)
+			.printMessage();
 	}
-	updateHTMLLang = (lang: string) => {
-		const htmlElement = document.firstElementChild;
+	/**
+	 * Returns abbreviated text for the opposite language.
+	 *
+	 * @returns {Language}
+	 */
+	private getOppositeLanguageAbbrievation(): Language {
+		return this.languageState === this.translations.siteLanguage.abbreviation.en
+			? this.translations.siteLanguage.abbreviation.fr
+			: this.translations.siteLanguage.abbreviation.en;
+	}
-		if (htmlElement?.tagName.toLowerCase() === 'html') {
-			if (lang) {
-				htmlElement.setAttribute('lang', lang);
-			} else {
-				htmlElement.setAttribute('lang', 'en');
-			}
-		}
+	/**
+	 * Returns full word text for the opposite language.
+	 *
+	 * @returns {string}
+	 */
+	private getOppositeLanguageFullWord(): string {
+		return this.languageState === this.translations.siteLanguage.abbreviation.en
+			? this.translations.siteLanguage.fullWord.fr
+			: this.translations.siteLanguage.fullWord.en;
+	}
+	/*
+	 * Updates the <html> lang attribute based on component languageState.
+	 */
+	private updateHTMLLang = () => {
+		const htmlElement = getRootHTMLElement();
-		return;
+		if (htmlElement) {
+			htmlElement.setAttribute('lang', this.languageState);
+		}
 	};
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+	 */
 	connectedCallback() {
-		this.updateLanguage();
+		this.setAppLanguageHandler();
 	}
-	render() {
-		const language = this.language === 'en' ? 'Français' : 'English';
-		const abbreviatedLanguage = this.language === 'en' ? 'FR' : 'EN';
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#componentdidload
+	 */
+	componentDidLoad() {
+		/**
+		 * Creates a MutationObserver (a type of watch) on the <html> tag lang attribute.
+		 *
+		 * When changes occur, the oppositeLanguageLabel state variable regenerates.
+		 *
+		 * This is to act as a form of callback and create a subtle delay between page content
+		 * updating and the language toggle label updating.
+		 */
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				switch (mutation.type) {
+					case 'attributes':
+						switch (mutation.attributeName) {
+							case 'lang':
+								this.oppositeLanguageLabel = {
+									fullWord: this.getOppositeLanguageFullWord(),
+									abbreviation: this.getOppositeLanguageAbbrievation(),
+								};
+								break;
+						}
+						break;
+				}
+			});
+		});
+		// Only create/trigger the MutationObserver if the <html> element exists.
+		if (getRootHTMLElement()) {
+			const options = { attributes: true };
+			observer.observe(getRootHTMLElement(), options);
+		}
+	}
+	render() {
 		return (
 			<a
+				aria-label={this.translations.languageToggle.ariaLabel[`${this.oppositeLanguageLabel?.abbreviation}`]}
 				class={
 					this.size === 'default'
 						? 'ontario-language-toggler ontario-language-toggler--default'
 						: 'ontario-language-toggler ontario-language-toggler--small'
 				}
 				href={this.url ? this.url : '#'}
-				aria-label={this.translations.languageToggle.ariaLabel[`${this.language}`]}
-				onClick={(e) => this.handleHeaderLanguageToggled(this.language, e)}
+				hreflang={this.oppositeLanguageLabel?.abbreviation}
+				lang={this.oppositeLanguageLabel?.abbreviation}
+				onClick={(e) => this.handleHeaderLanguageToggled(this.languageState, e)}
 			>
 				{this.size === 'small' ? (
-					<span>{language}</span>
+					<span>{this.oppositeLanguageLabel?.fullWord}</span>
 				) : (
 					<Fragment>
-						<abbr title={language} class="ontario-show-for-small-only">
-							{abbreviatedLanguage}
+						<abbr title={this.oppositeLanguageLabel?.fullWord} class="ontario-show-for-small-only">
+							{this.oppositeLanguageLabel?.abbreviation.toUpperCase()}
 						</abbr>
-						<span class="ontario-show-for-medium">{language}</span>
+						<span class="ontario-show-for-medium">{this.oppositeLanguageLabel?.fullWord}</span>
 					</Fragment>
 				)}
 			</a>

package/src/components/ontario-language-toggle/readme.md CHANGED Viewed

@@ -10,19 +10,19 @@ It is used in the ontario-header component.
 ## Properties
-| Property               | Attribute  | Description                                                                                         | Type                                    | Default     |
-| ---------------------- | ---------- | --------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
-| `customLanguageToggle` | --         | A custom function to pass to the language toggle button. This is optional.                          | `((event: Event) => void) \| undefined` | `undefined` |
-| `language`             | `language` |                                                                                                     | `string`                                | `undefined` |
-| `size`                 | `size`     | The size of the language toggle button. If no prop is passed, it will be set to the `default` size. | `"default" \| "small" \| undefined`     | `'default'` |
-| `url`                  | `url`      | The URL to change to when the language toggle button is clicked. This is optional.                  | `string \| undefined`                   | `undefined` |
+| Property               | Attribute  | Description                                                                                                                                                                      | Type                                    | Default     |
+| ---------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
+| `customLanguageToggle` | --         | A custom function to pass to the language toggle button. This is optional.                                                                                                       | `((event: Event) => void) \| undefined` | `undefined` |
+| `language`             | `language` | The language of the component. In most cases, the language toggle should be the source of truth for determining the site language. Only pass a language value here if necessary. | `"en" \| "fr" \| undefined`             | `undefined` |
+| `size`                 | `size`     | The size of the language toggle button. If no prop is passed, it will be set to the `default` size.                                                                              | `"default" \| "small" \| undefined`     | `'default'` |
+| `url`                  | `url`      | The URL to change to when the language toggle button is clicked. This is optional.                                                                                               | `string \| undefined`                   | `undefined` |
 ## Events
-| Event                   | Description                                                                                           | Type                                            |
-| ----------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
-| `headerLanguageToggled` | An event that emits to other components that the language toggle button has been toggled.             | `CustomEvent<HeaderLanguageToggleEventDetails>` |
-| `setAppLanguage`        | An event to set the Document's HTML lang property, and emit the toggled language to other components. | `CustomEvent<string>`                           |
+| Event                   | Description                                                                                                                                      | Type                                            |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- |
+| `headerLanguageToggled` | Event that fires when the language toggle is pressed/clicked. The event contains the oldLanguage along with the newLanguage.                     | `CustomEvent<HeaderLanguageToggleEventDetails>` |
+| `setAppLanguage`        | Event that fires during the setAppLanguageHandler() method. The event contains the current language (after language logic has already occurred). | `CustomEvent<"en" \| "fr">`                     |
 ## Dependencies

package/src/components/ontario-language-toggle/test/__snapshots__/ontario-language-toggle.spec.tsx.snap CHANGED Viewed

@@ -3,7 +3,7 @@
 exports[`ontario-language-toggle snapshot should render the expected html 1`] = `
 <ontario-language-toggle>
   <mock:shadow-root>
-    <a aria-label="Click to switch language to French" class="ontario-language-toggler ontario-language-toggler--default" href="#">
+    <a aria-label="Cliquez pour changer la langue en français" class="ontario-language-toggler ontario-language-toggler--default" href="#" hreflang="fr" lang="fr">
       <abbr class="ontario-show-for-small-only" title="Français">
         FR
       </abbr>

package/src/components/ontario-language-toggle/test/ontario-language-toggle.spec.tsx CHANGED Viewed

@@ -1,5 +1,8 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { OntarioLanguageToggle } from '../ontario-language-toggle';
+import { mutationObserverMock } from '../../../utils/tests/mutation-observer.mock';
+global.MutationObserver = mutationObserverMock;
 describe('ontario-language-toggle', () => {
 	describe('snapshot', () => {
@@ -22,7 +25,7 @@ describe('ontario-language-toggle', () => {
 		expect(page.root).toEqualHtml(`
 			<ontario-language-toggle>
 				<mock:shadow-root>
-					<a aria-label="Click to switch language to French" class="ontario-language-toggler ontario-language-toggler--default" href="#">
+					<a aria-label="Cliquez pour changer la langue en français" class="ontario-language-toggler ontario-language-toggler--default" href="#" hreflang="fr" lang="fr">
 						<abbr class="ontario-show-for-small-only" title="Français">
 							FR
 						</abbr>
@@ -36,7 +39,18 @@ describe('ontario-language-toggle', () => {
 		expect(page.rootInstance.size).toBe('default');
 	});
-	it('should render a default language of English if no language prop is passed', async () => {
+	/**
+	 * TODO: Determine if this is testable.
+	 *
+	 * Not sure how to properly test against this, seems to be a race condition.
+	 *
+	 * Takes a few processes before the html lang attribute is updated.
+	 *
+	 * Using setTimeout() leads to a false positive.
+	 *
+	 * Using page.waitForChanges() or autoApplyChanges: true seem to have no effect.
+	 */
+	it.skip('should render a default language of English on the <html> tag if no language prop is passed', async () => {
 		const page = await newSpecPage({
 			components: [OntarioLanguageToggle],
 			html: `<ontario-language-toggle></ontario-language-toggle>`,
@@ -54,7 +68,7 @@ describe('ontario-language-toggle', () => {
 		expect(page.root).toEqualHtml(`
 			<ontario-language-toggle size="small" url="/en" language="fr">
 				<mock:shadow-root>
-					<a aria-label="Cliquez pour changer de langue en anglais" class="ontario-language-toggler ontario-language-toggler--small" href="/en">
+					<a aria-label="Click to switch the language to English" class="ontario-language-toggler ontario-language-toggler--small" href="/en" hreflang="en" lang="en">
 						<span>
 							English
 						</span>

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

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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;
+}