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/dist/collection/components/ontario-language-toggle/ontario-language-toggle.js CHANGED Viewed

@@ -1,76 +1,214 @@
 import { h, Fragment } from '@stencil/core';
-import { validateLanguage } from '../../utils/validation/validation-functions';
+import { supportedLanguages } from '../../utils/common/language-types';
 import { default as translations } from '../../translations/global.i18n.json';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { printArray, getRootHTMLElement } from '../../utils/helper/utils';
 export class OntarioLanguageToggle {
 	constructor() {
-		this.updateHTMLLang = (lang) => {
-			const htmlElement = document.firstElementChild;
-			if ((htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.tagName.toLowerCase()) === 'html') {
-				if (lang) {
-					htmlElement.setAttribute('lang', lang);
-				} else {
-					htmlElement.setAttribute('lang', 'en');
-				}
+		/*
+		 * Updates the <html> lang attribute based on component languageState.
+		 */
+		this.updateHTMLLang = () => {
+			const htmlElement = getRootHTMLElement();
+			if (htmlElement) {
+				htmlElement.setAttribute('lang', this.languageState);
 			}
-			return;
 		};
 		this.language = undefined;
 		this.size = 'default';
 		this.url = undefined;
 		this.customLanguageToggle = undefined;
 		this.translations = translations;
+		this.languageState = undefined;
+		this.oppositeLanguageLabel = undefined;
 	}
-	setAppLanguageHandler() {
-		let lang;
+	/**
+	 * Updates the language and languageState props when changes to the language prop are detected.
+	 */
+	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;
+			}
+			this.languageState = this.language;
+		}
+		this.setAppLanguageHandler();
+	}
+	/**
+	 * 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.
+	 */
+	setAppLanguageHandler() {
+		var _a;
+		const defaultLang = this.translations.siteLanguage.abbreviation.en;
+		const rootLang = (_a = getRootHTMLElement()) === null || _a === void 0 ? void 0 : _a.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;
+				} else {
+					this.showLanguageWarning(rootLang, 'document');
+					this.languageState = defaultLang;
+				}
+			} else {
+				this.languageState = defaultLang;
+			}
 		}
-		this.language = lang;
-		this.setAppLanguage.emit(lang);
-		this.updateHTMLLang(lang);
-	}
-	handleHeaderLanguageToggled(language, event) {
-		const toggledLanguage = language === 'en' ? 'fr' : 'en';
-		this.language = toggledLanguage;
-		this.headerLanguageToggled.emit({ oldLanguage: language, newLanguage: toggledLanguage });
-		this.updateHTMLLang(toggledLanguage);
+		this.setAppLanguage.emit(this.languageState);
+		this.oppositeLanguageLabel = {
+			fullWord: this.getOppositeLanguageFullWord(),
+			abbreviation: this.getOppositeLanguageAbbrievation(),
+		};
+		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).
+	 */
+	handleHeaderLanguageToggled(oldLanguage, event) {
+		this.languageState =
+			oldLanguage === this.translations.siteLanguage.abbreviation.en
+				? this.translations.siteLanguage.abbreviation.fr
+				: this.translations.siteLanguage.abbreviation.en;
+		this.headerLanguageToggled.emit({ oldLanguage: oldLanguage, newLanguage: this.languageState });
+		this.updateHTMLLang();
 		if (this.customLanguageToggle && event) {
 			this.customLanguageToggle(event);
 		}
 	}
-	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.
+	 */
+	showLanguageWarning(lang, type = '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();
 	}
