@ongov/ontario-design-system-component-library 6.0.0-alpha.4 → 6.0.0-alpha.6

package/dist/collection/components/ontario-header-overflow-menu/ontario-header-overflow-menu.js

@@ -0,0 +1,295 @@
+import { h } from '@stencil/core';
+import { generateMenuItem } from '../../utils/components/header/header-menu-items';
+import { convertStringToBoolean } from '../../utils/helper/utils';
+export class OntarioHeaderOverflowMenu {
+	constructor() {
+		/**
+		 * A state variable to determine whether the menu is open or not.
+		 *
+		 * The boolean values map to eitherthe presence (true) or absense (false)
+		 * of the `ontario-navigation--open` on the `nav` element.
+		 *
+		 * Triggered by either the `menuButtonToggled` event or the `click` event.
+		 */
+		this.menuIsOpen = false;
+		/**
+		 * The current index of the menu item that is focused.
+		 */
+		this.currentIndex = undefined;
+	}
+	/**
+	 * Resets the `currentIndex` value.
+	 *
+	 * Typically resets when the menu closes.
+	 */
+	resetCurrentIndex() {
+		this.currentIndex = undefined;
+	}
+	/**
+	 * Updates the `currentIndex` value.
+	 *
+	 * Typically occurs when a user uses the keyboard to tab through
+	 * menu items.
+	 */
+	updateCurrentIndex(index) {
+		this.currentIndex = index;
+	}
+	parseMenuItems() {
+		var _a, _b;
+		if (!Array.isArray(this.menuItems) && typeof this.menuItems === 'string') {
+			let copyOfMenuItems = JSON.parse(this.menuItems);
+			// convert stringified boolean values for linkIsActive, to their actual boolean equivalents
+			copyOfMenuItems.forEach((menuItem) =>
+				typeof (menuItem === null || menuItem === void 0 ? void 0 : menuItem.linkIsActive) === 'string'
+					? (menuItem.linkIsActive = convertStringToBoolean(
+							menuItem === null || menuItem === void 0 ? void 0 : menuItem.linkIsActive,
+						))
+					: menuItem === null || menuItem === void 0
+						? void 0
+						: menuItem.linkIsActive,
+			);
+			this.menuItemState = copyOfMenuItems;
+		} else {
+			this.menuItemState = this.menuItems;
+		}
+		const activeLinkSet =
+			(_b =
+				(_a = this.menuItemState) === null || _a === void 0
+					? void 0
+					: _a.some((menuItem) => (menuItem === null || menuItem === void 0 ? void 0 : menuItem.linkIsActive))) !==
+				null && _b !== void 0
+				? _b
+				: [];
+		// If no active link is set, try to guess and set the active link based
+		// on if the href is included in the URL.
+		if (!activeLinkSet) {
+			const copyOfMenuItemsState = [...this.menuItemState];
+			copyOfMenuItemsState.forEach((menuItem) => {
+				const sanitizedSlug = menuItem.href.replace(/\s+/g, '-').toLowerCase();
+				menuItem.linkIsActive = window.location.pathname.includes(sanitizedSlug);
+			});
+			this.menuItemState = [...copyOfMenuItemsState];
+		}
+	}
+	/**
+	 * This listens for the `menuButtonToggled` event sent from the header menu button when it is clicked.
+	 * It is used to toggle menu visibility by adding or removing the ontario-navigation--open class on the nav element.
+	 */
+	toggleMenuVisibility(event) {
+		this.menuIsOpen = event.detail;
+		this.resetCurrentIndex();
+	}
+	/**
+	 * Listens for clicks on anything outside of the menu.
+	 * If a click is outside of the menu, then the menu will
+	 * close.
+	 */
+	handleClick(event) {
+		// if the menu (ref) is clicked, return
+		if (event.composedPath().includes(this.menu)) {
+			this.menuIsOpen = true;
+			return;
+		}
+		this.menuIsOpen = false;
+		this.resetCurrentIndex();
+	}
+	/**
+	 * Listens for keydown events and handles navigation within the menu using the ArrowUp and ArrowDown keys.
+	 */
+	handleKeyDown(event) {
+		if (this.menuIsOpen) {
+			const focusableElements = this.menu.querySelectorAll('.ontario-menu-item');
+			switch (event.key) {
+				case 'ArrowDown':
+					event.preventDefault();
+					if (this.currentIndex === -1 || this.currentIndex === undefined) {
+						this.currentIndex = 0;
+					} else {
+						this.currentIndex = (this.currentIndex + 1) % focusableElements.length;
+					}
+					focusableElements[this.currentIndex].focus();
+					/**
+					 * Tried other ways of triggering this function to condense code via a watch on currentIndex,
+					 * and also tried sticking at the bottom of the switch's parent if statement.
+					 *
+					 * Both attempts led to inconsistent results (e.g. the aria message was out of sync with currentIndex)
+					 * or just didn't appear at all. Setting this at the source seems to have the best outcome.
+					 */
+					this.updateAriaLive(this.currentIndex);
+					break;
+				case 'ArrowUp':
+					event.preventDefault();
+					if (this.currentIndex === -1 || this.currentIndex === undefined) {
+						this.currentIndex = focusableElements.length - 1;
+					} else {
+						this.currentIndex = (this.currentIndex - 1 + focusableElements.length) % focusableElements.length;
+					}
+					focusableElements[this.currentIndex].focus();
+					this.updateAriaLive(this.currentIndex);
+					break;
+				case 'Tab':
+					focusableElements.forEach((element, index) => {
+						// within an event listener, the scope of "this" changes.
+						// To continue keeping the scope global, set a variable that captures it
+						// Without this, calls to global variables/methods/functions will not work
+						const self = this;
+						if (
+							!element.hasAttribute('data-has-focus-listener') ||
+							element.getAttribute('data-has-focus-listener') === 'false'
+						) {
+							element.addEventListener('focus', () => self.updateCurrentIndex(index));
+							element.setAttribute('data-has-focus-listener', 'true');
+						}
+					});
+					break;
+			}
+		}
+	}
+	/**
+	 * Updates the aria-live region with the menu item count and selected option.
+	 *
+	 * @param {number} selectedIndex The index of the selected menu item
+	 */
+	updateAriaLive(selectedIndex) {
+		const menuItemCount = this.menuItemState.length;
+		// index starts at 0, but users expect the message to start at 1
+		// therefore add value of +1 to each index value to align with
+		// user expectations
+		const selectedMenuItemNumber = selectedIndex + 1;
+		const ariaLiveMessage = `Option ${selectedMenuItemNumber} of ${menuItemCount}`;
+		if (this.ariaLiveRegion) {
+			this.ariaLiveRegion.textContent = ariaLiveMessage;
+		}
+	}
+	componentWillLoad() {
+		this.parseMenuItems();
+	}
+	render() {
+		var _a;
+		return h(
+			'nav',
+			{
+				key: '40a8817026e0ccbf8f66e943036af9120695779a',
+				role: 'navigation',
+				class: this.menuIsOpen
+					? 'ontario-application-navigation ontario-navigation--open'
+					: 'ontario-application-navigation',
+				id: 'ontario-application-navigation',
+				ref: (el) => (this.menu = el),
+			},
+			h(
+				'div',
+				{ key: '4a6898ad7ffab9bee53ad6929e35775eaba745b4', class: 'ontario-application-navigation__container' },
+				h(
+					'ul',
+					{ key: 'b960fd93ab7c46ce40da33b545d05e4a034c42b4' },
+					(_a = this.menuItemState) === null || _a === void 0
+						? void 0
+						: _a.map((item) => {
+								return generateMenuItem(item.href, item.title, item.linkIsActive);
+							}),
+				),
+			),
+			h('div', {
+				'key': 'eef3c22887ffe8f9d6370e101d6125fa5f226fd7',
+				'id': 'aria-live-region',
+				'class': 'ontario-show-for-sr',
+				'aria-live': 'polite',
+				'ref': (el) => (this.ariaLiveRegion = el),
+			}),
+		);
+	}
+	static get is() {
+		return 'ontario-header-overflow-menu';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-header-overflow-menu.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-header-overflow-menu.css'],
+		};
+	}
+	static get properties() {
+		return {
+			menuItems: {
+				type: 'string',
+				attribute: 'menu-items',
+				mutable: false,
+				complexType: {
+					original: 'MenuItem[] | string',
+					resolved: 'MenuItem[] | string',
+					references: {
+						MenuItem: {
+							location: 'import',
+							path: '../../utils/common/common.interface',
+							id: 'src/utils/common/common.interface.ts::MenuItem',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [
+						{
+							name: 'example',
+							text: '<ontario-header-overflow-menu\n\tmenu-items=\'[{\n\t\t"title": "Link 1",\n\t\t"href": "/link-1"\n\t\t"linkIsActive": "false"\n\t},{\n\t\t"title": "Link 2",\n\t\t"href": "/link-2"\n\t\t"linkIsActive": "false"\n\t},{\n\t\t"title": "Link 3",\n\t\t"href": "/link-3"\n\t\t"linkIsActive": "false"\n\t},{\n\t\t"title": "Link 4",\n\t\t"href": "/link-4"\n\t\t"linkIsActive": "false"\n\t}]\'>\n</ontario-header-overflow-menu>',
+						},
+					],
+					text: 'The items that will go inside the menu.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+			},
+		};
+	}
+	static get states() {
+		return {
+			menuItemState: {},
+			menuIsOpen: {},
+		};
+	}
+	static get elementRef() {
+		return 'el';
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'menuItems',
+				methodName: 'parseMenuItems',
+			},
+		];
+	}
+	static get listeners() {
+		return [
+			{
+				name: 'menuButtonToggled',
+				method: 'toggleMenuVisibility',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+			{
+				name: 'click',
+				method: 'handleClick',
+				target: 'window',
+				capture: true,
+				passive: false,
+			},
+			{
+				name: 'keydown',
+				method: 'handleKeyDown',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+		];
+	}
+}
+//# sourceMappingURL=ontario-header-overflow-menu.js.map

package/dist/collection/components/ontario-header-overflow-menu/ontario-header-overflow-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-header-overflow-menu.js","sourceRoot":"","sources":["../../../src/components/ontario-header-overflow-menu/ontario-header-overflow-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Watch, h, Listen, Element } from '@stencil/core';\nimport { MenuItem } from '../../utils/common/common.interface';\nimport { generateMenuItem } from '../../utils/components/header/header-menu-items';\nimport { convertStringToBoolean } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-header-overflow-menu',\n\tstyleUrl: 'ontario-header-overflow-menu.scss',\n\tshadow: true,\n})\nexport class OntarioHeaderOverflowMenu {\n\t@Element() el: HTMLElement;\n\n\t/**\n\t * The items that will go inside the menu.\n\t *\n\t *  @example\n\t * \t<ontario-header-overflow-menu\n\t *\t\t\tmenu-items='[{\n\t *\t\t\t\t\"title\": \"Link 1\",\n\t *\t\t\t\t\"href\": \"/link-1\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Link 2\",\n\t *\t\t\t\t\"href\": \"/link-2\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Link 3\",\n\t *\t\t\t\t\"href\": \"/link-3\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Link 4\",\n\t *\t\t\t\t\"href\": \"/link-4\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t}]'>\n\t *\t</ontario-header-overflow-menu>\n\t */\n\t@Prop() menuItems: MenuItem[] | string;\n\n\t/**\n\t * The `menuItems` are reassigned to `menuItemState` for parsing by `parseMenuItems()`.\n\t */\n\t@State() private menuItemState: MenuItem[];\n\n\t/**\n\t * A state variable to determine whether the menu is open or not.\n\t *\n\t * The boolean values map to eitherthe presence (true) or absense (false)\n\t * of the `ontario-navigation--open` on the `nav` element.\n\t *\n\t * Triggered by either the `menuButtonToggled` event or the `click` event.\n\t */\n\t@State() private menuIsOpen: boolean = false;\n\n\t/**\n\t * The current index of the menu item that is focused.\n\t */\n\tprivate currentIndex: number | undefined = undefined;\n\n\t/**\n\t * Resets the `currentIndex` value.\n\t *\n\t * Typically resets when the menu closes.\n\t */\n\tprivate resetCurrentIndex() {\n\t\tthis.currentIndex = undefined;\n\t}\n\n\t/**\n\t * Updates the `currentIndex` value.\n\t *\n\t * Typically occurs when a user uses the keyboard to tab through\n\t * menu items.\n\t */\n\tprivate updateCurrentIndex(index: number) {\n\t\tthis.currentIndex = index;\n\t}\n\n\t@Watch('menuItems')\n\tparseMenuItems() {\n\t\tif (!Array.isArray(this.menuItems) && typeof this.menuItems === 'string') {\n\t\t\tlet copyOfMenuItems = JSON.parse(this.menuItems) as MenuItem[];\n\t\t\t// convert stringified boolean values for linkIsActive, to their actual boolean equivalents\n\t\t\tcopyOfMenuItems.forEach((menuItem) =>\n\t\t\t\ttypeof menuItem?.linkIsActive === 'string'\n\t\t\t\t\t? (menuItem.linkIsActive = convertStringToBoolean(menuItem?.linkIsActive))\n\t\t\t\t\t: menuItem?.linkIsActive,\n\t\t\t);\n\t\t\tthis.menuItemState = copyOfMenuItems;\n\t\t} else {\n\t\t\tthis.menuItemState = this.menuItems;\n\t\t}\n\n\t\tconst activeLinkSet = this.menuItemState?.some((menuItem) => menuItem?.linkIsActive) ?? [];\n\n\t\t// If no active link is set, try to guess and set the active link based\n\t\t// on if the href is included in the URL.\n\t\tif (!activeLinkSet) {\n\t\t\tconst copyOfMenuItemsState = [...this.menuItemState];\n\t\t\tcopyOfMenuItemsState.forEach((menuItem) => {\n\t\t\t\tconst sanitizedSlug = menuItem.href.replace(/\\s+/g, '-').toLowerCase();\n\t\t\t\tmenuItem.linkIsActive = window.location.pathname.includes(sanitizedSlug);\n\t\t\t});\n\n\t\t\tthis.menuItemState = [...copyOfMenuItemsState];\n\t\t}\n\t}\n\n\t/**\n\t * This listens for the `menuButtonToggled` event sent from the header menu button when it is clicked.\n\t * It is used to toggle menu visibility by adding or removing the ontario-navigation--open class on the nav element.\n\t */\n\t@Listen('menuButtonToggled', { target: 'window' })\n\ttoggleMenuVisibility(event: CustomEvent<boolean>) {\n\t\tthis.menuIsOpen = event.detail;\n\t\tthis.resetCurrentIndex();\n\t}\n\n\t/**\n\t * Listens for clicks on anything outside of the menu.\n\t * If a click is outside of the menu, then the menu will\n\t * close.\n\t */\n\t@Listen('click', { capture: true, target: 'window' })\n\thandleClick(event: PointerEvent) {\n\t\t// if the menu (ref) is clicked, return\n\t\tif (event.composedPath().includes(this.menu)) {\n\t\t\tthis.menuIsOpen = true;\n\t\t\treturn;\n\t\t}\n\n\t\tthis.menuIsOpen = false;\n\t\tthis.resetCurrentIndex();\n\t}\n\n\t/**\n\t * Listens for keydown events and handles navigation within the menu using the ArrowUp and ArrowDown keys.\n\t */\n\t@Listen('keydown', { target: 'window' })\n\thandleKeyDown(event: KeyboardEvent) {\n\t\tif (this.menuIsOpen) {\n\t\t\tconst focusableElements: NodeListOf<HTMLElement> = this.menu.querySelectorAll('.ontario-menu-item');\n\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (this.currentIndex === -1 || this.currentIndex === undefined) {\n\t\t\t\t\t\tthis.currentIndex = 0;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.currentIndex = (this.currentIndex + 1) % focusableElements.length;\n\t\t\t\t\t}\n\t\t\t\t\tfocusableElements[this.currentIndex].focus();\n\t\t\t\t\t/**\n\t\t\t\t\t * Tried other ways of triggering this function to condense code via a watch on currentIndex,\n\t\t\t\t\t * and also tried sticking at the bottom of the switch's parent if statement.\n\t\t\t\t\t *\n\t\t\t\t\t * Both attempts led to inconsistent results (e.g. the aria message was out of sync with currentIndex)\n\t\t\t\t\t * or just didn't appear at all. Setting this at the source seems to have the best outcome.\n\t\t\t\t\t */\n\t\t\t\t\tthis.updateAriaLive(this.currentIndex);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (this.currentIndex === -1 || this.currentIndex === undefined) {\n\t\t\t\t\t\tthis.currentIndex = focusableElements.length - 1;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.currentIndex = (this.currentIndex - 1 + focusableElements.length) % focusableElements.length;\n\t\t\t\t\t}\n\t\t\t\t\tfocusableElements[this.currentIndex].focus();\n\t\t\t\t\tthis.updateAriaLive(this.currentIndex);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Tab':\n\t\t\t\t\tfocusableElements.forEach((element, index) => {\n\t\t\t\t\t\t// within an event listener, the scope of \"this\" changes.\n\t\t\t\t\t\t// To continue keeping the scope global, set a variable that captures it\n\t\t\t\t\t\t// Without this, calls to global variables/methods/functions will not work\n\t\t\t\t\t\tconst self = this;\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t!element.hasAttribute('data-has-focus-listener') ||\n\t\t\t\t\t\t\telement.getAttribute('data-has-focus-listener') === 'false'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\telement.addEventListener('focus', () => self.updateCurrentIndex(index));\n\t\t\t\t\t\t\telement.setAttribute('data-has-focus-listener', 'true');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Updates the aria-live region with the menu item count and selected option.\n\t *\n\t * @param {number} selectedIndex The index of the selected menu item\n\t */\n\tprivate updateAriaLive(selectedIndex: number) {\n\t\tconst menuItemCount = this.menuItemState.length;\n\t\t// index starts at 0, but users expect the message to start at 1\n\t\t// therefore add value of +1 to each index value to align with\n\t\t// user expectations\n\t\tconst selectedMenuItemNumber = selectedIndex + 1;\n\t\tconst ariaLiveMessage = `Option ${selectedMenuItemNumber} of ${menuItemCount}`;\n\n\t\tif (this.ariaLiveRegion) {\n\t\t\tthis.ariaLiveRegion.textContent = ariaLiveMessage;\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseMenuItems();\n\t}\n\n\t/**\n\t * Assigning values to elements to use them as ref\n\t */\n\tprivate menu!: HTMLElement;\n\n\t/**\n\t * The aria-live region that will be updated with the selected menu item.\n\t */\n\tprivate ariaLiveRegion!: HTMLElement;\n\n\trender() {\n\t\treturn (\n\t\t\t<nav\n\t\t\t\trole=\"navigation\"\n\t\t\t\tclass={\n\t\t\t\t\tthis.menuIsOpen ? 'ontario-application-navigation ontario-navigation--open' : 'ontario-application-navigation'\n\t\t\t\t}\n\t\t\t\tid=\"ontario-application-navigation\"\n\t\t\t\tref={(el) => (this.menu = el as HTMLElement)}\n\t\t\t>\n\t\t\t\t<div class=\"ontario-application-navigation__container\">\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.menuItemState?.map((item: MenuItem) => {\n\t\t\t\t\t\t\treturn generateMenuItem(item.href, item.title, item.linkIsActive);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tid=\"aria-live-region\"\n\t\t\t\t\tclass=\"ontario-show-for-sr\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\tref={(el) => (this.ariaLiveRegion = el as HTMLElement)}\n\t\t\t\t></div>\n\t\t\t</nav>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-hint-expander/ontario-hint-expander.js

@@ -141,11 +141,11 @@ export class OntarioHintExpander {
 	render() {
 		return h(
 			'div',
-			{ key: 'c1b5ef191ecbb485dbd7c880bbbbe1025aa14b37', class: 'ontario-hint-expander__container' },
+			{ key: '9f18296bf5ede4a16d648b0821f1e26acb813fde', class: 'ontario-hint-expander__container' },
 			h(
 				'button',
 				{
-					'key': '9a294c7c4f7ba31e3263ce451e165b6df466c035',
+					'key': '3e5c2325098f5b8e77a580e394601f666994ad2a',
 					'class': 'ontario-hint-expander__button',
 					'onClick': this.onClick,
 					'id': `hint-expander-button-${this.getId()}`,
@@ -156,20 +156,20 @@ export class OntarioHintExpander {
 				h(
 					'span',
 					{
-						key: '83378a499652ff0066e4935e2666544e8de48834',
+						key: 'f77bd6008272beb4646b70616c1d16d13d8e2722',
 						class: 'ontario-hint-expander__button-icon--close ontario-icon',
 					},
 					h('ontario-icon-chevron-up', {
-						'key': 'e438e561f82d7fceb4abd0e772117bace68faa3c',
+						'key': '09fe2a1d2d5e68cb7237ed23daf18f4d5d524afc',
 						'colour': 'inherit',
 						'aria-hidden': 'true',
 					}),
 				),
 				h(
 					'span',
-					{ key: 'fe4a275febd08b305760d3bf0ef04be24e4d54bb', class: 'ontario-hint-expander__button-icon--open' },
+					{ key: '66934abdf7d3f29f20a4a966370bfb7ae2ec487c', class: 'ontario-hint-expander__button-icon--open' },
 					h('ontario-icon-chevron-down', {
-						'key': '7463ef85ee1938df1c25dd3bae4718528b3b7326',
+						'key': 'ea41b4ce0d21f9c9f315ec86f82dd26528cd220e',
 						'colour': 'inherit',
 						'aria-hidden': 'true',
 					}),
@@ -179,7 +179,7 @@ export class OntarioHintExpander {
 			h(
 				'div',
 				{
-					'key': '383b61ae83347e5c47aac307b821120f541e5254',
+					'key': '488bcbb0a0ad44edac9d02f4304c19df6e7d4acf',
 					'class': 'ontario-hint-expander__content',
 					'id': `hint-expander-content-${this.getId()}`,
 					'aria-labelledby': `hint-expander-button-${this.getId()}`,

package/dist/collection/components/ontario-icon/ontario-icon-accessibility.js

@@ -89,14 +89,14 @@ export class OntarioIconAccessibility {
 		return h(
 			'div',
 			{
-				key: '95385081b476aba9de5e08f34d338fece5886f93',
+				key: 'd0c04d9bbe9203c2cd8c059128eda0291579c6ae',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '2c1cbf16fdfd14dc5a5e242ce8c70430fd582691',
+					key: '00d5e1034ae5781a928f1698d1824d40f32e7068',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconAccessibility {
 					id: 'accessibility',
 				},
 				h('path', {
-					key: '53309bedbf9f6c507cceff0e0d347435325f441f',
+					key: '1fc9313f6d9ddb89912249d54b67180bf02b50a3',
 					d: 'M18.4 11.2l-4.1.2 2.3-2.6c.2-.3.3-.8.2-1.3-.1-.3-.2-.6-.5-.8l-5.4-3.2c-.4-.3-1-.2-1.4.1L6.8 6.1c-.5.5-.6 1.2-.1 1.7.4.5 1.2.5 1.7.1l2-1.8 1.9 1.1-4.2 4.3c-.1.1-.1.2-.2.2-.5.2-1 .4-1.4.7L8 13.9c.5-.2 1-.4 1.5-.4 1.9 0 3.5 1.6 3.5 3.5 0 .6-.1 1.1-.4 1.5l1.5 1.5a5.29 5.29 0 0 0 .9-3c0-1.2-.4-2.4-1.1-3.3l3.3-.3-.2 4.8c-.1.7.4 1.2 1.1 1.3h.1c.6 0 1.1-.5 1.2-1.1l.2-5.9c0-.3-.1-.7-.3-.9-.3-.3-.6-.4-.9-.4zM18 5.5a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2 2 2 0 0 0 2 2zm-5.5 16.1a5.29 5.29 0 0 1-3 .9C6.5 22.5 4 20 4 17a5.29 5.29 0 0 1 .9-3l1.5 1.5c-.2.5-.4 1-.4 1.5 0 1.9 1.6 3.5 3.5 3.5.6 0 1.1-.1 1.5-.4l1.5 1.5z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-account.js

@@ -89,14 +89,14 @@ export class OntarioIconAccount {
 		return h(
 			'div',
 			{
-				key: '41e8deab5aefc8af1456dd2582228cadfc6fc1ad',
+				key: 'f0a353324c38237d014d3820057200628f6e2801',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '51d8c69ab4443141950749e53ace8d05e658fd9f',
+					key: '5d4cff8aca650965ba41ebe2c8ae7928aa4acb80',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconAccount {
 					id: 'account',
 				},
 				h('path', {
-					key: '3a5a242fac1244fb9990ace13212f9af6576e27a',
+					key: '810167bdf6f5b95b04f7563f0df6b851a6ef6c77',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-2 4-3.08 6-3.08 2 0 5.97 1.1 6 3.08a7.2 7.2 0 0 1-6 3.22z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-add-alt.js

@@ -89,14 +89,14 @@ export class OntarioIconAddAlt {
 		return h(
 			'div',
 			{
-				key: '8cfb668c0e09fe0e92c6f4fd98beb52dae005e6d',
+				key: '3a9e8e941fcd58992dd708cdf9b2ecebe2311e0e',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '32f6b962633ad92c8a8a0c47626cdce1812cb169',
+					key: 'b8de99f14553cf0af7282bb7939c4bd831d11746',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -106,7 +106,7 @@ export class OntarioIconAddAlt {
 					id: 'add-alt',
 				},
 				h('path', {
-					key: 'b84cac8de2495e358e3805c4f3b875aa8da2fb56',
+					key: 'edb4cb31d2563d837abaa16c22aaab7b9bbdba2c',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-add.js

@@ -89,14 +89,14 @@ export class OntarioIconAdd {
 		return h(
 			'div',
 			{
-				key: '1d178f328fbee55d06d781839d781067ef49eb4d',
+				key: '677716d425ecb90b4a63cc2cec609fc6f78a727a',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '2ce4b46caf8511911aec857e2acfc8e34d82494d',
+					key: '8688cf798dbbedc4ad4ced0a2a24fe68df2803cd',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -106,7 +106,7 @@ export class OntarioIconAdd {
 					id: 'add',
 				},
 				h('path', {
-					key: '2c1b905f2903472964a0a32fb593acbfa31bc5a3',
+					key: '05ab294c1a335ac28df203b83b7888afb2d41176',
 					d: 'M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-alert-error.js

@@ -62,14 +62,14 @@ export class OntarioIconAlertError {
 		return h(
 			'div',
 			{
-				key: '7dba3876f7bd739ad221452caab0d267f976fea2',
+				key: '32dddd031eb8d92b8cb59fb0de1f29e86294c53d',
 				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'f9adf80d43dc4c13ccb312d66a08430e596fc244',
+					key: 'f91a3cfd8e568bb6a7abe1d7be225c4acb90613f',
 					class: 'svg-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -78,12 +78,12 @@ export class OntarioIconAlertError {
 					id: 'alert-error',
 				},
 				h('path', {
-					key: '3ccfda378bc3955de567027d207fa501eb4d0e24',
+					key: '4da3c52c3a0bec730e903427602700603fa00281',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z',
 					fill: '#cd0000',
 				}),
 				h('path', {
-					key: '4c1202fb45d7f4fcfebc5a6256b4bf5be8978a0b',
+					key: 'c2fb139f8f739572bdfe30d6cc4ec925192cb57c',
 					d: 'M11 17h2v-2h-2v2zm0-4h2V7h-2v6z',
 					fill: '#fff',
 				}),

package/dist/collection/components/ontario-icon/ontario-icon-alert-information.js

@@ -62,14 +62,14 @@ export class OntarioIconAlertInformation {
 		return h(
 			'div',
 			{
-				key: 'b252b04252da12351597b4fbdc30b3fa0a9e350c',
+				key: 'c3675ed7cdbec588302cda788c9f39326eb395bf',
 				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '87dc578e1bfdd0da9a986635ed326bf9af9baabc',
+					key: 'e38f7392c36781bdf9bf6b70d73b71dfa147ca62',
 					class: 'svg-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -78,12 +78,12 @@ export class OntarioIconAlertInformation {
 					id: 'alert-information',
 				},
 				h('path', {
-					key: '3f391abbed6875da1e4c3cc2cd005997062c485f',
+					key: 'fc46885df7e85b0339a7e2bae2a55b52c023f43f',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
 					fill: '#1080a6',
 				}),
 				h('path', {
-					key: 'a6b344c0b7df27b0bd66ee24fde7b7772f83c8e5',
+					key: '981ef5ed08fd3a90df8561e465fa6e531228dea2',
 					d: 'M11 17h2v-6h-2v6zm0-8h2V7h-2v2z',
 					fill: '#fff',
 				}),

package/dist/collection/components/ontario-icon/ontario-icon-alert-success.js

@@ -62,14 +62,14 @@ export class OntarioIconAlertSuccess {
 		return h(
 			'div',
 			{
-				key: 'ecc8c48a62e66824cac65d1a2f92e47c3ac7f994',
+				key: '4555775fd1afc998fa19ca9363015c3f5f13a78f',
 				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '3020531f6f4a382b468c2a1425926383cfa9a4ce',
+					key: '1c45e63acb87f983a596876e0af83cb8ca98b17e',
 					class: 'svg-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -78,12 +78,12 @@ export class OntarioIconAlertSuccess {
 					id: 'alert-success',
 				},
 				h('path', {
-					key: '06774195b61bb8269c15dfd7f7fa416127200420',
+					key: '97854a5f82264ddba5800e462ae4ab5dcd1008c7',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.4-1.4 3.6 3.58L17.17 7l1.4 1.42L10 17z',
 					fill: '#118847',
 				}),
 				h('path', {
-					key: '601dd049d2d8ae853befb6fae6b7f21031812198',
+					key: 'c6787bbe00231808d3e7e1632b5a4d32f35b8b53',
 					d: 'M5 12l5 5 8.58-8.58L17.17 7 10 14.17 6.4 10.6 5 12z',
 					fill: '#fff',
 				}),

package/dist/collection/components/ontario-icon/ontario-icon-alert-warning.js

@@ -62,14 +62,14 @@ export class OntarioIconAlertWarning {
 		return h(
 			'div',
 			{
-				key: 'b404c1e811b3397c0ceba8dd3c8398bffdd866e5',
+				key: 'a4644b91711938ec26ff6b4237058c5212c13792',
 				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'b212aa62e5a2504f55cef1b29b100499228d7af0',
+					key: 'ee6bf1e9fce0fd1349b01cf1d1e824794d3fe526',
 					class: 'svg-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -78,11 +78,11 @@ export class OntarioIconAlertWarning {
 					id: 'alert-warning',
 				},
 				h('path', {
-					key: 'bcacd77b3120985197212fcc7f89b62f578d7c99',
+					key: '48ef165722eae7e4d483130b094faa3dd6caa2a9',
 					d: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
 					fill: '#ffd440',
 				}),
-				h('path', { key: '7cc6405fa92298d296f713ab6fc376f8adbeadb3', d: 'M11 10h2v4h-2zm0 6h2v2h-2z', fill: '#000' }),
+				h('path', { key: '78954d242f8c5d46b59c8aeab61542cea4ccd143', d: 'M11 10h2v4h-2zm0 6h2v2h-2z', fill: '#000' }),
 			),
 		);
 	}

package/dist/collection/components/ontario-icon/ontario-icon-arrow-up.js

@@ -89,14 +89,14 @@ export class OntarioIconArrowUp {
 		return h(
 			'div',
 			{
-				key: '73af2a2bf8af86550d2e145a262bc24479d3c40c',
+				key: '0232c557c705665a27302603000126eca75f8421',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'b3c226c9404d8182990c10fd0a13d668a6d647f0',
+					key: 'ffbf8c0fab57f6cd868aa3f4dadf57e1c77c680c',
 					class: 'ontario-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -104,9 +104,9 @@ export class OntarioIconArrowUp {
 					fill: '#000000',
 					id: 'arrow-up',
 				},
-				h('path', { key: '19c153c689bdec51b1f7a88a1db6e1a848f444e3', d: 'M0 0h24v24H0V0z', fill: 'none' }),
+				h('path', { key: '75164dcf3113449c084b5d92da8613e4c4219579', d: 'M0 0h24v24H0V0z', fill: 'none' }),
 				h('path', {
-					key: 'bc4a6cc9c4e789481334df22f70116778fa87331',
+					key: '96927c3b31a894995a8ad6b25ed262b0c0def31d',
 					d: 'M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-attach.js

@@ -89,14 +89,14 @@ export class OntarioIconAttach {
 		return h(
 			'div',
 			{
-				key: '9b6d915a57e1024b432a7d63e6b1ff9a42c6e5f1',
+				key: '0f1884be9802d0789b5bfd65fbc0fb33887834a5',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'fa7432a618ffc1928a98eb5b9ada6c2f66ca342b',
+					key: '31d1e9e8929021ccd03b6ca339ec76db3b609193',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -106,7 +106,7 @@ export class OntarioIconAttach {
 					id: 'attach',
 				},
 				h('path', {
-					key: 'cd92986d1ba6e95efe427dac48f25f913eeebb1a',
+					key: '2308197261a915b35e5c36ea3c375d8e366bf35f',
 					d: 'M16.5 6v11.5a4 4 0 1 1-8 0V5a2.5 2.5 0 1 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 1 0 5 0V5a4 4 0 1 0-8 0v12.5a5.5 5.5 0 1 0 11 0V6h-1.5z',
 					fill: '#000',
 				}),