hr-design-system-handlebars 1.114.92 → 1.114.94

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.114.94 (Mon Feb 17 2025)
+
+#### 🐛 Bug Fix
+
+- Fixing clearance float bug + Refactor [#1242](https://github.com/mumprod/hr-design-system-handlebars/pull/1242) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
+# v1.114.93 (Fri Feb 14 2025)
+
+#### ⚠️ Pushed to `main`
+
+- Enhance contact form interaction by adding touch event listeners and improve German translation in noscript message ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.114.92 (Thu Feb 13 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3846,7 +3846,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1739488192088;
+  counter-reset: cnt1739785841928;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4291,7 +4291,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1739488192088 1;
+  counter-increment: cnt1739785841928 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4309,7 +4309,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1739488192088);
+  content: counter(cnt1739785841928);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/forms/js/contactForm.alpine.js

@@ -35,6 +35,8 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
             this.interacted = false;
             addEventListener('mousemove', () => this.interacted = true );
             addEventListener('keypress', () => this.interacted = true );
+            addEventListener('touchstart', () => this.interacted = true ); 
+            addEventListener('touchmove', () => this.interacted = true );   
         },
         scrollToElementAndCenterWithTimeout(element, timeout){
             setTimeout(() => {

package/dist/views/components/forms/webform.hbs

@@ -33,7 +33,7 @@
                         <noscript>
                             <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
                                 <p class="font-bold">Hinweis</p>
-                                <p>Bitte Aktivieren Sie JavaScript um dieses Formular Absenden zu können.</p>
+                                <p>Bitte aktivieren Sie JavaScript, um dieses Formular absenden zu können.</p>
                             </div>
                         </noscript>
                     {{/if}}

package/dist/views/components/newsletter/components/newsletter_form.hbs

@@ -1,19 +1,19 @@
-<div id="formWrapper" class="mt-4">
-
-<form class="relative flex flex-col justify-center overflow-hidden group js-form" 
-id="form{{nextRandom}}" 
-x-ref="form{{getRandom}}" 
-ax-load
-x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
-x-init="formInit()" 
-x-ignore
-@submit.prevent
-action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "mailserver.newsletter"}}{{/if}}" 
-method="post" 
-enctype="application/x-www-form-urlencoded"
-accept-charset="utf-8"
+<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
+    {{this.title}}
+</h3>
+<div id="formWrapper">
+<form class="relative flex flex-col justify-center overflow-hidden group" 
+    id="form{{nextRandom}}" 
+    x-ref="form{{getRandom}}" 
+    ax-load 
+    x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
+    x-init="formInit()" 
+    x-ignore
+    @submit.prevent
+    action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "newsletter.subscription.endpoint"}}{{/if}}" 
+    method="post" 
+    accept-charset="utf-8"
 >
-
 <div x-show="!wasPosted"             
             x-transition:enter="transition ease-out duration-300 delay-300"
             x-transition:enter-start="opacity-0 transform scale-90"
@@ -22,10 +22,34 @@ accept-charset="utf-8"
             x-transition:leave-start="opacity-100 transform scale-100"
             x-transition:leave-end="opacity-0 transform scale-90"
         >
-            {{> components/newsletter/components/newsletter_old_fields }} 
+            {{> components/newsletter/components/newsletter_fields }} 
 
             {{> components/newsletter/components/newsletter_controls }}
 </div>
 