+	/**
+	 * Returns abbreviated text for the opposite language.
+	 *
+	 * @returns {Language}
+	 */
+	getOppositeLanguageAbbrievation() {
+		return this.languageState === this.translations.siteLanguage.abbreviation.en
+			? this.translations.siteLanguage.abbreviation.fr
+			: this.translations.siteLanguage.abbreviation.en;
+	}
+	/**
+	 * Returns full word text for the opposite language.
+	 *
+	 * @returns {string}
+	 */
+	getOppositeLanguageFullWord() {
+		return this.languageState === this.translations.siteLanguage.abbreviation.en
+			? this.translations.siteLanguage.fullWord.fr
+			: this.translations.siteLanguage.fullWord.en;
+	}
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+	 */
 	connectedCallback() {
-		this.updateLanguage();
+		this.setAppLanguageHandler();
+	}
+	/**
+	 * 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() {
-		const language = this.language === 'en' ? 'Français' : 'English';
-		const abbreviatedLanguage = this.language === 'en' ? 'FR' : 'EN';
+		var _a, _b, _c, _d, _e, _f, _g;
 		return h(
 			'a',
 			{
-				'key': 'ac43f7a7e95a21f5170f087d97a8c04884e70e2a',
+				'key': 'f43e42110b4272a268801c310a8d14e31342f426',
+				'aria-label':
+					this.translations.languageToggle.ariaLabel[
+						`${(_a = this.oppositeLanguageLabel) === null || _a === void 0 ? void 0 : _a.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': (_b = this.oppositeLanguageLabel) === null || _b === void 0 ? void 0 : _b.abbreviation,
+				'lang': (_c = this.oppositeLanguageLabel) === null || _c === void 0 ? void 0 : _c.abbreviation,
+				'onClick': (e) => this.handleHeaderLanguageToggled(this.languageState, e),
 			},
 			this.size === 'small'
-				? h('span', null, language)
+				? h('span', null, (_d = this.oppositeLanguageLabel) === null || _d === void 0 ? void 0 : _d.fullWord)
 				: h(
 						Fragment,
 						null,
-						h('abbr', { title: language, class: 'ontario-show-for-small-only' }, abbreviatedLanguage),
-						h('span', { class: 'ontario-show-for-medium' }, language),
+						h(
+							'abbr',
+							{
+								title: (_e = this.oppositeLanguageLabel) === null || _e === void 0 ? void 0 : _e.fullWord,
+								class: 'ontario-show-for-small-only',
+							},
+							(_f = this.oppositeLanguageLabel) === null || _f === void 0 ? void 0 : _f.abbreviation.toUpperCase(),
+						),
+						h(
+							'span',
+							{ class: 'ontario-show-for-medium' },
+							(_g = this.oppositeLanguageLabel) === null || _g === void 0 ? void 0 : _g.fullWord,
+						),
 				  ),
 		);
 	}
@@ -96,8 +234,8 @@ export class OntarioLanguageToggle {
 				type: 'string',
 				mutable: true,
 				complexType: {
-					original: 'Language | string',
-					resolved: 'string',
+					original: 'Language',
+					resolved: '"en" | "fr" | undefined',
 					references: {
 						Language: {
 							location: 'import',
@@ -107,10 +245,10 @@ export class OntarioLanguageToggle {
 					},
 				},
 				required: false,
-				optional: false,
+				optional: true,
 				docs: {
 					tags: [],
-					text: '',
+					text: 'The language of the component.\n\nIn most cases, the language toggle should be the source of truth for determining the site language.\n\nOnly pass a language value here if necessary.',
 				},
 				attribute: 'language',
 				reflect: false,
@@ -175,6 +313,8 @@ export class OntarioLanguageToggle {
 	static get states() {
 		return {
 			translations: {},
+			languageState: {},
+			oppositeLanguageLabel: {},
 		};
 	}
 	static get events() {
@@ -187,12 +327,18 @@ export class OntarioLanguageToggle {
 				composed: true,
 				docs: {
 					tags: [],
-					text: "An event to set the Document's HTML lang property, and emit the toggled language to other components.",
+					text: 'Event that fires during the setAppLanguageHandler() method.\n\nThe event contains the current language (after language logic has already occurred).',
 				},
 				complexType: {
-					original: 'string',
-					resolved: 'string',
-					references: {},
+					original: 'Language',
+					resolved: '"en" | "fr"',
+					references: {
+						Language: {
+							location: 'import',
+							path: '../../utils/common/language-types',
+							id: 'src/utils/common/language-types.ts::Language',
+						},
+					},
 				},
 			},
 			{
@@ -203,7 +349,7 @@ export class OntarioLanguageToggle {
 				composed: true,
 				docs: {
 					tags: [],
-					text: 'An event that emits to other components that the language toggle button has been toggled.',
+					text: 'Event that fires when the language toggle is pressed/clicked.\n\nThe event contains the oldLanguage along with the newLanguage.',
 				},
 				complexType: {
 					original: 'HeaderLanguageToggleEventDetails',

package/dist/collection/components/ontario-language-toggle/ontario-language-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-language-toggle.js","sourceRoot":"","sources":["../../../src/components/ontario-language-toggle/ontario-language-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Watch, h, Fragment } from '@stencil/core';\n\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\n@Component({\n\ttag: 'ontario-language-toggle',\n\tstyleUrl: 'ontario-language-toggle.scss',\n\tshadow: true,\n})\nexport class OntarioLanguageToggle {\n\t@Prop({ mutable: true }) language: Language \| string;\n\n\t/*\n\t The size of the language toggle button.\n\t \n\t If no prop is passed, it will be set to the `default` size.\n\t /\n\t@Prop() size?: 'default' \| 'small' = 'default';\n\n\t/\n\t The URL to change to when the language toggle button is clicked.\n\t \n\t This is optional.\n\t /\n\t@Prop({ mutable: true }) url?: string;\n\n\t/\n\t A custom function to pass to the language toggle button.\n\t \n\t This is optional.\n\t /\n\t@Prop() customLanguageToggle?: (event: globalThis.Event) => void;\n\n\t@State() translations: any = translations;\n\n\t/\n\t An event to set the Document's HTML lang property, and emit the toggled language to other components.\n\t /\n\t@Event() setAppLanguage: EventEmitter<string>;\n\tsetAppLanguageHandler() {\n\t\tlet lang: string \| Language;\n\t\tif (this.language) {\n\t\t\tlang = this.language;\n\t\t} else if (document.documentElement.lang) {\n\t\t\tlang = document.documentElement.lang;\n\t\t} else {\n\t\t\tlang = 'en';\n\t\t}\n\n\t\tthis.language = lang;\n\t\tthis.setAppLanguage.emit(lang);\n\n\t\tthis.updateHTMLLang(lang);\n\t}\n\n\t/\n\t An event that emits to other components that the language toggle button has been toggled.\n\t */\n\t@Event() headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;\n\thandleHeaderLanguageToggled(language: string, event?: globalThis.Event) {\n\t\tconst toggledLanguage = language === 'en' ? 'fr' : 'en';\n\t\tthis.language = toggledLanguage;\n\n\t\tthis.headerLanguageToggled.emit({ oldLanguage: language, newLanguage: toggledLanguage });\n\n\t\tthis.updateHTMLLang(toggledLanguage);\n\n\t\tif (this.customLanguageToggle && event) {\n\t\t\tthis.customLanguageToggle(event);\n\t\t}\n\t}\n\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\tupdateHTMLLang = (lang: string) => {\n\t\tconst htmlElement = document.firstElementChild;\n\n\t\tif (htmlElement?.tagName.toLowerCase() === 'html') {\n\t\t\tif (lang) {\n\t\t\t\thtmlElement.setAttribute('lang', lang);\n\t\t\t} else {\n\t\t\t\thtmlElement.setAttribute('lang', 'en');\n\t\t\t}\n\t\t}\n\n\t\treturn;\n\t};\n\n\tconnectedCallback() {\n\t\tthis.updateLanguage();\n\t}\n\n\trender() {\n\t\tconst language = this.language === 'en' ? 'Français' : 'English';\n\t\tconst abbreviatedLanguage = this.language === 'en' ? 'FR' : 'EN';\n\n\t\treturn (\n\t\t\t<a\n\t\t\t\tclass={\n\t\t\t\t\tthis.size === 'default'\n\t\t\t\t\t\t? 'ontario-language-toggler ontario-language-toggler--default'\n\t\t\t\t\t\t: 'ontario-language-toggler ontario-language-toggler--small'\n\t\t\t\t}\n\t\t\t\thref={this.url ? this.url : '#'}\n\t\t\t\taria-label={this.translations.languageToggle.ariaLabel[`${this.language}`]}\n\t\t\t\tonClick={(e) => this.handleHeaderLanguageToggled(this.language, e)}\n\t\t\t>\n\t\t\t\t{this.size === 'small' ? (\n\t\t\t\t\t<span>{language}</span>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<abbr title={language} class=\"ontario-show-for-small-only\">\n\t\t\t\t\t\t\t{abbreviatedLanguage}\n\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t<span class=\"ontario-show-for-medium\">{language}</span>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</a>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ontario-language-toggle.js","sourceRoot":"","sources":["../../../src/components/ontario-language-toggle/ontario-language-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Watch, h, Fragment } from '@stencil/core';\n\nimport { supportedLanguages, Language } from '../../utils/common/language-types';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray, getRootHTMLElement } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-language-toggle',\n\tstyleUrl: 'ontario-language-toggle.scss',\n\tshadow: true,\n})\nexport class OntarioLanguageToggle {\n\t/*\n\t The language of the component.\n\t \n\t In most cases, the language toggle should be the source of truth for determining the site language.\n\t \n\t Only pass a language value here if necessary.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t The size of the language toggle button.\n\t \n\t If no prop is passed, it will be set to the `default` size.\n\t /\n\t@Prop() size?: 'default' \| 'small' = 'default';\n\n\t/\n\t The URL to change to when the language toggle button is clicked.\n\t \n\t This is optional.\n\t /\n\t@Prop({ mutable: true }) url?: string;\n\n\t/\n\t A custom function to pass to the language toggle button.\n\t \n\t This is optional.\n\t /\n\t@Prop() customLanguageToggle?: (event: globalThis.Event) => void;\n\n\t@State() translations: any = translations;\n\n\t/\n\t Internal state used as the source of truth for component language.\n\t /\n\t@State() private languageState: Language;\n\n\t/\n\t Internal state used to render the text on the language toggle UI.\n\t /\n\t@State() private oppositeLanguageLabel: { fullWord: string; abbreviation: Language } \| undefined = undefined;\n\n\t/\n\t Updates the language and languageState props when changes to the language prop are detected.\n\t /\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tif (this.language) {\n\t\t\tif (!validateValueAgainstArray(this.language, supportedLanguages)) {\n\t\t\t\tthis.showLanguageWarning(this.language);\n\t\t\t\tthis.language = this.translations.siteLanguage.abbreviation.en as Language;\n\t\t\t}\n\t\t\tthis.languageState = this.language;\n\t\t}\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\t/\n\t Event that fires during the setAppLanguageHandler() method.\n\t \n\t The event contains the current language (after language logic has already occurred).\n\t /\n\t@Event() setAppLanguage: EventEmitter<Language>;\n\n\t/\n\t Event that fires when the language toggle is pressed/clicked.\n\t \n\t The event contains the oldLanguage along with the newLanguage.\n\t /\n\t@Event() headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;\n\n\t/\n\t This function sets the languageState (if not already set).\n\t \n\t It also emits the setAppLanguage() event, updates the component language label, and\n\t * updates the <html> tag lang attribute with the languageState value.\n\t \n\t It gets called by the connectedCallback() component lifecycle hook, and by the\n\t * updateLanguage() method, which is fired on the watch for the language prop.\n\t /\n\tprivate setAppLanguageHandler() {\n\t\tconst defaultLang = this.translations.siteLanguage.abbreviation.en;\n\t\tconst rootLang = getRootHTMLElement()?.lang;\n\n\t\t// If languageState is not set, set it equal to the following cadence:\n\t\t// language prop value, <html> tag lang attribute, or default to \"en\"\n\t\tif (!this.languageState) {\n\t\t\tif (this.language) {\n\t\t\t\tthis.languageState = this.language;\n\t\t\t} else if (rootLang) {\n\t\t\t\tif (validateValueAgainstArray(rootLang, supportedLanguages)) {\n\t\t\t\t\tthis.languageState = rootLang as Language;\n\t\t\t\t} else {\n\t\t\t\t\tthis.showLanguageWarning(rootLang, 'document');\n\t\t\t\t\tthis.languageState = defaultLang;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.languageState = defaultLang;\n\t\t\t}\n\t\t}\n\n\t\tthis.setAppLanguage.emit(this.languageState);\n\n\t\tthis.oppositeLanguageLabel = {\n\t\t\tfullWord: this.getOppositeLanguageFullWord(),\n\t\t\tabbreviation: this.getOppositeLanguageAbbrievation(),\n\t\t};\n\n\t\tthis.updateHTMLLang();\n\t}\n\n\t/\n\t An event that emits to other components that the language toggle button has been toggled.\n\t \n\t @param {Language} oldLanguage - The language prior to the language toggle being pressed.\n\t * @param {globalThis.Event} event - event that triggered the function (e.g. onclick).\n\t /\n\tprivate handleHeaderLanguageToggled(oldLanguage: Language, event?: globalThis.Event) {\n\t\tthis.languageState =\n\t\t\toldLanguage === this.translations.siteLanguage.abbreviation.en\n\t\t\t\t? this.translations.siteLanguage.abbreviation.fr\n\t\t\t\t: this.translations.siteLanguage.abbreviation.en;\n\n\t\tthis.headerLanguageToggled.emit({ oldLanguage: oldLanguage, newLanguage: this.languageState });\n\n\t\tthis.updateHTMLLang();\n\n\t\tif (this.customLanguageToggle && event) {\n\t\t\tthis.customLanguageToggle(event);\n\t\t}\n\t}\n\n\t/\n\t Prints a warning message to the console about using an incorrect language for the component.\n\t \n\t @param {string} lang - The incorrect language that was received.\n\t * @param {string} type - prop/document \| Where the incorrect language is coming from.\n\t /\n\tprivate showLanguageWarning(lang: string, type: 'prop' \| 'document' = 'prop') {\n\t\tconst propOrDocumentMessage =\n\t\t\ttype === 'prop' ? `The language prop value of ${lang} ` : `The HTML document lang attribute value of ${lang} `;\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addRegularText(propOrDocumentMessage)\n\t\t\t.addRegularText('is not a valid language value for the ')\n\t\t\t.addMonospaceText(' <ontario-language-toggle> ')\n\t\t\t.addRegularText(`component. Valid language values are ${printArray([...supportedLanguages])}. `)\n\t\t\t.addRegularText(`A default language value of ${this.translations.siteLanguage.abbreviation.en} will be applied.`)\n\t\t\t.printMessage();\n\t}\n\n\t/\n\t Returns abbreviated text for the opposite language.\n\t \n\t @returns {Language}\n\t /\n\tprivate getOppositeLanguageAbbrievation(): Language {\n\t\treturn this.languageState === this.translations.siteLanguage.abbreviation.en\n\t\t\t? this.translations.siteLanguage.abbreviation.fr\n\t\t\t: this.translations.siteLanguage.abbreviation.en;\n\t}\n\n\t/\n\t Returns full word text for the opposite language.\n\t \n\t @returns {string}\n\t /\n\tprivate getOppositeLanguageFullWord(): string {\n\t\treturn this.languageState === this.translations.siteLanguage.abbreviation.en\n\t\t\t? this.translations.siteLanguage.fullWord.fr\n\t\t\t: this.translations.siteLanguage.fullWord.en;\n\t}\n\n\t/\n\t * Updates the <html> lang attribute based on component languageState.\n\t /\n\tprivate updateHTMLLang = () => {\n\t\tconst htmlElement = getRootHTMLElement();\n\n\t\tif (htmlElement) {\n\t\t\thtmlElement.setAttribute('lang', this.languageState);\n\t\t}\n\t};\n\n\t/\n\t Component life cycle hook.\n\t \n\t https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t /\n\tconnectedCallback() {\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\t/\n\t Component life cycle hook.\n\t \n\t https://stenciljs.com/docs/component-lifecycle#componentdidload\n\t /\n\tcomponentDidLoad() {\n\t\t/\n\t\t Creates a MutationObserver (a type of watch) on the <html> tag lang attribute.\n\t\t \n\t\t When changes occur, the oppositeLanguageLabel state variable regenerates.\n\t\t \n\t\t This is to act as a form of callback and create a subtle delay between page content\n\t\t * updating and the language toggle label updating.\n\t\t */\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tswitch (mutation.type) {\n\t\t\t\t\tcase 'attributes':\n\t\t\t\t\t\tswitch (mutation.attributeName) {\n\t\t\t\t\t\t\tcase 'lang':\n\t\t\t\t\t\t\t\tthis.oppositeLanguageLabel = {\n\t\t\t\t\t\t\t\t\tfullWord: this.getOppositeLanguageFullWord(),\n\t\t\t\t\t\t\t\t\tabbreviation: this.getOppositeLanguageAbbrievation(),\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\t// Only create/trigger the MutationObserver if the <html> element exists.\n\t\tif (getRootHTMLElement()) {\n\t\t\tconst options = { attributes: true };\n\t\t\tobserver.observe(getRootHTMLElement(), options);\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<a\n\t\t\t\taria-label={this.translations.languageToggle.ariaLabel[`${this.oppositeLanguageLabel?.abbreviation}`]}\n\t\t\t\tclass={\n\t\t\t\t\tthis.size === 'default'\n\t\t\t\t\t\t? 'ontario-language-toggler ontario-language-toggler--default'\n\t\t\t\t\t\t: 'ontario-language-toggler ontario-language-toggler--small'\n\t\t\t\t}\n\t\t\t\thref={this.url ? this.url : '#'}\n\t\t\t\threflang={this.oppositeLanguageLabel?.abbreviation}\n\t\t\t\tlang={this.oppositeLanguageLabel?.abbreviation}\n\t\t\t\tonClick={(e) => this.handleHeaderLanguageToggled(this.languageState, e)}\n\t\t\t>\n\t\t\t\t{this.size === 'small' ? (\n\t\t\t\t\t<span>{this.oppositeLanguageLabel?.fullWord}</span>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<abbr title={this.oppositeLanguageLabel?.fullWord} class=\"ontario-show-for-small-only\">\n\t\t\t\t\t\t\t{this.oppositeLanguageLabel?.abbreviation.toUpperCase()}\n\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t<span class=\"ontario-show-for-medium\">{this.oppositeLanguageLabel?.fullWord}</span>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</a>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-language-toggle/test/ontario-language-toggle.spec.js CHANGED Viewed

@@ -1,5 +1,7 @@
 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', () => {
 		it('should render the expected html', async () => {
@@ -18,7 +20,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>
@@ -31,7 +33,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>`,
@@ -46,7 +59,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/dist/collection/components/ontario-language-toggle/test/ontario-language-toggle.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-language-toggle.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-language-toggle/test/ontario-language-toggle.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;~~AAEnE~~,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACxC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC9B,UAAU,EAAE,CAAC,qBAAqB,CAAC;gBACnC,IAAI,EAAE,qDAAqD;aAC3D,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,qBAAqB,CAAC;YACnC,IAAI,EAAE,qDAAqD;SAC3D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;GAa7B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,~~2EAA2E~~,EAAE,KAAK,IAAI,EAAE;~~QAC1F~~,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,qBAAqB,CAAC;YACnC,IAAI,EAAE,qDAAqD;SAC3D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qGAAqG,EAAE,KAAK,IAAI,EAAE;QACpH,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,qBAAqB,CAAC;YACnC,IAAI,EAAE,0FAA0F;SAChG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;GAU7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioLanguageToggle } from '../ontario-language-toggle';\n\ndescribe('ontario-language-toggle', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioLanguageToggle],\n\t\t\t\thtml: `<ontario-language-toggle></ontario-language-toggle>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tit('should render the default size language toggle if no size is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioLanguageToggle],\n\t\t\thtml: `<ontario-language-toggle></ontario-language-toggle>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-language-toggle>\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<a aria-label=\"~~Click~~ to ~~switch~~ ~~language~~ to ~~French~~\" class=\"ontario-language-toggler ontario-language-toggler--default\" href=\"#\">\n\t\t\t\t\t\t<abbr class=\"ontario-show-for-small-only\" title=\"Français\">\n\t\t\t\t\t\t\tFR\n\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t<span class=\"ontario-show-for-medium\">\n\t\t\t\t\t\t\tFrançais\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-language-toggle>\n\t\t`);\n\t\texpect(page.rootInstance.size).toBe('default');\n\t});\n\n\tit('should render a default language of English if no language prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioLanguageToggle],\n\t\t\thtml: `<ontario-language-toggle></ontario-language-toggle>`,\n\t\t});\n\n\t\texpect(page.rootInstance.language).toBe('en');\n\t});\n\n\tit('should render a small size language toggle with a French default language when explicitly specified', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioLanguageToggle],\n\t\t\thtml: `<ontario-language-toggle size=\"small\" url=\"/en\" language=\"fr\"></ontario-language-toggle>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-language-toggle size=\"small\" url=\"/en\" language=\"fr\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<a aria-label=\"~~Cliquez~~ ~~pour~~ ~~changer~~ de ~~langue~~ en ~~anglais~~\" class=\"ontario-language-toggler ontario-language-toggler--small\" href=\"/en\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\tEnglish\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-language-toggle>\n\t\t`);\n\t});\n});\n"]}
1	+ {"version":3,"file":"ontario-language-toggle.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-language-toggle/test/ontario-language-toggle.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAEnF,MAAM,CAAC,gBAAgB,GAAG,oBAAoB,CAAC;AAE/C,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACxC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC9B,UAAU,EAAE,CAAC,qBAAqB,CAAC;gBACnC,IAAI,EAAE,qDAAqD;aAC3D,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,qBAAqB,CAAC;YACnC,IAAI,EAAE,qDAAqD;SAC3D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;GAa7B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH;;;;;;;;;;OAUG;IACH,EAAE,CAAC,IAAI,CAAC,6FAA6F,EAAE,KAAK,IAAI,EAAE;QACjH,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,qBAAqB,CAAC;YACnC,IAAI,EAAE,qDAAqD;SAC3D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qGAAqG,EAAE,KAAK,IAAI,EAAE;QACpH,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,qBAAqB,CAAC;YACnC,IAAI,EAAE,0FAA0F;SAChG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;GAU7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioLanguageToggle } from '../ontario-language-toggle';\nimport { mutationObserverMock } from '../../../utils/tests/mutation-observer.mock';\n\nglobal.MutationObserver = mutationObserverMock;\n\ndescribe('ontario-language-toggle', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioLanguageToggle],\n\t\t\t\thtml: `<ontario-language-toggle></ontario-language-toggle>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tit('should render the default size language toggle if no size is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioLanguageToggle],\n\t\t\thtml: `<ontario-language-toggle></ontario-language-toggle>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-language-toggle>\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<a aria-label=\"Cliquez pour changer la langue en français\" class=\"ontario-language-toggler ontario-language-toggler--default\" href=\"#\" hreflang=\"fr\" lang=\"fr\">\n\t\t\t\t\t\t<abbr class=\"ontario-show-for-small-only\" title=\"Français\">\n\t\t\t\t\t\t\tFR\n\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t<span class=\"ontario-show-for-medium\">\n\t\t\t\t\t\t\tFrançais\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-language-toggle>\n\t\t`);\n\t\texpect(page.rootInstance.size).toBe('default');\n\t});\n\n\t/*\n\t TODO: Determine if this is testable.\n\t \n\t Not sure how to properly test against this, seems to be a race condition.\n\t \n\t Takes a few processes before the html lang attribute is updated.\n\t \n\t Using setTimeout() leads to a false positive.\n\t \n\t Using page.waitForChanges() or autoApplyChanges: true seem to have no effect.\n\t */\n\tit.skip('should render a default language of English on the <html> tag if no language prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioLanguageToggle],\n\t\t\thtml: `<ontario-language-toggle></ontario-language-toggle>`,\n\t\t});\n\n\t\texpect(page.rootInstance.language).toBe('en');\n\t});\n\n\tit('should render a small size language toggle with a French default language when explicitly specified', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioLanguageToggle],\n\t\t\thtml: `<ontario-language-toggle size=\"small\" url=\"/en\" language=\"fr\"></ontario-language-toggle>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-language-toggle size=\"small\" url=\"/en\" language=\"fr\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<a aria-label=\"Click to switch the language to English\" class=\"ontario-language-toggler ontario-language-toggler--small\" href=\"/en\" hreflang=\"en\" lang=\"en\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\tEnglish\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-language-toggle>\n\t\t`);\n\t});\n});\n"]}

package/dist/collection/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/dist/collection/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>