From dc0d36d5118da28993e53e0638d4add337f01ec6 Mon Sep 17 00:00:00 2001
From: Batuhan ALGUL <batuhanalgul@proton.me>
Date: Sat, 20 Jun 2026 19:54:43 +0300
Subject: [PATCH] Fix spelling error in Logo component acronym attribute

The Logo component exposed an attribute named 'accronym' (double c), which is a misspelling of 'acronym'. Closes #30.

This adds a new 'acronym' prop alongside the existing 'accronym' prop. A computed value (acronymValue) reads the new prop first and falls back to the old one, so existing consumers passing accronym keep working unchanged.

Internal usages in TopHeader.vue and Logo.stories.js are updated to use the corrected 'acronym' name.

The old 'accronym' prop is left in place, deprecated but functional, to avoid a breaking change for any external site already using this component.
---
 app/components/ch/components/Logo.vue             | 9 ++++++++-
 app/components/ch/sections/TopHeader.vue          | 4 ++--
 app/components/stories/components/Logo.stories.js | 4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/components/ch/components/Logo.vue b/app/components/ch/components/Logo.vue
index b893a3286..a0bf29c1c 100644
--- a/app/components/ch/components/Logo.vue
+++ b/app/components/ch/components/Logo.vue
@@ -278,7 +278,7 @@
     </svg>
     <div class="logo__separator" role="separator" aria-hidden="true" />
     <div class="logo-title__container">
-      <div class="logo__accronym" v-html="accronym" />
+      <div class="logo__accronym" v-html="acronymValue" />
       <div class="logo__title">
         <div v-html="title" />
         <div v-if="isEasyLanguage" class="badge-easy-language">
@@ -306,6 +306,11 @@ const props = defineProps({
     required: false,
     default: () => '',
   },
+  acronym: {
+    type: String,
+    required: false,
+    default: () => '',
+  },
   link: {
     type: String,
     required: false,
@@ -332,4 +337,6 @@ const computedLogoClass = computed(() => {
     return 'logo__flag'
   }
 })
+
+const acronymValue = computed(() => props.acronym || props.accronym)
 </script>
diff --git a/app/components/ch/sections/TopHeader.vue b/app/components/ch/sections/TopHeader.vue
index dfe06e197..d38d6be31 100644
--- a/app/components/ch/sections/TopHeader.vue
+++ b/app/components/ch/sections/TopHeader.vue
@@ -9,7 +9,7 @@
     <div class="container container--flex">
       <Logo
         title="Eidgenössisches Departement für Verteidigung, <br/>Bevölkerungsschutz und Sport"
-        accronym="DSS"
+        acronym="DSS"
         :class="overrideLogoForPrint ? 'logo--print-hidden' : ''"
         :isFreebrand="isFreebrand"
         :isEasyLanguage="isEasyLanguage"
@@ -18,7 +18,7 @@
       <Logo
         v-if="overrideLogoForPrint"
         title="Staatssekretariat für Wirtschaft"
-        accronym="SECO"
+        acronym="SECO"
         :class="overrideLogoForPrint ? 'logo--print-only' : ''"
       />
       <div v-if="isEasyLanguage" class="icon-header-mobile icon-easy-language">
diff --git a/app/components/stories/components/Logo.stories.js b/app/components/stories/components/Logo.stories.js
index 80fcb3179..7114ac2a2 100644
--- a/app/components/stories/components/Logo.stories.js
+++ b/app/components/stories/components/Logo.stories.js
@@ -7,9 +7,9 @@ export default {
 
 export const Logotype = {
   components: { Logo },
-  template: '<Logo :title="title" :accronym="accronym" />',
+  template: '<Logo :title="title" :acronym="acronym" />',
   args: {
     title: 'Design System for <br/>the Swiss Confederation',
-    accronym: 'DSS',
+    acronym: 'DSS',
   },
 }