✨ vue-dot: Add link to secondary logo in HeaderBar (#1967)

assurance-maladie-digital · Apr 29, 2022 · 5827bd1 · 5827bd1
1 parent d288de2
commit 5827bd1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,8 @@
   - **HeaderBar:** Ajout du thème *Compte entreprise* ([#1898](https://github.com/assurance-maladie-digital/design-system/pull/1898)) ([c05b914](https://github.com/assurance-maladie-digital/design-system/commit/c05b9141519de7c0dbf2a03163db2d07b20521e3))
   - **CookieBanner:** Ajout d'un nouveau composant ([#1922](https://github.com/assurance-maladie-digital/design-system/pull/1922)) ([4d8d1d0](https://github.com/assurance-maladie-digital/design-system/commit/4d8d1d06a600ba63f4e8bb12b9745359dd6ed66b))
   - **CookiesPage:** Ajout d'un nouveau composant ([#1924](https://github.com/assurance-maladie-digital/design-system/pull/1924)) ([ae650be](https://github.com/assurance-maladie-digital/design-system/commit/ae650be71cac2a0fa39945798a28dedc63ca98d5))
-  - **HeaderBar:** Ajout de la prop `home-href` ([#1966](https://github.com/assurance-maladie-digital/design-system/pull/1966))
+  - **HeaderBar:** Ajout de la prop `home-href` ([#1966](https://github.com/assurance-maladie-digital/design-system/pull/1966)) ([d288de2](https://github.com/assurance-maladie-digital/design-system/commit/d288de2eb1fd5577fee0bc79b7245e2284155882))
+  - **HeaderBar:** Ajout d'un lien vers la page d'accueil sur le logo secondaire ([#1967](https://github.com/assurance-maladie-digital/design-system/pull/1967))
 
 - 🐛 **Corrections de bugs**
   - **ExternalLinks:** Correction de l'affichage du menu ([#1889](https://github.com/assurance-maladie-digital/design-system/pull/1889)) ([e6f1b7f](https://github.com/assurance-maladie-digital/design-system/commit/e6f1b7f32b55fcf51cd70b0bd413cb13383ffef9))

diff --git a/packages/vue-dot/src/patterns/HeaderBar/HeaderBrandSection/HeaderBrandSection.vue b/packages/vue-dot/src/patterns/HeaderBar/HeaderBrandSection/HeaderBrandSection.vue
@@ -33,11 +33,20 @@
 				<path d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z" />
 			</svg>
 
-			<img
+			<component
+				:is="secondaryLogoCtnComponent"
 				v-if="secondaryLogo"
-				:src="secondaryLogo.src"
-				:alt="secondaryLogo.alt"
+				:aria-current-value="null"
+				:aria-label="secondaryLogoLabel"
+				:to="homeLink"
+				:href="homeHref"
+				class="vd-header-home-link"
 			>
+				<img
+					:src="secondaryLogo.src"
+					:alt="secondaryLogo.alt"
+				>
+			</component>
 
 			<div
 				v-else-if="service.title || service.subTitle"
@@ -168,6 +177,10 @@
 			return Boolean(this.$slots.default || this.secondaryLogo);
 		}
 
+		get hasSecondaryLogoLink(): boolean {
+			return this.theme === ThemeEnum.AMELI_PRO || this.theme === ThemeEnum.AMELI;
+		}
+
 		get logoContainerComponent(): string {
 			if (this.homeHref) {
 				return 'a';
@@ -176,6 +189,22 @@
 			return this.homeLink ? 'RouterLink' : 'div';
 		}
 
+		get secondaryLogoCtnComponent(): string {
+			if (this.hasSecondaryLogoLink) {
+				return this.logoContainerComponent;
+			}
+
+			return 'div';
+		}
+
+		get secondaryLogoLabel(): string | null {
+			if (this.hasSecondaryLogoLink && this.secondaryLogo) {
+				return `${locales.homeLinkPrefix} ${this.secondaryLogo.alt}`;
+			}
+
+			return null;
+		}
+
 		get showDivider(): boolean {
 			return Boolean(this.hasSecondaryLogo || this.service.title);
 		}

diff --git a/packages/vue-dot/src/patterns/HeaderBar/HeaderBrandSection/locales.ts b/packages/vue-dot/src/patterns/HeaderBar/HeaderBrandSection/locales.ts
@@ -1,7 +1,8 @@
 export const locales = {
+	homeLinkPrefix: 'Accueil,',
 	homeLinkLabel: 'Accueil, l’Assurance Maladie',
 	logoCnam: 'Caisse nationale',
-	logoAmeli: 'Ameli.fr',
+	logoAmeli: 'ameli.fr',
 	logoAmeliPro: 'AmeliPro',
 	compteEntreprise: {
 		title: {