hr-design-system-handlebars 1.114.1 → 1.114.2

package/src/stories/views/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/src/stories/views/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/src/stories/views/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/src/stories/views/components/newsletter/components/newsletter_form.hbs.DEPRECATED

@@ -0,0 +1,106 @@
+<form class="c-form o-box -accented -breakout js-form" id="form--{{nextRandom}}"
+      action="{{configProperty "mailserver.newsletter"}}" method="post" enctype="application/x-www-form-urlencoded"
+      accept-charset="utf-8">
+       
+    {{#if this.description}}
+        <div class="c-form__row">
+            <div class="c-form__label">
+                {{{this.description}}}
+            </div>
+        </div>
+    {{/if}}
+
+    <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 -hasLegend">
+        <fieldset class="c-form__field-set">
+            <legend class="c-form__legend">{{loca "newsletter_subscribe_text"}}</legend>
+            <div class="c-form__row -options">
+                <div class="c-form__options">
+                    <div class="c-form__options__wrapper">
+                        <div class="c-form__option">
+                            {{> components/forms/components/choice
+                                    _name="INXMAIL_SUBSCRIPTION"
+                                    _inputClass="js-newsletter-subscribe"
+                                    _type="checkbox"
+                                    _locaKey="newsletter_subscribe"
+                                    _selected=true
+                                    _value=this.mailingList
+                                    _inGroup=true
+                                    _radioCheckbox=true
+                            }}
+                        </div>
+
+                        <div class="c-form__option">
+                            {{> components/forms/components/choice
+                                    _name="INXMAIL_UNSUBSCRIPTION"
+                                    _inputClass="js-newsletter-unsubscribe"
+                                    _type="checkbox"
+                                    _locaKey="newsletter_unsubscribe"
+                                    _value=this.mailingList
+                                    _inGroup=true
+                                    _radioCheckbox=true
+                            }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+
+    <div class="c-form__row">
+       
+    </div>
+
+    {{~> components/forms/components/controls }}
+
+    {{~> components/forms/components/input
+            _formField=this.formData.message
+            _labelClass="hideCompletely"
+            _locaKey="comment_label_message"
+            _inputClass="commentForm__message hide"
+            _name="message"
+            _type="text"
+            _maxLength="140"
+    }}
+
+    {{~> components/forms/components/input
+            _formField=this.formData.INXMAIL_HTTP_REDIRECT
+            _name="INXMAIL_HTTP_REDIRECT"
+            _type="hidden"
+            _value=this.successLink
+            _hasLabel=false
+    }}
+
+    {{~>components/forms/components/input
+            _formField=this.formData.INXMAIL_HTTP_REDIRECT_ERROR
+            _name="INXMAIL_HTTP_REDIRECT_ERROR"
+            _type="hidden"
+            _value=this.errorLink
+            _hasLabel=false
+    }}
+
+    {{~> components/forms/components/input
+            _formField=this.formData.backlink
+            _name="backlink"
+            _type="hidden"
+            _value=this.backlinkUuid
+            _hasLabel=false
+    }}
+</form>

package/src/stories/views/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/src/stories/views/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/src/stories/views/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/src/stories/views/components/newsletter/fixtures/newsletter.json

@@ -0,0 +1,46 @@
+{
+    "useNewNewsletter":true,
+    "title":"hessenschau update - Der Newsletter für Hessen",
+    "description":"Hier können Sie sich für das hessenschau update anmelden. Der Newsletter wird Ihnen von Montag bis Freitag kostenlos und unverbindlich zugestellt. Wenn Sie sich in unseren Verteiler eintragen, erhalten Sie eine E-Mail mit der Bitte, Ihre Aufnahme noch einmal zu bestätigen. Sie können den Newsletter jederzeit wieder ",        
+    "fields":[
+           {
+              "type":{
+                 "isText":true,
+                 "asString":"email",
+                 "isEmail": true
+              },
+              "name":"email",
+              "label":"Email",
+              "description":"Das ist der Beschreibungstext (*Pflichtfeld)",
+              "defaultValue":"",
+              "isHidden":false,
+              "isRequired":true,
+              "maxLength":"140"
+           },
+           {
+            "isGrouped":false,
+            "type":{
+                   "isChoice":true,
+                   "asString":"checkbox"
+            },
+            "name":"checkbox",
+            "label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.",
+            "isMeta":false,
+            "description":"Das ist der Beschreibungstext von Checkbox",
+            "isRequired":true
+           },
+           {
+            "isGrouped":false,
+            "type":{
+                   "isChoice":true,
+                   "asString":"checkbox"
+            },
+            "name":"checkbox",
+            "label":"",
+            "isMeta":false,
+            "description":"Das ist der Beschreibungstext von Checkbox",
+            "isRequired":true
+           }
+    ]
+    
+ }

package/src/stories/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/src/stories/views/components/newsletter/newsletter.stories.js

@@ -0,0 +1,32 @@
+import newsletterJson from './fixtures/newsletter.json'
+
+const handlebars = require('hrHandlebars')
+
+export default {
+    title: 'Komponenten/Newsletter',
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-page">
+                        <div class="grid bg-white grid-article">
+                            ${Story()}
+                        </div>
+                    </div>`
+        },
+    ],
+}
+const Template = (args) => {
+    let hbsTemplate = handlebars.compile(`
+        {{#>components/forms/components/backgroundBox  }}  
+            {{> components/newsletter/newsletter }}
+        {{/components/forms/components/backgroundBox }}
+    `)
+    return hbsTemplate({ ...args })
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'Newsletter',
+    args: newsletterJson,
+}
+
+