@utahdts/utah-design-system-header 1.2.1 → 1.3.0

package/src/js/renderables/logoTitle/LogoTitle.js

@@ -0,0 +1,63 @@
+// @ts-check
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import LogoTitleWrapper from './html/LogoTitleWrapper.html?raw';
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import LogoTitleWrapperLink from './html/LogoTitleWrapperLink.html?raw';
+
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import valueOrFunctionValue from '../../misc/valueOrFunctionValue';
+import getUtahHeaderSettings from '../../settings/getUtahHeaderSettings';
+
+/**
+ * @returns {Element}
+ */
+export default function LogoTitle() {
+  const logoTitleURL = getUtahHeaderSettings().titleURL;
+  const logoTitleWrapper = !logoTitleURL ? renderDOMSingle(LogoTitleWrapper) : renderDOMSingle(LogoTitleWrapperLink);
+  if (!logoTitleWrapper) {
+    throw new Error('LogoTitle: titleWrapper is null');
+  }
+  if (logoTitleURL) {
+    logoTitleWrapper.setAttribute('href', logoTitleURL);
+  }
+
+  // Render Logo image
+  const logoWrapper = logoTitleWrapper.querySelector(getCssClassSelector(domConstants.TITLE__LOGO));
+  if (!logoWrapper) {
+    throw new Error('LogoTitle: logoWrapper is null');
+  }
+
+  const settingsLogo = getUtahHeaderSettings().logo;
+  const settingsShowTitle = getUtahHeaderSettings().showTitle;
+  const settingsTitle = getUtahHeaderSettings().title;
+  if (settingsLogo) {
+    /** @type {HTMLCollection | Element} */
+    let settingsLogoElement;
+    if (settingsLogo.htmlString) {
+      settingsLogoElement = renderDOMSingle(valueOrFunctionValue(settingsLogo.htmlString));
+    } else if (settingsLogo.element) {
+      settingsLogoElement = valueOrFunctionValue(settingsLogo.element);
+    } else if (settingsLogo.imageUrl) {
+      settingsLogoElement = renderDOMSingle(`<img src=${valueOrFunctionValue(settingsLogo.imageUrl)}  id="design-system-logo" />`);
+    } else {
+      throw new Error('LogoTitle: logo set but has no settings');
+    }
+    settingsLogoElement.setAttribute('role', 'presentation');
+    logoWrapper.appendChild(settingsLogoElement);
+  } else {
+    logoTitleWrapper.removeChild(logoWrapper);
+  }
+
+  // Render Title text
+  const title = document.createTextNode(settingsTitle);
+  const titleWrapper = logoTitleWrapper.querySelector(getCssClassSelector(domConstants.TITLE__TITLE));
+  titleWrapper?.appendChild(title);
+  if (!settingsShowTitle && settingsLogo) {
+    titleWrapper?.classList.add(domConstants.VISUALLY_HIDDEN);
+  }
+
+  return logoTitleWrapper;
+}

package/src/js/renderables/logoTitle/html/LogoTitleWrapper.html

@@ -0,0 +1,4 @@
+<div class="utds-title-wrapper">
+  <div class="utds-title-wrapper__logo"></div>
+  <div class="utds-title-wrapper__title"></div>
+</div>

package/src/js/renderables/logoTitle/html/LogoTitleWrapperLink.html

@@ -0,0 +1,4 @@
+<a class="utds-title-wrapper">
+  <div class="utds-title-wrapper__logo"></div>
+  <div class="utds-title-wrapper__title"></div>
+</a>

package/src/js/renderables/mainMenu/html/MainMenuItem.html

@@ -0,0 +1,13 @@
+<li class="menu-item">
+  <span class="menu-item__title">
+    <button class="menu-item__button-title" type="button">
+      <span class="menu-item__link-title-span"></span>
+      <span class="menu-item__menu-arrow utds-icon-before-chevron-down" aria-hidden="true"></span>
+    </button>
+    <a class="menu-item__link-title">
+      <span class="menu-item__link-title-span"></span>
+      <span class="menu-item__menu-arrow utds-icon-before-chevron-down" aria-hidden="true"></span>
+    </a>
+    <span class="menu-chiclet"></span>
+  </span>
+</li>

