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

package/src/components/ontario-header/ontario-header.tsx

@@ -1,8 +1,6 @@
-import { Component, Prop, State, Watch, h, Listen, Element } from '@stencil/core';
+import { Component, Prop, State, Watch, Event, EventEmitter, Listen, h, Element } from '@stencil/core';
 
-import { Input } from '../../utils/common/input/input';
 import {
-	MenuItem,
 	ApplicationHeaderInfo,
 	LanguageToggleOptions,
 	OntarioMenuItems,
@@ -16,10 +14,17 @@ import OntarioIconSearchWhite from '../ontario-icon/assets/ontario-icon-search-w
 import OntarioHeaderDefaultData from './ontario-header-default-data.json';
 
 import { Language } from '../../utils/common/language-types';
-import { getImageAssetSrcPath } from '../../utils/helper/assets';
-import { validateLanguage } from '../../utils/validation/validation-functions';
+import { MenuItem } from '../../utils/common/common.interface';
+import { DeviceTypes } from '../../utils/common/common.enum';
+import { isClientSideRendering } from '../../utils/common/environment';
+import { Input } from '../../utils/common/input/input';
+import { generateMenuItem } from '../../utils/components/header/header-menu-items';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import { ConsoleType } from '../../utils/console-message/console-message.enum';
+import { getImageAssetSrcPath } from '../../utils/helper/assets';
+import { determineDeviceType } from '../../utils/helper/utils';
+import { DeviceType } from '../../utils/helper/utils-types';
+import { validateLanguage } from '../../utils/validation/validation-functions';
 
 import translations from '../../translations/global.i18n.json';
 import config from '../../config.json';
@@ -49,10 +54,13 @@ export class OntarioHeader {
 	 *    application-header-info='{
 	 *      "title": "Application name",
 	 *      "href": "/application-homepage",
-	 *      "maxSubheaderDesktopLinks": "3",
-	 *      "maxSubheaderTabletLinks": "2",
-	 *      "maxSubheaderMobileLinks": "1"
-	 *    }'>
+	 *		"maxSubheaderLinks": {
+	 *			"desktop": "3",
+	 *			"tablet": "2",
+	 *			"mobile": "1"
+	 *		}
+	 *    }'
+	 *	>
 	 *  </ontario-header>
 	 */
 	@Prop() applicationHeaderInfo: ApplicationHeaderInfo | string;
