From c4f8d1db677b9c38cec26b802c7d57181f0ea97f Mon Sep 17 00:00:00 2001 From: david ornelas Date: Fri, 13 Mar 2026 09:59:43 -0700 Subject: [PATCH] feat(unity-bootstrap-theme): added new header styles and stories --- .../menu-search-icon.png | Bin 0 -> 23371 bytes .../src/js/global-header.js | 46 + .../src/scss/extends/_global-header.scss | 229 ++- .../global-header/global-header.templates.jsx | 1264 +++++++++++------ 4 files changed, 1113 insertions(+), 426 deletions(-) create mode 100644 packages/unity-bootstrap-theme/public/img/custom-mobile-header-icon/menu-search-icon.png diff --git a/packages/unity-bootstrap-theme/public/img/custom-mobile-header-icon/menu-search-icon.png b/packages/unity-bootstrap-theme/public/img/custom-mobile-header-icon/menu-search-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..e3a14e52a10eaf3537294feb7b63b62780c0b5a8 GIT binary patch literal 23371 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 OtFS34WrHz6RrW8IFI`Ch literal 0 HcmV?d00001 diff --git a/packages/unity-bootstrap-theme/src/js/global-header.js b/packages/unity-bootstrap-theme/src/js/global-header.js index 0463ff66a4..e696342a4e 100644 --- a/packages/unity-bootstrap-theme/src/js/global-header.js +++ b/packages/unity-bootstrap-theme/src/js/global-header.js @@ -11,6 +11,52 @@ const initGlobalHeader = () => { }; EventHandler.on(window, "scroll.uds.header", handleWindowScroll); + + // Search toggle (v2 header only) + const searchButtons = document.querySelectorAll( + ".uds-header-v2 .header-top-search .search-button" + ); + searchButtons.forEach(btn => { + btn.addEventListener("click", () => { + const form = btn.closest(".header-top-search"); + if (form) { + form.classList.add("open"); + const input = form.querySelector(".search-input"); + if (input) input.focus(); + } + }); + }); + + // Mobile search: toggle submit button visibility based on input value + document + .querySelectorAll(".uds-header-v2 .navbar-mobile-search input[type=search]") + .forEach(input => { + input.addEventListener("input", () => { + const form = input.closest(".navbar-mobile-search"); + if (form) { + if (input.value.length > 0) { + form.classList.add("has-value"); + } else { + form.classList.remove("has-value"); + } + } + }); + }); + + // Close search on blur if empty (v2 header only) + document + .querySelectorAll(".uds-header-v2 .header-top-search .search-input") + .forEach(input => { + input.addEventListener("blur", () => { + if (!input.value) { + const form = input.closest(".header-top-search"); + if (form) { + // Small delay to allow submit button click to register + setTimeout(() => form.classList.remove("open"), 200); + } + } + }); + }); }; window.initGlobalHeader = window.initGlobalHeader || initGlobalHeader; diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss b/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss index 412f7e70c2..b30ad9dfc4 100644 --- a/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss +++ b/packages/unity-bootstrap-theme/src/scss/extends/_global-header.scss @@ -107,7 +107,8 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); text-decoration: underline; } - &.visually-hidden, &.visually-hidden-focusable { + &.visually-hidden, + &.visually-hidden-focusable { justify-self: flex-start; } } @@ -211,12 +212,12 @@ $fa-search: url($image-assets-path + "/font-awesome-svg/search.svg"); } #asu-header.scrolled { - #wrapper-header-top { + &:not(.uds-header-v2) #wrapper-header-top { height: 0; overflow: hidden; } - #header-top { + &:not(.uds-header-v2) #header-top { height: 0; overflow: hidden; } @@ -1155,3 +1156,225 @@ the content of the header } } } + +/*-------------------------------------------------------------- +# Global Header V2 Overrides +# Scoped under .uds-header-v2 so pre-existing headers are unaffected. +--------------------------------------------------------------*/ + +#asu-header.uds-header-v2 { + // --- Top bar: search button/input/submit --- + #wrapper-header-top { + padding: 0.5rem 0rem; + } + #header-top { + .nav > *:not(:last-child) { + margin-right: 1.5rem; + } + .nav > *:nth-last-child(2) { + margin-right: 0.75rem; + } + .nav-link { + padding: 0; + margin: 0; + } + .header-top-search { + display: flex; + align-items: center; + + .search-button { + border: none; + background: transparent; + cursor: pointer; + font-size: 0.75rem; + line-height: 1; + color: $asu-gray-1; + display: inline-flex; + align-items: center; + vertical-align: middle; + white-space: nowrap; + + span { + margin-right: 0.25rem; + } + } + + .search-input { + width: 200px; + background-color: $uds-color-base-white; + border: 1px solid $asu-gray-5; + border-radius: 0; + padding: 0.5rem; + font-weight: 400; + font-size: 0.75rem; + line-height: 1; + color: $asu-gray-3; + outline: $asu-gray-1; + margin: 0; + margin-left: 1.5rem; + display: none; + vertical-align: middle; + height: auto; + background-image: none; + + &::placeholder { + font-size: 0.75rem; + line-height: 1; + } + + &:focus, + &:focus-visible { + border: 1px solid $asu-gray-1; + box-shadow: none !important; + } + } + + .search-submit { + margin-left: 0.5rem; + font-weight: 700; + font-size: 0.875rem; + line-height: 1; + padding: 0.5rem 1rem; + border: none; + display: none; + } + + &.open { + margin-left: -1rem; + + .search-button { + display: none; + } + + .search-input { + display: unset; + } + + .search-submit { + display: inline-flex; + } + } + } + } + + // --- Toggler button --- + #header-main .navbar-toggler { + background: transparent; + border-radius: 0; + cursor: pointer; + min-width: 44px; + min-height: 44px; + + .menu-search-icon { + display: none; + } + + &.collapsed .menu-search-icon { + display: unset; + width: 24px; + height: auto; + } + + &.collapsed .fa-stack { + display: none; + } + + .fa-circle.fa-stack-2x { + color: transparent; + } + } + + // --- Mobile: hide fa-home icon, show mobile search above nav --- + #header-main .navbar-nav .nav-link .fa-home { + display: none; + } + + .navbar-collapse.collapsing .navbar-mobile-footer, + .navbar-collapse.show .navbar-mobile-footer { + position: fixed; + bottom: 0; + right: 0; + width: 100%; + } + + > .navbar-mobile-search, + #header-main .navbar-mobile-search { + padding: $uds-size-spacing-2 $uds-size-spacing-4; + width: 100%; + position: relative; + display: flex; + align-items: center; + + .mobile-search-icon { + position: absolute; + left: calc(#{$uds-size-spacing-4} + 10px); + color: $asu-gray-3; + font-size: 14px; + pointer-events: none; + z-index: 1; + } + + &.has-value .mobile-search-icon { + display: none; + } + + &.has-value input { + padding-left: 1rem; + } + + input { + width: 100%; + background-color: $uds-color-base-white; + border: 1px solid $asu-gray-5; + border-radius: 0; + padding-left: 32px; + padding: 0.5rem 3rem 0.5rem 2.25rem; + + &::-webkit-search-cancel-button, + &::-webkit-search-decoration, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + display: none; + -webkit-appearance: none; + } + } + + .mobile-search-submit { + display: none; + position: absolute; + top: 50%; + right: calc(#{$uds-size-spacing-4} + 0.5rem); + transform: translate(0, -50%); + border-radius: 50%; + width: 2rem; + height: 2rem; + background-color: $uds-color-base-maroon; + color: $uds-color-base-white; + border: none; + cursor: pointer; + font-size: 0.75rem; + padding: 0; + align-items: center; + justify-content: center; + z-index: 10; + } + + &.has-value .mobile-search-submit { + display: flex; + } + } + + // --- Desktop overrides --- + @include media-breakpoint-up(xl) { + #header-main .navbar-mobile-search { + display: none; + } + + #header-main .navbar-nav > .nav-link-home { + .fa-home { + display: inline-block; + font-size: 16px; + } + } + } +} diff --git a/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.templates.jsx b/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.templates.jsx index 1eb39c8780..bf6a3bd233 100644 --- a/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.templates.jsx +++ b/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.templates.jsx @@ -2,12 +2,13 @@ import React from "react"; import vertlogo from "./arizona-state-university-logo-vertical.png"; import horizlogo from "./arizona-state-university-logo.png"; import starbucksLogo from "./asu-starbucks.png"; +const menuSearchIcon = "/img/custom-mobile-header-icon/menu-search-icon.png"; export const Basic = () => ( <>
@@ -52,33 +53,42 @@ export const Basic = () => ( Colleges and Schools
+ - + @@ -104,7 +114,7 @@ export const Basic = () => (
( data-ga-header-type="click" data-ga-header="menu button label" > - + Menu and Search Icon -
-
- Subdomain name +