package/src/js/renderables/mainMenu/html/MainMenuWrapper.html

@@ -0,0 +1,26 @@
+<div class="utah-design-system main-menu__outer">
+  <div class="main-menu__wrapper">
+    <nav class="horizontal-menu main-menu__nav">
+      <h2 class="main-menu__title visually-hidden"></h2>
+      <ul class="main-menu__menu-top"></ul>
+    </nav>
+    <button type="button" class="button icon-button icon-button--borderless main-menu__search">
+      <div>
+        <span class="utds-icon-before-search" aria-hidden="true"></span>
+        <span class="visually-hidden">search</span>
+      </div>
+    </button>
+    <div class="utds-header-mobile__vip-action-items--left">
+    </div>
+    <div class="utds-header-mobile__utah-id-wrapper">
+    </div>
+    <div class="utds-header-mobile__vip-action-items--right">
+    </div>
+    <button type="button" class="button icon-button icon-button--borderless main-menu__hamburger"
+      id="utds-main-menu__hamburger">
+      <div>
+        <span class="utds-icon-before-hamburger" id="utds-main-menu__hamburger-icon" aria-hidden="true"></span>
+      </div>
+    </button>
+  </div>
+</div>

package/src/js/renderables/mainMenu/renderMainMenu.js

@@ -0,0 +1,258 @@
+// @ts-check
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import MainMenuItem from './html/MainMenuItem.html?raw';
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import MainMenuWrapper from './html/MainMenuWrapper.html?raw';
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import NewTabAccessibility from '../_html/NewTabAccessibility.html?raw';
+
+import childrenMenuTypes from '../../enumerations/childrenMenuTypes';
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import findRecursive from '../../misc/findRecursive';
+import notNull from '../../misc/notNull';
+import popupFocusHandler from '../../misc/popupFocusHandler';
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import uuidv4 from '../../misc/uuidv4';
+import getUtahHeaderSettings from '../../settings/getUtahHeaderSettings';
+import renderPopupMenu from '../popupMenu/renderPopupMenu';
+import showSearchModal from '../search/showSearchModal';
+import hookupTooltip from '../tooltip/hookupTooltip';
+import { renderUtahIdForMobile } from '../utahId/UtahId';
+
+/**
+ * @typedef {import('../../misc/jsDocTypes').PopupMenu} PopupMenu
+ */
+
+/**
+ * @returns {{mainMenuWrapper: HTMLElement, utahIdPopup: HTMLElement | null}}
+ */
+export default function renderMainMenu() {
+  const settings = getUtahHeaderSettings();
+  /** @type {HTMLElement} */
+  const mainMenuWrapper = renderDOMSingle(MainMenuWrapper);
+
+  let mainMenuNav = mainMenuWrapper.querySelector(getCssClassSelector(domConstants.MAIN_MENU__NAV));
+  if (!mainMenuNav) {
+    throw new Error('renderMainMenu(): mainMenu not created');
+  }
+
+  const titleTag = mainMenuNav.querySelector(getCssClassSelector(domConstants.MAIN_MENU__TITLE));
+  if (!titleTag) {
+    throw new Error('renderMainMenu(): titleTag not found');
+  }
+
+  const mainMenuId = 'main-menu__nav';
+  mainMenuNav.setAttribute('aria-labelledby', mainMenuId);
+  titleTag.setAttribute('id', mainMenuId);
+  if (settings.mainMenu) {
+    titleTag.innerHTML = settings.mainMenu.title;
+  } else {
+    mainMenuNav.remove();
+    mainMenuNav = null;
+  }
+
+  if (settings.mainMenu) {
+    const mainMenuTop = mainMenuNav?.querySelector(getCssClassSelector(domConstants.MAIN_MENU__MENU_TOP));
+    if (!mainMenuTop) {
+      throw new Error('renderMainMenu(): mainMenuTop not found');
+    }
+
+    // render top level menu items with popups for their children
+    settings.mainMenu.menuItems.forEach((menuItem) => {
+      const mainMenuItem = renderDOMSingle(MainMenuItem);
+      mainMenuTop.appendChild(mainMenuItem);
+
+      const mainMenuItemTitle = notNull(
+        mainMenuItem.querySelector(getCssClassSelector(domConstants.MENU_ITEM__TITLE)),
+        `renderMainMenu(): sub menu title not found for ${menuItem.title}`
+      );
+
+      const mainMenuItemButtonTitle = notNull(
+        /** @type {HTMLElement} */(
+          mainMenuItemTitle.querySelector(getCssClassSelector(domConstants.MENU_ITEM__BUTTON_TITLE))
+        ),
+        `renderMainMenu(): button title not found for ${menuItem.title}`
+      );
+      mainMenuItemButtonTitle.setAttribute('id', `${domConstants.MENU_ITEM__BUTTON_TITLE}__${menuItem.title}-${uuidv4()}`);
+
+      const mainMenuItemLinkTitle = notNull(
+        /** @type {HTMLElement} */(
+          mainMenuItemTitle.querySelector(getCssClassSelector(domConstants.MENU_ITEM__LINK_TITLE))
+        ),
+        `renderMainMenu(): link title not found for ${menuItem.title}`
+      );
+      mainMenuItemLinkTitle.setAttribute('id', `${domConstants.MENU_ITEM__LINK_TITLE}__${menuItem.title}-${uuidv4()}`);
+
+      let menuItemTitleElement;
+      if (menuItem.actionFunctionUrl || menuItem.actionUrl) {
+        menuItemTitleElement = mainMenuItemLinkTitle;
+        mainMenuItemButtonTitle.remove();
+      } else if (menuItem.actionMenu || menuItem.actionFunction) {
+        menuItemTitleElement = mainMenuItemButtonTitle;
+        mainMenuItemLinkTitle.remove();
+      } else {
+        throw new Error(`renderMainMenu(): menuItem is missing an action: ${menuItem.title}`);
+      }
+      const menuItemTitleSpanElement = notNull(
+        menuItemTitleElement.querySelector(getCssClassSelector(domConstants.MENU_ITEM__LINK_TITLE_SPAN)),
+        `renderMainMenu(): main menu item title span not found for: ${menuItem.title}`
+      );
+
+      // add selected to title if selected (or any children are selected)
+      if (menuItem.isSelected || (menuItem.actionMenu && findRecursive(menuItem.actionMenu, ['actionMenu'], (checkMenuItem) => !!checkMenuItem.isSelected))) {
+        menuItemTitleElement.classList.add(domConstants.MENU_ITEM__SELECTED);
+      }
+
+      if (menuItem.actionMenu) {
+        // render children menu items
+        menuItemTitleSpanElement.innerHTML = menuItem.title;
+
+        /** @type {PopupMenu} */
+        const popupMenu = {
+          menuItems: menuItem.actionMenu,
+          title: menuItem.title,
+        };
+        const subMenuPopup = renderPopupMenu(
+          popupMenu,
+          menuItemTitleElement,
+          {
+            childrenMenuType: menuItem.childrenMenuType || childrenMenuTypes.FLYOUT,
+          }
+        );
+        mainMenuItem.appendChild(subMenuPopup);
+        popupFocusHandler(mainMenuItem, menuItemTitleElement, subMenuPopup, 'menu', { shouldFocusOnHover: true });
+        /** @type {string} */
+        let menuClass;
+        switch (menuItem.childrenMenuType) {
+          case childrenMenuTypes.INLINE:
+            menuClass = domConstants.MENU_ITEM__INLINE;
+            break;
+          case childrenMenuTypes.MEGA_MENU:
+            menuClass = domConstants.MENU_ITEM__MEGA_MENU;
+            break;
+          case childrenMenuTypes.FLYOUT:
+          default:
+            menuClass = domConstants.MENU_ITEM__FLY_OUT;
+            break;
+        }
+        mainMenuItem.classList.add(menuClass);
+      } else {
+        const mainMenuItemArrow = notNull(
+          menuItemTitleElement.querySelector(getCssClassSelector(domConstants.MENU_ITEM__ARROW)),
+          `renderMainMenu(): menu arrow not found for ${menuItem.title}`
+        );
+        mainMenuItemArrow.remove();
+      }
+
+      if (menuItem.actionFunction) {
+        // custom function when triggered
+        menuItemTitleSpanElement.innerHTML = menuItem.title;
+        menuItemTitleElement.onclick = menuItem.actionFunction;
+      } else if (menuItem.actionFunctionUrl) {
+        menuItemTitleSpanElement.innerHTML = menuItem.title;
+        menuItemTitleElement.setAttribute('href', menuItem.actionFunctionUrl.url);
+
+        menuItemTitleElement.onclick = (e) => {
+          if (!menuItem.actionFunctionUrl?.skipHandleEvent) {
+            e.stopPropagation();
+            e.preventDefault();
+          }
+          menuItem.actionFunctionUrl?.actionFunction(e);
+        };
+      } else if (menuItem.actionUrl) {
+        // go to url when triggered
+        menuItemTitleSpanElement.innerHTML = menuItem.title;
+        menuItemTitleElement.setAttribute('href', menuItem.actionUrl.url);
+      }
+
+      if (menuItem.actionUrl?.openInNewTab || menuItem.actionFunctionUrl?.openInNewTab) {
+        menuItemTitleElement.setAttribute('target', '_blank');
+        menuItemTitleElement.appendChild(renderDOMSingle(NewTabAccessibility));
+      }
+    });
+  }
+
+  // ===== UTAH ID ===== //
+  let utahIdPopup = null;
+  if (settings.utahId) {
+    const { button: utahIdButton, menu } = renderUtahIdForMobile();
+    utahIdPopup = menu;
+    const utahIdButtonWrapper = notNull(
+      mainMenuWrapper.querySelector(getCssClassSelector(domConstants.MOBILE__UTAH_ID)),
+      'renderMainMenu: utahIdButtonWrapper not found'
+    );
+    utahIdButtonWrapper.appendChild(utahIdButton);
+  }
+
+  // ===== SEARCH ICON ===== //
+  const searchIcon = notNull(
+    /** @type {HTMLElement} */(
+      mainMenuWrapper.querySelector(getCssClassSelector(domConstants.MAIN_MENU__SEARCH))
+    ),
+    'renderMainMenu: searchIcon not found'
+  );
+  if (settings.onSearch) {
+    hookupTooltip(searchIcon, document.createTextNode('Search'));
+    if (searchIcon.onclick) {
+      throw new Error('searchIcon already has onclick');
+    }
+    searchIcon.onclick = () => showSearchModal();
+
+    if (!settings.mainMenu) {
+      const citizenExperienceWrapper = notNull(
+        document.querySelector(getCssClassSelector(domConstants.CITIZEN_EXPERIENCE)),
+        'renderMainMenu: citizen experience wrapper not found'
+      );
+      // if actions AND search, but not utahId nor menu
+      // Desktop: the search is with the action icons
+      // mobile: the search is on main menu bar with hamburger
+      // so make a copy of the menu bar search so it can be mobile and citizen
+      const mobileSearchIcon = renderDOMSingle(searchIcon.outerHTML);
+      hookupTooltip(mobileSearchIcon, document.createTextNode('Search'));
+      mobileSearchIcon.onclick = () => showSearchModal();
+      searchIcon.classList.add(domConstants.DESKTOP__HIDDEN);
+
+      // search icon is the far right item in the citizen experience (no utahid button)
+      // there is no main menu, so move search in to top header by utahID button UDS-564
+      if (settings.utahId !== false) {
+        // place search icon just to left of utahId button
+        const utahIdWrapper = notNull(document.querySelector(getCssClassSelector(domConstants.UTAH_ID)), 'renderMainMenu: utahId wrapper not found');
+        citizenExperienceWrapper.insertBefore(mobileSearchIcon, utahIdWrapper);
+      } else {
+        citizenExperienceWrapper.appendChild(mobileSearchIcon);
+      }
+    }
+
+    // UDS-564 - move search top top right if no main menu
+    if (!settings.mainMenu && !settings.actionItems && settings.utahId === false) {
+      // create search clone
+      const searchIconMobile = renderDOMSingle(/** @type {HTMLElement} */(searchIcon).outerHTML);
+      // run same hookup stuff above
+      hookupTooltip(searchIconMobile, document.createTextNode('Search'));
+      if (searchIconMobile.onclick) {
+        throw new Error('searchIconMobile already has onclick');
+      }
+      searchIconMobile.onclick = () => showSearchModal();
+
+      // place in mobile citizen experience
+      const citizenExperienceMobile = notNull(
+        document.querySelector(getCssClassSelector(domConstants.CITIZEN_EXPERIENCE_MOBILE)),
+        'renderMainMenu: citizen-experience--mobile not found'
+      );
+      // move search to top right citizen experience because main menu is toast
+      citizenExperienceMobile.appendChild(searchIconMobile);
+    }
+  }
+  if (!settings.onSearch) {
+    if (settings.mainMenu || (!settings.mainMenu && settings.utahId)) {
+      // add a blank div to consume space (only if there is a main menu)
+      searchIcon.parentElement?.insertBefore(renderDOMSingle('<div class="main-menu__search-placeholder">'), searchIcon);
+    }
+    searchIcon.remove();
+  }
+
+  return { mainMenuWrapper, utahIdPopup };
+}

