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

package/src/js/renderables/actionItems/html/MobileActionItem.html

@@ -0,0 +1,7 @@
+<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">
+    <div class="utds-header-action-item__title visually-hidden"></div>
+    <span aria-hidden="true" role="presentation">
+  </button>
+  <span class="menu-chiclet"></span>
+</div>

package/src/js/renderables/actionItems/renderActionItem.js

@@ -0,0 +1,103 @@
+// @ts-check
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import ActionItemHtml from './html/ActionItem.html?raw';
+
+import childrenMenuTypes from '../../enumerations/childrenMenuTypes';
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import popupFocusHandler from '../../misc/popupFocusHandler';
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import uuidv4 from '../../misc/uuidv4';
+import renderPopup from '../popup/renderPopup';
+import renderPopupMenu from '../popupMenu/renderPopupMenu';
+import hookupTooltip from '../tooltip/hookupTooltip';
+import renderActionItemBadge from './renderActionItemBadge';
+
+/**
+ * @typedef {import('../../misc/jsDocTypes').ActionItem} ActionItem
+ * @typedef {import('../../misc/jsDocTypes').PopupMenu} PopupMenu
+ */
+
+/**
+ * Renders an Action Item for the action bar area.
+ * @param {ActionItem} actionItem - the action item to add
+ * @returns {Element}
+ */
+export default function renderActionItem(actionItem) {
+  const actionItemElement = renderDOMSingle(ActionItemHtml);
+  const titleElement = document.createTextNode(actionItem.title);
+
+  const actionItemWrapper = /** @type {HTMLElement} */(actionItemElement instanceof HTMLCollection ? actionItemElement[0] : actionItemElement);
+  if (actionItem.showTitle) {
+    actionItemWrapper.classList.add(domConstants.ACTION_ITEM__ICON_BUTTON_TITLE);
+  }
+
+  const titleDiv = actionItemWrapper.querySelector(getCssClassSelector(domConstants.ACTION_ITEM__TITLE));
+  if (!titleDiv) {
+    throw new Error('renderActionItem: titleDiv not found');
+  }
+  titleDiv.appendChild(titleElement);
+  if (actionItem.showTitle) {
+    titleDiv.classList.remove(domConstants.VISUALLY_HIDDEN);
+  } else {
+    titleDiv.classList.add(domConstants.VISUALLY_HIDDEN);
+  }
+
+  const iconButton = actionItemElement.querySelector(getCssClassSelector(domConstants.ACTION_ITEM__ICON_BUTTON));
+  if (!iconButton) {
+    throw new Error('renderActionItem: iconButton not found');
+  }
+  if (actionItem.className) {
+    iconButton.classList.add(actionItem.className);
+  }
+
+  const badge = renderActionItemBadge(actionItem.badge);
+  if (badge) {
+    iconButton.appendChild(badge);
+  }
+
+  const actionItemIcon = renderDOMSingle(actionItem.icon);
+  actionItemIcon.setAttribute('role', 'presentation');
+  iconButton.appendChild(actionItemIcon);
+
+  if (!(iconButton instanceof HTMLElement)) {
+    throw new Error('renderActionItem: iconButton is not an HTMLElement');
+  }
+
+  if (actionItem.actionFunction) {
+    iconButton.onclick = actionItem.actionFunction;
+  } else if (actionItem.actionDom) {
+    // create popup content and make it visually-hidden
+    const iconButtonId = uuidv4();
+    iconButton.setAttribute('id', iconButtonId);
+
+    const popupWrapper = renderPopup(iconButton);
+    const popupContentWrapper = /** @type {HTMLElement} */(popupWrapper.querySelector(getCssClassSelector(domConstants.POPUP_CONTENT_WRAPPER)));
+    if (!popupContentWrapper) {
+      throw new Error('renderPopupMenu: contentWrapper not found');
+    }
+    popupContentWrapper.appendChild(renderDOMSingle(typeof actionItem.actionDom === 'function' ? actionItem.actionDom() : actionItem.actionDom));
+    actionItemElement.appendChild(popupWrapper);
+    popupFocusHandler(actionItemWrapper, iconButton, popupWrapper, 'dialog', undefined);
+  } else if (actionItem.actionPopupMenu) {
+    // content is a menu
+    const iconButtonId = uuidv4();
+    iconButton.setAttribute('id', iconButtonId);
+    const popupMenu = renderPopupMenu(
+      (/** @type {PopupMenu} */ (actionItem.actionPopupMenu)),
+      iconButton,
+      { childrenMenuType: childrenMenuTypes.INLINE }
+    );
+    actionItemElement.appendChild(popupMenu);
+
+    popupFocusHandler(actionItemWrapper, iconButton, popupMenu, 'menu', undefined);
+  } else {
+    // eslint-disable-next-line no-console
+    console.error(actionItem);
+    throw new Error('Action Item: no defined action; must have either actionFunction, actionDom, or actionPopupMenu');
+  }
+
+  hookupTooltip(actionItemElement, document.createTextNode(actionItem.title));
+
+  return actionItemElement;
+}

