@uoguelph/web-components 0.0.26 → 0.0.27

package/dist/collection/components/uofg-header/uofg-header.css

@@ -3,41 +3,41 @@
 }
 
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-:focus-visible {
-  outline: 2px solid #ffc72a;
-  outline-offset: 0.5rem;
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
 }
 
 a {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  text-decoration: none;
   color: inherit;
-  -webkit-transition-property: color, background-color;
-  transition-property: color, background-color;
-  -webkit-transition-duration: 0.2s;
-          transition-duration: 0.2s;
-  -webkit-transition-timing-function: ease-in-out;
-          transition-timing-function: ease-in-out;
+  text-decoration: none;
 }
 
 ul {
   list-style: none;
-  margin: 0;
   padding: 0;
+  margin: unset;
 }
 ul > li {
   display: contents;
 }
 
+a {
+  display: flex;
+  align-items: center;
+  transition-property: color, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+
+li {
+  display: contents;
+}
+
 button {
   border: none;
   background: none;
@@ -48,44 +48,9 @@ button {
   line-height: inherit;
   word-spacing: inherit;
   letter-spacing: inherit;
-  -webkit-transition-property: color, background-color;
   transition-property: color, background-color;
-  -webkit-transition-duration: 0.2s;
-          transition-duration: 0.2s;
-  -webkit-transition-timing-function: ease-in-out;
-          transition-timing-function: ease-in-out;
-}
-button[type=submit] {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  background-color: #d50029;
-  color: #fff;
-  padding: 0.5rem;
-  font-size: inherit;
-  font-family: inherit;
-}
-
-input[type=text],
-input[type=password] {
-  background-color: #eff6f7;
-  border: 1px solid #69a3b9;
-  padding: 1rem;
-  color: #555555;
-  font-size: inherit;
-  font-family: inherit;
-}
-input[type=text]:focus-visible, input[type=text]:focus,
-input[type=password]:focus-visible,
-input[type=password]:focus {
-  outline: none;
-  background-color: #fffdf7;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
 }
 
 uofg-menu {
@@ -96,12 +61,8 @@ uofg-menu {
   position: relative;
 }
 uofg-menu > [slot=button] {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   gap: 0.5rem;
   height: 100%;
   padding: 0 1rem;
@@ -109,31 +70,20 @@ uofg-menu > [slot=button] {
 uofg-menu > [slot=button] > svg {
   height: 1em;
   fill: currentColor;
-  -webkit-transition-property: -webkit-transform;
-  transition-property: -webkit-transform;
   transition-property: transform;
-  transition-property: transform, -webkit-transform;
-  -webkit-transition-duration: 0.2s;
-          transition-duration: 0.2s;
-  -webkit-transition-timing-function: ease-in-out;
-          transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
 }
 uofg-menu > [slot=content] {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   position: absolute;
   z-index: 1;
   min-width: 20rem;
   right: 0;
   background-color: #fff;
   color: #000;
-  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
 }
 
 #uofg-header {
@@ -147,16 +97,10 @@ uofg-menu > [slot=content] {
 #uofg-header-top-content-container,
 #uofg-header-main-content-container,
 #uofg-header-sub-content-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   position: relative;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  align-items: center;
+  justify-content: flex-end;
   width: 100%;
   padding: 0 calc((100vw - 1500px) / 2);
 }
@@ -168,12 +112,8 @@ uofg-menu > [slot=content] {
   z-index: 3;
 }
 #uofg-header-top-content-container > ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   height: 100%;
 }
 #uofg-header-top-content-container > ul > li > a {
@@ -197,9 +137,7 @@ uofg-menu > [slot=content] {
   color: #000;
 }
 #uofg-header-top-content-container > uofg-menu > [slot=button][aria-expanded=true] > svg {
-  -webkit-transform: rotate(180deg);
-      -ms-transform: rotate(180deg);
-          transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 #uofg-header-top-content-container > uofg-menu > [slot=content] {
   background-color: #ddd;
@@ -228,8 +166,6 @@ uofg-menu > [slot=content] {
 }
 
 #uofg-header-logo-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   height: 100%;
   margin-right: auto;
@@ -259,7 +195,6 @@ uofg-menu > [slot=content] {
   height: 100%;
   position: relative;
   margin-left: 1rem;
-  -webkit-transition: opacity 0.2s ease-in-out;
   transition: opacity 0.2s ease-in-out;
 }
 #uofg-header-logo > svg {
@@ -278,8 +213,6 @@ uofg-menu > [slot=content] {
 
 #uofg-header-full-main-content,
 #uofg-header-reduced-main-content {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 #uofg-header-full-main-content svg,
@@ -289,34 +222,21 @@ uofg-menu > [slot=content] {
 }
 
 #uofg-header-full-main-content > ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 #uofg-header-full-main-content > ul > li > a,
 #uofg-header-full-main-content > a,
 #uofg-header-full-main-content > uofg-menu > [slot=button] {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
   height: 100%;
   padding: 0 1.5rem;
   font-size: 1.8rem;
-  -webkit-transition-property: color, background-color;
   transition-property: color, background-color;
-  -webkit-transition-duration: 0.2s;
-          transition-duration: 0.2s;
-  -webkit-transition-timing-function: ease-in-out;
-          transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
 }
 #uofg-header-full-main-content > ul > li > a:hover, #uofg-header-full-main-content > ul > li > a:focus-visible,
 #uofg-header-full-main-content > a:hover,
@@ -347,9 +267,7 @@ uofg-menu > [slot=content] {
 
 #uofg-header-reduced-main-content > uofg-menu > [slot=button],
 #uofg-header-reduced-main-content > a {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   padding: 0 1.5rem;
   font-size: 2rem;
   border-left: 1px solid rgba(255, 255, 255, 0.15);
@@ -386,8 +304,6 @@ uofg-menu > [slot=content] {
   position: relative;
 }
 #uofg-header-main-menu uofg-menu > [slot=button] {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   padding: 0.75rem;
   height: auto;
@@ -402,25 +318,19 @@ uofg-menu > [slot=content] {
   background-color: rgba(0, 0, 0, 0.1);
 }
 #uofg-header-main-menu uofg-menu > [slot=button][aria-expanded=true] > svg {
-  -webkit-transform: rotate(180deg);
-      -ms-transform: rotate(180deg);
-          transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 #uofg-header-main-menu uofg-menu > [slot=content] {
   position: relative;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   padding: 0;
 }
 #uofg-header-main-menu uofg-menu > [slot=content] > li > a {
   padding: 0.75rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  -webkit-transition-property: color, background-color;
   transition-property: color, background-color;
-  -webkit-transition-duration: 0.2s;
-          transition-duration: 0.2s;
-  -webkit-transition-timing-function: ease-in-out;
-          transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
 }
 #uofg-header-main-menu uofg-menu > [slot=content] > li > a:hover, #uofg-header-main-menu uofg-menu > [slot=content] > li > a:focus-visible {
   background-color: rgba(0, 0, 0, 0.1);
@@ -439,71 +349,14 @@ uofg-menu > [slot=content] {
   width: 100%;
   color: inherit;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  -webkit-transition-property: color, background-color;
   transition-property: color, background-color;
-  -webkit-transition-duration: 0.2s;
-          transition-duration: 0.2s;
-  -webkit-transition-timing-function: ease-in-out;
-          transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
 }
 #uofg-header-main-menu ul > li > a:hover, #uofg-header-main-menu ul > li > a:focus-visible, #uofg-header-main-menu ul > li > a[aria-expanded=true] {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-/*
-.uofg-header-account-menu {
-  .uofg-header-single-sign-on {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 1rem;
-
-    label {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    > input[type='text'],
-    > input[type='password'] {
-      height: 4rem;
-      width: 100%;
-    }
-
-    > button[type='submit'] {
-      height: 4rem;
-      width: 100%;
-      margin-top: 1rem;
-    }
-
-    > a {
-      color: #69a3b9;
-      text-decoration: underline;
-    }
-  }
-}
-*/
-.uofg-header-search-menu .uofg-header-search-bar {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-.uofg-header-search-menu .uofg-header-search-bar > input {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-.uofg-header-search-menu .uofg-header-search-bar > button[type=submit] {
-  width: 4rem;
-  height: 4rem;
-}
-
 #uofg-header-sub-content-container {
   height: 4rem;
   background-color: #ddd;
@@ -511,12 +364,8 @@ uofg-menu > [slot=content] {
   z-index: 1;
 }
 #uofg-header-sub-content-container #uofg-header-page-title {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   margin-right: auto;
   padding: 0 1rem;
   height: 100%;
@@ -543,27 +392,16 @@ uofg-menu > [slot=content] {
 }
 #uofg-header-sub-content-container uofg-menu > [slot=content] > li > a {
   padding: 0.75rem;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
 }
 #uofg-header-sub-content-container a {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  -webkit-transition-property: color, background-color;
   transition-property: color, background-color;
-  -webkit-transition-duration: 0.2s;
-          transition-duration: 0.2s;
-  -webkit-transition-timing-function: ease-in-out;
-          transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
 }
 #uofg-header-sub-content-container a:hover, #uofg-header-sub-content-container a:focus-visible {
   background-color: #ffc72a;
@@ -583,26 +421,16 @@ uofg-menu > [slot=content] {
   height: 100%;
 }
 #uofg-header-full-sub-content > ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 #uofg-header-full-sub-content uofg-menu > [slot=button][aria-expanded=true] > svg {
-  -webkit-transform: rotate(180deg);
-      -ms-transform: rotate(180deg);
-          transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 #uofg-header-full-sub-content .uofg-header-page-specific {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   height: 100%;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 
 #uofg-header-reduced-sub-content > uofg-menu {
@@ -630,12 +458,8 @@ uofg-menu > [slot=content] {
   height: auto;
   padding: 1rem;
   width: 100%;
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 #uofg-header-reduced-sub-content > uofg-menu > [slot=content] a:hover, #uofg-header-reduced-sub-content > uofg-menu > [slot=content] a:focus-visible {
@@ -658,13 +482,10 @@ uofg-menu > [slot=content] {
   color: #000;
 }
 #uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=button][aria-expanded=true] > svg {
-  -webkit-transform: rotate(180deg);
-      -ms-transform: rotate(180deg);
-          transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 #uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=content] {
   position: static;
   background-color: rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }

package/dist/collection/components/uofg-header/uofg-header.js

@@ -1,13 +1,29 @@
 import { h } from "@stencil/core";
-import { PageSpecific, } from "./page-specific";
 import Decoration from "./decoration.svg";
-import FullSizeLogo from "./logo-full-size.svg";
-import ReducedSizeLogo from "./logo-reduced-size.svg";
-import { GlobalLinks } from "./global-links";
+import FullSizeLogo from "./logo-full.svg";
+import ReducedSizeLogo from "./logo-reduced.svg";
 import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
-import { faBars, faRightToBracket, faSearch } from "@fortawesome/free-solid-svg-icons";
-import { HelloYou } from "./hello-you";
-import { SearchBar } from "./search";
+import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
+import { faRightToBracket } from "@fortawesome/free-solid-svg-icons/faRightToBracket";
+import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
+const TopLinks = () => (h("ul", null, h("li", null, h("a", { href: "https://bbis.alumni.uoguelph.ca/BBIS_Cannon/give/uofg" }, "GIVE")), h("li", null, h("a", { href: "https://uoguelph.ca/apply" }, "APPLY")), h("li", null, h("a", { href: "https://news.uoguelph.ca/" }, "NEWS"))));
+const HelloYouMenu = props => (h("uofg-menu", { class: "uofg-header-hello-you-menu", "auto-collapse": props.autoCollapse }, h("button", { slot: "button", "aria-label": "Hello, YOU! menu" }, h("span", null, "Hello, YOU!"), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content" }, h("li", null, h("a", { href: "https://uoguelph.ca/future-students" }, "Future Students")), h("li", null, h("a", { href: "https://uoguelph.ca/current-students" }, "Current Students")), h("li", null, h("a", { href: "https://uoguelph.ca/alumni-and-donors" }, "Alumni & Donors")), h("li", null, h("a", { href: "https://uoguelph.ca/staff-and-faculty" }, "Staff & Faculty")), h("li", null, h("a", { href: "https://uoguelph.ca/parents-and-visitors" }, "Parents & Visitors")), h("li", null, h("a", { href: "https://uoguelph.ca/employers-and-partners" }, "Employers & Partners")))));
+const MainLinks = () => (h("ul", { class: "uofg-header-global-links" }, h("li", null, h("a", { href: "https://uoguelph.ca/about" }, "About")), h("li", null, h("a", { href: "https://uoguelph.ca/academics" }, "Academics")), h("li", null, h("a", { href: "https://uoguelph.ca/admissions" }, "Admissions")), h("li", null, h("a", { href: "https://uoguelph.ca/research" }, "Research")), h("li", null, h("a", { href: "https://uoguelph.ca/student-life" }, "Student Life"))));
+const AccountLink = () => (h("a", { href: "https://uoguelph.ca/intranet", "aria-label": "University of Guelph Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket })));
+const SearchLink = () => (h("a", { href: "https://uoguelph.ca/search", "aria-label": "Search University of Guelph" }, h(FontAwesomeIcon, { icon: faSearch })));
+const PageSpecific = props => {
+  var _a;
+  return (h("ul", { class: "uofg-header-page-specific" }, (_a = props.content) === null || _a === void 0 ? void 0 : _a.map(item => {
+    if (!item) {
+      return null;
+    }
+    if ('text' in item) {
+      return (h("li", null, h("a", Object.assign({ href: item.href }, item.attributes), item.text)));
+    }
+    return (h("li", null, h("uofg-menu", { autoCollapse: props.autoCollapse }, h("button", { slot: "button" }, h("span", null, item.title), h(FontAwesomeIcon, { icon: faCaretDown })), h("ul", { slot: "content", role: "menu" }, item.links.map(link => (h("li", null, h("a", Object.assign({ href: link.href }, link.attributes), link.text))))))));
+  }).filter(Boolean)));
+};
 export class UofgHeader {
   constructor() {
     this.pageTitle = '';
@@ -55,8 +71,8 @@ export class UofgHeader {
     });
   }
   render() {
-    return (h("header", { id: "uofg-header" }, this.isFullSize && (h("div", { id: "uofg-header-top-content-container" }, h("ul", null, h("li", null, h("a", { href: "https://bbis.alumni.uoguelph.ca/BBIS_Cannon/give/uofg" }, "GIVE")), h("li", null, h("a", { href: "https://uoguelph.ca/apply" }, "APPLY")), h("li", null, h("a", { href: "https://news.uoguelph.ca/" }, "NEWS"))), h(HelloYou, { autoCollapse: true }))), h("div", { id: "uofg-header-main-content-container", class: { 'full-height': this.isFullSize } }, h("div", { id: "uofg-header-logo-container" }, this.isFullSize && h("div", { id: "uofg-header-decorative-img", innerHTML: Decoration }), h("a", { id: "uofg-header-logo", href: "https://www.uoguelph.ca", innerHTML: this.isFullSize ? FullSizeLogo : ReducedSizeLogo, "aria-label": "University of Guelph Home Page" })), this.isFullSize ? (h("div", { id: "uofg-header-full-main-content", class: "uofg-header-main-content" }, h(GlobalLinks, null), h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket })), h("uofg-menu", { class: "uofg-header-search-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Search Menu" }, h(FontAwesomeIcon, { icon: faSearch })), h("div", { slot: "content" }, h("span", null, "Search the University of Guelph"), h(SearchBar, null))))) : (h("div", { id: "uofg-header-reduced-main-content", class: "uofg-header-main-content" }, h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket })), h("uofg-menu", { class: "uofg-header-search-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Search Menu" }, h(FontAwesomeIcon, { icon: faSearch })), h("div", { slot: "content" }, h("span", null, "Search the University of Guelph"), h(SearchBar, null))), h("uofg-menu", { id: "uofg-header-main-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Main Menu" }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content" }, h("span", null, "University of Guelph"), h(GlobalLinks, null), h(HelloYou, { autoCollapse: false })))))), this.pageSpecificContent.length > 0 && (h("div", { id: "uofg-header-sub-content-container" }, this.pageTitle &&
-      (this.pageUrl ? (h("a", { id: "uofg-header-page-title", href: this.pageUrl }, this.pageTitle)) : (h("span", { id: "uofg-header-page-title" }, this.pageTitle))), this.isFullSize ? (h("div", { id: "uofg-header-full-sub-content", class: "uofg-header-sub-content" }, h(PageSpecific, { content: this.pageSpecificContent, autoCollapseMenus: true }))) : (h("div", { id: "uofg-header-reduced-sub-content", class: "uofg-header-sub-content" }, h("uofg-menu", { id: "uofg-header-sub-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": this.pageTitle + ' Menu' }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content" }, h(PageSpecific, { content: this.pageSpecificContent })))))))));
+    return (h("header", { id: "uofg-header" }, this.isFullSize && (h("div", { id: "uofg-header-top-content-container" }, h(TopLinks, null), h(HelloYouMenu, { autoCollapse: true }))), h("div", { id: "uofg-header-main-content-container", class: { 'full-height': this.isFullSize } }, h("div", { id: "uofg-header-logo-container" }, this.isFullSize && h("div", { id: "uofg-header-decorative-img", innerHTML: Decoration }), h("a", { id: "uofg-header-logo", href: "https://www.uoguelph.ca", innerHTML: this.isFullSize ? FullSizeLogo : ReducedSizeLogo, "aria-label": "University of Guelph Home Page" })), this.isFullSize ? (h("div", { id: "uofg-header-full-main-content", class: "uofg-header-main-content" }, h(MainLinks, null), h(AccountLink, null), h(SearchLink, null))) : (h("div", { id: "uofg-header-reduced-main-content", class: "uofg-header-main-content" }, h(AccountLink, null), h(SearchLink, null), h("uofg-menu", { id: "uofg-header-main-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Main Menu" }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content" }, h("span", null, "University of Guelph"), h(MainLinks, null), h(HelloYouMenu, { autoCollapse: false })))))), this.pageSpecificContent.length > 0 && (h("div", { id: "uofg-header-sub-content-container" }, this.pageTitle &&
+      (this.pageUrl ? (h("a", { id: "uofg-header-page-title", href: this.pageUrl }, this.pageTitle)) : (h("span", { id: "uofg-header-page-title" }, this.pageTitle))), this.isFullSize ? (h("div", { id: "uofg-header-full-sub-content", class: "uofg-header-sub-content" }, h(PageSpecific, { content: this.pageSpecificContent, autoCollapse: true }))) : (h("div", { id: "uofg-header-reduced-sub-content", class: "uofg-header-sub-content" }, h("uofg-menu", { id: "uofg-header-sub-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": this.pageTitle + ' Menu' }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content" }, h(PageSpecific, { content: this.pageSpecificContent })))))))));
   }
   static get is() { return "uofg-header"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/uofg-menu/uofg-menu.js

@@ -77,7 +77,7 @@ export class UofgMenu {
     // Determine what animation type the user wants.
     const type = this.getAnimationType();
     // If Web Animations API isn't supported, or the user requested no animation, we can simply set display style
-    if (!WEB_ANIMATIONS_SUPPORTED || PREFERS_REDUCED_MOTION || type === 'none') {
+    if (!WEB_ANIMATIONS_SUPPORTED() || PREFERS_REDUCED_MOTION() || type === 'none') {
       this.content.style.display = newValue ? '' : 'none';
       return;
     }