package/src/js/renderables/menu/html/MenuWithTitle.html

@@ -0,0 +1,3 @@
+<div class="vertical-menu__wrapper">
+  <div class="vertical-menu__wrapper-title"></div>
+</div>

package/src/js/renderables/menu/renderMenuWithTitle.js

@@ -0,0 +1,24 @@
+// @ts-check
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import MenuWithTitle from './html/MenuWithTitle.html?raw';
+
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+
+/**
+ * @param {HTMLElement} menu
+ * @param {string} title
+ * @returns {HTMLElement}
+ */
+export default function renderMenuWithTitle(menu, title) {
+  const menuWithTitle = renderDOMSingle(MenuWithTitle);
+  const menuTitleDiv = menuWithTitle.querySelector(getCssClassSelector(domConstants.POPUP_MENU_WRAPPER__WRAPPER_TITLE));
+  if (!menuTitleDiv) {
+    throw new Error('renderMenuWithTitle: menuTitleDiv not found');
+  }
+  menuTitleDiv.appendChild(document.createTextNode(title));
+
+  menuWithTitle.appendChild(menu);
+  return menuWithTitle;
+}

package/src/js/renderables/mobile/addMobileMenuContentItem.js

@@ -0,0 +1,37 @@
+// @ts-check
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import MobileMenuContentItemWrapper from './html/MobileMenuContentItemWrapper.html?raw';
+
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import uuidv4 from '../../misc/uuidv4';
+
+/**
+ * @param {HTMLElement} mobileMenuContentItem
+ * @returns {HTMLElement} the already added element
+ */
+export default function addMobileMenuContentItem(mobileMenuContentItem) {
+  const mobileMenuWrapper = document.querySelector(getCssClassSelector(domConstants.MOBILE_MENU__WRAPPER));
+  if (!mobileMenuWrapper) {
+    throw new Error('addMobileMenuContentItem: mobileMenuWrapper not found');
+  }
+
+  const mobileContentWrapper = mobileMenuWrapper.querySelector(getCssClassSelector(domConstants.MOBILE_MENU__CONTENT));
+  if (!mobileContentWrapper) {
+    throw new Error('addMobileMenuContentItem: mobileContentWrapper not found');
+  }
+
+  // wrap the mobileMenuContentItem in a content_item div
+  const contentItemWrapper = renderDOMSingle(MobileMenuContentItemWrapper);
+
+  // put content in the div
+  contentItemWrapper.appendChild(mobileMenuContentItem);
+
+  // put content_item div in mobile menu content area
+  mobileContentWrapper.appendChild(contentItemWrapper);
+
+  // always have an ID for easier aria hookup
+  contentItemWrapper.setAttribute('id', uuidv4());
+  return contentItemWrapper;
+}