package/src/js/renderables/actionItems/renderActionItemBadge.js

@@ -0,0 +1,50 @@
+// @ts-check
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import renderDOMSingle from '../../misc/renderDOMSingle';
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import BadgeWrapperHtml from './html/BadgeWrapperHtml.html?raw';
+
+/**
+ * @typedef {import('../../misc/jsDocTypes').Badge} Badge
+ */
+
+/**
+ * renders a badge on an action item
+ * @param {Badge | undefined} badge - the action's badge information
+ * @return {HTMLElement | null}
+ */
+export default function renderActionItemBadge(badge) {
+  let badgeWrapper = null;
+  if (badge) {
+    /** @type HTMLElement */
+    badgeWrapper = /** @type {HTMLElement} */(renderDOMSingle(BadgeWrapperHtml));
+    badgeWrapper.classList.add(domConstants.BADGE_WRAPPER__ACTION_ITEM);
+
+    // add badge label to badge
+    const badgeLabel = badgeWrapper.querySelector(getCssClassSelector(domConstants.BADGE__LABEL));
+    if (!badgeLabel) {
+      throw new Error('renderActionItemBadge: badgeLabel not found');
+    }
+    badgeLabel.appendChild(document.createTextNode(badge.label));
+
+    // show value in badge if there is one
+    if ((badge.value || badge.value === 0)) {
+      const badgeValue = badgeWrapper.querySelector(getCssClassSelector(domConstants.BADGE__VALUE));
+      if (!badgeValue) {
+        throw new Error('renderActionItemBadge: badgeValue not found');
+      }
+      badgeValue.appendChild(document.createTextNode(`${badge.value}`));
+    } else {
+      // no value so make it smaller
+      badgeWrapper.classList.add(domConstants.BADGE_WRAPPER__SMALL);
+    }
+
+    // apply class name
+    if (badge.className) {
+      badgeWrapper.classList.add(badge.className);
+    }
+  }
+
+  return badgeWrapper;
+}

package/src/js/renderables/actionItems/renderMobileActionItem.js

@@ -0,0 +1,97 @@
+// @ts-check
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import MobileActionItemHtml from './html/MobileActionItem.html?raw';
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import ActionItemMenuContentHtml from './html/ActionItemMenuContent.html?raw';
+
+import childrenMenuTypes from '../../enumerations/childrenMenuTypes';
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import uuidv4 from '../../misc/uuidv4';
+import { renderMenu } from '../popupMenu/renderPopupMenu';
+import renderActionItemBadge from './renderActionItemBadge';
+
+/**
+ * @typedef {import('../../misc/jsDocTypes').ActionItem} ActionItem
+ * @typedef {import('../../misc/jsDocTypes').PopupMenu} PopupMenu
+ */
+
+/**
+ * Renders an Action Item for the action bar area.
+ * @param {ActionItem} actionItem - the action item to add
+ * @returns {{actionItemElement: HTMLElement, actionItemContent: HTMLElement | null}}
+ */
+export default function renderMobileActionItem(actionItem) {
+  const actionItemElement = renderDOMSingle(MobileActionItemHtml);
+  if (!actionItemElement.getAttribute('id')) {
+    actionItemElement.setAttribute('id', uuidv4());
+  }
+  const titleElement = document.createTextNode(actionItem.title);
+
+  const actionItemWrapper = /** @type {HTMLElement} */(actionItemElement instanceof HTMLCollection ? actionItemElement[0] : actionItemElement);
+  if (actionItem.showTitle) {
+    actionItemWrapper.classList.add(domConstants.ACTION_ITEM__ICON_BUTTON_TITLE);
+  }
+  actionItemWrapper.classList.add(domConstants.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER);
+  actionItemWrapper.classList.remove(domConstants.ACTION_ITEM);
+
+  const titleDiv = actionItemWrapper.querySelector(getCssClassSelector(domConstants.ACTION_ITEM__TITLE));
+  if (!titleDiv) {
+    throw new Error('renderActionItem: titleDiv not found');
+  }
+  titleDiv.appendChild(titleElement);
+  if (actionItem.showTitle) {
+    titleDiv.classList.remove(domConstants.VISUALLY_HIDDEN);
+  } else {
+    titleDiv.classList.add(domConstants.VISUALLY_HIDDEN);
+  }
+
+  const iconButton = /** @type {HTMLElement} */ (actionItemElement.querySelector(getCssClassSelector(domConstants.ACTION_ITEM__ICON_BUTTON)));
+  if (!iconButton) {
+    throw new Error('renderActionItem: iconButton not found');
+  }
+  if (actionItem.className) {
+    iconButton.classList.add(actionItem.className);
+  }
+
+  const badge = renderActionItemBadge(actionItem.badge);
+  if (badge) {
+    iconButton.appendChild(badge);
+  }
+
+  const actionItemIcon = renderDOMSingle(actionItem.icon);
+  actionItemIcon.setAttribute('role', 'presentation');
+  iconButton.appendChild(actionItemIcon);
+
+  /** @type {HTMLElement | null} */
+  let actionItemContent = null;
+  if (actionItem.actionFunction) {
+    iconButton.onclick = actionItem.actionFunction;
+  } else if (actionItem.actionDom) {
+    const iconButtonId = uuidv4();
+    iconButton.setAttribute('id', iconButtonId);
+    actionItemContent = renderDOMSingle(typeof actionItem.actionDom === 'function' ? actionItem.actionDom() : actionItem.actionDom);
+  } else if (actionItem.actionPopupMenu) {
+    // content is a menu
+    const iconButtonId = uuidv4();
+    iconButton.setAttribute('id', iconButtonId);
+
+    actionItemContent = renderDOMSingle(ActionItemMenuContentHtml);
+    const actionItemContentTitle = actionItemContent.querySelector(getCssClassSelector(domConstants.POPUP_MENU_WRAPPER__WRAPPER_TITLE));
+    if (!actionItemContentTitle) {
+      throw new Error('renderMobileActionItem: actionItemContentTitle not found');
+    }
+    actionItemContentTitle.appendChild(document.createTextNode(actionItem.actionPopupMenu.title));
+
+    const actionItemMenu = renderMenu(actionItem.actionPopupMenu.menuItems, { childrenMenuType: childrenMenuTypes.INLINE });
+    actionItemContent.appendChild(actionItemMenu);
+  } else {
+    // eslint-disable-next-line no-console
+    console.error(actionItem);
+    throw new Error('Action Item: no defined action; must have either actionFunction, actionDom, or actionPopupMenu');
+  }
+
+  return { actionItemElement, actionItemContent };
+}

package/src/js/renderables/actionItems/renderMobileActionItems.js

