@bostonuniversity/bulib-wc

import { Story, Preview, Meta, Props, html } from '@open-wc/demoing-storybook'; import '../index.js'; <Meta title="Branding|header" /> # BU Libraries Header Provide a clean, consistent, minimalist, and reliable way to brand any given site and to navigate between subsites whether on large screens or on mobile, even when `javascript` is turned off. _NOTE: the css for this requires a build step_ ## Top Bar Contains the main navigation across/between all sites. ### Basic The basic bar includes a dropdown, but isn't a megamenu. <Preview> <Story name="header"> {html` <div class="header-wrapper"> <nav> <a class="sr-only" href="#content">Skip to Main Content</a> <div class="primary-navbar"> <div class="primary-nav-left"> <a title="BU Libraries Homepage" href="https://www.bu.edu/library"> <img id="bu-logo" src="https://cdn.jsdelivr.net/npm/bulib-wc@latest/dist/icons/bulib-logo.png"> </a> </div> <div class="primary-nav-main menu-items-wrapper"> <ul class="menu-items"> <li id="subsite-research"><a href="https://www.bu.edu/library/services">Find & Borrow</a></li> <li id="subsite-services"><a href="https://www.bu.edu/library/research">Research & Learning</a></li> <li id="subsite-about"><a href="https://www.bu.edu/library/about">About Us</a></li> <li> <div class="dropdown"> <a class="menu-item inline" href="https://www.bu.edu/library/about"> <span class="prs">Locations</span><i class="material-icons inline">arrow_drop_down</i> </a> <div class="dropdown-content"> <ul class="library-list no-bullet"> <li><a href="https://www.bu.edu/library/african-studies/">African Studies Library</a></li> <li><a href="https://www.bu.edu/library/astronomy/">Astronomy Library</a></li> <li><a href="http://archives.bu.edu/">Howard Gotlieb Archival Research Center</a></li> <li><a href="https://www.bu.edu/library/mugar-memorial/">Mugar Memorial Library</a></li> <li><a href="https://www.bu.edu/library/music/">Music Library</a></li> <li><a href="https://www.bu.edu/library/management/">Pardee Management Library</a></li> <li><a href="https://www.bu.edu/library/pickering-educational/">Pickering Educational Resources Library</a></li> <li><a href="https://www.bu.edu/library/sel/">Science & Engineering Library</a></li> <li><a href="https://www.bu.edu/library/stone-science/">Stone Science Library</a></li> <li><a href="https://www.bu.edu/library/about/additional-libraries/">Additional Libraries</a></li> </ul> </div> </div> </li> </ul> </div> <div class="primary-nav-right"> <div class="mobile-navigation none" aria-hidden="true"> <div id="menuToggle">  <input type="checkbox" tabindex="-1"> <span></span> <span></span> <span></span>  <ul id="mobile-menu"> <li><a href="https://www.bu.edu/library/search">BU Libraries Search</a></li> <li><a href="https://www.bu.edu/library/help/using-the-libraries-online/">Using the Libraries Online</a></li> <li><a href="https://www.bu.edu/library/help/visiting-the-libraries/">Visiting the Libraries</a></li> <li><a href="https://www.bu.edu/library/about/hours/">Library Hours</a></li> <li><a href="https://www.bu.edu/library/about">Locations</a></li> <li><a href="https://www.bu.edu/library/about/maps-floorplans">Maps and Floorplans</a></li> <li><hr></li> <li><a href="https://www.bu.edu/library/">Libraries Home</a></li> <li><a href="https://askalibrarian.bu.edu">Ask a Librarian</a></li> <li><a href="https://www.bu.edu/library/account">My Account</a></li> </ul> </div> </div> <div class="top-right"> <ul class="menu-items"> <li> <a class="menu-item inline" href="https://askalibrarian.bu.edu/"> <span class="prm">Ask a Librarian</span><i class="material-icons inline">question_answer</i> </a> </li> <li> <a class="menu-item inline" href="https://www.bu.edu/library/account"> <span class="prm">My Account</span><i class="material-icons inline">person</i> </a> </li> </ul> </div> </div> </div> <script id="mobile-nav-clickout" type="text/javascript"> let input = document.querySelector("#menuToggle > input"); window.addEventListener("click", (event) => { let clicked = event.target; let clicked_within_mobile_menu = clicked.closest("#menuToggle") != null; if(input && clicked != input && !clicked_within_mobile_menu || clicked.tagName == "A"){ input.checked = false; // uncheck the #menuToggle input, closing the mobile nav } }); </script> </nav> </div> <br /><br /><br /><br /><br /> `} </Story> </Preview> ## Advanced The advanced header contains a `div.submenu` that appears on mouseover. <Preview> <Story name="header-advanced"> {html` <div class="header-wrapper"> <nav> <a class="sr-only" href="#content">Skip to Main Content</a> <div class="primary-navbar"> <div class="primary-nav-left"> <a title="BU Libraries Homepage" href="https://www.bu.edu/library"> <img id="bu-logo" src="https://cdn.jsdelivr.net/npm/bulib-wc@latest/dist/icons/bulib-logo.png"> </a> </div> <div class="primary-nav-main menu-items-wrapper"> <ul class="menu-items"> <li class="menu-item"> <a class="inline no-wrap" href="https://www.bu.edu/library/services">Find & Borrow</a> <div class="submenu"> <ul id="find-and-borrow" class="submenu-items flexnw"> <li> <ul class="no-bullet" tabindex="0"> <span>FIND</span> <li><a href="https://www.bu.edu/library/search">Search</a></li> <li><a href="https://library.bu.edu/az.php">Databases A-Z</a></li> <li><a href="https://www.bu.edu/library/services/reserves/">Course Materials (Reserves)</a></li> <li><a href="https://buprimo.hosted.exlibrisgroup.com/primo-explore/search?vid=journals&lang=en_US">eJournals</a></li> <li><a href="http://bu.on.worldcat.org/">WorldCat Discovery</a></li> </ul> </li> <li> <ul class="no-bullet" tabindex="0"> <span>COLLECTIONS</span> <li><a href="https://open.bu.edu/">OpenBU</a></li> <li><a href="https://open.bu.edu/handle/2144/8520">Theses & Dissertations</a></li> <li><a href="http://archives.bu.edu/">Archives</a></li> <li><a href="http://www.bu.edu/library/mugar-memorial/research/krasker-filmvideo/">Krasker Film / Video</a></li> </ul> </li> <li> <ul class="no-bullet" tabindex="0"> <span>BORROWING</span> <li><a href="https://www.bu.edu/library/services/borrowing/">Borrowing</a></li> <li><a href="https://www.bu.edu/library/services/circulation/">Circulation</a></li> <li><a href="https://www.bu.edu/library/services/ill/">Inter-Library Borrowing</a></li> </ul> </li> </ul> </div> </li> <li class="menu-item"> <a href="https://www.bu.edu/library/research">Research & Learning</a> <div class="submenu"> <ul id="research-and-learning" class="submenu-items flexnw"> <li> <ul class="no-bullet" tabindex="0"> <span>SUPPORT</span> <li><a href="https://askalibrarian.bu.edu/">Ask a Librarian</a></li> <li><a href="https://www.bu.edu/library/services/reference/appointments/">Make an Appointment</a></li> <li><a href="https://www.bu.edu/library/services/reference/writing-centers/">Writing Center</a></li> <li><a href="https://www.bu.edu/library/services/for-faculty/">For Faculty</a></li> <li><a href="https://www.bu.edu/library/services/alumni/">For Alumni</a></li> <li><a href="https://www.bu.edu/library/services/for-graduate-students/">For Graduate Students</a></li> </ul> </li> <li> <ul class="no-bullet" tabindex="0"> <span>GUIDES</span> <li><a href="https://library.bu.edu/guides/">Research Guides</a></li> <li><a href="https://www.bu.edu/library/research/guides/course-guides/">Course Guides</a></li> <li><a href="https://www.bu.edu/library/help/how-to/">How-To Guides</a></li> <li><a href="https://www-staging.bu.edu/library/help/using-the-libraries-online/">Using the Libraries Online</a></li> <li><a href="https://library.bu.edu/create_bibliographies">Creating Bibliographies</a></li> </ul> </li>  <li> <ul class="no-bullet" tabindex="0"> <span>SERVICES</span> <li><a href="https://www.bu.edu/library/services/scanning-delivery-services/">Scanning & Delivery</a></li> <li><a href="https://www.bu.edu/library/services/reserves/">Course Materials (Reserves)</a></li> <li><a href="https://www.bu.edu/data/">Data Services</a></li> </ul> </li> </ul> </div> </li> <li class="menu-item"> <a href="https://www.bu.edu/library/about">About Us</a> <div class="submenu"> <ul id="about-us" class="submenu-items flexnw"> <li> <ul class="no-bullet" tabindex="0"> <span>SPACES</span> <li><a href="https://www.bu.edu/library/about/hours/">Library & Service Hours</a></li> <li><a>Visiting the Libraries</a></li> <li><a href="https://www.bu.edu/library/about/study-spaces/">Study Rooms & Spaces</a></li> <li><a href="https://www.bu.edu/library/about/maps-floorplans/">Maps & Floorplans</a></li> <li><a href="https://www.bu.edu/library/services/computers-and-printing/">Computers, Printing, Scanning</a></li> </ul> </li> <li> <ul class="no-bullet" tabindex="0"> <span>INFO</span> <li><a href="https://www.bu.edu/library/about/news/">News & Updates</a></li> <li><a href="https://www.bu.edu/library/about/who-we-are/staff-directory/">Staff Directory A-Z</a></li> <li><a href="https://www.bu.edu/library/about">About BU Libraries</a></li> <li><a>Events Calendar</a></li> <li><a href="https://www.bu.edu/library/about/code-of-conduct/">Code of Conduct</a></li> </ul> </li> </ul> </div> </li> <li class="menu-item"> <a href="https://www.bu.edu/library/about">Locations</a> <div class="submenu"> <ul id="locations" class="submenu-items flexnw" tabindex="0"> <li> <ul class="no-bullet" tabindex="0"> <span><a href="https://www.bu.edu/library/about">ALL LOCATIONS</a></span> <li><a href="https://www.bu.edu/library/african-studies/">African Studies Library</a></li> <li><a href="https://www.bu.edu/library/astronomy/">Astronomy Library</a></li> <li><a href="http://archives.bu.edu/">Howard Gotlieb Archival Research Center</a></li> <li><a href="https://www.bu.edu/library/mugar-memorial/">Mugar Memorial Library</a></li> <li><a href="https://www.bu.edu/library/music/">Music Library</a></li> <li><a href="https://www.bu.edu/library/management/">Pardee Management Library</a></li> <li><a href="https://www.bu.edu/library/pickering-educational/">Pickering Educational Resources Library</a></li> <li><a href="https://www.bu.edu/library/sel/">Science & Engineering Library</a></li> <li><a href="https://www.bu.edu/library/stone-science/">Stone Science Library</a></li> </ul> </li> <li> <ul class="no-bullet" tabindex="0"> <span><a href="https://www.bu.edu/library/about/additional-libraries/">ADDITIONAL LIBRARIES</a></span> <li><a href="https://www.bu.edu/anthrop/about/library/">Anthropology Department Library</a></li> <li><a href="https://www.bu.edu/cfa/current-students/music-resources/music-curriculum-library/">CFA Music Curriculum Library</a></li> <li><a href="https://www.bu.edu/geddes/">Geddes Language Center</a></li> <li><a href="https://www.bu.edu/library/african-studies/">Law Library</a></li> <li><a href="https://www.bu.edu/library/astronomy/">Medical Library</a></li> <li><a href="https://www.bu.edu/africa/outreach/outreach-library/">Teaching Africa Library</a></li> <li><a href="https://www.bu.edu/cfa/creative-research/learn/libraries/library/">Visual Arts Resource Library</a></li> <li><a href="https://www.bu.edu/ah/vrc/" target="_blank" rel="noopener">Visual Resources Center</a></li> </ul> </li> </ul> </div> </li> </ul> </div> <div class="primary-nav-right"> <div class="mobile-navigation none" aria-hidden="true"> <div id="menuToggle">  <input type="checkbox" tabindex="-1"> <span></span> <span></span> <span></span>  <ul id="mobile-menu"> <li><a href="https://www.bu.edu/library/search">BU Libraries Search</a></li> <li><a href="https://www.bu.edu/library/help/using-the-libraries-online/">Using the Libraries Online</a></li> <li><a href="https://www.bu.edu/library/help/visiting-the-libraries/">Visiting the Libraries</a></li> <li><a href="https://www.bu.edu/library/about/hours/">Library Hours</a></li> <li><a href="https://www.bu.edu/library/about">Locations</a></li> <li><a href="https://www.bu.edu/library/about/maps-floorplans">Maps and Floorplans</a></li> <li><hr></li> <li><a href="https://www.bu.edu/library/">Libraries Home</a></li> <li><a href="https://askalibrarian.bu.edu">Ask a Librarian</a></li> <li><a href="https://www.bu.edu/library/account">My Account</a></li> </ul> </div> </div> <div class="top-right"> <ul class="menu-items"> <li> <a class="menu-item inline" href="https://askalibrarian.bu.edu/"> <span class="prm">Ask a Librarian</span><i class="material-icons inline">question_answer</i> </a> </li> <li> <a class="menu-item inline" href="https://www.bu.edu/library/account"> <span class="prm">My Account</span><i class="material-icons inline">person</i> </a> </li> </ul> </div> </div> </div> <script id="mobile-nav-clickout" type="text/javascript"> let input = document.querySelector("#menuToggle > input"); window.addEventListener("click", (event) => { let clicked = event.target; let clicked_within_mobile_menu = clicked.closest("#menuToggle") != null; if(input && clicked != input && !clicked_within_mobile_menu || clicked.tagName == "A"){ input.checked = false; // uncheck the #menuToggle input, closing the mobile nav } }); </script> </nav> </div> <br /><br /><br /><br /><br /> `} </Story> </Preview> For the time being, there's a `bulib-submenu` that powers the list of items with them. This should be temporary and is a work-around to encapsulate/protect against wordpress header styling. <Preview> <Story name="header-submenu"> {html` <div class="header-wrapper"> <nav> <a class="sr-only" href="#content">Skip to Main Content</a> <div class="primary-navbar"> <div class="primary-nav-left"> <a title="BU Libraries Homepage" href="https://www.bu.edu/library"> <img id="bu-logo" src="https://cdn.jsdelivr.net/npm/bulib-wc@latest/dist/icons/bulib-logo.png"> </a> </div> <div class="primary-nav-main menu-items-wrapper"> <ul class="menu-items"> <li class="menu-item"> <a class="inline no-wrap" href="https://www.bu.edu/library/services"> <span class="txt-wrap">Find & Borrow</span><i class="material-icons">arrow_drop_down</i> </a> <div class="submenu"><bulib-submenu code="find-and-borrow" class="full-width"></bulib-submenu></div> </li> <li class="menu-item"> <a href="/library/research"> <span>Research & Learn</span><i class="material-icons">arrow_drop_down</i> </a> <div class="submenu"><bulib-submenu code="research-and-learn" class="full-width"></bulib-submenu></div> </li> <li class="menu-item"> <a href="/library/about"> <span class="txt-wrap">About Us</span><i class="material-icons">arrow_drop_down</i> </a> <div class="submenu"><bulib-submenu code="about-us" class="full-width"></bulib-submenu></div> </li> <li class="menu-item"> <a href="https://www.bu.edu/library/about"> <span>Locations</span><i class="material-icons">arrow_drop_down</i> </a> <div class="submenu"><bulib-submenu code="locations" class="full-width"></bulib-submenu></div> </li> </ul> </div> <div class="primary-nav-right"> <div class="mobile-navigation none" aria-hidden="true"> <div id="menuToggle">  <input type="checkbox" tabindex="-1"> <span></span> <span></span> <span></span>  <ul id="mobile-menu"> <li><a href="https://www.bu.edu/library/search">BU Libraries Search</a></li> <li><a href="https://www.bu.edu/library/help/using-the-libraries-online/">Using the Libraries Online</a></li> <li><a href="https://www.bu.edu/library/help/visiting-the-libraries/">Visiting the Libraries</a></li> <li><a href="https://www.bu.edu/library/about/hours/">Library Hours</a></li> <li><a href="https://www.bu.edu/library/about">Locations</a></li> <li><a href="https://www.bu.edu/library/about/maps-floorplans">Maps and Floorplans</a></li> <li><hr></li> <li><a href="https://www.bu.edu/library/">Libraries Home</a></li> <li><a href="https://askalibrarian.bu.edu">Ask a Librarian</a></li> <li><a href="https://www.bu.edu/library/account">My Account</a></li> </ul> </div> </div> <div class="top-right"> <ul class="menu-items"> <li> <a class="menu-item inline" href="https://askalibrarian.bu.edu/"> <span class="prm">Ask a Librarian</span><i class="material-icons inline">question_answer</i> </a> </li> <li> <a class="menu-item inline" href="https://www.bu.edu/library/account"> <span class="prm">My Account</span><i class="material-icons inline">person</i> </a> </li> </ul> </div> </div> </div> <script id="mobile-nav-clickout" type="text/javascript"> let input = document.querySelector("#menuToggle > input"); window.addEventListener("click", (event) => { let clicked = event.target; let clicked_within_mobile_menu = clicked.closest("#menuToggle") != null; if(input && clicked != input && !clicked_within_mobile_menu || clicked.tagName == "A"){ input.checked = false; // uncheck the #menuToggle input, closing the mobile nav } }); </script> </nav> </div> <br /><br /><br /><br /><br /> `} </Story> </Preview> ## Banner Contains Site-Specific Code/links, and normally a `<bulib-search>` (if one's not already present on the home page). Links for a hierarchy of '**parent**: child' (unless otherwise specified), and should take you back to the site landing page (/). <Preview> <Story name="site-banner"> {html` <div class="banner-wrapper"> <div class="banner"> <span><a href="/">Ask a Librarian:</a> <a href="/businessFAQs">Business FAQs</a></span> <bulib-search str_options="pardee-help primo"></bulib-search> </div> </div> `} </Story> </Preview> The wordpress banner has a `section` on the left that includes a `#genus` and `#species` that is loaded via a script from the `window.location.path`. That script also loads in the `bulib-hours` component. <Preview> <Story name="site-banner-wp"> {html` <style type="text/css"> body { --bulib-search-padding: 5px; --bulib-search-options-padding: 4px; } </style> <div class="banner-wrapper"> <div class="banner"> <section> <span class="flexw"> <a id="genus" href="/library-responsive/mugar-memorial/">Mugar Memorial Library</a> <a id="species" href="/library-responsive/mugar-memorial/services">:  Services</a> </span> <span id="hours-display" class="flexw small-text txtv"> hours:   <bulib-hours library="mugar-memorial" short></bulib-hours> </span> </section> <bulib-search str_options="wp primo guides" class="prm secondary"></bulib-search> </div> </div> `} </Story> </Preview> LibCal exception case in which the site is dual-purpose (has two landing pages). <Preview> <Story name="site-banner-libcal"> {html` <div class="banner-wrapper"> <div class="banner"> <span> <strong><a href="/calendar">Events</a></strong>   and   <strong><a href="https://www.bu.edu/library/about/study-spaces">Reservations</a></strong> </span> </div> </div> `} </Story> </Preview> The banner can be modified to include additional content, so long as it's contained in a single container (e.g. `div` or `section`) <Preview> <Story name="site-banner-libguides"> {html` <style type="text/css"> div.banner-wrapper { --bulib-search-min-width: 100vw; --bulib-search-options-padding: 5px; } div.banner-wrapper bulib-search { width: -webkit-fill-available; } </style> <div class="banner-wrapper"> <div class="banner" id="s-lg-guide-header-info"> <span class="prl"><a href="/guides" class="bigger-text">Research Guides</a></span> <bulib-search class="secondary" str_options="wp primo guides" str_selected="guides"> <form action="https://library.bu.edu/srch.php" class="full-width txtc flexnw"> <input name="q" class="full-width plm" placeholder="Search all guides" type="text"> <button class="bulib-btn man" type="submit" value="Search"><i class="material-icons">search</i></button> </form> </bulib-search> </div> </div> `} </Story> </Preview>