Merge pull request #373 from pulibrary/header-configurable-logo

[LuxLibraryHeader] Allow applications to pass in a custom logo
pulibrary · Oct 31, 2024 · 01f6cd1 · 01f6cd1
2 parents 7b0e949 + 2829c0c
commit 01f6cd1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/src/components/LuxLibraryHeader.vue b/src/components/LuxLibraryHeader.vue
@@ -1,8 +1,16 @@
 <template>
   <component :is="type" :class="['lux-library-header', theme]">
     <lux-wrapper class="lux-header-content" :maxWidth="maxWidth">
-      <lux-library-logo width="245" height="54" :theme="value(theme)"></lux-library-logo>
-      <a class="lux-app-name" :href="appUrl" :title="appName" aria-labelledby="appName">
+      <slot name="logo">
+        <lux-library-logo width="245" height="54" :theme="value(theme)"></lux-library-logo>
+      </slot>
+      <a
+        v-if="appName"
+        class="lux-app-name"
+        :href="appUrl"
+        :title="appName"
+        aria-labelledby="appName"
+      >
         <span id="appName" class="full-name">{{ appName }}</span>
         <span class="abbr-name">{{ abbrName }}</span>
       </a>
@@ -247,4 +255,22 @@ export default {
       </div>
     </div>
   ```
+
+  You can pass in a custom logo via the logo slot:
+
+  ```jsx
+    <div>
+      <lux-library-header app-url="https://catalog.princeton.edu" theme="dark">
+        <template v-slot:logo><img src="https://raw.githubusercontent.com/pulibrary/tigerdata-app/refs/heads/main/app/assets/images/TigerData-LOGO-KO_wide2.svg" height="100"></template>
+        <lux-menu-bar type="main-menu" :menu-items="[
+            {name: 'Help', component: 'Help', href: '/help/'},
+            {name: 'Feedback', component: 'Feedback', href: '/feedback/'},
+            {name: 'Your Account', component: 'Account', href: '/account/', children: [
+              {name: 'Logout', component: 'Logout', href: '/account/'}
+            ]}
+          ]"
+        ></lux-menu-bar>
+      </lux-library-header>
+    </div>
+  ```
 </docs>
diff --git a/tests/unit/specs/components/luxLibraryHeader.spec.js b/tests/unit/specs/components/luxLibraryHeader.spec.js
@@ -56,4 +56,32 @@ describe("LuxLibraryHeader.vue", () => {
   it("has a max width", () => {
     expect(wrapper.vm.maxWidth).toBe(1111)
   })
+  it("renders the princeton logo by default", () => {
+    expect(wrapper.find(".lux-library-logo").exists()).toBe(true)
+  })
+  describe("when we pass a custom logo in a slot", () => {
+    beforeEach(() => {
+      wrapper = mount(LuxLibraryHeader, {
+        attachTo: document.body,
+        props: {
+          type: "abbr",
+          appName: "My Application",
+          abbrName: "My App",
+          appUrl: "http://example.com/",
+          maxWidth: 1111,
+          theme: "light",
+        },
+        slots: {
+          default: "Some menu bar",
+          logo: "<img src='logo.png' id='custom-logo'></img>",
+        },
+      })
+    })
+    it("renders the custom logo provided via slot", () => {
+      expect(wrapper.find("#custom-logo").exists()).toBe(true)
+    })
+    it("does not render the default princeton logo", () => {
+      expect(wrapper.find(".lux-library-logo").exists()).toBe(false)
+    })
+  })
 })