@@ -0,0 +1,83 @@
+// @ts-check
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import getUtahHeaderSettings from '../../settings/getUtahHeaderSettings';
+import addMobileMenuContentItem from '../mobile/addMobileMenuContentItem';
+import mobileMenuInteractionHandler from '../mobile/mobileMenuInteractionHandler';
+import renderMobileActionItem from './renderMobileActionItem';
+
+/**
+ * @typedef {import('../../misc/jsDocTypes').ActionItem} ActionItem
+ * @typedef {import('../../misc/jsDocTypes').AriaHasPopupType} AriaHasPopupType
+*/
+
+export default function renderMobileActionItems() {
+  const homeActionItem = document.getElementById(domConstants.MOBILE_MENU_ACTON_BAR__HOME_ID);
+  if (!homeActionItem) {
+    throw new Error('renderMobileActionItems: homeActionItem not found');
+  }
+  const homeActionItemWrapper = (
+    /** @type {HTMLElement} */ (homeActionItem.closest(getCssClassSelector(domConstants.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER)))
+  );
+  if (!homeActionItemWrapper) {
+    throw new Error('renderMobileActionItems: homeActionItemWrapper not found');
+  }
+  const hasUtahId = !!getUtahHeaderSettings().utahId;
+  const profileActionItem = hasUtahId ? document.getElementById(domConstants.MOBILE_MENU_ACTON_BAR__PROFILE_ID) : null;
+  const profileActionItemWrapper = (
+    /** @type {HTMLElement} */ (profileActionItem?.closest?.(getCssClassSelector(domConstants.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER)))
+  );
+
+  [...(getUtahHeaderSettings().actionItems || [])]
+    ?.reverse()
+    ?.map((actionItemToRender) => ({ actionItem: actionItemToRender, ...renderMobileActionItem(actionItemToRender) }))
+    ?.forEach(({ actionItem, actionItemContent, actionItemElement }) => {
+      /** @type {HTMLElement | null} */
+      let actionItemsWrapper;
+      switch (actionItem.mobileMenuLocation) {
+        case 'left':
+          actionItemsWrapper = homeActionItemWrapper;
+          break;
+
+        case 'none':
+          actionItemsWrapper = null;
+          break;
+
+        case 'right':
+        default:
+          // if right, but no admin button, just put on left with the rest of them (there is no right/left)
+          // default to right if not specified
+          actionItemsWrapper = profileActionItemWrapper || homeActionItemWrapper;
+          break;
+      }
+      if (actionItemsWrapper) {
+        actionItemsWrapper.after(actionItemElement);
+
+        // render content item and hook up exposing it
+        if (actionItemContent) {
+          const mobileContentItem = addMobileMenuContentItem(actionItemContent);
+
+          /** @type {AriaHasPopupType | null} */
+          let ariaHasPopupType = null;
+          if (actionItem.actionDom) {
+            ariaHasPopupType = 'dialog';
+          } else if (actionItem.actionPopupMenu) {
+            ariaHasPopupType = 'menu';
+          }
+
+          mobileMenuInteractionHandler(
+            actionItemElement,
+            mobileContentItem,
+            actionItemElement,
+            { ariaHasPopupType, shouldOnClickCloseMenu: false }
+          );
+        }
+      }
+    });
+
+  // no menu, no item. EOL.
+  const settings = getUtahHeaderSettings();
+  if (!settings.mainMenu) {
+    homeActionItem.remove();
+    homeActionItemWrapper.remove();
+  }
+}

package/src/js/renderables/citizenExperience/CitizenExperience.js

@@ -0,0 +1,24 @@
+// @ts-check
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import CitizenExperienceWrapper from './html/CitizenExperienceWrapper.html?raw';
+
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import getUtahHeaderSettings from '../../settings/getUtahHeaderSettings';
+import ActionItems from '../actionItems/ActionItems';
+import { renderUtahIdForDesktop } from '../utahId/UtahId';
+
+export default function CitizenExperience() {
+  const citizenExperienceWrapper = renderDOMSingle(CitizenExperienceWrapper);
+
+  const actionItems = ActionItems();
+  if (actionItems) {
+    citizenExperienceWrapper.appendChild(actionItems);
+  }
+
+  if (getUtahHeaderSettings().utahId !== false) {
+    citizenExperienceWrapper.appendChild(renderUtahIdForDesktop());
+  }
+
+  return citizenExperienceWrapper;
+}

package/src/js/renderables/citizenExperience/html/CitizenExperienceWrapper.html

