@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/composite/navigation/header.js

@@ -0,0 +1,322 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const icons = require("../../utilities/assets/icons.js");
+const index = require("../../utilities/theme/index.js");
+const index$2 = require("./elements/menu-button/index.js");
+const index$1 = require("./elements/item/index.js");
+const ANIMATION_TIME = 500;
+const ATTRIBUTE_STICKY = "data-sticky";
+const ATTRIBUTE_CTA = "data-cta";
+const IS_STICKY = `[${ATTRIBUTE_STICKY}="true"]`;
+const IS_CTA = `[${ATTRIBUTE_CTA}="true"]`;
+const ELEMENT_HEADER_DECLARATION = "element-header-declaration";
+const ELEMENT_HEADER_CONTAINTER = "element-header-container";
+const ELEMENT_HEADER_WRAPPER = "element-header-wrapper";
+const ELEMENT_HEADER_LOGO_COLUMN = "element-header-logo-column";
+const ELEMENT_HEADER_NAVIGATION_COLUMN = "element-header-navigation-column";
+const ELEMENT_HEADER_LOGO = "element-header-logo";
+const ELEMENT_HEADER_MENU_BUTTON = "element-header-menu-button";
+const ELEMENT_HEADER_MENU_CTA = "element-header-menu-cta";
+const ELEMENT_HEADER_MENU_SEARCH = "element-header-menu-search";
+const ELEMENT_HEADER_NAVIGATION_ROW = "element-header-navigation-row";
+const ELEMENT_HEADER_UTILITY_ROW = "element-header-utility-row";
+const OVERWRITE_STICKY_CONTAINER = `.${ELEMENT_HEADER_CONTAINTER}${IS_STICKY}`;
+const OVERWRITE_STICKY_LOGO = `${OVERWRITE_STICKY_CONTAINER} .${ELEMENT_HEADER_LOGO}`;
+const OVERWRITE_CTA_WRAPPER = `.${ELEMENT_HEADER_WRAPPER}${IS_CTA}`;
+const OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_NAVIGATION_ROW}`;
+const OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;
+const OverwriteStickyStyles = `
+  ${OVERWRITE_STICKY_CONTAINER} {
+    padding: ${Styles.token.spacing.xs} 0;
+  }
+
+  .${ELEMENT_HEADER_WRAPPER} {
+     align-items: center;
+  }
+
+  ${OVERWRITE_STICKY_LOGO} img {
+    max-height: 30px;
+  }
+`;
+const CtaStyles = `
+  .${ELEMENT_HEADER_MENU_CTA} {
+    color: ${Styles.token.color.white};
+    font-weight: ${Styles.token.font.weight.bold};
+    font-size: ${Styles.token.font.size.sm};
+    padding: ${Styles.token.spacing.xs};
+    background-color: ${Styles.token.color.red};
+    transition: background .5s;
+    white-space: nowrap;
+  }
+
+  .${ELEMENT_HEADER_MENU_CTA}:hover,
+  .${ELEMENT_HEADER_MENU_CTA}:focus {
+    background-color: ${Styles.token.color.redDark};
+  }
+
+  ${OVERWRITE_CTA_WRAPPER_CTA} {
+    margin-top: -${Styles.token.spacing.min};
+  }
+`;
+const NavigationColumnStyles = `
+  @media (max-width: 1240px) {
+    .${ELEMENT_HEADER_NAVIGATION_COLUMN} {
+      display: none;
+    }
+  }
+
+  .${ELEMENT_HEADER_NAVIGATION_ROW} {
+    display: grid;
+    grid-auto-flow: column;
+  }
+
+  ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {
+    padding-top: ${Styles.token.spacing.sm};
+  }
+
+  .${ELEMENT_HEADER_NAVIGATION_ROW} > * {
+    display: block;
+  }
+
+  .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {
+    margin-left: ${Styles.token.spacing.md};
+  }
+
+  .${ELEMENT_HEADER_NAVIGATION_ROW} svg {
+    width: 24px;
+    height: 24px;
+    fill: ${Styles.token.color.black};
+  }
+
+  .${ELEMENT_HEADER_UTILITY_ROW} {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: ${Styles.token.spacing.sm};
+  }
+
+  .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {
+    display: flex;
+    justify-content: flex-end;
+    gap: ${Styles.token.spacing.md};
+  }
+`;
+const LogoColumnStyles = `
+  .${ELEMENT_HEADER_LOGO_COLUMN} {
+    align-items: center;
+    display: flex;
+    justify-content: flex-start;
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .${ELEMENT_HEADER_MENU_BUTTON} {
+    border-right: 1px solid ${Styles.token.color.gray.light};
+    padding-right: ${Styles.token.spacing.min};
+    margin-right: ${Styles.token.spacing.sm};
+  }
+
+  .${ELEMENT_HEADER_LOGO} {
+    display: grid;
+    justify-content: flex-start;
+    max-width: 350px;
+  }
+
+  .${ELEMENT_HEADER_LOGO}:has(img[src*=".svg"]) img {
+    height: 240px;
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_HEADER_LOGO}`]: Styles.typography.sans.larger
+  }
+})}
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_HEADER_LOGO} *`]: Styles.typography.sans.larger
+  }
+})}
+
+  .${ELEMENT_HEADER_LOGO},
+  .${ELEMENT_HEADER_LOGO} * {
+    line-height: 1.05em;
+    width: 100%;
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_HEADER_LOGO}[size="large"]`]: Styles.typography.sans.extraLarge
+  }
+})}
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_HEADER_LOGO}[size="large"] *`]: Styles.typography.sans.extraLarge
+  }
+})}
+
+  .${ELEMENT_HEADER_LOGO},
+  .${ELEMENT_HEADER_LOGO} * {
+    font-weight: 700;
+  }
+
+  .${ELEMENT_HEADER_LOGO} img {
+    width: 100%;
+    max-height: 48px;
+    max-width: 190px;
+  }
+
+  @media (min-width: ${Styles.token.media.breakpoints.tablet.min}) {
+    .${ELEMENT_HEADER_LOGO} img {
+      max-width: 240px;
+    }
+  }
+`;
+const WrapperStyles = `
+  .${ELEMENT_HEADER_WRAPPER} {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: ${Styles.token.spacing.lg};
+    z-index: 999;
+  }
+`;
+const STYLES_NAVIGATION_HEADER = `
+  .${ELEMENT_HEADER_CONTAINTER} {
+    background-color: ${Styles.token.color.white};
+    display: block;
+    padding: ${Styles.token.spacing.md} 0;
+    position: relative;
+    transition: padding ${ANIMATION_TIME}ms;
+  }
+
+  ${WrapperStyles}
+  ${LogoColumnStyles}
+  ${NavigationColumnStyles}
+  ${CtaStyles}
+  ${OverwriteStickyStyles}
+  ${index$1.Styles}
+  ${index$2.Styles}
+`;
+const CreateSearchLink = ({ searchUrl }) => {
+  if (!searchUrl) return null;
+  const searchLink = document.createElement("a");
+  searchLink.href = searchUrl;
+  searchLink.ariaLabel = "Visit the search page";
+  searchLink.innerHTML = icons.MAGNIFY_GLASS;
+  searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);
+  return searchLink;
+};
+const CreateCtaLink = ({ ctaUrl, ctaText }) => {
+  if (!ctaUrl || !ctaText) return null;
+  const cta = document.createElement("a");
+  cta.innerHTML = ctaText;
+  cta.setAttribute("target", "_blank");
+  cta.setAttribute("href", ctaUrl);
+  cta.classList.add(ELEMENT_HEADER_MENU_CTA);
+  return cta;
+};
+const CreateNavigationColumn = ({
+  utilityRow,
+  navItems,
+  searchUrl,
+  ctaText,
+  ctaUrl
+}) => {
+  if (!navItems) return;
+  const navColumnContainer = document.createElement("div");
+  const utilityRowContainer = document.createElement("div");
+  const navRowContainer = document.createElement("div");
+  const searchLink = CreateSearchLink({
+    searchUrl
+  });
+  const ctaLink = CreateCtaLink({ ctaText, ctaUrl });
+  if (utilityRow) {
+    utilityRowContainer.classList.add(ELEMENT_HEADER_UTILITY_ROW);
+    utilityRowContainer.appendChild(utilityRow);
+    navColumnContainer.appendChild(utilityRowContainer);
+  }
+  navRowContainer.classList.add(ELEMENT_HEADER_NAVIGATION_ROW);
+  navItems.forEach((item) => {
+    navRowContainer.appendChild(item);
+  });
+  if (searchLink) navRowContainer.appendChild(searchLink);
+  if (ctaLink) navRowContainer.appendChild(ctaLink);
+  navColumnContainer.classList.add(ELEMENT_HEADER_NAVIGATION_COLUMN);
+  navColumnContainer.appendChild(navRowContainer);
+  return navColumnContainer;
+};
+const CreateLogoColumn = ({ logo, eventOpen }) => {
+  const container = document.createElement("div");
+  if (eventOpen) {
+    const menuButton = index$2.CreateElement({ eventOpen });
+    menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);
+    container.appendChild(menuButton);
+  }
+  if (logo) {
+    const childrenText = Array.from(logo.children).reduce((acc, child) => {
+      if (child.nodeName === "IMG") return acc;
+      if (child.textContent) {
+        return acc + child.textContent.length;
+      }
+      return acc;
+    }, 0);
+    logo.classList.add(ELEMENT_HEADER_LOGO);
+    if (childrenText < 30) {
+      logo.setAttribute("size", "large");
+    }
+    container.appendChild(logo);
+  }
+  container.classList.add(ELEMENT_HEADER_LOGO_COLUMN);
+  return container;
+};
+const CreateNavigationHeader = (props) => {
+  const { ctaUrl, ctaText } = props;
+  const declaration = document.createElement("div");
+  const container = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const logoColumn = CreateLogoColumn(props);
+  const navigationColumn = CreateNavigationColumn(props);
+  const eventSticky = ({ isSticky }) => {
+    const utility = container.querySelector(
+      `.${ELEMENT_HEADER_UTILITY_ROW}`
+    );
+    if (isSticky && isElementSticky) return;
+    if (isSticky) {
+      isElementSticky = true;
+      container.setAttribute(ATTRIBUTE_STICKY, "true");
+      if (utility) {
+        utility.style.display = "none";
+      }
+    }
+    if (!isSticky) {
+      isElementSticky = false;
+      container.removeAttribute(ATTRIBUTE_STICKY);
+      if (utility) {
+        utility.style.display = "block";
+      }
+    }
+  };
+  let isElementSticky = false;
+  wrapper.classList.add(ELEMENT_HEADER_WRAPPER);
+  wrapper.appendChild(logoColumn);
+  if (navigationColumn) wrapper.appendChild(navigationColumn);
+  if (ctaUrl && ctaText) wrapper.setAttribute(ATTRIBUTE_CTA, "true");
+  container.appendChild(wrapper);
+  container.classList.add(ELEMENT_HEADER_CONTAINTER);
+  declaration.classList.add(ELEMENT_HEADER_DECLARATION);
+  declaration.appendChild(container);
+  return {
+    element: declaration,
+    events: {
+      sticky: eventSticky
+    }
+  };
+};
+const header = {
+  CreateElement: CreateNavigationHeader,
+  Styles: STYLES_NAVIGATION_HEADER
+};
+module.exports = header;
+//# sourceMappingURL=header.js.map

package/dist/composite/navigation/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../source/composite/navigation/header.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport MenuButton from './elements/menu-button';\nimport NavigationItem from './elements/item';\n\ntype TypeLogoRequirments = {\n  logo?: HTMLElement | null;\n  eventOpen?: () => void;\n};\n\ntype TypeSearchLink = {\n  searchUrl: string | null;\n};\n\ntype TypeCtaLink = {\n  ctaUrl: string | null;\n  ctaText: string | null;\n};\n\ntype TypeNavRow = TypeSearchLink &\n  TypeCtaLink & {\n    utilityRow?: HTMLElement | null;\n    navItems?: HTMLElement[];\n  };\n\ntype TypeHeaderRequirements = TypeLogoRequirments & TypeNavRow;\n\nconst ANIMATION_TIME = 500;\n\nconst ATTRIBUTE_STICKY = 'data-sticky';\nconst ATTRIBUTE_CTA = 'data-cta';\n\nconst IS_STICKY = `[${ATTRIBUTE_STICKY}=\"true\"]`;\nconst IS_CTA = `[${ATTRIBUTE_CTA}=\"true\"]`;\n\nconst ELEMENT_HEADER_DECLARATION = 'element-header-declaration';\nconst ELEMENT_HEADER_CONTAINTER = 'element-header-container';\nconst ELEMENT_HEADER_WRAPPER = 'element-header-wrapper';\nconst ELEMENT_HEADER_LOGO_COLUMN = 'element-header-logo-column';\nconst ELEMENT_HEADER_NAVIGATION_COLUMN = 'element-header-navigation-column';\nconst ELEMENT_HEADER_LOGO = 'element-header-logo';\nconst ELEMENT_HEADER_MENU_BUTTON = 'element-header-menu-button';\nconst ELEMENT_HEADER_MENU_CTA = 'element-header-menu-cta';\nconst ELEMENT_HEADER_MENU_SEARCH = 'element-header-menu-search';\nconst ELEMENT_HEADER_NAVIGATION_ROW = 'element-header-navigation-row';\nconst ELEMENT_HEADER_UTILITY_ROW = 'element-header-utility-row';\n\nconst OVERWRITE_STICKY_CONTAINER = `.${ELEMENT_HEADER_CONTAINTER}${IS_STICKY}`;\nconst OVERWRITE_STICKY_LOGO = `${OVERWRITE_STICKY_CONTAINER} .${ELEMENT_HEADER_LOGO}`;\nconst OVERWRITE_CTA_WRAPPER = `.${ELEMENT_HEADER_WRAPPER}${IS_CTA}`;\nconst OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_NAVIGATION_ROW}`;\nconst OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;\n\nconst OverwriteStickyStyles = `\n  ${OVERWRITE_STICKY_CONTAINER} {\n    padding: ${token.spacing.xs} 0;\n  }\n\n  .${ELEMENT_HEADER_WRAPPER} {\n     align-items: center;\n  }\n\n  ${OVERWRITE_STICKY_LOGO} img {\n    max-height: 30px;\n  }\n`;\n\nconst CtaStyles = `\n  .${ELEMENT_HEADER_MENU_CTA} {\n    color: ${token.color.white};\n    font-weight: ${token.font.weight.bold};\n    font-size: ${token.font.size.sm};\n    padding: ${token.spacing.xs};\n    background-color: ${token.color.red};\n    transition: background .5s;\n    white-space: nowrap;\n  }\n\n  .${ELEMENT_HEADER_MENU_CTA}:hover,\n  .${ELEMENT_HEADER_MENU_CTA}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  ${OVERWRITE_CTA_WRAPPER_CTA} {\n    margin-top: -${token.spacing.min};\n  }\n`;\n\nconst NavigationColumnStyles = `\n  @media (max-width: 1240px) {\n    .${ELEMENT_HEADER_NAVIGATION_COLUMN} {\n      display: none;\n    }\n  }\n\n  .${ELEMENT_HEADER_NAVIGATION_ROW} {\n    display: grid;\n    grid-auto-flow: column;\n  }\n\n  ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {\n    padding-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_HEADER_NAVIGATION_ROW} > * {\n    display: block;\n  }\n\n  .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {\n    margin-left: ${token.spacing.md};\n  }\n\n  .${ELEMENT_HEADER_NAVIGATION_ROW} svg {\n    width: 24px;\n    height: 24px;\n    fill: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADER_UTILITY_ROW} {\n    display: flex;\n    justify-content: flex-end;\n    margin-bottom: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {\n    display: flex;\n    justify-content: flex-end;\n    gap: ${token.spacing.md};\n  }\n`;\n\nconst LogoColumnStyles = `\n  .${ELEMENT_HEADER_LOGO_COLUMN} {\n    align-items: center;\n    display: flex;\n    justify-content: flex-start;\n    position: relative;\n    width: 100%;\n    max-width: 400px;\n  }\n\n  .${ELEMENT_HEADER_MENU_BUTTON} {\n    border-right: 1px solid ${token.color.gray.light};\n    padding-right: ${token.spacing.min};\n    margin-right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_HEADER_LOGO} {\n    display: grid;\n    justify-content: flex-start;\n    max-width: 350px;\n  }\n\n  .${ELEMENT_HEADER_LOGO}:has(img[src*=\".svg\"]) img {\n    height: 240px;\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_HEADER_LOGO}`]: typography.sans.larger,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_HEADER_LOGO} *`]: typography.sans.larger,\n    },\n  })}\n\n  .${ELEMENT_HEADER_LOGO},\n  .${ELEMENT_HEADER_LOGO} * {\n    line-height: 1.05em;\n    width: 100%;\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_HEADER_LOGO}[size=\"large\"]`]: typography.sans.extraLarge,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_HEADER_LOGO}[size=\"large\"] *`]: typography.sans.extraLarge,\n    },\n  })}\n\n  .${ELEMENT_HEADER_LOGO},\n  .${ELEMENT_HEADER_LOGO} * {\n    font-weight: 700;\n  }\n\n  .${ELEMENT_HEADER_LOGO} img {\n    width: 100%;\n    max-height: 48px;\n    max-width: 190px;\n  }\n\n  @media (min-width: ${token.media.breakpoints.tablet.min}) {\n    .${ELEMENT_HEADER_LOGO} img {\n      max-width: 240px;\n    }\n  }\n`;\n\nconst WrapperStyles = `\n  .${ELEMENT_HEADER_WRAPPER} {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    gap: ${token.spacing.lg};\n    z-index: 999;\n  }\n`;\n\nconst STYLES_NAVIGATION_HEADER = `\n  .${ELEMENT_HEADER_CONTAINTER} {\n    background-color: ${token.color.white};\n    display: block;\n    padding: ${token.spacing.md} 0;\n    position: relative;\n    transition: padding ${ANIMATION_TIME}ms;\n  }\n\n  ${WrapperStyles}\n  ${LogoColumnStyles}\n  ${NavigationColumnStyles}\n  ${CtaStyles}\n  ${OverwriteStickyStyles}\n  ${NavigationItem.Styles}\n  ${MenuButton.Styles}\n`;\n\nconst CreateSearchLink = ({ searchUrl }: TypeSearchLink) => {\n  if (!searchUrl) return null;\n\n  const searchLink = document.createElement('a');\n\n  searchLink.href = searchUrl;\n  searchLink.ariaLabel = 'Visit the search page';\n  searchLink.innerHTML = Utility.asset.icon.MAGNIFY_GLASS;\n  searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);\n\n  return searchLink;\n};\n\nconst CreateCtaLink = ({ ctaUrl, ctaText }: TypeCtaLink) => {\n  if (!ctaUrl || !ctaText) return null;\n\n  const cta = document.createElement('a');\n\n  cta.innerHTML = ctaText;\n  cta.setAttribute('target', '_blank');\n  cta.setAttribute('href', ctaUrl);\n  cta.classList.add(ELEMENT_HEADER_MENU_CTA);\n\n  return cta;\n};\n\nconst CreateNavigationColumn = ({\n  utilityRow,\n  navItems,\n  searchUrl,\n  ctaText,\n  ctaUrl,\n}: TypeNavRow) => {\n  if (!navItems) return;\n\n  const navColumnContainer = document.createElement('div');\n  const utilityRowContainer = document.createElement('div');\n  const navRowContainer = document.createElement('div');\n  const searchLink = CreateSearchLink({\n    searchUrl,\n  });\n  const ctaLink = CreateCtaLink({ ctaText, ctaUrl });\n\n  if (utilityRow) {\n    utilityRowContainer.classList.add(ELEMENT_HEADER_UTILITY_ROW);\n    utilityRowContainer.appendChild(utilityRow);\n    navColumnContainer.appendChild(utilityRowContainer);\n  }\n\n  navRowContainer.classList.add(ELEMENT_HEADER_NAVIGATION_ROW);\n\n  navItems.forEach((item) => {\n    navRowContainer.appendChild(item);\n  });\n  if (searchLink) navRowContainer.appendChild(searchLink);\n  if (ctaLink) navRowContainer.appendChild(ctaLink);\n\n  navColumnContainer.classList.add(ELEMENT_HEADER_NAVIGATION_COLUMN);\n  navColumnContainer.appendChild(navRowContainer);\n\n  return navColumnContainer;\n};\n\nconst CreateLogoColumn = ({ logo, eventOpen }: TypeLogoRequirments) => {\n  const container = document.createElement('div');\n\n  if (eventOpen) {\n    const menuButton = MenuButton.CreateElement({ eventOpen });\n    menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);\n    container.appendChild(menuButton);\n  }\n\n  if (logo) {\n    const childrenText = Array.from(logo.children).reduce((acc, child) => {\n      if (child.nodeName === 'IMG') return acc;\n\n      if (child.textContent) {\n        return acc + child.textContent.length;\n      }\n\n      return acc;\n    }, 0);\n    logo.classList.add(ELEMENT_HEADER_LOGO);\n\n    if (childrenText < 30) {\n      logo.setAttribute('size', 'large');\n    }\n\n    container.appendChild(logo);\n  }\n  container.classList.add(ELEMENT_HEADER_LOGO_COLUMN);\n  return container;\n};\n\nconst CreateNavigationHeader = (props: TypeHeaderRequirements) => {\n  const { ctaUrl, ctaText } = props;\n  const declaration = document.createElement('div');\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const logoColumn = CreateLogoColumn(props);\n  const navigationColumn = CreateNavigationColumn(props);\n  const eventSticky = ({ isSticky }: { isSticky: boolean }) => {\n    const utility = container.querySelector(\n      `.${ELEMENT_HEADER_UTILITY_ROW}`,\n    ) as HTMLDivElement;\n\n    if (isSticky && isElementSticky) return;\n\n    if (isSticky) {\n      isElementSticky = true;\n      container.setAttribute(ATTRIBUTE_STICKY, 'true');\n\n      if (utility) {\n        utility.style.display = 'none';\n      }\n    }\n    if (!isSticky) {\n      isElementSticky = false;\n      container.removeAttribute(ATTRIBUTE_STICKY);\n\n      if (utility) {\n        utility.style.display = 'block';\n      }\n    }\n  };\n  let isElementSticky = false;\n\n  wrapper.classList.add(ELEMENT_HEADER_WRAPPER);\n  wrapper.appendChild(logoColumn);\n\n  if (navigationColumn) wrapper.appendChild(navigationColumn);\n  if (ctaUrl && ctaText) wrapper.setAttribute(ATTRIBUTE_CTA, 'true');\n\n  container.appendChild(wrapper);\n  container.classList.add(ELEMENT_HEADER_CONTAINTER);\n\n  declaration.classList.add(ELEMENT_HEADER_DECLARATION);\n  declaration.appendChild(container);\n\n  return {\n    element: declaration,\n    events: {\n      sticky: eventSticky,\n    },\n  };\n};\n\nexport default {\n  CreateElement: CreateNavigationHeader,\n  Styles: STYLES_NAVIGATION_HEADER,\n};\n"],"names":["token","Utility.theme.convertJSSObjectToStyles","typography","NavigationItem","MenuButton","Utility.asset.icon.MAGNIFY_GLASS"],"mappings":"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"}