+<div class="flex flex-col gap-6 js-successMessage md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
+    x-transition:enter="transition ease-out duration-300 delay-75"
+    x-transition:enter-start="opacity-0 transform scale-90"
+    x-transition:enter-end="opacity-100 transform scale-100"
+    x-cloak
+>
+        {{{include "components/newsletter/components/newsletter_success" _success="true" _locaKeyText="newsletter_text_success"}}}
+</div>
+<div class="flex flex-col gap-6 js-errorMessage md:gap-10" id="errorMessage" x-show="wasPostedWithError"
+    x-transition:enter="transition ease-out duration-300 delay-75"
+    x-transition:enter-start="opacity-0 transform scale-90"
+    x-transition:enter-end="opacity-100 transform scale-100"
+    x-cloak
+>
+        {{{include "components/newsletter/components/newsletter_error" _locaKeyText="newsletter_text_error"}}}
+</div>
+<div class="flex flex-col gap-6 js-alreadyRegisteredMessage md:gap-10" id="alreadyRegisteredMessage" x-show="wasPostedAlreadyRegistered"
+    x-transition:enter="transition ease-out duration-300 delay-75"
+    x-transition:enter-start="opacity-0 transform scale-90"
+    x-transition:enter-end="opacity-100 transform scale-100"
+    x-cloak
+>
+        {{{include "components/newsletter/components/newsletter_already_registered" _alreadyRegistered="true" _locaKeyText="newsletter_text_already_registered" }}}
+</div>
 </form>
 </div>

package/dist/views/components/newsletter/newsletter.hbs

@@ -1,5 +1,5 @@
-<div id="{{this.uuid}}" class="relative bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}">
+<div id="{{this.uuid}}" class="relative clear-both bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}">
     {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
-        {{> components/newsletter/components/new_newsletter_form}}
+        {{> components/newsletter/components/newsletter_form}}
     {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
 </div>

package/dist/views_static/components/forms/webform.hbs

@@ -33,7 +33,7 @@
                         <noscript>
                             <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
                                 <p class="font-bold">Hinweis</p>
-                                <p>Bitte Aktivieren Sie JavaScript um dieses Formular Absenden zu können.</p>
+                                <p>Bitte aktivieren Sie JavaScript, um dieses Formular absenden zu können.</p>
                             </div>
                         </noscript>
                     {{/if}}

package/dist/views_static/components/newsletter/components/newsletter_form.hbs

@@ -1,19 +1,19 @@
-<div id="formWrapper" class="mt-4">
-
-<form class="relative flex flex-col justify-center overflow-hidden group js-form" 
-id="form{{nextRandom}}" 
-x-ref="form{{getRandom}}" 
-ax-load
-x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
-x-init="formInit()" 
-x-ignore
-@submit.prevent
-action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "mailserver.newsletter"}}{{/if}}" 
-method="post" 
-enctype="application/x-www-form-urlencoded"
-accept-charset="utf-8"
+<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
+    {{this.title}}
+</h3>
+<div id="formWrapper">
+<form class="relative flex flex-col justify-center overflow-hidden group" 
+    id="form{{nextRandom}}" 
+    x-ref="form{{getRandom}}" 
+    ax-load 
+    x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
+    x-init="formInit()" 
+    x-ignore
+    @submit.prevent
+    action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "newsletter.subscription.endpoint"}}{{/if}}" 
+    method="post" 
+    accept-charset="utf-8"
 >
-
 <div x-show="!wasPosted"             
             x-transition:enter="transition ease-out duration-300 delay-300"
             x-transition:enter-start="opacity-0 transform scale-90"
@@ -22,10 +22,34 @@ accept-charset="utf-8"
             x-transition:leave-start="opacity-100 transform scale-100"
             x-transition:leave-end="opacity-0 transform scale-90"
         >
-            {{> components/newsletter/components/newsletter_old_fields }} 
+            {{> components/newsletter/components/newsletter_fields }} 
 
             {{> components/newsletter/components/newsletter_controls }}
 </div>
 