@@ -0,0 +1 @@
+<div class="utds-citizen-experience-wrapper"></div>

package/src/js/renderables/citizenExperience/html/CitizenExperienceWrapperMobile.html

@@ -0,0 +1 @@
+<div class="utds-citizen-experience-wrapper--mobile"></div>

package/src/js/renderables/footer/html/Footer.html

@@ -0,0 +1,41 @@
+<div class="utds-footer utah-design-system">
+  <div class="utds-footer__horizontal-divider">
+    <hr />
+  </div>
+  <div class="utds-footer__utah-logo-wrapper">
+    <div class="utah-logo-svg" id="utah-logo-svg">
+      <svg viewBox="0 0 107 30.51" role="img">
+        <g>
+          <path
+            d="m12.44,30.51c-4.21,0-7.33-1.22-9.38-3.66C1.02,24.4,0,20.61,0,15.48V0h7.93v16.4c0,2.67.36,4.55,1.08,5.65.77,1.12,2.08,1.74,3.43,1.64,1.36.1,2.68-.52,3.48-1.63.75-1.09,1.13-2.97,1.13-5.65V0h7.65v15.48c0,5.13-1,8.92-3,11.36-2,2.44-5.09,3.66-9.26,3.66Zm24.42-.56V6.64h-7.93V0h23.78v6.64h-7.93v23.31h-7.92Zm26.17-14.56l-.51,2.07h5.53l-.51-2.07c-.37-1.44-.74-3.01-1.11-4.7-.37-1.69-.74-3.29-1.11-4.79h-.18c-.34,1.53-.68,3.14-1.04,4.82-.35,1.68-.71,3.24-1.08,4.68Zm-11.52,14.56L60.64,0h9.58l9.12,29.95h-8.39l-1.48-6.36h-8.38l-1.47,6.36h-8.11Zm30.69,0V0h7.93v11.15h8.94V0h7.93v29.95h-7.93v-11.89h-8.94v11.89h-7.93Z" />
+        </g>
+      </svg>
+    </div>
+    <div class="utds-footer__vertical-divider" role="separator" aria-orientation="vertical"></div>
+    <div class="utds-footer__official-site-wrapper">
+      <div class="utds-footer__official-site">An official website of the <span class="whitespace-no-wrap">State of
+          Utah</span></div>
+      <div class="utds-footer__copyright">©2023 State of Utah</div>
+    </div>
+  </div>
+  <div class="utds-footer__links">
+    <ul>
+      <li>
+        <a href="https://www.utah.gov/index.html" target="__blank" rel="noreferrer">Utah.gov Home</a>
+      </li>
+      <li>
+        <a href="https://www.utah.gov/support/disclaimer.html" target="__blank" rel="noreferrer">Terms of Use</a>
+      </li>
+      <li>
+        <a href="https://www.utah.gov/support/privacypolicy.html" target="__blank" rel="noreferrer">Privacy
+          Policy</a>
+      </li>
+      <li>
+        <a href="https://www.utah.gov/support/accessibility.html" target="__blank" rel="noreferrer">Accessibility</a>
+      </li>
+      <li>
+        <a href="https://www.utah.gov/support/translate.html" target="__blank" rel="noreferrer">Translate</a>
+      </li>
+    </ul>
+  </div>
+</div>

package/src/js/renderables/footer/renderFooter.js