package/src/js/renderables/mobile/hookupHamburger.js

@@ -0,0 +1,112 @@
+// @ts-check
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import checkForError from '../../misc/checkForError';
+import notNull from '../../misc/notNull';
+import getUtahHeaderSettings from '../../settings/getUtahHeaderSettings';
+import renderActionItemBadge from '../actionItems/renderActionItemBadge';
+import { closeOfficialWebsite } from '../utahLogo/renderOfficialWebsite';
+import mobileMenuInteractionHandler from './mobileMenuInteractionHandler';
+import getHamburgerElements from './util/getHamburgerElements';
+import { hideMobileMenu } from './util/showHideHamburgerElements';
+
+/**
+ * @param {HTMLElement} mobileMainMenuContentItem
+ */
+export default function hookupHamburger(mobileMainMenuContentItem) {
+  const { hamburger } = getHamburgerElements('hookupHamburger');
+  const hamburgerNotNull = /** @param {string} context */ (context) => notNull(hamburger, `hookupHamburger: hamburger required but is null: ${context}`);
+
+  const settings = getUtahHeaderSettings();
+  const actionItemHasBadge = settings.actionItems?.some((actionItem) => !!actionItem.badge);
+  if (actionItemHasBadge) {
+    const badge = renderActionItemBadge({ label: 'Home Badge' });
+    if (badge) {
+      hamburgerNotNull('home badge').appendChild(badge);
+    }
+  }
+
+  hideMobileMenu();
+
+  function firstBarActionItem() {
+    const actionItem = notNull(
+      /** @type {HTMLElement} */(document.querySelectorAll(`.${domConstants.MOBILE_MENU__ACTION_BAR} .${domConstants.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER}`)[0]),
+      'hookupHamburger: no action items to select on mobile hamburger open'
+    );
+    const iconButton = actionItem.querySelector('button');
+    const contentWrapperId = iconButton?.getAttribute('aria-controls');
+    return { actionItem, actionItemWrapper: contentWrapperId ? document.getElementById(contentWrapperId) : null };
+  }
+
+  // hookup aria to home menu (can't in mobile menu interaction handler because it maybe removed later)
+  const actionItem = notNull(
+    /** @type {HTMLElement} */(document.querySelectorAll(`.${domConstants.MOBILE_MENU__ACTION_BAR} .${domConstants.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER}`)[0]),
+    'hookupHamburger: no action items to select on mobile hamburger open'
+  );
+  const actionItemButton = actionItem.querySelector?.('button');
+  const actionItemId = (actionItemButton || actionItem).getAttribute('id');
+  if (!actionItemId) {
+    throw new Error('mobileMenuInteractionHandler: actionItemId not found');
+  }
+  if (mobileMainMenuContentItem) {
+    const mobileMainMenuContentItemId = mobileMainMenuContentItem.getAttribute('id');
+    if (!mobileMainMenuContentItemId) {
+      throw new Error('mobileMenuInteractionHandler: mobileMainMenuContentItemId not found');
+    }
+    (actionItemButton || actionItem).setAttribute('aria-controls', mobileMainMenuContentItemId);
+    mobileMainMenuContentItem.setAttribute('aria-labelledby', actionItemId);
+  }
+
+  if (hamburger) {
+    mobileMenuInteractionHandler(
+      hamburger,
+      () => firstBarActionItem().actionItemWrapper,
+      () => firstBarActionItem().actionItem,
+      {
+        additionalOnClick: () => closeOfficialWebsite(),
+        ariaHasPopupType: 'menu',
+        shouldOnClickCloseMenu: true,
+      }
+    );
+  }
+
+  // when hamburger is in an "open" state (mobile menu is open) and the hamburger loses focus (tabbed off of)
+  // then move focus to the first action item in the mobile action item bar. UDS-234
+  if (hamburger) {
+    checkForError(!!hamburger.onblur, 'hookupHamburger: hamburger already has an onblur event');
+    hamburger.onblur = () => {
+      const { mobileMenu } = getHamburgerElements('showMobileMenu');
+      if (mobileMenu.classList.contains(domConstants.IS_OPEN)) {
+        const actionBarClass = getCssClassSelector(domConstants.MOBILE_MENU__ACTION_BAR);
+        const actionItemWrapperClass = getCssClassSelector(domConstants.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER);
+        const actionItemButtonClass = getCssClassSelector(domConstants.ICON_BUTTON);
+        const firstMobileActionItem = (
+          /** @type {HTMLElement | null} */
+          (document.querySelector(`${actionBarClass} ${actionItemWrapperClass}:first-child ${actionItemButtonClass}`))
+        );
+        firstMobileActionItem?.focus();
+      }
+    };
+  }
+
+  // if no bar, move hamburger to mobile citizen experience UDS-564
+  if (((settings.mainMenu || settings.actionItems) && !settings.onSearch && settings.utahId === false)) {
+    const citizenExperienceMobile = notNull(
+      document.querySelector(getCssClassSelector(domConstants.CITIZEN_EXPERIENCE_MOBILE)),
+      'hookupHamburger: citizen experience mobile not found'
+    );
+    citizenExperienceMobile.appendChild(hamburgerNotNull('adding to citizen experience'));
+    const mainMenu = notNull(
+      document.querySelector(getCssClassSelector(domConstants.MAIN_MENU)),
+      'hookupHamburger: main menu not found'
+    );
+    mainMenu.classList.add(domConstants.MOBILE__HIDDEN);
+  }
+
+  if (settings.onSearch && !settings.mainMenu) {
+    const mainMenu = notNull(
+      document.querySelector(getCssClassSelector(domConstants.MAIN_MENU)),
+      'renderMainMenu: main menu not found'
+    );
+    mainMenu.classList.add(domConstants.DESKTOP__HIDDEN);
+  }
+}

