[CHOPS-890] Add optional logo link to homepage

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/)",

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"

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,
       });
 

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,

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"

src/components/ec-navigation/types.ts

@@ -1,6 +1,7 @@
 export interface NavigationBranding {
   logo: string,
   name: string,
+  link?: string,
 }
 
 export interface NavigationProps {