+<div class="flex flex-col gap-6 js-successMessage md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
+    x-transition:enter="transition ease-out duration-300 delay-75"
+    x-transition:enter-start="opacity-0 transform scale-90"
+    x-transition:enter-end="opacity-100 transform scale-100"
+    x-cloak
+>
+        {{{include "components/newsletter/components/newsletter_success" _success="true" _locaKeyText="newsletter_text_success"}}}
+</div>
+<div class="flex flex-col gap-6 js-errorMessage md:gap-10" id="errorMessage" x-show="wasPostedWithError"
+    x-transition:enter="transition ease-out duration-300 delay-75"
+    x-transition:enter-start="opacity-0 transform scale-90"
+    x-transition:enter-end="opacity-100 transform scale-100"
+    x-cloak
+>
+        {{{include "components/newsletter/components/newsletter_error" _locaKeyText="newsletter_text_error"}}}
+</div>
+<div class="flex flex-col gap-6 js-alreadyRegisteredMessage md:gap-10" id="alreadyRegisteredMessage" x-show="wasPostedAlreadyRegistered"
+    x-transition:enter="transition ease-out duration-300 delay-75"
+    x-transition:enter-start="opacity-0 transform scale-90"
+    x-transition:enter-end="opacity-100 transform scale-100"
+    x-cloak
+>
+        {{{include "components/newsletter/components/newsletter_already_registered" _alreadyRegistered="true" _locaKeyText="newsletter_text_already_registered" }}}
+</div>
 </form>
 </div>

package/dist/views_static/components/newsletter/newsletter.hbs

@@ -1,5 +1,5 @@
-<div id="{{this.uuid}}" class="relative bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}">
+<div id="{{this.uuid}}" class="relative clear-both bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}">
     {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
-        {{> components/newsletter/components/new_newsletter_form}}
+        {{> components/newsletter/components/newsletter_form}}
     {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
 </div>

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.114.92",
+  "version": "1.114.94",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/stories/views/components/forms/js/contactForm.alpine.js

@@ -35,6 +35,8 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
             this.interacted = false;
             addEventListener('mousemove', () => this.interacted = true );
             addEventListener('keypress', () => this.interacted = true );
+            addEventListener('touchstart', () => this.interacted = true ); 
+            addEventListener('touchmove', () => this.interacted = true );   
         },
         scrollToElementAndCenterWithTimeout(element, timeout){
             setTimeout(() => {

package/src/stories/views/components/forms/webform.hbs

@@ -33,7 +33,7 @@
                         <noscript>
                             <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
                                 <p class="font-bold">Hinweis</p>
-                                <p>Bitte Aktivieren Sie JavaScript um dieses Formular Absenden zu können.</p>
+                                <p>Bitte aktivieren Sie JavaScript, um dieses Formular absenden zu können.</p>
                             </div>
                         </noscript>
                     {{/if}}

package/src/stories/views/components/newsletter/components/newsletter_form.hbs

@@ -1,19 +1,19 @@
-<div id="formWrapper" class="mt-4">
-
-<form class="relative flex flex-col justify-center overflow-hidden group js-form" 
-id="form{{nextRandom}}" 
-x-ref="form{{getRandom}}" 
-ax-load
-x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
-x-init="formInit()" 
-x-ignore
-@submit.prevent
-action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "mailserver.newsletter"}}{{/if}}" 
-method="post" 
-enctype="application/x-www-form-urlencoded"
-accept-charset="utf-8"
+<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
+    {{this.title}}
+</h3>
+<div id="formWrapper">
+<form class="relative flex flex-col justify-center overflow-hidden group" 
+    id="form{{nextRandom}}" 
+    x-ref="form{{getRandom}}" 
+    ax-load 
+    x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
+    x-init="formInit()" 
+    x-ignore
+    @submit.prevent
+    action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "newsletter.subscription.endpoint"}}{{/if}}" 
+    method="post" 
+    accept-charset="utf-8"
 >
-
 <div x-show="!wasPosted"             
             x-transition:enter="transition ease-out duration-300 delay-300"
             x-transition:enter-start="opacity-0 transform scale-90"
@@ -22,10 +22,34 @@ accept-charset="utf-8"
             x-transition:leave-start="opacity-100 transform scale-100"
             x-transition:leave-end="opacity-0 transform scale-90"
         >