@@ -175,22 +183,13 @@ export class OntarioHeader {
 	/**
 	 * Toggler for the menu and the search button
 	 */
-	@State() menuToggle: boolean = false;
+	@State() menuToggled: boolean = false;
 	@State() searchToggle?: boolean = false;
 
-	/**
-	 * Assigning values to elements to use them as ref
-	 */
-	header!: HTMLElement;
-	menuButton!: HTMLElement;
-	menuButtonDesktop!: HTMLElement;
-	menuButtonTablet!: HTMLElement;
-	menuButtonMobile!: HTMLElement;
-	searchBar!: HTMLInputElement;
-	searchButton!: HTMLInputElement;
-
 	@State() translations: any = translations;
 
+	@State() breakpointDeviceState: DeviceType;
+
 	@Watch('applicationHeaderInfo')
 	private parseApplicationHeaderInfo() {
 		const applicationHeaderInfo = this.applicationHeaderInfo;
@@ -280,23 +279,46 @@ export class OntarioHeader {
 		}
 	}
 
+	@Listen('keydown', { target: 'window' })
+	handleKeyDown(event: KeyboardEvent) {
+		if (this.menuToggled && event.key === 'Escape') {
+			this.menuToggled = false;
+			this.menuButtonToggled.emit(this.menuToggled);
+			this.focusMenuButton();
+		}
+	}
+
 	/**
 	 * Logic to close the menu when anything outside the menu is clicked
 	 */
 	@Listen('click', { capture: true, target: 'window' })
 	handleClick(event: any) {
 		// if the button is clicked, return
-		if (
-			event.composedPath().includes(this.menuButton) ||
-			event.composedPath().includes(this.menuButtonDesktop) ||
-			event.composedPath().includes(this.menuButtonTablet) ||
-			event.composedPath().includes(this.menuButtonMobile)
-		) {
+		if (event.composedPath().includes(this.menuButton)) {
 			return;
 		}
 
 		// If the click was outside the current component, do the following
-		if (this.menuToggle) this.menuToggle = !this.menuToggle;
+		if (this.menuToggled) this.menuToggled = !this.menuToggled;
+	}
+
+	/**
+	 * Logic to close the menu when the focus leaves the menu
+	 */
+	@Listen('focusout', { target: 'window' })
+	handleFocusOut(event: FocusEvent) {
+		if (this.menuToggled && !this.el.contains(event.relatedTarget as Node)) {
+			this.menuToggled = false;
+			this.menuButtonToggled.emit(this.menuToggled);
+		}
+	}
+
+	/**
+	 * Logic to set breakpointDeviceState to the appropriate device when the screen resizes
+	 */
+	@Listen('resize', { target: 'window' })
+	handleResize() {
+		this.breakpointDeviceState = isClientSideRendering() ? determineDeviceType() : DeviceTypes.Desktop;
 	}
 
 	/**
@@ -318,11 +340,19 @@ export class OntarioHeader {
 		this.handleSetAppLanguage(event.detail.newLanguage);
 	}
 
+	/**
+	 * This event is toggled when the menu button is pressed.
+	 * The <ontario-header-overflow-menu> sub-component listens for this event
+	 * To trigger the showing and hiding of the overflow menu.
+	 */
+	@Event() menuButtonToggled: EventEmitter<boolean>;
+
 	/**
 	 * Logic to handle the menu toggling
 	 */
-	handleMenuToggle = () => {
-		this.menuToggle = !this.menuToggle;
+	handlemenuToggled = () => {
+		this.menuToggled = !this.menuToggled;
+		this.menuButtonToggled.emit(this.menuToggled);
 		this.searchToggle = undefined;
 	};
 
@@ -345,18 +375,10 @@ export class OntarioHeader {
 	/**
 	 * Logic to make the focus go back to the menu button when the list ends
 	 */
-	trapMenuFocus = (e: any) => {
-		let dataType = e.target?.dataset.type;
-		if (dataType === 'app-desktop') {
-			this.menuButtonDesktop.focus();
-		} else if (dataType === 'app-tablet') {
-			this.menuButtonTablet.focus();
-		} else if (dataType === 'app-mobile') {
-			this.menuButtonMobile.focus();
-		} else {
-			this.menuButton.focus();
-		}
-	};
+	@Listen('endOfMenuReached', { target: 'window' })
+	focusMenuButton() {
+		this.menuButton.focus();
+	}
 
 	/**
 	 * Call to Ontario Menu API to fetch linksets to populate header component
@@ -419,42 +441,6 @@ export class OntarioHeader {
 		return getImageAssetSrcPath(imageName, this.assetBasePath);
 	}
 
-	/**
-	 * This function generates the menu items in a <li>, accordingly, to the given parameters.
-	 *
-	 * href and title are necessary, but rest are not.
-	 *
-	 * @param href - the href of the menu item
-	 * @param title - the title of the menu item
-	 * @param linkIsActive - when set to true, this will add the classes necessary to style the link in a way that indicates to the user what the active page/link is
-	 * @param liClass - if there is a class that is related to the <a> portion of the menu item, put it here
-	 * @param onClick - for any custom onClick event a user might want to add to their menu links
-	 * @param onBlur - when set to true, it will call the function trapMenuFocus(), otherwise nothing is done (used in lastLink)
-	 */
-	private generateMenuItem(
-		href: string,
-		title: string,
-		linkIsActive: boolean | undefined,
-		type: string,
-		liClass?: string,
-		onClick?: any,
-		onBlur?: boolean,
-	) {
-		return (
-			<li class={liClass}>
-				<a
-					class={linkIsActive === true ? `ontario-link--active` : ``}
-					href={href}
-					onClick={onClick}
-					onBlur={onBlur ? this.trapMenuFocus : undefined}
-					data-type={type}
-				>
-					{title}
-				</a>
-			</li>
-		);
-	}
-
 	/**
 	 * This function generates the menu dropdown button for the ontario header component.
 	 *
@@ -467,64 +453,28 @@ export class OntarioHeader {
 
 		return (
 			<button
-				class={
-					viewportSize === 'desktop'
-						? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-show-for-large'
-						: viewportSize === 'tablet'
-							? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-hide-for-small ontario-show-for-medium ontario-hide-for-large'
-							: viewportSize === 'mobile'
-								? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-show-for-small-only'
-								: 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline'
-				}
+				class="ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline"
 				id={this.type === 'ontario' ? 'ontario-header-menu-toggler' : 'ontario-application-header-menu-toggler'}
 				aria-controls="ontario-navigation"
 				aria-label={
-					this.menuToggle
+					this.menuToggled
 						? this.translations.header.closeMenu[`${this.language}`]
 						: this.translations.header.openMenu[`${this.language}`]
 				}
-				onClick={this.handleMenuToggle}
+				aria-expanded={this.menuToggled ? 'true' : 'false'}
+				onClick={this.handlemenuToggled}
 				type="button"
-				ref={
-					viewportSize === 'desktop'
-						? (el) => (this.menuButtonDesktop = el as HTMLInputElement)
-						: viewportSize === 'tablet'
-							? (el) => (this.menuButtonTablet = el as HTMLInputElement)
-							: viewportSize === 'mobile'
-								? (el) => (this.menuButtonMobile = el as HTMLInputElement)
-								: (el) => (this.menuButton = el as HTMLInputElement)
-				}
+				ref={(el) => (this.menuButton = el as HTMLInputElement)}
 			>
-				<span class="ontario-header__icon-container" innerHTML={this.menuToggle ? OntarioIconClose : OntarioIconMenu} />
+				<span
+					class="ontario-header__icon-container"
+					innerHTML={this.menuToggled ? OntarioIconClose : OntarioIconMenu}
+				/>
 				<span>Menu</span>
 			</button>
 		);
 	}
 
-	/**
-	 * A helper function to generate navigation dropdown links with onBlur functionality. This is used for the application header.
-	 *
-	 * @param item - the menu item to be looped over (contains the title and href)
-	 * @param index
-	 * @param links - the number of links associated with the maxSubheader[size]Links in the application header info prop. This will determine how many links should be displayed in the dropdown.
-	 * @param viewportSize - the size of the viewport. It can be set to `desktop`, `tablet` or `mobile`.
-	 * @returns
-	 */
-	private generateNavigationLinks(item: MenuItem, index: number, links: number | undefined, viewportSize: string) {
-		const lastLink =
-			index + 1 === (links ? this.menuItemState.length - links : this.menuItemState.length) ? true : false;
-
-		return this.generateMenuItem(
-			item.href,
-			item.title,
-			item.linkIsActive,
-			viewportSize,
-			'',
-			item.onClickHandler,
-			lastLink,
-		);
-	}
-
 	/**
 	 * The onEscapePressed function clears the searchbar form when Escape is pressed
 	 */
@@ -535,26 +485,27 @@ export class OntarioHeader {
 	}
 
 	private isMenuVisible(viewportSize: string) {
-		const { menuItemState, applicationHeaderInfoState } = this;
-		const { maxSubheaderMobileLinks, maxSubheaderTabletLinks, maxSubheaderDesktopLinks } =
-			applicationHeaderInfoState ?? {};
+		if (this.type !== 'ontario') {
+			const { menuItemState, applicationHeaderInfoState } = this;
+			const { mobile = 0, tablet = 0, desktop = 0 } = applicationHeaderInfoState?.maxSubheaderLinks ?? {};
 
-		const numOfMenuItems = menuItemState?.length ?? 0;
+			const numOfMenuItems = menuItemState?.length ?? 0;
 
-		if (numOfMenuItems <= 0) {
-			return false;
-		}
+			if (numOfMenuItems <= 0) {
+				return false;
+			}
 
-		if (viewportSize === 'mobile') {
-			return numOfMenuItems - (maxSubheaderMobileLinks ?? 0) > 0;
-		}
+			if (viewportSize === DeviceTypes.Mobile) {
+				return numOfMenuItems - mobile > 0;
+			}
 
-		if (viewportSize === 'tablet') {
-			return numOfMenuItems - (maxSubheaderTabletLinks ?? 0) > 0;
-		}
+			if (viewportSize === DeviceTypes.Tablet) {
+				return numOfMenuItems - tablet > 0;
+			}
 
-		if (viewportSize === 'desktop') {
-			return numOfMenuItems - (maxSubheaderDesktopLinks ?? 0) > 0;
+			if (viewportSize === DeviceTypes.Desktop) {
+				return numOfMenuItems - desktop > 0;
+			}
 		}
 
 		return true;
@@ -574,22 +525,29 @@ export class OntarioHeader {
 		if (this.isHydrated && this.disableDynamicMenu === false && this.type === 'ontario') {
 			this.fetchOntarioMenu();
 		}
+		this.handleResize();
 	}
 
 	/**
-	 * Handles the focus when menu/toggle button is clicked.
+	 * Handles the search focus when the search toggle button is clicked.
 	 * When search button is clicked, the search bar is in focus,
 	 * when the closed button is clicked, the search button is back into focus.
-	 * When the menu is closed, the menu button should be out of focus.
 	 */
 	componentDidUpdate() {
 		if (this.type == 'ontario') {
 			if (this.searchToggle === true) this.searchBar.focus();
 			if (this.searchToggle === false) this.searchButton.focus();
-			if (this.menuToggle === false) this.menuButton.blur();
 		}
 	}
 
+	/**
+	 * Assigning values to elements to use them as ref
+	 */
+	header!: HTMLElement;
+	menuButton!: HTMLElement;
+	searchBar!: HTMLInputElement;
+	searchButton!: HTMLInputElement;
+
 	render() {
 		const isServiceOntarioType = this.type === 'serviceOntario';
 
@@ -692,47 +650,10 @@ export class OntarioHeader {
 						</header>
 
 						{/* Ontario header navigation */}
-						<nav
-							role="navigation"
-							class={this.menuToggle ? 'ontario-navigation ontario-navigation--open' : 'ontario-navigation'}
-							id="ontario-navigation"
-						>
-							<div class="ontario-navigation__container">
-								<ul>
-									{/*
-										Maps through all the menu items, and the last item is set to lastLink.
-										When the focus goes away from the lastLink, return the focus to the menu button
-										(only applicable pressing the "tab" key, not actually clicking away from the menu).
-									*/}
-									{this.menuItemState?.map((item, index: number) => {
-										const lastLink = index + 1 === this.menuItemState.length;
-										const activeLinkRegex = item.title.replace(/\s+/g, '-').toLowerCase();
-										const linkIsActive = window.location.pathname.includes(activeLinkRegex);
-										return this.isDynamicMenu
-											? this.generateMenuItem(
-													item.href,
-													item.title,
-													linkIsActive,
-													'ontario-header',
-													'ontario-header-navigation__menu-item',
-													undefined,
-													lastLink,
-												)
-											: this.generateMenuItem(
-													item.href,
-													item.title,
-													item.linkIsActive,
-													'ontario-header',
-													'ontario-header-navigation__menu-item',
-													item.onClickHandler,
-													lastLink,
-												);
-									})}
-								</ul>
-							</div>
-						</nav>
+						{/* Minor styling differences in placement of ontario.ca menu and application menu */}
+						<ontario-header-overflow-menu menuItems={this.menuItemState}></ontario-header-overflow-menu>
 					</div>
-					{this.menuToggle && <div class="ontario-hide-for-large ontario-overlay" />}
+					{this.menuToggled && <div class="ontario-hide-for-large ontario-overlay" />}
 				</div>
 			);
 		} else {
@@ -786,138 +707,34 @@ export class OntarioHeader {
 											</a>
 										)}
 										<div class="ontario-application-subheader__menu-container">
-											{/* Desktop subheader links */}
-											{!!this.applicationHeaderInfoState?.maxSubheaderDesktopLinks && (
-												<ul
-													class={`${
-														isServiceOntarioType
-															? 'ontario-service-subheader__menu'
-															: 'ontario-application-subheader__menu'
-													} ontario-show-for-large`}
-												>
+											{!!this.applicationHeaderInfoState?.maxSubheaderLinks?.[this.breakpointDeviceState] && (
+												<ul class="ontario-application-subheader__menu">
 													{this.menuItemState
-														?.slice(0, this.applicationHeaderInfoState?.maxSubheaderDesktopLinks)
+														?.slice(0, this.applicationHeaderInfoState?.maxSubheaderLinks?.[this.breakpointDeviceState])
 														.map((item) =>
-															this.generateMenuItem(
-																item.href,
-																item.title,
-																item.linkIsActive,
-																'app-desktop',
-																'',
-																item.onClickHandler,
-															),
-														)}
-												</ul>
-											)}
-
-											{/* Tablet subheader links */}
-											{!!this.applicationHeaderInfoState?.maxSubheaderTabletLinks && (
-												<ul class="ontario-application-subheader__menu ontario-hide-for-small ontario-show-for-medium ontario-hide-for-large">
-													{this.menuItemState
-														?.slice(0, this.applicationHeaderInfoState?.maxSubheaderTabletLinks)
-														.map((item) =>
-															this.generateMenuItem(
-																item.href,
-																item.title,
-																item.linkIsActive,
-																'app-tablet',
-																'',
-																item.onClickHandler,
-															),
-														)}
-												</ul>
-											)}
-
-											{/* Mobile subheader links */}
-											{!!this.applicationHeaderInfoState?.maxSubheaderMobileLinks && (
-												<ul class="ontario-application-subheader__menu ontario-show-for-small-only">
-													{this.menuItemState
-														?.slice(0, this.applicationHeaderInfoState.maxSubheaderMobileLinks)
-														.map((item) =>
-															this.generateMenuItem(
-																item.href,
-																item.title,
-																item.linkIsActive,
-																'app-mobile',
-																'',
-																item.onClickHandler,
-															),
+															generateMenuItem(item.href, item.title, item.linkIsActive, '', item.onClickHandler),
 														)}
 												</ul>
 											)}
 
 											{/* Render menu button if menuItemState exists, and if there are items to display in a dropdown menu */}
 											{this.menuItemState !== undefined &&
-												this.applicationHeaderInfoState?.maxSubheaderDesktopLinks !== this.menuItemState.length &&
-												this.renderMenuButton('desktop')}
-
-											{this.menuItemState !== undefined &&
-												this.applicationHeaderInfoState?.maxSubheaderTabletLinks !== this.menuItemState.length &&
-												this.renderMenuButton('tablet')}
-
-											{this.menuItemState !== undefined &&
-												this.applicationHeaderInfoState?.maxSubheaderMobileLinks !== this.menuItemState.length &&
-												this.renderMenuButton('mobile')}
+												this.applicationHeaderInfoState?.maxSubheaderLinks?.[this.breakpointDeviceState] !==
+													this.menuItemState.length &&
+												this.renderMenuButton('')}
 										</div>
 									</div>
 								</div>
 							</section>
-							<nav
-								role="navigation"
-								class={
-									this.menuToggle === true
-										? 'ontario-application-navigation ontario-navigation--open'
-										: 'ontario-application-navigation'
-								}
-								id="ontario-application-navigation"
-							>
-								<div class="ontario-application-navigation__container">
-									{/* Ontario application header desktop menu dropdown links */}
-									<ul class="ontario-show-for-large">
-										{this.menuItemState
-											?.slice(this.applicationHeaderInfoState?.maxSubheaderDesktopLinks, this.menuItemState.length)
-											.map((item: any, index) => {
-												return this.generateNavigationLinks(
-													item,
-													index,
-													this.applicationHeaderInfoState?.maxSubheaderDesktopLinks,
-													'app-desktop',
-												);
-											})}
-									</ul>
-
-									{/* Ontario application header tablet menu dropdown links */}
-									<ul class="ontario-show-for-medium ontario-hide-for-small ontario-hide-for-large">
-										{this.menuItemState
-											?.slice(this.applicationHeaderInfoState?.maxSubheaderTabletLinks, this.menuItemState.length)
-											.map((item, index) => {
-												return this.generateNavigationLinks(
-													item,
-													index,
-													this.applicationHeaderInfoState?.maxSubheaderTabletLinks,
-													'app-tablet',
-												);
-											})}
-									</ul>
-
-									{/* Ontario application header mobile menu dropdown links */}
-									<ul class="ontario-show-for-small-only">
-										{this.menuItemState
-											?.slice(this.applicationHeaderInfoState?.maxSubheaderMobileLinks, this.menuItemState.length)
-											.map((item, index) => {
-												return this.generateNavigationLinks(
-													item,
-													index,
-													this.applicationHeaderInfoState?.maxSubheaderMobileLinks,
-													'app-mobile',
-												);
-											})}
-									</ul>
-								</div>
-							</nav>
+							<ontario-header-overflow-menu
+								menuItems={this.menuItemState?.slice(
+									this.applicationHeaderInfoState?.maxSubheaderLinks?.[this.breakpointDeviceState],
+									this.menuItemState.length,
+								)}
+							></ontario-header-overflow-menu>
 						</div>
 					</div>
-					{this.menuToggle && <div class="ontario-hide-for-large ontario-overlay" />}
+					{this.menuToggled && <div class="ontario-hide-for-large ontario-overlay" />}
 				</div>
 			);
 		}

package/src/components/ontario-header/readme.md

@@ -5,7 +5,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 Use the `ontario` type header for all pages that are part of the main ontario.ca website. This header is mandatory.
 
-Use the `applicaton` type header for applications and subsites outside of the main ontario.ca website.
+Use the `application` type header for applications and subsites outside of the main ontario.ca website.
 
 Use the `serviceOntario` type header for ServiceOntario sites/apps. This type is for use by ServiceOntario teams only.
 
@@ -109,10 +109,12 @@ Example of an Ontario.ca header component.
 		type="application"
 		disable-dynamic-menu="true"
 		application-header-info='{
-		"title": "Driving and roads",
-		"href": "/driving-and-roads",
-		"maxSubheaderDesktopLinks": "3",
-		"maxSubheaderTabletLinks": "1"
+			"title": "Driving and roads",
+			"href": "/driving-and-roads",
+			"maxSubheaderLinks": "{
+				"desktop": "3",
+				"tablet": "1"
+			}"
 		}'
 		language-toggle-options='{
 		"englishLink": "/",
@@ -157,8 +159,12 @@ Example of an Application header component.
 	application-header-info='{
 		"title": "Driving and roads",
 		"href": "/driving-and-roads",
-		"maxSubheaderDesktopLinks": "3",
-		"maxSubheaderTabletLinks": "1"
+		"title": "Driving and roads",
+		"href": "/driving-and-roads",
+		"maxSubheaderLinks": "{
+			"desktop": "3",
+			"tablet": "1"
+		}"
 	}'
 	language-toggle-options='{
 		"englishLink": "/",
@@ -219,7 +225,7 @@ language-toggle-options='{ "englishLink": "/en", "frenchLink": "/fr" }'
 
 For the Ontario.ca header, the menu items will automatically be rendered in a dropdown menu button.
 
-For Application headers, there is a default of a maximum of 5 menu links on desktop and 2 menu links on tablet displayed in the subheader. This logic is handled by the web component based on the total number of menu links passed.
+If `maxSubheaderLinks` is set within `applicationHeaderInfo` on the `ontario-header` component for an `application` type header, some of these links will be dispersed as links within the subheader menu bar relative to the breakpoint and number set.
 
 ```html
 <ontario-header
@@ -261,17 +267,15 @@ For Application headers, there is a default of a maximum of 5 menu links on desk
 Note that this is only required for the Application and ServiceOntario header types.
 
 ```html
-application-header-info='{ "title": "Application name", "href": "/", "maxSubheaderDesktopLinks": "4",
-"maxSubheaderTabletLinks": "2", "maxSubheaderMobileLinks": "1" }'
+application-header-info='{ "title": "Application name", "href": "/", "maxSubheaderLinks": {"desktop": "4", "tablet":
+"2", "mobile": "1"}}'
 ```
 
-| **Property name**          | **Type** | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| -------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string` | The title of the application (this is what will appear as the label for the application sub header title)                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `href`                     | `string` | The URL for the application name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `maxSubheaderDesktopLinks` | `number` | The number of links to appear in the Ontario application type header's subheader on desktop size. This is optional.<br /><br /> These links will display in the order they are described in the `menuItems` prop. For example, if the `maxSubheaderDesktopLinks` number is '4', the first four `menuItems` items will appear in the application subheader on desktop, and the rest will appear in the menu dropdown.<br /><br /> If no dropdown item is needed, the `maxSubheaderDesktopLinks` number should match the `menuItems` items length. |
-| `maxSubheaderTabletLinks`  | `number` | The number of links to appear in the Ontario application type header's subheader on tablet size. This is optional.<br />< br /> These links will display in the order they are described in the `menuItems` prop. For example, if the `maxSubheaderTabletLinks` number is '2', the first two `menuItems` items will appear in the application subheader on tablet, and the rest will appear in the menu dropdown.<br /><br /> If no dropdown item is needed, the `maxSubheaderTabletLinks` number should match the `menuItems` items length.     |
-| `maxSubheaderMobileLinks`  | `number` | The number of links to appear in the Ontario application type header's subheader on mobile size. This is optional.<br /><br /> These links will display in the order they are described in the `menuItems` prop. For example, if the `maxSubheaderMobileLinks` number is '1', the first `menuItems` item will appear in the application subheader on mobile, and the rest will appear in the menu dropdown.<br /><br /> If no dropdown item is needed, the `maxSubheaderMobileLinks` number should match the `menuItems` items length.           |
+| Property name       | Type     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`             | `string` | The title of the application (this is what will appear as the label for the application sub header title)                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `href`              | `string` | The URL for the application name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `maxSubheaderLinks` | `number` | The number of links to appear in the Ontario application type header's subheader. This is optional.<br /><br /> These links will display in the order they are described in the `menuItems` prop. For example, if the `maxSubheaderLinks.desktop` number is '4', the first four `menuItems` items will appear in the application subheader on desktop, and the rest will appear in the menu dropdown.<br /><br /> If no dropdown item is needed, the `maxSubheaderLinks` number should match the `menuItems` items length. |
 
 ## Accessibility
 
@@ -306,17 +310,25 @@ Important considerations:
 | `menuItems`             | `menu-items`              | The items that will go inside the menu.                                                                                                                                                                                                                | `MenuItem[] \| string`                                        | `undefined`     |
 | `type`                  | `type`                    | The type of header.                                                                                                                                                                                                                                    | `"application" \| "ontario" \| "serviceOntario" \| undefined` | `'application'` |
 
+## Events
+
+| Event               | Description                                                                                                                                                                            | Type                   |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| `menuButtonToggled` | This event is toggled when the menu button is pressed. The <ontario-header-overflow-menu> sub-component listens for this event To trigger the showing and hiding of the overflow menu. | `CustomEvent<boolean>` |
+
 ## Dependencies
 
 ### Depends on
 
 - [ontario-language-toggle](../ontario-language-toggle)
+- [ontario-header-overflow-menu](../ontario-header-overflow-menu)
 
 ### Graph
 
 ```mermaid
 graph TD;
   ontario-header --> ontario-language-toggle
+  ontario-header --> ontario-header-overflow-menu
   style ontario-header fill:#f9f,stroke:#333,stroke-width:4px
 ```