@@ -0,0 +1,111 @@
+// @ts-check
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import footerHTML from './html/Footer.html?raw';
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import newTabAccessibilityHTML from '../_html/NewTabAccessibility.html?raw';
+
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import checkForError from '../../misc/checkForError';
+import notNull from '../../misc/notNull';
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import getUtahHeaderSettings from '../../settings/getUtahHeaderSettings';
+
+/** @typedef {import('../../misc/jsDocTypes').DomLocationTarget} DomLocationTarget */
+/** @typedef {import('../../misc/jsDocTypes').Settings} Settings */
+
+/**
+ * track last known settings for future comparison to see if something changed
+ * make sure that shallow copying doesn't allow changing things outside of this function that
+ * then change this "previous" data making it seem like a change did not occur.
+ * @type {{domLocationTarget: DomLocationTarget, showHorizontalRule: boolean | undefined}}
+ */
+const previousFooterSettings = {
+  domLocationTarget: {
+    cssSelector: undefined,
+    element: undefined,
+    elementFunction: undefined,
+  },
+  showHorizontalRule: false,
+};
+
+/**
+ * @returns {Element | null}
+ */
+export default function renderFooter() {
+  const settings = getUtahHeaderSettings();
+  const previousFooter = document.querySelector(getCssClassSelector(domConstants.FOOTER));
+  let footer = previousFooter;
+
+  if (settings.footer === null) {
+    previousFooter?.remove();
+  } else {
+    const settingsChanged = (
+      previousFooterSettings.domLocationTarget.cssSelector !== settings?.footer?.domLocationTarget?.cssSelector
+      || previousFooterSettings.domLocationTarget.element !== settings?.footer?.domLocationTarget?.element
+      || previousFooterSettings.domLocationTarget.elementFunction !== settings?.footer?.domLocationTarget?.elementFunction
+      || previousFooterSettings.showHorizontalRule !== settings?.footer?.showHorizontalRule
+    );
+
+    if (settingsChanged || !previousFooter) {
+      // kill old footer
+      if (previousFooter) {
+        previousFooter.remove();
+      }
+
+      // render footer in domLocationTarget (default body)
+      footer = renderDOMSingle(footerHTML);
+      /** @type {HTMLElement | null} */
+      let domTarget = document.body;
+      if (settings?.footer?.domLocationTarget) {
+        const targets = (
+          [
+            settings?.footer?.domLocationTarget.cssSelector,
+            settings?.footer?.domLocationTarget.element,
+            settings?.footer?.domLocationTarget.elementFunction,
+          ]
+            .filter((setting) => setting)
+        );
+        checkForError(targets.length < 1, 'renderFooter: footer.domLocationTarget must either have a value for one of its properties or not be specified at all');
+        checkForError(targets.length > 1, 'renderFooter: footer.domLocationTarget must only have one target specified');
+
+        if (settings?.footer?.domLocationTarget.cssSelector) {
+          domTarget = document.querySelector(settings?.footer?.domLocationTarget.cssSelector);
+          checkForError(!domTarget, `renderFooter: element not found for domLocationTarget.cssSelector ${settings?.footer?.domLocationTarget.cssSelector}`);
+        } else if (settings?.footer?.domLocationTarget.element) {
+          domTarget = settings?.footer?.domLocationTarget.element;
+        } else if (settings?.footer?.domLocationTarget.elementFunction) {
+          domTarget = settings?.footer?.domLocationTarget.elementFunction();
+          checkForError(!domTarget, 'renderFooter: element not returned from domLocationTarget.elementFunction');
+        } else {
+          throw new Error('renderFooter: domLocationTarget must have at least one field set');
+        }
+      }
+      domTarget?.appendChild(footer);
+
+      // remove horizontal rule if not wanted
+      if (!settings?.footer?.showHorizontalRule) {
+        const footerHr = document.querySelector(getCssClassSelector(domConstants.FOOTER_HORIZONTAL_DIVIDER));
+        checkForError(!footerHr, 'renderFooter: cannot remove horizontal rule; not found');
+        footerHr?.remove();
+      }
+
+      // make links external links
+      const footerLinks = notNull(document.querySelector(getCssClassSelector(domConstants.FOOTER_LINKS)), 'renderFooter: footer links not found');
+      const lis = footerLinks.querySelectorAll('a');
+      lis.forEach((link) => {
+        link.appendChild(renderDOMSingle(newTabAccessibilityHTML));
+      });
+
+      // make a copy for future comparison
+      // this is not a shallow copy of the settings, so that external changes don't update internal values
+      previousFooterSettings.domLocationTarget.cssSelector = settings?.footer?.domLocationTarget?.cssSelector;
+      previousFooterSettings.domLocationTarget.element = settings?.footer?.domLocationTarget?.element;
+      previousFooterSettings.domLocationTarget.elementFunction = settings?.footer?.domLocationTarget?.elementFunction;
+      previousFooterSettings.showHorizontalRule = settings?.footer?.showHorizontalRule;
+    }
+  }
+
+  return footer;
+}