-            {{> components/newsletter/components/newsletter_old_fields }} 
+            {{> components/newsletter/components/newsletter_fields }} 
 
             {{> components/newsletter/components/newsletter_controls }}
 </div>
 
+<div class="flex flex-col gap-6 js-successMessage md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
+    x-transition:enter="transition ease-out duration-300 delay-75"
+    x-transition:enter-start="opacity-0 transform scale-90"
+    x-transition:enter-end="opacity-100 transform scale-100"
+    x-cloak
+>
+        {{{include "components/newsletter/components/newsletter_success" _success="true" _locaKeyText="newsletter_text_success"}}}
+</div>
+<div class="flex flex-col gap-6 js-errorMessage md:gap-10" id="errorMessage" x-show="wasPostedWithError"
+    x-transition:enter="transition ease-out duration-300 delay-75"
+    x-transition:enter-start="opacity-0 transform scale-90"
+    x-transition:enter-end="opacity-100 transform scale-100"
+    x-cloak
+>
+        {{{include "components/newsletter/components/newsletter_error" _locaKeyText="newsletter_text_error"}}}
+</div>
+<div class="flex flex-col gap-6 js-alreadyRegisteredMessage md:gap-10" id="alreadyRegisteredMessage" x-show="wasPostedAlreadyRegistered"
+    x-transition:enter="transition ease-out duration-300 delay-75"
+    x-transition:enter-start="opacity-0 transform scale-90"
+    x-transition:enter-end="opacity-100 transform scale-100"
+    x-cloak
+>
+        {{{include "components/newsletter/components/newsletter_already_registered" _alreadyRegistered="true" _locaKeyText="newsletter_text_already_registered" }}}
+</div>
 </form>
 </div>

package/src/stories/views/components/newsletter/newsletter.hbs

