#100

brand-app/pages/page-ucd-theme-header.tpl.js

@@ -10,7 +10,7 @@ export function styles() {
   return [elementStyles];
 }
 
-export function render() { 
+export function render() {
 return html`
 
   ${this.pageTitle('Site Header')}
@@ -23,15 +23,15 @@ return html`
       <li><a href="#ucd-theme-search-popup">search-popup</a></li>
     </ul>
   <p>
-    Pass through these elements as children to construct the site header. 
+    Pass through these elements as children to construct the site header.
     Only <code>ucd-theme-primary-nav</code> is required.
   </p>
 
   ${this.examplePanel(html`
-    <ucd-theme-header 
+    <ucd-theme-header
       site-name="UC Davis Library"
       slogan="Books!"
-      figure-src="/img/book-logo.png" 
+      figure-src="/img/book-logo.png"
       prevent-fixed
       is-demo>
 
@@ -83,11 +83,17 @@ return html`
         <a href="#">Journals</a>
       </ucd-theme-primary-nav>
 
+      <ucd-theme-search-popup>
+        <ucd-theme-search-form
+          @search="${e => console.log(e.detail.searchTerm)}">
+        </ucd-theme-search-form>
+      </ucd-theme-search-popup>
+
     </ucd-theme-header>
   `)}
 
   <p>The branding bar can also be completely overwritten with your own styles by using the <code>branding-bar</code> slot:</p>
-  
+
   ${this.examplePanel(html`
     <ucd-theme-header is-demo prevent-fixed>
       <div slot="branding-bar" class="custom-branding">
@@ -115,4 +121,4 @@ return html`
   `)}
 
 
-`;}
+`;}

elements/brand/ucd-theme-header/ucd-theme-header.tpl.js

@@ -101,21 +101,26 @@ export function styles() {
   ];
 }
 
-export function render() { 
+export function render() {
 return html`
 ${this.isDemo ? html`
   <style>
     .l-navbar { top: auto !important}
   </style>
 ` : html``}
+${this._hasQuickLinks ? html`
+  <style>::slotted(ucd-theme-search-popup){ --ucd-theme-search-popup--margin-right:-1rem;}</style>
+` : html`
+  <style>::slotted(ucd-theme-search-popup){--ucd-theme-search-popup--margin-right:0;}</style>
+`}
 <header class=${classMap(this._getHeaderClasses())}>
   <div class="mobile-bar">
     <div class="mobile-bar__nav-toggle">
-      <button 
+      <button
         @click=${this._onBtnClick}
-        class="nav-toggle ${this.opened ? 'nav-toggle--active' : ''}" 
-        aria-controls="primary-nav" 
-        aria-expanded="${this.opened ? 'true' : 'false'}" 
+        class="nav-toggle ${this.opened ? 'nav-toggle--active' : ''}"
+        aria-controls="primary-nav"
+        aria-expanded="${this.opened ? 'true' : 'false'}"
         aria-label="Toggle Main Menu">
         <span class="nav-toggle__icon nav-toggle__icon--menu">Menu</span>
       </button>
@@ -175,7 +180,7 @@ ${this.isDemo ? html`
           <div class='branding-bar-mobile-links'>
             <ul>
               ${this._brandingBarLinks.map(link => html`
-                <li><a 
+                <li><a
                   href=${ifDefined(link.href ? link.href : null)}
                   target=${ifDefined(link.newTab ? "_blank": null)}
                   >${link.linkText}</a></li>
@@ -188,6 +193,4 @@ ${this.isDemo ? html`
     </div>
   </div>
 </header>
-  
-
-`;}
+`;}

elements/brand/ucd-theme-search-popup/ucd-theme-search-popup.tpl.js

@@ -8,6 +8,9 @@ export function styles() {
     :host {
       display: block;
     }
+    .search-popup__open::after {
+      margin-right: var(--ucd-theme-search-popup--margin-right, -1rem)
+    }
   `;
 
   return [
@@ -16,10 +19,10 @@ export function styles() {
     elementStyles];
 }
 
-export function render() { 
+export function render() {
 return html`
-<button 
-  class="search-popup__open ${this.opened ? 'search-popup__open--close' : ''}" 
+<button
+  class="search-popup__open ${this.opened ? 'search-popup__open--close' : ''}"
   @click=${this._onBtnClick}>
   <span class="search-popup__open-icon">${this.buttonText}</span>
 </button>
@@ -34,4 +37,4 @@ return html`
 
 </div>
 
-`;}
+`;}

elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {