From 18513dafc6c51e577f0e3203f0e3ac7b2ce83d88 Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Tue, 11 Nov 2025 13:20:08 +0200
Subject: [PATCH] OEL-2677: Backwards compatible solution for typo.

---
 src/components/bcl-modal/modal.html.twig | 7 ++++---
 src/components/bcl-modal/modal.story.js  | 4 ++--
 src/components/bcl-modal/modal.test.js   | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/bcl-modal/modal.html.twig b/src/components/bcl-modal/modal.html.twig
index cd183d182..126fa4558 100644
--- a/src/components/bcl-modal/modal.html.twig
+++ b/src/components/bcl-modal/modal.html.twig
@@ -7,7 +7,8 @@
   - fullscreen_responsive (string) (default: '')
     options: sm, md, lg, xl, xxl
   - static_backdrop (boolean) (default: false)
-  - verticaly_centered (boolean) (default: false)
+  - vertically_centered (boolean) (default: false)
+  - verticaly_centered (boolean) (default: false) // deprecated typo
   - scrollable (boolean) (default: false)
   - header (block) (default: '')
   - messages (block) (default: '')
@@ -29,7 +30,7 @@
 {% set _id = id|default('modal-' ~ random(10000)) %}
 {% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
 {% set _static_backdrop = static_backdrop ?? false %}
-{% set _verticaly_centered = verticaly_centered ?? false %}
+{% set _vertically_centered = vertically_centered ?? verticaly_centered ?? false %}
 {% set _scrollable = scrollable ?? false %}
 {% set _header = header|default('') %}
 {% set _header_attributes = header_attributes ?: create_attribute() %}
@@ -63,7 +64,7 @@
   <div class="modal-dialog
   {{- _size ? ' modal-' ~ size -}}
   {{- _fullscreen_responsive ? ' modal-fullscreen-' ~ _fullscreen_responsive ~ '-down' -}}
-  {{- _verticaly_centered ? ' modal-dialog-centered' -}}
+  {{- _vertically_centered ? ' modal-dialog-centered' -}}
   {{- _scrollable ? ' modal-dialog-scrollable' -}}"
   >
     <div class="modal-content">
diff --git a/src/components/bcl-modal/modal.story.js b/src/components/bcl-modal/modal.story.js
index 146f2fc03..db8ea77cb 100644
--- a/src/components/bcl-modal/modal.story.js
+++ b/src/components/bcl-modal/modal.story.js
@@ -4,7 +4,7 @@ import modal from "@openeuropa/bcl-modal/modal.html.twig";
 const getArgs = () => ({
   size: "default",
   static_backdrop: false,
-  verticaly_centered: false,
+  vertically_centered: false,
   scrollable: false,
 });
 
@@ -40,7 +40,7 @@ const getArgTypes = () => ({
       category: "Style",
     },
   },
-  verticaly_centered: {
+  vertically_centered: {
     name: "verticaly centered",
     type: { name: "boolean" },
     description: "Vertically center the modal",
diff --git a/src/components/bcl-modal/modal.test.js b/src/components/bcl-modal/modal.test.js
index c6dda43d2..e1733724e 100644
--- a/src/components/bcl-modal/modal.test.js
+++ b/src/components/bcl-modal/modal.test.js
@@ -46,7 +46,7 @@ describe("OE - modal", () => {
     expect.assertions(1);
 
     return expect(
-      render({ ...demoData, verticaly_centered: true }),
+      render({ ...demoData, vertically_centered: true }),
     ).resolves.toMatchSnapshot();
   });