package/src/js/renderables/mobile/hookupUtahIdInMobileMenu.js

@@ -0,0 +1,79 @@
+// @ts-check
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import utahIdUrls from '../../enumerations/utahIdUrls';
+import getUtahHeaderSettings from '../../settings/getUtahHeaderSettings';
+import { getCurrentUtahIdData } from '../../utahId/utahIdData';
+import addMobileMenuContentItem from './addMobileMenuContentItem';
+import mobileMenuInteractionHandler from './mobileMenuInteractionHandler';
+
+export function removeUtahIdInMobileMenu() {
+  const profileActionItem = document.getElementById(domConstants.MOBILE_MENU_ACTON_BAR__PROFILE_ID);
+  if (!profileActionItem) {
+    throw new Error('removeUtahIdInMobileMenu: profileActionItem not found');
+  }
+  const profileActionItemWrapper = /** @type {HTMLElement} */ (
+    profileActionItem.closest(getCssClassSelector(domConstants.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER))
+  );
+  if (!profileActionItemWrapper) {
+    throw new Error('removeUtahIdInMobileMenu: profileActionItemWrapper not found');
+  }
+  profileActionItemWrapper.remove();
+}
+
+/**
+ * @param {HTMLElement} mobileMenuWrapper
+ * @param {HTMLElement} utahIdPopup
+ */
+export function hookupUtahIdInMobileMenu(mobileMenuWrapper, utahIdPopup) {
+  // get utahIdButton in the Mobile Menu
+  const utahIdWrapper = document.querySelector(getCssClassSelector(domConstants.MOBILE__UTAH_ID));
+  if (!utahIdWrapper) {
+    throw new Error('hookupUtahIdInMobileMenu: utahIdWrapper not found');
+  }
+  const utahIdButton = /** @type {HTMLElement} */ (utahIdWrapper.querySelector(getCssClassSelector(domConstants.UTAH_ID__BUTTON)));
+  if (!utahIdButton) {
+    throw new Error('hookupUtahIdInMobileMenu: utahIdButton not found');
+  }
+  const mobileContentWrapper = mobileMenuWrapper.querySelector(getCssClassSelector(domConstants.MOBILE_MENU__CONTENT));
+  if (!mobileContentWrapper) {
+    throw new Error('hookupUtahIdInMobileMenu: mobileContentWrapper not found');
+  }
+  const profileActionItem = document.getElementById(domConstants.MOBILE_MENU_ACTON_BAR__PROFILE_ID);
+  if (!profileActionItem) {
+    throw new Error('hookupUtahIdInMobileMenu: profileActionItem not found');
+  }
+  const profileActionItemWrapper = /** @type {HTMLElement} */ (
+    profileActionItem.closest(getCssClassSelector(domConstants.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER))
+  );
+  if (!profileActionItemWrapper) {
+    throw new Error('hookupHamburger: profileActionItemWrapper not found');
+  }
+  // clicking button goes to mobile menu content menu
+  const utahIdPopupContentWrapper = addMobileMenuContentItem(utahIdPopup);
+  mobileMenuInteractionHandler(
+    utahIdButton,
+    utahIdPopupContentWrapper,
+    profileActionItemWrapper,
+    {
+      ariaHasPopupType: 'menu',
+      onClickHandler: (e) => {
+        const currentUtahIdData = getCurrentUtahIdData();
+        const settings = getUtahHeaderSettings();
+        let result = false;
+        if (!currentUtahIdData?.isDefinitive || !currentUtahIdData?.userInfo?.authenticated) {
+          result = true;
+          const onSignIn = (settings.utahId !== false && settings.utahId !== true && settings.utahId?.onSignIn);
+          if (onSignIn) {
+            onSignIn(e);
+          } else {
+            e.preventDefault();
+            e.stopPropagation();
+            window.location.href = utahIdUrls.SIGN_IN;
+          }
+        }
+        return result;
+      },
+      shouldOnClickCloseMenu: true,
+    }
+  );
+}

