OEL-2677: Backwards compatible solution for typo. (#708)

Author: tibi2303

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">

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

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