hr-design-system-handlebars 1.107.1 → 1.108.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/main.js +1 -0
- package/CHANGELOG.md +24 -0
- package/build/handlebars/helpers/handlebar-helpers.js +2 -2
- package/dist/assets/index.css +10 -3
- package/dist/assets/js/alpine.js +2 -1
- package/dist/assets/js/components/forms/contactForm.alpine.js +181 -18
- package/dist/assets/js/components/forms/inputHandler.alpine.js +52 -5
- package/dist/views/components/dataPolicySettings/data_policy_settings.hbs +8 -8
- package/dist/views/components/footer/page_footer_column.hbs +1 -1
- package/dist/views/components/footer/page_footer_content.hbs +4 -4
- package/dist/views/components/forms/controls.hbs +3 -2
- package/dist/views/components/forms/input.hbs +4 -0
- package/dist/views/components/forms/toggle_button.hbs +1 -1
- package/dist/views/components/forms/webform.hbs +37 -29
- package/dist/views/components/site_header/navigation_search/quick_search_form.hbs +9 -15
- package/dist/views/components/site_header/service_logo.hbs +2 -2
- package/dist/views_static/components/dataPolicySettings/data_policy_settings.hbs +8 -8
- package/dist/views_static/components/footer/page_footer_column.hbs +1 -1
- package/dist/views_static/components/footer/page_footer_content.hbs +4 -4
- package/dist/views_static/components/forms/controls.hbs +3 -2
- package/dist/views_static/components/forms/input.hbs +4 -0
- package/dist/views_static/components/forms/toggle_button.hbs +1 -1
- package/dist/views_static/components/forms/webform.hbs +37 -29
- package/dist/views_static/components/site_header/navigation_search/quick_search_form.hbs +9 -15
- package/dist/views_static/components/site_header/service_logo.hbs +2 -2
- package/package.json +2 -1
- package/src/assets/fixtures/content/copytext/copytext_webform.json +5 -58
- package/src/assets/js/alpine.js +2 -1
- package/src/stories/views/components/content/copytext/copytext-form.stories.js +41 -0
- package/src/stories/views/components/content/copytext/copytext.stories.js +0 -7
- package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json +1 -1
- package/src/stories/views/components/dataPolicySettings/data_policy_settings.hbs +8 -8
- package/src/stories/views/components/footer/page_footer_column.hbs +1 -1
- package/src/stories/views/components/footer/page_footer_content.hbs +4 -4
- package/src/stories/views/components/forms/contactForm.alpine.js +181 -18
- package/src/stories/views/components/forms/controls.hbs +3 -2
- package/src/stories/views/components/forms/input.hbs +4 -0
- package/src/stories/views/components/forms/inputHandler.alpine.js +52 -5
- package/src/stories/views/components/forms/toggle_button.hbs +1 -1
- package/src/stories/views/components/forms/webform.hbs +37 -29
- package/src/stories/views/components/site_header/navigation_search/quick_search_form.hbs +9 -15
- package/src/stories/views/components/site_header/service_logo.hbs +2 -2
- package/tailwind.config.js +6 -10
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
aria-controls="suggestionlist--{{getRandom}}"
|
|
32
32
|
>
|
|
33
33
|
<div
|
|
34
|
-
class="
|
|
34
|
+
class="absolute left-0 w-auto min-w-full z-100{{#if _footer}} bottom-11{{else}} top-8 lg:top-10{{/if}}"
|
|
35
35
|
x-show="query.length > 1 && active && suggestions.length"
|
|
36
36
|
x-cloak
|
|
37
37
|
x-transition:leave="transition ease-in duration-100"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
id="suggestionlist--{{getRandom}}"
|
|
44
44
|
aria-label="Suche öffnen"
|
|
45
45
|
x-effect="$el.setAttribute('aria-expanded', query.length > 1 && active && suggestions.length > 0);$el.setAttribute('aria-hidden', !(query.length > 1 && active && suggestions.length > 0))"
|
|
46
|
-
class=" w-full mt-1 lg:mt-0.5 bg-white border rounded divide-y shadow-xl
|
|
46
|
+
class=" w-full mt-1 lg:mt-0.5 bg-white border rounded divide-y shadow-xl"
|
|
47
47
|
x-ref="list"
|
|
48
48
|
>
|
|
49
49
|
|
|
@@ -63,22 +63,16 @@
|
|
|
63
63
|
</div>
|
|
64
64
|
</div>
|
|
65
65
|
|
|
66
|
-
{{#if _footer}}
|
|
67
66
|
<button
|
|
68
67
|
aria-label='{{loca "search_input_aria_submit" }}'
|
|
69
68
|
type="submit"
|
|
70
|
-
class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer
|
|
71
|
-
{{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
|
|
78
|
-
{{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-search bg-transparent"}}
|
|
79
|
-
</button>
|
|
80
|
-
{{/if}}
|
|
81
|
-
|
|
69
|
+
class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer link-focus-inset md:bg-white text-primary ">
|
|
70
|
+
{{#if _footer}}
|
|
71
|
+
{{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-current bg-transparent"}}
|
|
72
|
+
{{else}}
|
|
73
|
+
{{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-search bg-transparent"}}
|
|
74
|
+
{{/if}}
|
|
75
|
+
</button>
|
|
82
76
|
</form>
|
|
83
77
|
|
|
84
78
|
<script type="text/javascript">
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
{{/if}}
|
|
13
13
|
>
|
|
14
14
|
<img src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}"
|
|
15
|
-
class="w-auto h-full
|
|
15
|
+
class="w-auto h-full" alt="{{loca "meta_application_name"}}">
|
|
16
16
|
</div>
|
|
17
17
|
|
|
18
18
|
<div
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
{{/if}}
|
|
25
25
|
>
|
|
26
26
|
<img src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}"
|
|
27
|
-
class="w-auto h-full
|
|
27
|
+
class="w-auto h-full" alt="{{loca "meta_application_name"}}">
|
|
28
28
|
</div>
|
|
29
29
|
|
|
30
30
|
</a>
|
|
@@ -46,20 +46,20 @@
|
|
|
46
46
|
</div>
|
|
47
47
|
|
|
48
48
|
<ul class="{{#if _webview}} hidden{{/if}}">
|
|
49
|
-
<li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]
|
|
49
|
+
<li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
|
|
50
50
|
<span class="text-base text-black">AGF <a
|
|
51
51
|
class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
|
|
52
52
|
href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
|
|
53
|
-
<div class="flex w-fit
|
|
53
|
+
<div class="flex w-fit">
|
|
54
54
|
{{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
|
|
55
55
|
</div>
|
|
56
56
|
</li>
|
|
57
|
-
<li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]
|
|
57
|
+
<li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
|
|
58
58
|
<span class="text-base text-black">AT Internet <a
|
|
59
59
|
class="{{if (isUserConsentNeeded 'https://www.atinternet.com/de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
|
|
60
60
|
href="https://www.atinternet.com/de/"
|
|
61
61
|
title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
|
|
62
|
-
<div class="flex w-fit
|
|
62
|
+
<div class="flex w-fit">
|
|
63
63
|
{{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
|
|
64
64
|
</div>
|
|
65
65
|
</li>
|
|
@@ -82,9 +82,9 @@
|
|
|
82
82
|
</div>
|
|
83
83
|
<div class="bg-[#e3e3e3] py-2.5 px-6">
|
|
84
84
|
<span class="block pb-2 text-lg text-black font-headingSerif">{{loca "cookies_setting_section_title"}}</span>
|
|
85
|
-
<div class="flex justify-between
|
|
85
|
+
<div class="flex justify-between">
|
|
86
86
|
<span class="inline-flex text-base text-black js-providerTitle">x</span>
|
|
87
|
-
<div class="flex float-right
|
|
87
|
+
<div class="flex float-right">
|
|
88
88
|
{{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
|
|
89
89
|
</div>
|
|
90
90
|
</div>
|
|
@@ -93,9 +93,9 @@
|
|
|
93
93
|
<ul>
|
|
94
94
|
{{#with this.serviceList}}
|
|
95
95
|
{{#each this}}
|
|
96
|
-
<li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]
|
|
96
|
+
<li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]">
|
|
97
97
|
<span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
|
|
98
|
-
<div class="flex float-right
|
|
98
|
+
<div class="flex float-right">
|
|
99
99
|
{{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
|
|
100
100
|
</div>
|
|
101
101
|
</li>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
<div x-show="!$screen('lg') && !$screen('md') ? dropped : true" x-transition.opacity class="flex flex-col md:flex-row flex-nowrap">
|
|
13
13
|
{{#each _columns}}
|
|
14
|
-
<ul class="flex flex-col text-primary md:text-footer-text md:pt-8 w-full
|
|
14
|
+
<ul class="flex flex-col text-primary md:text-footer-text md:pt-8 w-full">
|
|
15
15
|
{{#each this.links}}
|
|
16
16
|
{{> components/footer/page_footer_item _css="hover:underline" _iconName="extern" }}
|
|
17
17
|
{{/each}}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<div class="flex w-full md:w-1/2 md:
|
|
2
|
-
{{~> components/footer/page_footer_column _columns=this.groups.[0].columns
|
|
1
|
+
<div class="flex w-full md:w-1/2 md:first:pr-4">
|
|
2
|
+
{{~> components/footer/page_footer_column _columns=this.groups.[0].columns _title=this.groups.[0].title ~}}
|
|
3
3
|
</div>
|
|
4
4
|
|
|
5
|
-
<div class="flex w-full md:w-1/4
|
|
5
|
+
<div class="flex w-full md:w-1/4">
|
|
6
6
|
{{~> components/footer/page_footer_column _columns=this.groups.[1].columns _hasCookieSettings=true _title=this.groups.[1].title ~}}
|
|
7
7
|
</div>
|
|
8
8
|
|
|
9
|
-
<div class="flex flex-col w-full pt-4 md:w-1/4 md:
|
|
9
|
+
<div class="flex flex-col w-full pt-4 md:w-1/4 md:pt-0 md:pr-0">
|
|
10
10
|
|
|
11
11
|
<div class="p-0 pb-4 m-0 md:pt-10 md:mt-10 md:border-t border-footer-heading">
|
|
12
12
|
{{> components/footer/page_footer_search }}
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
<div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
|
|
3
3
|
<div class="flex items-center">
|
|
4
4
|
<label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">
|
|
5
|
-
{{> components/base/image/icon _icon="
|
|
6
|
-
<
|
|
5
|
+
<span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
|
|
6
|
+
<span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
|
|
7
|
+
<input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler($event)"/>
|
|
7
8
|
</label>
|
|
8
9
|
|
|
9
10
|
{{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}}
|
|
@@ -77,6 +77,7 @@
|
|
|
77
77
|
DEBUG
|
|
78
78
|
</div>
|
|
79
79
|
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
80
|
+
<div>name:<span x-text="name" class="font-bold" ></span></div>
|
|
80
81
|
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
81
82
|
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
83
|
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
@@ -88,6 +89,9 @@
|
|
|
88
89
|
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
89
90
|
<div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
|
|
90
91
|
<div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
|
|
92
|
+
<div>serverErrorFields[form{{getRandom}}][name]:<span x-text="getServerErrorFields('{{_name}}')" class="font-bold" ></span></div>
|
|
93
|
+
<div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
94
|
+
|
|
91
95
|
</div>
|
|
92
96
|
</div>
|
|
93
97
|
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
<input class="h-0 w-0 opacity-0 toggleSwitch-checkbox {{_addClass}}" type="checkbox" id="{{_id}}" {{#if _whitelisted}}data-whitelist="true"{{else}}data-whitelist="false"{{/if}}/>
|
|
2
2
|
<label class="bg-toggle-default cursor-pointer w-[50px] h-[25px] block rounded-3xl relative toggleSwitch-label" for="{{_id}}">
|
|
3
3
|
<span class="sr-only">{{_screenReaderText}}</span>
|
|
4
|
-
{{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px]
|
|
4
|
+
{{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px]"}}</label>
|
|
@@ -5,38 +5,46 @@
|
|
|
5
5
|
<h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
|
|
6
6
|
{{this.title}}
|
|
7
7
|
</h3>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
<div id="formWrapper">
|
|
9
|
+
<form
|
|
10
|
+
x-ref="form{{nextRandom}}"
|
|
11
|
+
ax-load
|
|
12
|
+
x-data="contactForm('form{{getRandom}}','{{this.jsonURL}}','{{this.errorMessages}}','{{this.isMultipart}}','{{this.trackingInformations}}')"
|
|
13
|
+
x-init="formInit()"
|
|
14
|
+
x-ignore
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
16
|
+
@submit.prevent="submitData"
|
|
17
|
+
id="form{{getRandom}}"
|
|
18
|
+
class="relative flex flex-col justify-center overflow-hidden group"
|
|
19
|
+
action="{{this.url}}"
|
|
20
|
+
method="post"
|
|
21
|
+
enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}"
|
|
22
|
+
accept-charset="utf-8"
|
|
23
|
+
|
|
24
|
+
>
|
|
25
|
+
|
|
26
|
+
<div class="">
|
|
27
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
28
|
+
DEBUG
|
|
29
|
+
</div>
|
|
30
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
31
|
+
<div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
32
|
+
<div>isPosting:<span x-text="isPosting" class="font-bold" :class="isPosting ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
33
|
+
|
|
34
|
+
</div>
|
|
29
35
|
</div>
|
|
30
|
-
|
|
31
|
-
<div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
{{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
|
|
36
|
+
{{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
|
|
35
37
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
{{> components/forms/controls }}
|
|
39
|
+
<template id="successMessage">
|
|
40
|
+
<h2>SUPER DAS HAT ALLES FUNKTIONIERT</h2>
|
|
41
|
+
</template>
|
|
42
|
+
<template id="errorMessage">
|
|
43
|
+
<h2>DAS HAT LEIDER NICHT FUNKTIONIERT</h2>
|
|
44
|
+
</template>
|
|
45
|
+
|
|
46
|
+
</form>
|
|
47
|
+
</div>
|
|
40
48
|
{{/components/forms/backgroundBox }}
|
|
41
49
|
{{~else~}}
|
|
42
50
|
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
aria-controls="suggestionlist--{{getRandom}}"
|
|
32
32
|
>
|
|
33
33
|
<div
|
|
34
|
-
class="
|
|
34
|
+
class="absolute left-0 w-auto min-w-full z-100{{#if _footer}} bottom-11{{else}} top-8 lg:top-10{{/if}}"
|
|
35
35
|
x-show="query.length > 1 && active && suggestions.length"
|
|
36
36
|
x-cloak
|
|
37
37
|
x-transition:leave="transition ease-in duration-100"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
id="suggestionlist--{{getRandom}}"
|
|
44
44
|
aria-label="Suche öffnen"
|
|
45
45
|
x-effect="$el.setAttribute('aria-expanded', query.length > 1 && active && suggestions.length > 0);$el.setAttribute('aria-hidden', !(query.length > 1 && active && suggestions.length > 0))"
|
|
46
|
-
class=" w-full mt-1 lg:mt-0.5 bg-white border rounded divide-y shadow-xl
|
|
46
|
+
class=" w-full mt-1 lg:mt-0.5 bg-white border rounded divide-y shadow-xl"
|
|
47
47
|
x-ref="list"
|
|
48
48
|
>
|
|
49
49
|
|
|
@@ -63,22 +63,16 @@
|
|
|
63
63
|
</div>
|
|
64
64
|
</div>
|
|
65
65
|
|
|
66
|
-
{{#if _footer}}
|
|
67
66
|
<button
|
|
68
67
|
aria-label='{{loca "search_input_aria_submit" }}'
|
|
69
68
|
type="submit"
|
|
70
|
-
class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer
|
|
71
|
-
{{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer lg:search-border-color-desktop link-focus-inset md:bg-white text-primary ">
|
|
78
|
-
{{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-search bg-transparent"}}
|
|
79
|
-
</button>
|
|
80
|
-
{{/if}}
|
|
81
|
-
|
|
69
|
+
class="pl-2 pr-2 bg-white border-l rounded-r cursor-pointer link-focus-inset md:bg-white text-primary ">
|
|
70
|
+
{{#if _footer}}
|
|
71
|
+
{{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-current bg-transparent"}}
|
|
72
|
+
{{else}}
|
|
73
|
+
{{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-search-footer-text fill-search bg-transparent"}}
|
|
74
|
+
{{/if}}
|
|
75
|
+
</button>
|
|
82
76
|
</form>
|
|
83
77
|
|
|
84
78
|
<script type="text/javascript">
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
{{/if}}
|
|
13
13
|
>
|
|
14
14
|
<img src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}"
|
|
15
|
-
class="w-auto h-full
|
|
15
|
+
class="w-auto h-full" alt="{{loca "meta_application_name"}}">
|
|
16
16
|
</div>
|
|
17
17
|
|
|
18
18
|
<div
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
{{/if}}
|
|
25
25
|
>
|
|
26
26
|
<img src="{{resourceUrl "assets/base/icons/logo/brandlogo--desk.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}"
|
|
27
|
-
class="w-auto h-full
|
|
27
|
+
class="w-auto h-full" alt="{{loca "meta_application_name"}}">
|
|
28
28
|
</div>
|
|
29
29
|
|
|
30
30
|
</a>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.
|
|
9
|
+
"version": "1.108.1",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -102,6 +102,7 @@
|
|
|
102
102
|
"remark-gfm": "^4.0.0",
|
|
103
103
|
"rimraf": "^3.0.2",
|
|
104
104
|
"storybook": "^8.2.6",
|
|
105
|
+
"storybook-addon-mock": "^5.0.0",
|
|
105
106
|
"storybook-conditional-toolbar-selector": "^1.0.3",
|
|
106
107
|
"style-loader": "^4.0.0",
|
|
107
108
|
"tailwindcss": "^3.0.23",
|
|
@@ -9,6 +9,10 @@
|
|
|
9
9
|
"isWebForm": true,
|
|
10
10
|
"hasNewWebForm": true,
|
|
11
11
|
"title": "Kontaktformular",
|
|
12
|
+
"jsonURL": "https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de",
|
|
13
|
+
"errorMessages": "errorMessages",
|
|
14
|
+
"isMultipart": "isMultipart",
|
|
15
|
+
"trackingInformations": "trackingInformations",
|
|
12
16
|
"fields":[
|
|
13
17
|
{
|
|
14
18
|
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
@@ -30,65 +34,8 @@
|
|
|
30
34
|
}
|
|
31
35
|
]
|
|
32
36
|
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"isHeadline": true,
|
|
37
|
-
"text": "Noch ein Formular"
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
"paragraphBoxItem": {
|
|
41
|
-
"isWebForm": true,
|
|
42
|
-
"hasNewWebForm": true,
|
|
43
|
-
"title": "Kontaktformular",
|
|
44
|
-
"fields":[
|
|
45
|
-
{
|
|
46
|
-
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
47
|
-
"@->contentpath": "input-text-vorname"
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
51
|
-
"@->contentpath": "input-text-vorname-required"
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
55
|
-
"@->contentpath": "input-text-nachname-required"
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
59
|
-
"@->contentpath": "select"
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
63
|
-
"@->contentpath": "input-email",
|
|
64
|
-
"@->overrides": [
|
|
65
|
-
{
|
|
66
|
-
"@->contentpath": "isRequired",
|
|
67
|
-
"@->value": false
|
|
68
|
-
}
|
|
69
|
-
]
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
73
|
-
"@->contentpath": "input-email"
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
77
|
-
"@->contentpath": "textarea"
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
81
|
-
"@->contentpath": "checkbox",
|
|
82
|
-
"@->overrides": [
|
|
83
|
-
{
|
|
84
|
-
"@->contentpath": "label",
|
|
85
|
-
"@->value": "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."
|
|
86
|
-
}
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
]
|
|
90
|
-
|
|
91
37
|
}
|
|
92
38
|
}
|
|
39
|
+
|
|
93
40
|
]
|
|
94
41
|
}
|
package/src/assets/js/alpine.js
CHANGED
|
@@ -53,7 +53,8 @@ Alpine.store('sharingBottomPos', {
|
|
|
53
53
|
current: '0'
|
|
54
54
|
})
|
|
55
55
|
Alpine.store('forms', {
|
|
56
|
-
submissionAttempted: []
|
|
56
|
+
submissionAttempted: [],
|
|
57
|
+
serverErrorFields: []
|
|
57
58
|
})
|
|
58
59
|
// Initialization of data handlers
|
|
59
60
|
Alpine.data('mainNavigationHandler', mainNavigationHandler)
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import copytext from './copytext.hbs'
|
|
2
|
+
|
|
3
|
+
import copytext_webform_json from './fixtures/copytext_webform.json'
|
|
4
|
+
|
|
5
|
+
const Template = ({ ...args }) => {
|
|
6
|
+
return copytext({ ...args })
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export default {
|
|
10
|
+
title: 'Komponenten/Content/Copytext',
|
|
11
|
+
decorators: [
|
|
12
|
+
(Story) => {
|
|
13
|
+
return `<div class="grid grid-page">
|
|
14
|
+
<div class="grid bg-white grid-article">
|
|
15
|
+
${Story()}
|
|
16
|
+
</div>
|
|
17
|
+
</div>`
|
|
18
|
+
},
|
|
19
|
+
],
|
|
20
|
+
parameters: {
|
|
21
|
+
mockData: [
|
|
22
|
+
{
|
|
23
|
+
url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
|
|
24
|
+
method: 'POST',
|
|
25
|
+
status: 200,
|
|
26
|
+
response: {
|
|
27
|
+
"status":"VALIDATION_ERROR","errors":{"vorname":"form_error_required"},
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
],
|
|
31
|
+
layout: 'fullscreen',
|
|
32
|
+
chromatic: { disableSnapshot: true }
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export const WithWebform = {
|
|
37
|
+
render: Template.bind({}),
|
|
38
|
+
name: 'Formular',
|
|
39
|
+
args: copytext_webform_json,
|
|
40
|
+
}
|
|
41
|
+
|
|
@@ -17,7 +17,6 @@ import copytext_video_json from './fixtures/copytext_video.json'
|
|
|
17
17
|
import copytext_audio_json from './fixtures/copytext_audio.json'
|
|
18
18
|
import copytext_audio_event_stream_json from './fixtures/copytext_audio_livestream.json'
|
|
19
19
|
import copytext_livestream_json from './fixtures/copytext_livestream.json'
|
|
20
|
-
import copytext_webform_json from './fixtures/copytext_webform.json'
|
|
21
20
|
|
|
22
21
|
const Template = ({ ...args }) => {
|
|
23
22
|
return copytext({ ...args })
|
|
@@ -67,12 +66,6 @@ export const WithFiledownload = {
|
|
|
67
66
|
args: copytext_filedownload_json,
|
|
68
67
|
}
|
|
69
68
|
|
|
70
|
-
export const WithWebform = {
|
|
71
|
-
render: Template.bind({}),
|
|
72
|
-
name: 'Formular',
|
|
73
|
-
args: copytext_webform_json,
|
|
74
|
-
}
|
|
75
|
-
|
|
76
69
|
export const WithImage = {
|
|
77
70
|
render: Template.bind({}),
|
|
78
71
|
name: 'Image',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","
|
|
1
|
+
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonURL":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","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}]}}]}
|
|
@@ -46,20 +46,20 @@
|
|
|
46
46
|
</div>
|
|
47
47
|
|
|
48
48
|
<ul class="{{#if _webview}} hidden{{/if}}">
|
|
49
|
-
<li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]
|
|
49
|
+
<li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
|
|
50
50
|
<span class="text-base text-black">AGF <a
|
|
51
51
|
class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
|
|
52
52
|
href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
|
|
53
|
-
<div class="flex w-fit
|
|
53
|
+
<div class="flex w-fit">
|
|
54
54
|
{{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
|
|
55
55
|
</div>
|
|
56
56
|
</li>
|
|
57
|
-
<li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]
|
|
57
|
+
<li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
|
|
58
58
|
<span class="text-base text-black">AT Internet <a
|
|
59
59
|
class="{{if (isUserConsentNeeded 'https://www.atinternet.com/de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
|
|
60
60
|
href="https://www.atinternet.com/de/"
|
|
61
61
|
title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
|
|
62
|
-
<div class="flex w-fit
|
|
62
|
+
<div class="flex w-fit">
|
|
63
63
|
{{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
|
|
64
64
|
</div>
|
|
65
65
|
</li>
|
|
@@ -82,9 +82,9 @@
|
|
|
82
82
|
</div>
|
|
83
83
|
<div class="bg-[#e3e3e3] py-2.5 px-6">
|
|
84
84
|
<span class="block pb-2 text-lg text-black font-headingSerif">{{loca "cookies_setting_section_title"}}</span>
|
|
85
|
-
<div class="flex justify-between
|
|
85
|
+
<div class="flex justify-between">
|
|
86
86
|
<span class="inline-flex text-base text-black js-providerTitle">x</span>
|
|
87
|
-
<div class="flex float-right
|
|
87
|
+
<div class="flex float-right">
|
|
88
88
|
{{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
|
|
89
89
|
</div>
|
|
90
90
|
</div>
|
|
@@ -93,9 +93,9 @@
|
|
|
93
93
|
<ul>
|
|
94
94
|
{{#with this.serviceList}}
|
|
95
95
|
{{#each this}}
|
|
96
|
-
<li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]
|
|
96
|
+
<li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]">
|
|
97
97
|
<span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
|
|
98
|
-
<div class="flex float-right
|
|
98
|
+
<div class="flex float-right">
|
|
99
99
|
{{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
|
|
100
100
|
</div>
|
|
101
101
|
</li>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
<div x-show="!$screen('lg') && !$screen('md') ? dropped : true" x-transition.opacity class="flex flex-col md:flex-row flex-nowrap">
|
|
13
13
|
{{#each _columns}}
|
|
14
|
-
<ul class="flex flex-col text-primary md:text-footer-text md:pt-8 w-full
|
|
14
|
+
<ul class="flex flex-col text-primary md:text-footer-text md:pt-8 w-full">
|
|
15
15
|
{{#each this.links}}
|
|
16
16
|
{{> components/footer/page_footer_item _css="hover:underline" _iconName="extern" }}
|
|
17
17
|
{{/each}}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<div class="flex w-full md:w-1/2 md:
|
|
2
|
-
{{~> components/footer/page_footer_column _columns=this.groups.[0].columns
|
|
1
|
+
<div class="flex w-full md:w-1/2 md:first:pr-4">
|
|
2
|
+
{{~> components/footer/page_footer_column _columns=this.groups.[0].columns _title=this.groups.[0].title ~}}
|
|
3
3
|
</div>
|
|
4
4
|
|
|
5
|
-
<div class="flex w-full md:w-1/4
|
|
5
|
+
<div class="flex w-full md:w-1/4">
|
|
6
6
|
{{~> components/footer/page_footer_column _columns=this.groups.[1].columns _hasCookieSettings=true _title=this.groups.[1].title ~}}
|
|
7
7
|
</div>
|
|
8
8
|
|
|
9
|
-
<div class="flex flex-col w-full pt-4 md:w-1/4 md:
|
|
9
|
+
<div class="flex flex-col w-full pt-4 md:w-1/4 md:pt-0 md:pr-0">
|
|
10
10
|
|
|
11
11
|
<div class="p-0 pb-4 m-0 md:pt-10 md:mt-10 md:border-t border-footer-heading">
|
|
12
12
|
{{> components/footer/page_footer_search }}
|