@@ -1,5 +1,5 @@
-<div id="{{this.uuid}}" class="relative bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}">
+<div id="{{this.uuid}}" class="relative clear-both bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}">
     {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
-        {{> components/newsletter/components/new_newsletter_form}}
+        {{> components/newsletter/components/newsletter_form}}
     {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
 </div>

package/src/stories/views/components/newsletter/newsletter.stories.js

@@ -1,5 +1,4 @@
-import NewNewsletterJson from './fixtures/new_newsletter.json'
-import OldNewsletterJson from './fixtures/newsletter.json'
+import newsletterJson from './fixtures/newsletter.json'
 
 const handlebars = require('hrHandlebars')
 
@@ -32,7 +31,7 @@ export default {
         chromatic: { disableSnapshot: true }
     }
 }
-const TemplateNewsletterNew = (args) => {
+const TemplateNewsletter = (args) => {
     let hbsTemplate = handlebars.compile(`
             {{> components/newsletter/newsletter }}
     `)
@@ -40,17 +39,17 @@ const TemplateNewsletterNew = (args) => {
 }
 
 export const Default = {
-    render: TemplateNewsletterNew.bind({}),
-    name: 'Neuer Newsletter',
-    args: NewNewsletterJson,
+    render: TemplateNewsletter.bind({}),
+    name: 'Newsletter',
+    args: newsletterJson,
     parameters: { 
         fetchMock: {
             mocks: [
                 {
-                    matcher: 'http://localhost:6006/',
+                    matcher: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
                     response: {
                         status: 200,
-                        message: 'no_valid_newsletters',
+                        message: 'success',
                         body: {
                             status: ''
                         },

package/dist/views/components/newsletter/components/new_newsletter_form.hbs

@@ -1,55 +0,0 @@
-<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
-    {{this.title}}
-</h3>
-<div id="formWrapper">
-<form class="relative flex flex-col justify-center overflow-hidden group" 
-    id="form{{nextRandom}}" 
-    x-ref="form{{getRandom}}" 
-    ax-load 
-    x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
-    x-init="formInit()" 
-    x-ignore
-    @submit.prevent
-    action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "newsletter.subscription.endpoint"}}{{/if}}" 
-    method="post" 
-    accept-charset="utf-8"
->
-<div x-show="!wasPosted"             
-            x-transition:enter="transition ease-out duration-300 delay-300"
-            x-transition:enter-start="opacity-0 transform scale-90"
-            x-transition:enter-end="opacity-100 transform scale-100"
-            x-transition:leave="transition ease-in duration-75 delay-0"
-            x-transition:leave-start="opacity-100 transform scale-100"
-            x-transition:leave-end="opacity-0 transform scale-90"
-        >
-            {{> components/newsletter/components/newsletter_fields }} 
-
-            {{> components/newsletter/components/newsletter_controls }}
-</div>
-
-<div class="flex flex-col gap-6 js-successMessage md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
-    x-transition:enter="transition ease-out duration-300 delay-75"
-    x-transition:enter-start="opacity-0 transform scale-90"
-    x-transition:enter-end="opacity-100 transform scale-100"
-    x-cloak
->
-        {{{include "components/newsletter/components/newsletter_success" _success="true" _locaKeyText="newsletter_text_success"}}}
-</div>
-<div class="flex flex-col gap-6 js-errorMessage md:gap-10" id="errorMessage" x-show="wasPostedWithError"
-    x-transition:enter="transition ease-out duration-300 delay-75"
-    x-transition:enter-start="opacity-0 transform scale-90"
-    x-transition:enter-end="opacity-100 transform scale-100"
-    x-cloak
->
-        {{{include "components/newsletter/components/newsletter_error" _locaKeyText="newsletter_text_error"}}}
-</div>
-<div class="flex flex-col gap-6 js-alreadyRegisteredMessage md:gap-10" id="alreadyRegisteredMessage" x-show="wasPostedAlreadyRegistered"
-    x-transition:enter="transition ease-out duration-300 delay-75"
-    x-transition:enter-start="opacity-0 transform scale-90"
-    x-transition:enter-end="opacity-100 transform scale-100"
-    x-cloak
->
-        {{{include "components/newsletter/components/newsletter_already_registered" _alreadyRegistered="true" _locaKeyText="newsletter_text_already_registered" }}}
-</div>
-</form>
-</div>

package/dist/views_static/components/newsletter/components/new_newsletter_form.hbs

@@ -1,55 +0,0 @@
-<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
-    {{this.title}}
-</h3>
-<div id="formWrapper">
-<form class="relative flex flex-col justify-center overflow-hidden group" 
-    id="form{{nextRandom}}" 
-    x-ref="form{{getRandom}}" 
-    ax-load 
-    x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
-    x-init="formInit()" 
-    x-ignore
-    @submit.prevent
-    action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "newsletter.subscription.endpoint"}}{{/if}}" 
-    method="post" 
-    accept-charset="utf-8"
->
-<div x-show="!wasPosted"             
-            x-transition:enter="transition ease-out duration-300 delay-300"
-            x-transition:enter-start="opacity-0 transform scale-90"
-            x-transition:enter-end="opacity-100 transform scale-100"
-            x-transition:leave="transition ease-in duration-75 delay-0"
-            x-transition:leave-start="opacity-100 transform scale-100"
-            x-transition:leave-end="opacity-0 transform scale-90"
-        >
-            {{> components/newsletter/components/newsletter_fields }} 
-
-            {{> components/newsletter/components/newsletter_controls }}
-</div>
-
-<div class="flex flex-col gap-6 js-successMessage md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
-    x-transition:enter="transition ease-out duration-300 delay-75"
-    x-transition:enter-start="opacity-0 transform scale-90"
-    x-transition:enter-end="opacity-100 transform scale-100"
-    x-cloak
->
-        {{{include "components/newsletter/components/newsletter_success" _success="true" _locaKeyText="newsletter_text_success"}}}
-</div>
-<div class="flex flex-col gap-6 js-errorMessage md:gap-10" id="errorMessage" x-show="wasPostedWithError"
-    x-transition:enter="transition ease-out duration-300 delay-75"
-    x-transition:enter-start="opacity-0 transform scale-90"
-    x-transition:enter-end="opacity-100 transform scale-100"
-    x-cloak
->
-        {{{include "components/newsletter/components/newsletter_error" _locaKeyText="newsletter_text_error"}}}
-</div>
-<div class="flex flex-col gap-6 js-alreadyRegisteredMessage md:gap-10" id="alreadyRegisteredMessage" x-show="wasPostedAlreadyRegistered"
-    x-transition:enter="transition ease-out duration-300 delay-75"
-    x-transition:enter-start="opacity-0 transform scale-90"
-    x-transition:enter-end="opacity-100 transform scale-100"
-    x-cloak
->
-        {{{include "components/newsletter/components/newsletter_already_registered" _alreadyRegistered="true" _locaKeyText="newsletter_text_already_registered" }}}
-</div>
-</form>
-</div>

package/src/stories/views/components/newsletter/components/new_newsletter_form.hbs

@@ -1,55 +0,0 @@
-<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
-    {{this.title}}
-</h3>
-<div id="formWrapper">
-<form class="relative flex flex-col justify-center overflow-hidden group" 
-    id="form{{nextRandom}}" 
-    x-ref="form{{getRandom}}" 
-    ax-load 
-    x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
-    x-init="formInit()" 
-    x-ignore
-    @submit.prevent
-    action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "newsletter.subscription.endpoint"}}{{/if}}" 
-    method="post" 
-    accept-charset="utf-8"
->
-<div x-show="!wasPosted"             
-            x-transition:enter="transition ease-out duration-300 delay-300"
-            x-transition:enter-start="opacity-0 transform scale-90"
-            x-transition:enter-end="opacity-100 transform scale-100"
-            x-transition:leave="transition ease-in duration-75 delay-0"
-            x-transition:leave-start="opacity-100 transform scale-100"
-            x-transition:leave-end="opacity-0 transform scale-90"
-        >
-            {{> components/newsletter/components/newsletter_fields }} 
-
-            {{> components/newsletter/components/newsletter_controls }}
-</div>
-
-<div class="flex flex-col gap-6 js-successMessage md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
-    x-transition:enter="transition ease-out duration-300 delay-75"
-    x-transition:enter-start="opacity-0 transform scale-90"
-    x-transition:enter-end="opacity-100 transform scale-100"
-    x-cloak
->
-        {{{include "components/newsletter/components/newsletter_success" _success="true" _locaKeyText="newsletter_text_success"}}}
-</div>
-<div class="flex flex-col gap-6 js-errorMessage md:gap-10" id="errorMessage" x-show="wasPostedWithError"
-    x-transition:enter="transition ease-out duration-300 delay-75"
-    x-transition:enter-start="opacity-0 transform scale-90"
-    x-transition:enter-end="opacity-100 transform scale-100"
-    x-cloak
->
-        {{{include "components/newsletter/components/newsletter_error" _locaKeyText="newsletter_text_error"}}}
-</div>
-<div class="flex flex-col gap-6 js-alreadyRegisteredMessage md:gap-10" id="alreadyRegisteredMessage" x-show="wasPostedAlreadyRegistered"
-    x-transition:enter="transition ease-out duration-300 delay-75"
-    x-transition:enter-start="opacity-0 transform scale-90"
-    x-transition:enter-end="opacity-100 transform scale-100"
-    x-cloak
->
-        {{{include "components/newsletter/components/newsletter_already_registered" _alreadyRegistered="true" _locaKeyText="newsletter_text_already_registered" }}}
-</div>
-</form>
-</div>