package/src/js/renderables/headerWrapper/HeaderWrapper.js

@@ -0,0 +1,46 @@
+// @ts-check
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import CitizenExperienceWrapperMobile from '../citizenExperience/html/CitizenExperienceWrapperMobile.html?raw';
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import headerLogoWrapper from './html/HeaderLogoWrapper.html?raw';
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import headerWrapper from './html/HeaderWrapper.html?raw';
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import verticalLineHtml from './html/VerticalLine.html?raw';
+
+import sizes from '../../enumerations/sizes';
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import getUtahHeaderSettings from '../../settings/getUtahHeaderSettings';
+import CitizenExperience from '../citizenExperience/CitizenExperience';
+import LogoTitle from '../logoTitle/LogoTitle';
+import UtahLogo from '../utahLogo/UtahLogo';
+
+/**
+ * Creates the header wrapper DOM and appends the:
+ * Utah logo, flexible space, Agency Logo, and citizen experience (action items, utah id button) to it.
+ *
+ * @returns {Element}
+ */
+export default function HeaderWrapper() {
+  const header = renderDOMSingle(headerWrapper);
+
+  header.classList.add(`utds-header--${getUtahHeaderSettings().size?.toLowerCase() || sizes.MEDIUM}`);
+
+  const logoWrapper = renderDOMSingle(headerLogoWrapper);
+  header.appendChild(logoWrapper);
+
+  logoWrapper.appendChild(UtahLogo());
+
+  logoWrapper.appendChild(renderDOMSingle(verticalLineHtml));
+
+  logoWrapper.appendChild(LogoTitle());
+
+  header.appendChild(CitizenExperience());
+  header.appendChild(renderDOMSingle(CitizenExperienceWrapperMobile));
+
+  return header;
+}

package/src/js/renderables/headerWrapper/html/HeaderLogoWrapper.html

@@ -0,0 +1 @@
+<h1 class="utds-logo-wrapper"></h1>

package/src/js/renderables/headerWrapper/html/HeaderWrapper.html

@@ -0,0 +1 @@
+<header class="utah-design-system utds-header" aria-label="Utah.gov Header"></header>

package/src/js/renderables/headerWrapper/html/VerticalLine.html

@@ -0,0 +1 @@
+<span class="utds-logo-vert-line"></span>

package/src/js/renderables/icons/html/AlertIcon.html

@@ -0,0 +1 @@
+<span class="utds-icon-before-alert" aria-hidden="true" />

package/src/js/renderables/icons/html/ChevronIcon.html

@@ -0,0 +1 @@
+<span class="utds-icon-before-chevron-right vertical-menu__chevron" aria-hidden="true"></span>

package/src/js/renderables/icons/html/ExternalLinkIcon.html

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.1143 18.1138">
+  <g>
+    <path d="m15.0996,18.1138H1c-.5527,0-1-.4478-1-1V3.0142c0-.5522.4473-1,1-1h7.043v2H2v12.0996h12.0996v-6.043h2v7.043c0,.5522-.4473,1-1,1Z"/>
+    <rect x="6.5977" y="4.5318" width="11.9697" height="1.9998" transform="translate(-.2262 10.5174) rotate(-45)"/>
+    <polygon points="18.1143 8.0425 16.1143 8.0425 16.1143 2 10.0713 2 10.0713 0 18.1143 0 18.1143 8.0425"/>
+  </g>
+</svg>

package/src/js/renderables/icons/html/GearIcon.html

@@ -0,0 +1 @@
+<span class="utds-icon-before-gear" aria-hidden="true" />

package/src/js/renderables/icons/html/QuestionIcon.html

@@ -0,0 +1 @@
+<span class="utds-icon-before-help" aria-hidden="true" />

package/src/js/renderables/icons/html/WaffleIcon.html

@@ -0,0 +1 @@
+<span class="utds-icon-before-waffle" aria-hidden="true" />