hr-design-system-handlebars 1.114.1 → 1.114.3

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

@@ -0,0 +1,30 @@
+{{#unless this.useNewNewsletter}}
+    <div id="{{this.uuid}}" class="{{_addClass}} js-load" data-hr-newsletter='{"url": "{{this.url.nocache}}"}'>
+        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
+        <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
+            {{this.title}}
+        </h3>
+        <div class="js-formWrapper">
+            {{> components/newsletter/components/newsletter_form}}
+        </div>
+        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
+    </div>
+{{else}}
+    <div id="{{this.uuid}}" class="{{_addClass}} ">
+        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
+        <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
+            {{this.title}}
+        </h3>
+        {{#if this.description}}
+            <div class="c-form__row">
+                <div class="c-form__label">
+                    {{{this.description}}}
+                </div>
+            </div>
+        {{/if}}
+        <div class="js-formWrapper">
+            {{> components/newsletter/components/new_newsletter_form}}
+        </div>
+        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
+    </div>
+{{/unless}}

package/dist/views/components/voting/voting.hbs

@@ -1,64 +1,96 @@
-{{#with this.form}}
-    {{#unless this.isVotingOver}}
-        {{#unless ../this.hasRedirect}}
-            <div class="js-load {{../_addClass}}"
-                data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'
-                data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
-                {{#if this.isSimpleSecured}}
-                    data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
-                    id="{{this.sophoraId}}"
-                {{/if}}
-            >
-        {{else}}
-            <div class="js-load {{../_addClass}}"
-                {{#if this.is2FSecured}}data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'{{/if}}
-                data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
-                {{#if this.isSimpleSecured}}
-                    data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
-                    id="{{this.sophoraId}}"
-                {{/if}}
-            >
-        {{/unless}}    
-            <div class="js-voting-wrapper">
-                <form class="js-votingForm" 
-                    action="{{this.url}}" 
-                    method="post"
-                    enctype="application/x-www-form-urlencoded" 
-                    accept-charset="utf-8" 
-                    autocomplete="off"
+{{#>components/forms/components/backgroundBox  }}
+    {{#with this.form}}
+        {{#unless this.isVotingOver}}
+            {{#unless ../this.hasRedirect}}
+                <div class="js-load {{../_addClass}}"
+                    data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'
+                    data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
+                    {{#if this.isSimpleSecured}}
+                        data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
+                        id="{{this.sophoraId}}"
+                    {{/if}}
                 >
-                    {{> components/voting/components/voting_header _title=../this.title _topline=../this.topline}}
-                    
-                    <div class="c-voting-form__bottomWrapper">
-                        {{#if this.shorttext}}
-                            <p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">{{this.shorttext}}</p>
-                        {{/if}}
-
-                        <div class="w-full mt-6 text-xs text-right sm:mt-12 font-headingSerif sm:text-sm text-gray-scorpion dark:text-text-dark">
-                            {{#if ../this.isMultipleChoice}}
-                                {{loca "votingform_open_answers_text" ../this.maxAnswerCount}}
-                            {{else}}
-                                {{loca "votingform_single_answer_text"}}
+            {{else}}
+                <div class="js-load {{../_addClass}}"
+                    {{#if this.is2FSecured}}data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'{{/if}}
+                    data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
+                    {{#if this.isSimpleSecured}}
+                        data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
+                        id="{{this.sophoraId}}"
+                    {{/if}}
+                >
+            {{/unless}}    
+                <div class="js-voting-wrapper">
+                    <form class="js-votingForm" 
+                        action="{{this.url}}" 
+                        method="post"
+                        enctype="application/x-www-form-urlencoded" 
+                        accept-charset="utf-8" 
+                        autocomplete="off"
+                    >
+                        {{> components/voting/components/voting_header _title=../this.title _topline=../this.topline}}
+                        
+                        <div class="c-voting-form__bottomWrapper">
+                            {{#if this.shorttext}}
+                                <p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">{{this.shorttext}}</p>
                             {{/if}}
-                            <span class="block float-right w-8 js-voting-counter">(0/{{../this.maxAnswerCount}})</span>
+
+                            <div class="w-full mt-6 text-xs text-right sm:mt-12 font-headingSerif sm:text-sm text-gray-scorpion dark:text-text-dark">
+                                {{#if ../this.isMultipleChoice}}
+                                    {{loca "votingform_open_answers_text" ../this.maxAnswerCount}}
+                                {{else}}
+                                    {{loca "votingform_single_answer_text"}}
+                                {{/if}}
+                                <span class="block float-right w-8 js-voting-counter">(0/{{../this.maxAnswerCount}})</span>
+                            </div>
+                            {{> components/forms/components/fields 
+                                    _multipleChoice=../this.isMultipleChoice 
+                                    _addClassGroup="!flex-col mt-2" 
+                                    _addClassChoice="has-[input:checked]:outline outline-2 outline-blue-science-hex bg-white has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed" 
+                                    _addClassLabel="w-full !py-3 sm:!py-4 !pr-3 sm:!pr-4 !text-base sm:!text-lg md:!text-lg" 
+                                    _addClassLabelForDataPolicy="font-headingSerif !pt-0 !text-sm !text-gray-dark dark:!text-text-dark"
+                                    _addClassInput="!my-3 sm:!my-4 !ml-3 sm:!ml-4"
+                            }}
+                            {{#if this.is2FSecured}}
+                                <div class="float-left mt-1 text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
+                            {{/if}}                            
+                            {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="-inactive js-voting-submit-button"}}
                         </div>
-                        {{> components/forms/components/fields 
-                                _multipleChoice=../this.isMultipleChoice 
-                                _addClassGroup="!flex-col mt-2" 
-                                _addClassChoice="has-[input:checked]:outline outline-2 outline-blue-science-hex bg-white has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed" 
-                                _addClassLabel="w-full !py-3 sm:!py-4 !pr-3 sm:!pr-4 !text-base sm:!text-lg md:!text-lg" 
-                                _addClassLabelForDataPolicy="font-headingSerif !pt-0 !text-sm !text-gray-dark dark:!text-text-dark"
-                                _addClassInput="!my-3 sm:!my-4 !ml-3 sm:!ml-4"
-                        }}
-                        {{#if this.is2FSecured}}
-                            <div class="float-left mt-1 text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
-                        {{/if}}                            
-                        {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="-inactive js-voting-submit-button"}}
-                    </div>
-                </form>
+                        <script type="text/html" class="js-successMessage">
+                                {{#if this.is2FSecured}}
+                                    {{{include "components/voting/voting_success_2F" _isInline=true _statusDone=true _title=../this.title _topline=../this.topline}}}
+                                {{else}}
+                                    {{{include "components/voting/voting_success" _isInline=true _voteResults=../this.votingResult _statusDone=true _title=../this.title _topline=../this.topline}}}
+                                {{/if}}
+                        </script>
+                        <script type="text/html" class="js-errorMessage">
+                                {{#if this.is2FSecured}}
+                                    {{{include "components/voting/voting_error" _isInline=true _statusDone=error _title=../this.title _topline=../this.topline}}}
+                                {{else}}
+                                    {{{include "components/voting/voting_error" _isInline=true _statusDone=false _title=../this.title _topline=../this.topline}}}
+                                {{/if}}
+                        </script>
+                        {{#unless this.hideVotingResult}}
+                            <script type="text/html" class="js-result">
+                                    {{#unless this.is2FSecured}}
+                                        {{> components/voting/voting_result 
+                                                _resultBoxMessageText=(loca "votingform_already_voted_cookie_hint") 
+                                                _voteResults=../this.votingResult 
+                                                _isResultOnRedirectPage=_isResultOnRedirectPage 
+                                                _isSimpleSecured=../this.isSimpleSecured 
+                                                _statusDone=true 
+                                                _addClass=../_addClass 
+                                                _hideVotingResult=this.hideVotingResult 
+                                                _isVotingOver=this.isVotingOver 
+                                        }}
+                                    {{/unless}}
+                            </script>
+                        {{/unless}}                                                            
+                    </form>
+                </div>
             </div>
-        </div>
-    {{else}}
-        {{> components/voting/voting_result _isVotingOver=true _title=../this.title _topline=../this.topline}}
-    {{/unless}}
-{{/with}}
+        {{else}}
+            {{> components/voting/voting_result _isVotingOver=true _title=../this.title _topline=../this.topline}}
+        {{/unless}}
+    {{/with}}
+{{/components/forms/components/backgroundBox }}

package/dist/views/components/voting/voting_error.hbs

@@ -1,6 +1,6 @@
 {{> components/voting/voting_result
-            _title=this.title
-            _topline=this.topline
+            _title=_title
+            _topline=_topline
             _resultBoxMessageTitle=(loca "votingform_title_error")
             _resultBoxMessageText=(loca "votingform_text_error")
             _locaKeyText="votingform_text_error"

package/dist/views/components/voting/voting_result.hbs

@@ -1,62 +1,71 @@
-{{#unless _isResultOnRedirectPage}}
-    {{> components/voting/components/voting_header _title=_title _topline=_topline}}
-{{/unless}}
+<div class="{{#if this.isSimpleSecured}}js-load{{/if}}{{#if _addClass}} {{_addClass}}{{/if}}" 
+    {{#unless _isVotingOver}}
+        {{#if this.isSimpleSecured}}
+            data-hr-voting-result-cookie-ds='{"cookieLifetime":"{{this.cookieLifetime}}","votingId":"{{this.sophoraId}}"}'
+        {{/if}}
+    {{/unless}}
+>
 
-{{#if _hideVotingResult}}
-    {{#if _isVotingOver}}
-        <p class="mt-6 ml-8 text-base font-bold sm:ml-9 sm:text-lg font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
+    {{#unless _isResultOnRedirectPage}}
+        {{> components/voting/components/voting_header _title=_title _topline=_topline}}
+    {{/unless}}
+
+    {{#if _hideVotingResult}}
+        {{#if _isVotingOver}}
+            <p class="mt-6 ml-8 text-base font-bold sm:ml-9 sm:text-lg font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
+        {{else}}
+            {{~> components/base/image/icon _icon=(if _statusDone "status-done" "status-error") _iconmap="icons" _addClass=(if _statusDone "" "float-left w-6 h-6 text-error dark:text-error-dark fill-current mt-6 sm:mt-12")}}
+            <p class="mt-6 ml-8 text-base font-bold sm:ml-9 text-error sm:text-lg font-heading sm:mt-12 dark:text-error-dark">{{{_resultBoxMessageText}}}</p>
+        {{/if}}
     {{else}}
-        {{~> components/base/image/icon _icon=(if _statusDone "status-done" "status-error") _iconmap="icons" _addClass=(if _statusDone "" "float-left w-6 h-6 text-error dark:text-error-dark fill-current mt-6 sm:mt-12")}}
-        <p class="mt-6 ml-8 text-base font-bold sm:ml-9 text-error sm:text-lg font-heading sm:mt-12 dark:text-error-dark">{{{_resultBoxMessageText}}}</p>
-    {{/if}}
-{{else}}
-    <p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
-    
-    {{#each _voteResults}}
-        <div class="flex">
-            <div class="grow">
-                <div class="{{#if @first}}mt-7 sm:mt-9{{else}}mt-3 sm:mt-4{{/if}} text-base sm:text-lg font-copy dark:text-text-dark">{{this.label}}</div>
-                <div class="mt-0.5 sm:mt-1 w-full bg-gray-alto rounded-full h-2">
-                    <div class="{{#if this.isWinner}}bg-orange-spicyCarrot-hex{{else}}bg-blue-congress-hex{{/if}} h-2 rounded-full" style="width:{{this.roundedPercentageCount}}%;animation: progressAnimationDS 5s"></div>
+        <p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
+        
+        {{#each _voteResults}}
+            <div class="flex">
+                <div class="grow">
+                    <div class="{{#if @first}}mt-7 sm:mt-9{{else}}mt-3 sm:mt-4{{/if}} text-base sm:text-lg font-copy dark:text-text-dark">{{this.label}}</div>
+                    <div class="mt-0.5 sm:mt-1 w-full bg-gray-alto rounded-full h-2">
+                        <div class="{{#if this.isWinner}}bg-orange-spicyCarrot-hex{{else}}bg-blue-congress-hex{{/if}} h-2 rounded-full" style="width:{{this.roundedPercentageCount}}%;animation: progressAnimationDS 5s"></div>
+                    </div>
+                </div>
+                <div class="self-end flex-none w-16">
+                    <span class="float-right block mt-2 text-2xl font-bold font-headingSerif {{#if this.isWinner}}text-orange-spicyCarrot-hex{{else}}text-blue-congress-hex{{/if}}" style="animation: percentageAnimationDS 5s">
+                        {{#if ../this.showAbsoluteResult}}{{this.count}}{{else}}{{this.percentageCount}}%{{/if}}
+                    </span>
                 </div>
             </div>
-            <div class="self-end flex-none w-16">
-                <span class="float-right block mt-2 text-2xl font-bold font-headingSerif {{#if this.isWinner}}text-orange-spicyCarrot-hex{{else}}text-blue-congress-hex{{/if}}" style="animation: percentageAnimationDS 5s">
-                    {{#if ../this.showAbsoluteResult}}{{this.count}}{{else}}{{this.percentageCount}}%{{/if}}
-                </span>
-            </div>
-        </div>
-    {{/each}}
-    
-    {{#if this.isMultipleChoice}}
-        {{#unless this.showAbsoluteResult}}
+        {{/each}}
+        
+        {{#if this.isMultipleChoice}}
+            {{#unless this.showAbsoluteResult}}
+                {{#if this.showVoteResult}}
+                    <p class="clear-both text-xs pt-7 sm:pt-9 font-headingSerif sm:text-sm text-gray-scorpion">
+                        {{loca "votingform_vote_result"}}{{this.summarizedResult}}
+                    </p>
+                {{/if}}
+            {{/unless}}
+        {{else}}
             {{#if this.showVoteResult}}
                 <p class="clear-both text-xs pt-7 sm:pt-9 font-headingSerif sm:text-sm text-gray-scorpion">
                     {{loca "votingform_vote_result"}}{{this.summarizedResult}}
                 </p>
             {{/if}}
-        {{/unless}}
-    {{else}}
-        {{#if this.showVoteResult}}
-            <p class="clear-both text-xs pt-7 sm:pt-9 font-headingSerif sm:text-sm text-gray-scorpion">
-                {{loca "votingform_vote_result"}}{{this.summarizedResult}}
-            </p>
-        {{/if}}
-    {{/if}}    
-{{/if}}
+        {{/if}}    
+    {{/if}}
 
-{{#if _isVotingOver}}
-    <p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12 dark:text-text-dark">{{loca "votingform_voting_finished"}}</p>
-{{/if}}
+    {{#if _isVotingOver}}
+        <p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12 dark:text-text-dark">{{loca "votingform_voting_finished"}}</p>
+    {{/if}}
 
-{{#unless _isResultOnRedirectPage}}
-    {{#unless this.isSimpleSecured}}
-        {{#unless _isVotingOver}}
-            <div class="mt-6 sm:mt-12">
-                {{#> components/button/link_button _size="lg" _css="float-right"}}
-                    {{> components/button/components/button_label _label=(loca "votingform_form_back")}}
-                {{/components/button/link_button}}
-            </div>            
+    {{#unless _isResultOnRedirectPage}}
+        {{#unless this.isSimpleSecured}}
+            {{#unless _isVotingOver}}
+                <div class="mt-6 sm:mt-12">
+                    {{#> components/button/link_button _size="lg" _css="float-right"}}
+                        {{> components/button/components/button_label _label=(loca "votingform_form_back")}}
+                    {{/components/button/link_button}}
+                </div>            
+            {{/unless}}
         {{/unless}}
     {{/unless}}
-{{/unless}}
+</div>

package/dist/views/components/voting/voting_success.hbs

@@ -1,7 +1,7 @@
 {{#if this.votingSuccessText}}
     {{> components/voting/voting_result
-                _title=this.title
-                _topline=this.topline
+                _title=_title
+                _topline=_topline
                 _resultBoxMessageTitle=(loca "votingform_title_success")
                 _resultBoxMessageText=this.votingSuccessText.richtext
                 _isInline=_isInline
@@ -13,8 +13,8 @@
     }}
 {{else}}
     {{> components/voting/voting_result
-                _title=this.title
-                _topline=this.topline
+                _title=_title
+                _topline=_topline
                 _resultBoxMessageTitle=(loca "votingform_title_success")
                 _resultBoxMessageText=(loca "votingform_text_success")
                 _isInline=_isInline

package/dist/views/components/voting/voting_success_2F.hbs

@@ -1,6 +1,6 @@
 {{> components/voting/voting_result_2F
-            _title=this.title
-            _topline=this.topline
+            _title=_title
+            _topline=_topline
             _resultBoxMessageTitle=(loca "votingform2F_title_success")
             _resultBoxMessageText=(loca "votingform2F_text_success")
             _isInline=_isInline

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

@@ -0,0 +1,62 @@
+<form class="c-form o-box -accented -breakout js-form js-load" id="form--{{nextRandom}}" data-hr-new-newsletter='{
+"trackingInformations": {{this.trackingInformations}} }'
+      action="{{configProperty "newsletter.subscription.endpoint"}}" method="post" accept-charset="utf-8">
+
+    <div class="c-form__row -expanded">
+        {{~> components/forms/components/input
+            _type="email"
+            _isEmail="true"
+            _name="email"
+            _label="E-Mail"
+            _labelClass="hide"
+            _description=""
+            _wrapperClass=(if this.isHidden "hidden")
+            _tabindex=(if this.isHidden "-1")
+            _required="true"
+            _maxLength="140"
+            _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
+            _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
+            _formId=../_formId
+        }}
+    </div>
+
+    <div class="c-form__row">
+        {{~> components/forms/components/choice
+            _inGroup="false"
+            _type="checkbox"
+            _name="checkbox"
+            _label=(loca "accept_data_privacy_regulation_link")
+            _description="Das ist der Beschreibungstext von Checkbox"
+            _required="true"
+            _errorMandatory="Bitte wählen Sie dieses Pflichtfeld aus"
+        }}
+        </a>
+    </div>
+
+    {{~> components/forms/components/controls }}
+
+
+    {{~> components/forms/components/input
+        _name="newsletter"
+        _type="hidden"
+        _value=this.mailingList
+        _hasLabel=false
+    }}
+
+    {{~>components/forms/components/input
+        _name="newsletter-type"
+        _type="hidden"
+        _value="html"
+        _hasLabel=false
+    }}
+
+    <script type="text/html" class="js-successMessage">
+            {{{include "components/newsletter/components/newsletter_success" }}}
+    </script>
+    <script type="text/html" class="js-errorMessage">
+            {{{include "components/newsletter/components/newsletter_error" }}}
+    </script>
+    <script type="text/html" class="js-alreadyRegisteredMessage">
+            {{{include "components/newsletter/components/newsletter_already_registered" }}}
+    </script>
+</form>

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

@@ -0,0 +1,11 @@
+{{#if this.alreadyRegisteredText}}
+    {{> components/newsletter/components/newsletter_result
+            _locaKeyTitle="newsletter_title_already_registered"
+            _text=this.alreadyRegisteredText.richtext
+    }}
+{{else}}
+    {{> components/newsletter/components/newsletter_result
+            _locaKeyTitle="newsletter_title_already_registered"
+            _locaKeyText="newsletter_text_already_registered"
+    }}
+{{/if}}

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

@@ -0,0 +1,11 @@
+{{#if this.errorText}}
+    {{> components/newsletter/components/newsletter_result
+            _locaKeyTitle="newsletter_title_error"
+            _text=this.errorText.richText
+    }}
+{{else}}
+    {{> components/newsletter/components/newsletter_result
+            _locaKeyTitle="newsletter_title_error"
+            _locaKeyText="newsletter_text_error"
+    }}
+{{/if}}

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

@@ -0,0 +1,11 @@
+{{#if this.registeredText}}
+{{> components/newsletter/components/newsletter_result
+            _locaKeyTitle="newsletter_title_registered"
+            _text=this.registeredText.richtext
+}}
+{{else}}
+{{> components/newsletter/components/newsletter_result
+            _locaKeyTitle="newsletter_title_registered"
+            _locaKeyText="newsletter_text_registered"
+}}
+{{/if}}

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

@@ -0,0 +1,15 @@
+<div class="c-feedbackBox"></div>
+    <h2 class="c-feedbackBox__headline">{{loca _locaKeyTitle}}</h2>
+    <p class="c-feedbackBox__button">
+        {{#with this.backlink}}
+            <a class="c-form__button js-formReload" href="{{this}}#{{../uuid}}">{{loca "newsletter_form_back"}}</a>
+        {{/with}}
+    </p>
+    <p class="c-feedbackBox__text">
+        {{#if _locaKeyText}}
+            {{loca _locaKeyText}}
+        {{else}}
+            {{{_text}}}
+        {{/if}}
+    </p>
+</div>

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

@@ -0,0 +1,11 @@
+{{#if this.successText}}
+{{> components/newsletter/components/newsletter_result
+            _locaKeyTitle="newsletter_title_success"
+            _text=this.successText.richtext
+}}
+{{else}}
+{{> components/newsletter/components/newsletter_result
+            _locaKeyTitle="newsletter_title_success"
+            _locaKeyText="newsletter_text_success"
+}}
+{{/if}}

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

@@ -0,0 +1,30 @@
+{{#unless this.useNewNewsletter}}
+    <div id="{{this.uuid}}" class="{{_addClass}} js-load" data-hr-newsletter='{"url": "{{this.url.nocache}}"}'>
+        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
+        <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
+            {{this.title}}
+        </h3>
+        <div class="js-formWrapper">
+            {{> components/newsletter/components/newsletter_form}}
+        </div>
+        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
+    </div>
+{{else}}
+    <div id="{{this.uuid}}" class="{{_addClass}} ">
+        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
+        <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
+            {{this.title}}
+        </h3>
+        {{#if this.description}}
+            <div class="c-form__row">
+                <div class="c-form__label">
+                    {{{this.description}}}
+                </div>
+            </div>
+        {{/if}}
+        <div class="js-formWrapper">
+            {{> components/newsletter/components/new_newsletter_form}}
+        </div>
+        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
+    </div>
+{{/unless}}