package/src/js/renderables/mobile/html/MobileMenuContentItemWrapper.html

@@ -0,0 +1,2 @@
+<div class="utds-header-mobile-menu__content-item" role="tabpanel">
+</div>

package/src/js/renderables/mobile/html/MobileMenuWrapper.html

@@ -0,0 +1,32 @@
+<div class="utah-design-system utds-header-mobile-menu" id="utds-header-mobile-menu">
+  <div class="utds-header-mobile-menu__backdrop" aria-hidden></div>
+  <div class="utds-header-mobile-menu__wrapper">
+    <div class="utds-header-mobile-menu__action-bar" role="tablist">
+
+      <div class="utds-header-mobile-menu__action-item" role="tab">
+        <button type="button" class="icon-button icon-button--borderless utds-header-action-item__icon-button icon-home"
+          id="utds-header-mobile-menu_action-bar__home">
+          <div class="utds-header-action-item__title visually-hidden">Main Menu</div>
+          <span class="utds-icon-before-home-menu" aria-hidden="true" role="presentation">
+          </span>
+        </button>
+        <span class="menu-chiclet"></span>
+      </div>
+      <div class="utds-header-mobile-menu__action-item" role="tab">
+        <button type="button"
+          class="icon-button icon-button--borderless utds-header-action-item__icon-button icon-profile"
+          id="utds-header-mobile-menu_action-bar__profile">
+          <div class="utds-header-action-item__title visually-hidden">Profile</div>
+          <span class="utds-icon-before-account" aria-hidden="true" role="presentation">
+          </span>
+        </button>
+        <span class="menu-chiclet"></span>
+      </div>
+
+    </div>
+    <div class="utds-header-mobile-menu__content"> </div>
+    <div aria-hidden tabindex="0" class="utds-header-mobile-menu__hidden-last-focusable visually-hidden">
+      end of mobile content form
+    </div>
+  </div>
+</div>