package/dist/composite/navigation/header.mjs

@@ -0,0 +1,323 @@
+import { token, typography } from "@universityofmaryland/web-styles-library";
+import { MAGNIFY_GLASS } from "../../utilities/assets/icons.mjs";
+import { convertJSSObjectToStyles } from "../../utilities/theme/index.mjs";
+import MenuButton from "./elements/menu-button/index.mjs";
+import NavigationItem from "./elements/item/index.mjs";
+const ANIMATION_TIME = 500;
+const ATTRIBUTE_STICKY = "data-sticky";
+const ATTRIBUTE_CTA = "data-cta";
+const IS_STICKY = `[${ATTRIBUTE_STICKY}="true"]`;
+const IS_CTA = `[${ATTRIBUTE_CTA}="true"]`;
+const ELEMENT_HEADER_DECLARATION = "element-header-declaration";
+const ELEMENT_HEADER_CONTAINTER = "element-header-container";
+const ELEMENT_HEADER_WRAPPER = "element-header-wrapper";
+const ELEMENT_HEADER_LOGO_COLUMN = "element-header-logo-column";
+const ELEMENT_HEADER_NAVIGATION_COLUMN = "element-header-navigation-column";
+const ELEMENT_HEADER_LOGO = "element-header-logo";
+const ELEMENT_HEADER_MENU_BUTTON = "element-header-menu-button";
+const ELEMENT_HEADER_MENU_CTA = "element-header-menu-cta";
+const ELEMENT_HEADER_MENU_SEARCH = "element-header-menu-search";
+const ELEMENT_HEADER_NAVIGATION_ROW = "element-header-navigation-row";
+const ELEMENT_HEADER_UTILITY_ROW = "element-header-utility-row";
+const OVERWRITE_STICKY_CONTAINER = `.${ELEMENT_HEADER_CONTAINTER}${IS_STICKY}`;
+const OVERWRITE_STICKY_LOGO = `${OVERWRITE_STICKY_CONTAINER} .${ELEMENT_HEADER_LOGO}`;
+const OVERWRITE_CTA_WRAPPER = `.${ELEMENT_HEADER_WRAPPER}${IS_CTA}`;
+const OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_NAVIGATION_ROW}`;
+const OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;
+const OverwriteStickyStyles = `
+  ${OVERWRITE_STICKY_CONTAINER} {
+    padding: ${token.spacing.xs} 0;
+  }
+
+  .${ELEMENT_HEADER_WRAPPER} {
+     align-items: center;
+  }
+
+  ${OVERWRITE_STICKY_LOGO} img {
+    max-height: 30px;
+  }
+`;
+const CtaStyles = `
+  .${ELEMENT_HEADER_MENU_CTA} {
+    color: ${token.color.white};
+    font-weight: ${token.font.weight.bold};
+    font-size: ${token.font.size.sm};
+    padding: ${token.spacing.xs};
+    background-color: ${token.color.red};
+    transition: background .5s;
+    white-space: nowrap;
+  }
+
+  .${ELEMENT_HEADER_MENU_CTA}:hover,
+  .${ELEMENT_HEADER_MENU_CTA}:focus {
+    background-color: ${token.color.redDark};
+  }
+
+  ${OVERWRITE_CTA_WRAPPER_CTA} {
+    margin-top: -${token.spacing.min};
+  }
+`;
+const NavigationColumnStyles = `
+  @media (max-width: 1240px) {
+    .${ELEMENT_HEADER_NAVIGATION_COLUMN} {
+      display: none;
+    }
+  }
+
+  .${ELEMENT_HEADER_NAVIGATION_ROW} {
+    display: grid;
+    grid-auto-flow: column;
+  }
+
+  ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {
+    padding-top: ${token.spacing.sm};
+  }
+
+  .${ELEMENT_HEADER_NAVIGATION_ROW} > * {
+    display: block;
+  }
+
+  .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {
+    margin-left: ${token.spacing.md};
+  }
+
+  .${ELEMENT_HEADER_NAVIGATION_ROW} svg {
+    width: 24px;
+    height: 24px;
+    fill: ${token.color.black};
+  }
+
+  .${ELEMENT_HEADER_UTILITY_ROW} {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: ${token.spacing.sm};
+  }
+
+  .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {
+    display: flex;
+    justify-content: flex-end;
+    gap: ${token.spacing.md};
+  }
+`;
+const LogoColumnStyles = `
+  .${ELEMENT_HEADER_LOGO_COLUMN} {
+    align-items: center;
+    display: flex;
+    justify-content: flex-start;
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .${ELEMENT_HEADER_MENU_BUTTON} {
+    border-right: 1px solid ${token.color.gray.light};
+    padding-right: ${token.spacing.min};
+    margin-right: ${token.spacing.sm};
+  }
+
+  .${ELEMENT_HEADER_LOGO} {
+    display: grid;
+    justify-content: flex-start;
+    max-width: 350px;
+  }
+
+  .${ELEMENT_HEADER_LOGO}:has(img[src*=".svg"]) img {
+    height: 240px;
+  }
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_HEADER_LOGO}`]: typography.sans.larger
+  }
+})}
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_HEADER_LOGO} *`]: typography.sans.larger
+  }
+})}
+
+  .${ELEMENT_HEADER_LOGO},
+  .${ELEMENT_HEADER_LOGO} * {
+    line-height: 1.05em;
+    width: 100%;
+  }
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_HEADER_LOGO}[size="large"]`]: typography.sans.extraLarge
+  }
+})}
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_HEADER_LOGO}[size="large"] *`]: typography.sans.extraLarge
+  }
+})}
+
+  .${ELEMENT_HEADER_LOGO},
+  .${ELEMENT_HEADER_LOGO} * {
+    font-weight: 700;
+  }
+
+  .${ELEMENT_HEADER_LOGO} img {
+    width: 100%;
+    max-height: 48px;
+    max-width: 190px;
+  }
+
+  @media (min-width: ${token.media.breakpoints.tablet.min}) {
+    .${ELEMENT_HEADER_LOGO} img {
+      max-width: 240px;
+    }
+  }
+`;
+const WrapperStyles = `
+  .${ELEMENT_HEADER_WRAPPER} {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: ${token.spacing.lg};
+    z-index: 999;
+  }
+`;
+const STYLES_NAVIGATION_HEADER = `
+  .${ELEMENT_HEADER_CONTAINTER} {
+    background-color: ${token.color.white};
+    display: block;
+    padding: ${token.spacing.md} 0;
+    position: relative;
+    transition: padding ${ANIMATION_TIME}ms;
+  }
+
+  ${WrapperStyles}
+  ${LogoColumnStyles}
+  ${NavigationColumnStyles}
+  ${CtaStyles}
+  ${OverwriteStickyStyles}
+  ${NavigationItem.Styles}
+  ${MenuButton.Styles}
+`;
+const CreateSearchLink = ({ searchUrl }) => {
+  if (!searchUrl) return null;
+  const searchLink = document.createElement("a");
+  searchLink.href = searchUrl;
+  searchLink.ariaLabel = "Visit the search page";
+  searchLink.innerHTML = MAGNIFY_GLASS;
+  searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);
+  return searchLink;
+};
+const CreateCtaLink = ({ ctaUrl, ctaText }) => {
+  if (!ctaUrl || !ctaText) return null;
+  const cta = document.createElement("a");
+  cta.innerHTML = ctaText;
+  cta.setAttribute("target", "_blank");
+  cta.setAttribute("href", ctaUrl);
+  cta.classList.add(ELEMENT_HEADER_MENU_CTA);
+  return cta;
+};
+const CreateNavigationColumn = ({
+  utilityRow,
+  navItems,
+  searchUrl,
+  ctaText,
+  ctaUrl
+}) => {
+  if (!navItems) return;
+  const navColumnContainer = document.createElement("div");
+  const utilityRowContainer = document.createElement("div");
+  const navRowContainer = document.createElement("div");
+  const searchLink = CreateSearchLink({
+    searchUrl
+  });
+  const ctaLink = CreateCtaLink({ ctaText, ctaUrl });
+  if (utilityRow) {
+    utilityRowContainer.classList.add(ELEMENT_HEADER_UTILITY_ROW);
+    utilityRowContainer.appendChild(utilityRow);
+    navColumnContainer.appendChild(utilityRowContainer);
+  }
+  navRowContainer.classList.add(ELEMENT_HEADER_NAVIGATION_ROW);
+  navItems.forEach((item) => {
+    navRowContainer.appendChild(item);
+  });
+  if (searchLink) navRowContainer.appendChild(searchLink);
+  if (ctaLink) navRowContainer.appendChild(ctaLink);
+  navColumnContainer.classList.add(ELEMENT_HEADER_NAVIGATION_COLUMN);
+  navColumnContainer.appendChild(navRowContainer);
+  return navColumnContainer;
+};
+const CreateLogoColumn = ({ logo, eventOpen }) => {
+  const container = document.createElement("div");
+  if (eventOpen) {
+    const menuButton = MenuButton.CreateElement({ eventOpen });
+    menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);
+    container.appendChild(menuButton);
+  }
+  if (logo) {
+    const childrenText = Array.from(logo.children).reduce((acc, child) => {
+      if (child.nodeName === "IMG") return acc;
+      if (child.textContent) {
+        return acc + child.textContent.length;
+      }
+      return acc;
+    }, 0);
+    logo.classList.add(ELEMENT_HEADER_LOGO);
+    if (childrenText < 30) {
+      logo.setAttribute("size", "large");
+    }
+    container.appendChild(logo);
+  }
+  container.classList.add(ELEMENT_HEADER_LOGO_COLUMN);
+  return container;
+};
+const CreateNavigationHeader = (props) => {
+  const { ctaUrl, ctaText } = props;
+  const declaration = document.createElement("div");
+  const container = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const logoColumn = CreateLogoColumn(props);
+  const navigationColumn = CreateNavigationColumn(props);
+  const eventSticky = ({ isSticky }) => {
+    const utility = container.querySelector(
+      `.${ELEMENT_HEADER_UTILITY_ROW}`
+    );
+    if (isSticky && isElementSticky) return;
+    if (isSticky) {
+      isElementSticky = true;
+      container.setAttribute(ATTRIBUTE_STICKY, "true");
+      if (utility) {
+        utility.style.display = "none";
+      }
+    }
+    if (!isSticky) {
+      isElementSticky = false;
+      container.removeAttribute(ATTRIBUTE_STICKY);
+      if (utility) {
+        utility.style.display = "block";
+      }
+    }
+  };
+  let isElementSticky = false;
+  wrapper.classList.add(ELEMENT_HEADER_WRAPPER);
+  wrapper.appendChild(logoColumn);
+  if (navigationColumn) wrapper.appendChild(navigationColumn);
+  if (ctaUrl && ctaText) wrapper.setAttribute(ATTRIBUTE_CTA, "true");
+  container.appendChild(wrapper);
+  container.classList.add(ELEMENT_HEADER_CONTAINTER);
+  declaration.classList.add(ELEMENT_HEADER_DECLARATION);
+  declaration.appendChild(container);
+  return {
+    element: declaration,
+    events: {
+      sticky: eventSticky
+    }
+  };
+};
+const header = {
+  CreateElement: CreateNavigationHeader,
+  Styles: STYLES_NAVIGATION_HEADER
+};
+export {
+  header as default
+};
+//# sourceMappingURL=header.mjs.map