From fc8ff1d5bb3ceaa2702451a0ee42aca17afb8aae Mon Sep 17 00:00:00 2001
From: Luis Laguna <luis.laguna@ebury.com>
Date: Fri, 27 Dec 2024 15:33:06 +0000
Subject: [PATCH 1/4] Add tests for optional link prop

---
 .../__snapshots__/ec-navigation.spec.ts.snap  | 75 +++++++++++++++++--
 .../ec-navigation/ec-navigation.spec.ts       | 13 +++-
 src/components/ec-navigation/types.ts         |  1 +
 3 files changed, 81 insertions(+), 8 deletions(-)

diff --git a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
index b0410db4a..db38ebf5c 100644
--- a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
+++ b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
@@ -195,12 +195,16 @@ exports[`EcNavigation > mobile navigation > should render mobile header if "isRe
       class="tw-leading-reset"
     >
       
-      <img
-        alt="Test Brand"
-        class="ec-navigation__mobile-header-logo"
-        data-test="ec-navigation__mobile-header-logo"
-        src="/img/my-brand.png"
-      />
+      <a
+        href="https://example.com"
+      >
+        <img
+          alt="My Branding"
+          class="ec-navigation__mobile-header-logo"
+          data-test="ec-navigation__mobile-header-logo"
+          src="/img/my.png"
+        />
+      </a>
       
     </div>
     <button
@@ -682,6 +686,65 @@ exports[`EcNavigation > should render branding logo and name when given 1`] = `
 </div>
 `;
 
+exports[`EcNavigation > should render branding logo, name and link when given > Branding should have alt, src, href. 1`] = `
+<div
+  class="ec-navigation__branding"
+  data-test="ec-navigation__branding"
+>
+  <a
+    href="https://example.com"
+  >
+    <img
+      alt="My Branding"
+      class="ec-navigation__branding-logo"
+      data-test="ec-navigation__branding-logo"
+      src="/img/my.png"
+    />
+  </a>
+</div>
+`;
+
+exports[`EcNavigation > should render branding logo, name and link when given 1`] = `
+<div
+  class="ec-navigation"
+  data-test="ec-navigation"
+>
+  <div
+    class=""
+  >
+    <div
+      class="ec-navigation__branding"
+      data-test="ec-navigation__branding"
+    >
+      <a
+        href="https://example.com"
+      >
+        <img
+          alt="My Branding"
+          class="ec-navigation__branding-logo"
+          data-test="ec-navigation__branding-logo"
+          src="/img/my.png"
+        />
+      </a>
+    </div>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+  <div
+    class="ec-navigation__block ec-navigation__menu"
+    data-test="ec-navigation__block ec-navigation__menu"
+  >
+    
+    
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>
+`;
+
 exports[`EcNavigation > should render with custom attributes 1`] = `
 <div
   class="ec-navigation my-class"
diff --git a/src/components/ec-navigation/ec-navigation.spec.ts b/src/components/ec-navigation/ec-navigation.spec.ts
index 690ca07f9..8514ff606 100644
--- a/src/components/ec-navigation/ec-navigation.spec.ts
+++ b/src/components/ec-navigation/ec-navigation.spec.ts
@@ -49,14 +49,14 @@ describe('EcNavigation', () => {
   });
 
   it('should not render branding if no logo is given in branding object', () => {
-    const wrapper = mountNavigation({ branding: { logo: '', name: 'Test Brand' } });
+    const wrapper = mountNavigation({ branding: { logo: '', name: 'Test Brand', link: 'https://example.com' } });
     expect(wrapper.element).toMatchSnapshot();
     expect(wrapper.findByDataTest('ec-navigation__branding').exists()).toBe(false);
   });
 
   it('should not render branding if logo is given in branding object but showBrandingLogo is set to false', () => {
     const wrapper = mountNavigation({
-      branding: { logo: '/img/my.png', name: 'Test Brand' },
+      branding: { logo: '/img/my.png', name: 'Test Brand', link: 'https://example.com' },
       showBrandingLogo: false,
     });
     expect(wrapper.element).toMatchSnapshot();
@@ -71,6 +71,14 @@ describe('EcNavigation', () => {
     expect(wrapper.findByDataTest('ec-navigation__branding').element).toMatchSnapshot('Branding should have alt and src.');
   });
 
+  it('should render branding logo, name and link when given', () => {
+    const wrapper = mountNavigation({
+      branding: { logo: '/img/my.png', name: 'My Branding', link: 'https://example.com' },
+    });
+    expect(wrapper.element).toMatchSnapshot();
+    expect(wrapper.findByDataTest('ec-navigation__branding').element).toMatchSnapshot('Branding should have alt, src, href.');
+  });
+
   it('should only render mandatory slot if no other slots were given', () => {
     const wrapper = mountNavigation();
     expect(wrapper.element).toMatchSnapshot();
@@ -104,6 +112,7 @@ describe('EcNavigation', () => {
   describe('mobile navigation', () => {
     it('should render mobile header if "isResponsive" prop is true', () => {
       const wrapper = mountNavigation({
+        branding: { logo: '/img/my.png', name: 'My Branding', link: 'https://example.com' },
         isResponsive: true,
       });
 
diff --git a/src/components/ec-navigation/types.ts b/src/components/ec-navigation/types.ts
index 7b0582907..47d45ab29 100644
--- a/src/components/ec-navigation/types.ts
+++ b/src/components/ec-navigation/types.ts
@@ -1,6 +1,7 @@
 export interface NavigationBranding {
   logo: string,
   name: string,
+  link?: string,
 }
 
 export interface NavigationProps {

From 3545b4fb2edf98dcd787e5cc6e713d2df961e18a Mon Sep 17 00:00:00 2001
From: Luis Laguna <luis.laguna@ebury.com>
Date: Fri, 27 Dec 2024 16:35:18 +0000
Subject: [PATCH 2/4] Add optional link to logotype

---
 .../ec-navigation/ec-navigation.vue           | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/ec-navigation/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
index 49ba015c0..d1743aa02 100644
--- a/src/components/ec-navigation/ec-navigation.vue
+++ b/src/components/ec-navigation/ec-navigation.vue
@@ -7,7 +7,19 @@
       @open-mobile-menu="isMobileMenuOpen = true"
     >
       <template #logo>
+        <a
+          v-if="branding.link"
+          :href="branding.link"
+        >
+          <img
+            class="ec-navigation__mobile-header-logo"
+            :src="branding.logo"
+            :alt="branding.name"
+            data-test="ec-navigation__mobile-header-logo"
+          >
+        </a>
         <img
+          v-else
           class="ec-navigation__mobile-header-logo"
           :src="branding.logo"
           :alt="branding.name"
@@ -40,7 +52,20 @@
         class="ec-navigation__branding"
         data-test="ec-navigation__branding"
       >
+        <a
+          v-if="branding.link"
+          :href="branding.link"
+        >
+          <img
+            class="ec-navigation__branding-logo"
+            :class="{ 'ec-navigation__branding-logo--light-mode': isInLightMode }"
+            :src="branding.logo"
+            :alt="branding.name"
+            data-test="ec-navigation__branding-logo"
+          >
+        </a>
         <img
+          v-else
           class="ec-navigation__branding-logo"
           :class="{ 'ec-navigation__branding-logo--light-mode': isInLightMode }"
           :src="branding.logo"

From 575af8bd29f5ff2e66d1a2e6e9e3aac9135a897b Mon Sep 17 00:00:00 2001
From: Luis Laguna <luis.laguna@ebury.com>
Date: Fri, 27 Dec 2024 16:42:04 +0000
Subject: [PATCH 3/4] Update storybook

---
 src/components/ec-navigation/ec-navigation.story.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ec-navigation/ec-navigation.story.ts b/src/components/ec-navigation/ec-navigation.story.ts
index e48198ae5..5d86ece4e 100644
--- a/src/components/ec-navigation/ec-navigation.story.ts
+++ b/src/components/ec-navigation/ec-navigation.story.ts
@@ -78,6 +78,7 @@ basic.args = {
   branding: {
     name: 'My Branding',
     logo: '/ebury-logo-sm-inverse.png',
+    link: '#',
   },
   isCollapsable: true,
   isCollapsed: false,
@@ -219,6 +220,7 @@ responsive.args = {
   branding: {
     name: 'My Branding',
     logo: '/ebury-logo-sm.png',
+    link: '#',
   },
   isCollapsable: false,
   isCollapsed: false,

From f36d44d87059583a8822c1370799e21e22204460 Mon Sep 17 00:00:00 2001
From: Luis Laguna <luis.laguna@ebury.com>
Date: Tue, 7 Jan 2025 16:35:57 +0000
Subject: [PATCH 4/4] Bump project version to 2.8.19

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 10c477d5d..dd9e9ef76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.18",
+  "version": "2.8.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ebury/chameleon-components",
-      "version": "2.8.18",
+      "version": "2.8.19",
       "license": "MIT",
       "dependencies": {
         "@vueuse/core": "10.9.0",
diff --git a/package.json b/package.json
index 3a205051d..0be73dae3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.18",
+  "version": "2.8.19",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",