hr-design-system-handlebars 1.35.0 → 1.35.2

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.
Files changed (27) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/icons/icons/svgmap/minus.svg +9 -0
  3. package/dist/assets/icons/icons/svgmap/plus.svg +11 -0
  4. package/dist/assets/icons/icons/svgmap.min.svg +1 -1
  5. package/dist/assets/index.css +40 -37
  6. package/dist/views/components/article/components/accordion/accordion.hbs +32 -43
  7. package/dist/views/components/article/components/accordion/accordion_item.hbs +13 -0
  8. package/dist/views/components/dataPolicySettings/data_policy_settings.hbs +9 -9
  9. package/dist/views/components/footer/page_footer_column.hbs +1 -3
  10. package/dist/views/components/footer/page_footer_nav_link.hbs +1 -1
  11. package/dist/views_static/components/article/components/accordion/accordion.hbs +32 -43
  12. package/dist/views_static/components/article/components/accordion/accordion_item.hbs +13 -0
  13. package/dist/views_static/components/dataPolicySettings/data_policy_settings.hbs +9 -9
  14. package/dist/views_static/components/footer/page_footer_column.hbs +1 -3
  15. package/dist/views_static/components/footer/page_footer_nav_link.hbs +1 -1
  16. package/package.json +1 -1
  17. package/src/assets/fixtures/teaser/accordion.json +2 -2
  18. package/src/assets/icons/icons/svgmap/minus.svg +9 -0
  19. package/src/assets/icons/icons/svgmap/plus.svg +11 -0
  20. package/src/assets/icons/icons/svgmap.min.svg +1 -1
  21. package/src/stories/views/components/article/components/accordion/accordion.hbs +32 -43
  22. package/src/stories/views/components/article/components/accordion/accordion.stories.js +1 -1
  23. package/src/stories/views/components/article/components/accordion/accordion_item.hbs +13 -0
  24. package/src/stories/views/components/dataPolicySettings/data_policy_settings.hbs +9 -9
  25. package/src/stories/views/components/footer/page_footer_column.hbs +1 -3
  26. package/src/stories/views/components/footer/page_footer_nav_link.hbs +1 -1
  27. package/src/stories/views/components/teaser/fixtures/accordion.json +1 -1
package/dist/assets/index.css CHANGED
@@ -1201,6 +1201,14 @@ video {
1201
1201
  margin-top: 0.5rem;
1202
1202
  margin-bottom: 0.5rem;
1203
1203
  }
1204
+ .my-3 {
1205
+ margin-top: 0.75rem;
1206
+ margin-bottom: 0.75rem;
1207
+ }
1208
+ .my-3\.5 {
1209
+ margin-top: 0.875rem;
1210
+ margin-bottom: 0.875rem;
1211
+ }
1204
1212
  .my-4 {
1205
1213
  margin-top: 1rem;
1206
1214
  margin-bottom: 1rem;
@@ -1327,6 +1335,9 @@ video {
1327
1335
  .mt-10 {
1328
1336
  margin-top: 2.5rem;
1329
1337
  }
1338
+ .mt-11 {
1339
+ margin-top: 2.75rem;
1340
+ }
1330
1341
  .mt-12 {
1331
1342
  margin-top: 3rem;
1332
1343
  }
@@ -1357,6 +1368,12 @@ video {
1357
1368
  .box-content {
1358
1369
  box-sizing: content-box;
1359
1370
  }
1371
+ .line-clamp-2 {
1372
+ overflow: hidden;
1373
+ display: -webkit-box;
1374
+ -webkit-box-orient: vertical;
1375
+ -webkit-line-clamp: 2;
1376
+ }
1360
1377
  .line-clamp-4 {
1361
1378
  overflow: hidden;
1362
1379
  display: -webkit-box;
@@ -1420,9 +1437,6 @@ video {
1420
1437
  .h-3\.5 {
1421
1438
  height: 0.875rem;
1422
1439
  }
1423
- .h-36 {
1424
- height: 9rem;
1425
- }
1426
1440
  .h-4 {
1427
1441
  height: 1rem;
1428
1442
  }
@@ -1517,9 +1531,6 @@ video {
1517
1531
  .w-3\/5 {
1518
1532
  width: 60%;
1519
1533
  }
1520
- .w-36 {
1521
- width: 9rem;
1522
- }
1523
1534
  .w-4 {
1524
1535
  width: 1rem;
1525
1536
  }
@@ -1832,9 +1843,6 @@ video {
1832
1843
  .self-baseline {
1833
1844
  align-self: baseline;
1834
1845
  }
1835
- .justify-self-end {
1836
- justify-self: end;
1837
- }
1838
1846
  .overflow-hidden {
1839
1847
  overflow: hidden;
1840
1848
  }
@@ -1861,9 +1869,6 @@ video {
1861
1869
  text-overflow: ellipsis;
1862
1870
  white-space: nowrap;
1863
1871
  }
1864
- .text-ellipsis {
1865
- text-overflow: ellipsis;
1866
- }
1867
1872
  .hyphens-auto {
1868
1873
  -webkit-hyphens: auto;
1869
1874
  hyphens: auto;
@@ -2431,6 +2436,9 @@ video {
2431
2436
  .pb-10 {
2432
2437
  padding-bottom: 2.5rem;
2433
2438
  }
2439
+ .pb-11 {
2440
+ padding-bottom: 2.75rem;
2441
+ }
2434
2442
  .pb-2 {
2435
2443
  padding-bottom: 0.5rem;
2436
2444
  }
@@ -2536,6 +2544,9 @@ video {
2536
2544
  .align-top {
2537
2545
  vertical-align: top;
2538
2546
  }
2547
+ .align-text-top {
2548
+ vertical-align: text-top;
2549
+ }
2539
2550
  .font-copy {
2540
2551
  font-family: DIN, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
2541
2552
  }
@@ -2578,9 +2589,6 @@ video {
2578
2589
  font-size: 3rem;
2579
2590
  line-height: 1;
2580
2591
  }
2581
- .text-\[40px\] {
2582
- font-size: 40px;
2583
- }
2584
2592
  .text-base {
2585
2593
  font-size: 1rem;
2586
2594
  line-height: 1.375rem;
@@ -2613,9 +2621,6 @@ video {
2613
2621
  .font-semibold {
2614
2622
  font-weight: 600;
2615
2623
  }
2616
- .font-thin {
2617
- font-weight: 100;
2618
- }
2619
2624
  .font-title {
2620
2625
  font-weight: 700;
2621
2626
  font-weight: var(--font-weight-title);
@@ -3010,7 +3015,7 @@ video {
3010
3015
  border-bottom-color: var(--color-secondary-ds);
3011
3016
  }
3012
3017
  .counter-reset {
3013
- counter-reset: cnt1690899159191;
3018
+ counter-reset: cnt1691064710658;
3014
3019
  }
3015
3020
  .hyphens-auto {
3016
3021
  -webkit-hyphens: auto;
@@ -3245,7 +3250,7 @@ video {
3245
3250
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3246
3251
  }
3247
3252
  .-ordered {
3248
- counter-increment: cnt1690899159191 1;
3253
+ counter-increment: cnt1691064710658 1;
3249
3254
  }
3250
3255
  .-ordered::before {
3251
3256
  position: absolute;
@@ -3261,7 +3266,7 @@ video {
3261
3266
  letter-spacing: .0125em;
3262
3267
  --tw-text-opacity: 1;
3263
3268
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3264
- content: counter(cnt1690899159191);
3269
+ content: counter(cnt1691064710658);
3265
3270
  }
3266
3271
  /*! ****************************/
3267
3272
  /*! DataPolicy stuff */
@@ -5218,6 +5223,11 @@ video {
5218
5223
  margin-right: 1.25rem;
5219
5224
  }
5220
5225
 
5226
+ .md\:my-5 {
5227
+ margin-top: 1.25rem;
5228
+ margin-bottom: 1.25rem;
5229
+ }
5230
+
5221
5231
  .md\:-mt-40 {
5222
5232
  margin-top: -10rem;
5223
5233
  }
@@ -5238,10 +5248,6 @@ video {
5238
5248
  margin-bottom: 2rem;
5239
5249
  }
5240
5250
 
5241
- .md\:ml-1 {
5242
- margin-left: 0.25rem;
5243
- }
5244
-
5245
5251
  .md\:ml-4 {
5246
5252
  margin-left: 1rem;
5247
5253
  }
@@ -5250,10 +5256,6 @@ video {
5250
5256
  margin-top: 0px;
5251
5257
  }
5252
5258
 
5253
- .md\:mt-0\.5 {
5254
- margin-top: 0.125rem;
5255
- }
5256
-
5257
5259
  .md\:mt-2 {
5258
5260
  margin-top: 0.5rem;
5259
5261
  }
@@ -5262,6 +5264,10 @@ video {
5262
5264
  margin-top: 1rem;
5263
5265
  }
5264
5266
 
5267
+ .md\:mt-5 {
5268
+ margin-top: 1.25rem;
5269
+ }
5270
+
5265
5271
  .md\:mt-6 {
5266
5272
  margin-top: 1.5rem;
5267
5273
  }
@@ -5309,10 +5315,6 @@ video {
5309
5315
  height: 2rem;
5310
5316
  }
5311
5317
 
5312
- .md\:h-88 {
5313
- height: 22rem;
5314
- }
5315
-
5316
5318
  .md\:h-auto {
5317
5319
  height: auto;
5318
5320
  }
@@ -5358,10 +5360,6 @@ video {
5358
5360
  width: 20rem;
5359
5361
  }
5360
5362
 
5361
- .md\:w-88 {
5362
- width: 22rem;
5363
- }
5364
-
5365
5363
  .md\:w-auto {
5366
5364
  width: auto;
5367
5365
  }
@@ -5609,6 +5607,11 @@ video {
5609
5607
  line-height: 1rem;
5610
5608
  }
5611
5609
 
5610
+ .md\:text-footer-text {
5611
+ color: white;
5612
+ color: var(--color-footer-text);
5613
+ }
5614
+
5612
5615
  .md\:text-secondary {
5613
5616
  color: #606060;
5614
5617
  color: var(--color-secondary-ds);
package/dist/views/components/article/components/accordion/accordion.hbs CHANGED
@@ -1,46 +1,35 @@
1
- <h2 class="mb-5 text-lg font-normal md:text-2xl font-headingSerif">{{this.title}}</h2>
2
- <div x-data="{selected:0}">
3
- {{~#with this.copytext }}
4
- {{#each this.copytextParagraph }}
5
- {{#if this.isHeadline}}
6
- <button type="button"
7
- class="w-full text-left"
8
- @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
9
- >
10
- <div class="flex flex-row justify-between border-t hover:text-toplineColor basis-10/12 content-evenly border-gray-alto">
11
- <h3 :class="selected !== {{getRandom}} ? 'overflow-hidden whitespace-nowrap text-ellipsis' : ''" class="self-center my-5 text-base font-normal md:text-lg font-headingSerif">{{{this.text}}}</h3>
12
- <span class="px-5 font-thin text-[40px] justify-self-end" x-text="selected !== {{getRandom}} ? '+' : '-'"></span>
13
- </div>
14
- </button>
15
- {{/if}}
16
- {{#if this.isParagraph}}
17
- <div class="relative flex flex-row w-full overflow-hidden transition-all duration-700 max-h-0 {{#if @last}} border-b border-gray-alto{{/if}}"
18
- style=""
19
- x-ref="container{{getRandom}}"
20
- x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
21
- >
22
- {{~#with this.paragraphBoxItem }}
23
- {{~#if this.isImage}}
24
- <figure class="pb-5 pr-5 ar-1-1 w-36 h-36 md:w-88 md:h-88">
25
- {{~> components/base/image/responsive_image this.Image _type="poster" _variant="50" _addClassImg="" ~}}
26
- </figure>
27
- {{/if}}
28
- {{/with}}
29
- <div>
30
- {{#each this.text.split}}
31
- {{#if this.isText}}
32
- <p class="pb-5 text-base md:text-lg">{{{this.text}}}</p>
33
- {{/if}}
34
- {{#if this.isUl}}
35
- <ul class="pb-5 ml-5 text-base list-disc md:text-lg">{{{this.text}}}</ul>
36
- {{/if}}
37
- {{#if this.isOl}}
38
- <ol class="pb-5 ml-5 text-base list-decimal md:text-lg">{{{this.text}}}</ol>
39
- {{/if}}
40
- {{/each}}
41
- </div>
1
+ <h2 class="mb-5 text-lg font-normal mt-11 md:text-2xl font-headingSerif">{{this.title}}</h2>
2
+ <div x-cloak x-data="{selected:0}" class="pb-11">
3
+ {{#each this.copytextParagraph }}
4
+ {{#if this.isHeadline}}
5
+ {{#unless @first}}</div></div>{{/unless}}
6
+ <button type="button"
7
+ class="w-full text-left"
8
+ @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
9
+ >
10
+ <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
11
+ <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal md:my-5 md:text-lg font-headingSerif">{{{this.text}}}</h3>
12
+ <span :class="selected == {{getRandom}} ? 'hidden' : ''">
13
+ {{> components/base/image/icon _icon="plus" _addClass="hover:text-toplineColor mx-5 mt-3 md:mt-5 w-7 h-7 fill-current"}}
14
+ </span>
15
+ <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
16
+ {{> components/base/image/icon _icon="minus" _addClass="hover:text-toplineColor mx-5 mt-3 md:mt-5 w-7 h-7 fill-current"}}
17
+ </span>
42
18
  </div>
19
+ </button>
20
+ <div class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
21
+ style=""
22
+ x-ref="container{{getRandom}}"
23
+ x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
24
+ >
25
+ <div class="mb-8 accordionItem">
26
+ {{else}}
27
+ {{#if (isStorybook)}}
28
+ {{> components/article/components/accordion/accordion_item }}
29
+ {{else}}
30
+ {{> modules/story/copytext-accordion ~}}
43
31
  {{/if}}
44
- {{/each}}
45
- {{/with}}
32
+ {{#if @last}}</div></div><div class="w-full border-b border-gray-alto"></div>{{/if}}
33
+ {{/if}}
34
+ {{/each}}
46
35
  </div>
package/dist/views/components/article/components/accordion/accordion_item.hbs ADDED
@@ -0,0 +1,13 @@
1
+ {{#if this.isParagraph}}
2
+ {{#each this.text.split}}
3
+ {{#if this.isText}}
4
+ <p class="mb-5">{{{this.text}}}</p>
5
+ {{/if}}
6
+ {{#if this.isUl}}
7
+ <ul class="mb-5 ml-5 list-disc">{{{this.text}}}</ul>
8
+ {{/if}}
9
+ {{#if this.isOl}}
10
+ <ol class="mb-5 ml-5 list-decimal">{{{this.text}}}</ol>
11
+ {{/if}}
12
+ {{/each}}
13
+ {{/if}}
package/dist/views/components/dataPolicySettings/data_policy_settings.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="flex items-center justify-center md:justify-end js-load" data-hr-data-policy-settings-ds='{}'>
1
+ <div class="flex items-center justify-center mt-4 md:mt-0 md:justify-end js-load" data-hr-data-policy-settings-ds='{}'>
2
2
  {{#> components/button/button _size="md" _id="globalSettingsButton" _css="hover:text-secondary border-footer-text js-data-policy-settings-button" _variant="secondary" _onBackground="true" }}
3
3
  {{> components/button/components/button_icon _icon="settings" _iconmap="icons" _css="w-5 h-5"}}
4
4
  {{> components/button/components/button_label _label=(loca "cookies_setting_button_text")}}
@@ -38,20 +38,20 @@
38
38
  </div>
39
39
 
40
40
  <ul class="{{#if _webview}} hidden{{/if}}">
41
- <li class="px-6 py-3 bg-white border-t border-[#e3e3e3] tracking_1">
42
- <span class="inline-block text-base text-black">AGF <a
41
+ <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_1">
42
+ <span class="text-base text-black">AGF <a
43
43
  class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
44
44
  href="https://www.agf.de/" title="AGF">(https://www.agf.de/)</a></span>
45
- <div class="flex float-right toggleSwitch">
45
+ <div class="flex w-fit toggleSwitch">
46
46
  {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
47
47
  </div>
48
48
  </li>
49
- <li class="px-6 py-3 bg-white border-t border-[#e3e3e3] tracking_2">
50
- <span class="inline-block text-base text-black">AT Internet <a
49
+ <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_2">
50
+ <span class="text-base text-black">AT Internet <a
51
51
  class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
52
52
  href="https://www.atinternet.com/de/"
53
53
  title="AT Internet">(https://www.atinternet.com/de/)</a></span>
54
- <div class="flex float-right toggleSwitch">
54
+ <div class="flex w-fit toggleSwitch">
55
55
  {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
56
56
  </div>
57
57
  </li>
@@ -75,7 +75,7 @@
75
75
  <div class="bg-[#e3e3e3] py-2.5 px-6">
76
76
  <span class="block pb-2 text-lg text-black font-headingSerif">{{loca "cookies_setting_section_title"}}</span>
77
77
  <div class="all">
78
- <span class="inline-block text-base text-black js-providerTitle">x</span>
78
+ <span class="inline-flex text-base text-black js-providerTitle">x</span>
79
79
  <div class="flex float-right toggleSwitch">
80
80
  {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all"}}
81
81
  </div>
@@ -86,7 +86,7 @@
86
86
  {{#with this.serviceList}}
87
87
  {{#each this}}
88
88
  <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3] {{this.key}}">
89
- <span class="inline-block text-base leading-6 text-black">{{this.value}}</span>
89
+ <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
90
90
  <div class="flex float-right toggleSwitch">
91
91
  {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _isInitiallyHidden=this.isInitiallyHidden }}
92
92
  </div>
package/dist/views/components/footer/page_footer_column.hbs CHANGED
@@ -11,11 +11,9 @@
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-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
14
+ <ul class="flex flex-col text-primary md:text-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
15
15
  {{#each this.links}}
16
-
17
16
  {{> components/footer/page_footer_item _css="hover:underline" _iconName="extern" }}
18
-
19
17
  {{/each}}
20
18
  </ul>
21
19
  {{/each}}
package/dist/views/components/footer/page_footer_nav_link.hbs CHANGED
@@ -6,7 +6,7 @@
6
6
  </span>
7
7
  {{~/if~}}
8
8
  {{~#if ../../_link-adjust_context.isTargetBlank}}
9
- <span class="inline-flex md:mt-0.5 md:ml-1">
9
+ <span class="inline-flex mt-0.5 ml-1">
10
10
  {{> components/base/image/icon _icon=../../_iconName-adjust_context _iconmap="icons" _addClass="w-4 h-4 fill-current"}}
11
11
  </span>
12
12
  {{/if~}}
package/dist/views_static/components/article/components/accordion/accordion.hbs CHANGED
@@ -1,46 +1,35 @@
1
- <h2 class="mb-5 text-lg font-normal md:text-2xl font-headingSerif">{{this.title}}</h2>
2
- <div x-data="{selected:0}">
3
- {{~#with this.copytext }}
4
- {{#each this.copytextParagraph }}
5
- {{#if this.isHeadline}}
6
- <button type="button"
7
- class="w-full text-left"
8
- @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
9
- >
10
- <div class="flex flex-row justify-between border-t hover:text-toplineColor basis-10/12 content-evenly border-gray-alto">
11
- <h3 :class="selected !== {{getRandom}} ? 'overflow-hidden whitespace-nowrap text-ellipsis' : ''" class="self-center my-5 text-base font-normal md:text-lg font-headingSerif">{{{this.text}}}</h3>
12
- <span class="px-5 font-thin text-[40px] justify-self-end" x-text="selected !== {{getRandom}} ? '+' : '-'"></span>
13
- </div>
14
- </button>
15
- {{/if}}
16
- {{#if this.isParagraph}}
17
- <div class="relative flex flex-row w-full overflow-hidden transition-all duration-700 max-h-0 {{#if @last}} border-b border-gray-alto{{/if}}"
18
- style=""
19
- x-ref="container{{getRandom}}"
20
- x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
21
- >
22
- {{~#with this.paragraphBoxItem }}
23
- {{~#if this.isImage}}
24
- <figure class="pb-5 pr-5 ar-1-1 w-36 h-36 md:w-88 md:h-88">
25
- {{~> components/base/image/responsive_image this.Image _type="poster" _variant="50" _addClassImg="" ~}}
26
- </figure>
27
- {{/if}}
28
- {{/with}}
29
- <div>
30
- {{#each this.text.split}}
31
- {{#if this.isText}}
32
- <p class="pb-5 text-base md:text-lg">{{{this.text}}}</p>
33
- {{/if}}
34
- {{#if this.isUl}}
35
- <ul class="pb-5 ml-5 text-base list-disc md:text-lg">{{{this.text}}}</ul>
36
- {{/if}}
37
- {{#if this.isOl}}
38
- <ol class="pb-5 ml-5 text-base list-decimal md:text-lg">{{{this.text}}}</ol>
39
- {{/if}}
40
- {{/each}}
41
- </div>
1
+ <h2 class="mb-5 text-lg font-normal mt-11 md:text-2xl font-headingSerif">{{this.title}}</h2>
2
+ <div x-cloak x-data="{selected:0}" class="pb-11">
3
+ {{#each this.copytextParagraph }}
4
+ {{#if this.isHeadline}}
5
+ {{#unless @first}}</div></div>{{/unless}}
6
+ <button type="button"
7
+ class="w-full text-left"
8
+ @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
9
+ >
10
+ <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
11
+ <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal md:my-5 md:text-lg font-headingSerif">{{{this.text}}}</h3>
12
+ <span :class="selected == {{getRandom}} ? 'hidden' : ''">
13
+ {{> components/base/image/icon _icon="plus" _addClass="hover:text-toplineColor mx-5 mt-3 md:mt-5 w-7 h-7 fill-current"}}
14
+ </span>
15
+ <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
16
+ {{> components/base/image/icon _icon="minus" _addClass="hover:text-toplineColor mx-5 mt-3 md:mt-5 w-7 h-7 fill-current"}}
17
+ </span>
42
18
  </div>
19
+ </button>
20
+ <div class="relative w-full overflow-hidden transition-all duration-700 max-h-0"
21
+ style=""
22
+ x-ref="container{{getRandom}}"
23
+ x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
24
+ >
25
+ <div class="mb-8 accordionItem">
26
+ {{else}}
27
+ {{#if (isStorybook)}}
28
+ {{> components/article/components/accordion/accordion_item }}
29
+ {{else}}
30
+ {{> modules/story/copytext-accordion ~}}
43
31
  {{/if}}
44
- {{/each}}
45
- {{/with}}
32
+ {{#if @last}}</div></div><div class="w-full border-b border-gray-alto"></div>{{/if}}
33
+ {{/if}}
34
+ {{/each}}
46
35
  </div>
package/dist/views_static/components/article/components/accordion/accordion_item.hbs ADDED
@@ -0,0 +1,13 @@
1
+ {{#if this.isParagraph}}
2
+ {{#each this.text.split}}
3
+ {{#if this.isText}}
4
+ <p class="mb-5">{{{this.text}}}</p>
5
+ {{/if}}
6
+ {{#if this.isUl}}
7
+ <ul class="mb-5 ml-5 list-disc">{{{this.text}}}</ul>
8
+ {{/if}}
9
+ {{#if this.isOl}}
10
+ <ol class="mb-5 ml-5 list-decimal">{{{this.text}}}</ol>
11
+ {{/if}}
12
+ {{/each}}
13
+ {{/if}}
package/dist/views_static/components/dataPolicySettings/data_policy_settings.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div class="flex items-center justify-center md:justify-end js-load" data-hr-data-policy-settings-ds='{}'>
1
+ <div class="flex items-center justify-center mt-4 md:mt-0 md:justify-end js-load" data-hr-data-policy-settings-ds='{}'>
2
2
  {{#> components/button/button _size="md" _id="globalSettingsButton" _css="hover:text-secondary border-footer-text js-data-policy-settings-button" _variant="secondary" _onBackground="true" }}
3
3
  {{> components/button/components/button_icon _icon="settings" _iconmap="icons" _css="w-5 h-5"}}
4
4
  {{> components/button/components/button_label _label=(loca "cookies_setting_button_text")}}
@@ -38,20 +38,20 @@
38
38
  </div>
39
39
 
40
40
  <ul class="{{#if _webview}} hidden{{/if}}">
41
- <li class="px-6 py-3 bg-white border-t border-[#e3e3e3] tracking_1">
42
- <span class="inline-block text-base text-black">AGF <a
41
+ <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_1">
42
+ <span class="text-base text-black">AGF <a
43
43
  class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
44
44
  href="https://www.agf.de/" title="AGF">(https://www.agf.de/)</a></span>
45
- <div class="flex float-right toggleSwitch">
45
+ <div class="flex w-fit toggleSwitch">
46
46
  {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
47
47
  </div>
48
48
  </li>
49
- <li class="px-6 py-3 bg-white border-t border-[#e3e3e3] tracking_2">
50
- <span class="inline-block text-base text-black">AT Internet <a
49
+ <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_2">
50
+ <span class="text-base text-black">AT Internet <a
51
51
  class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
52
52
  href="https://www.atinternet.com/de/"
53
53
  title="AT Internet">(https://www.atinternet.com/de/)</a></span>
54
- <div class="flex float-right toggleSwitch">
54
+ <div class="flex w-fit toggleSwitch">
55
55
  {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
56
56
  </div>
57
57
  </li>
@@ -75,7 +75,7 @@
75
75
  <div class="bg-[#e3e3e3] py-2.5 px-6">
76
76
  <span class="block pb-2 text-lg text-black font-headingSerif">{{loca "cookies_setting_section_title"}}</span>
77
77
  <div class="all">
78
- <span class="inline-block text-base text-black js-providerTitle">x</span>
78
+ <span class="inline-flex text-base text-black js-providerTitle">x</span>
79
79
  <div class="flex float-right toggleSwitch">
80
80
  {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all"}}
81
81
  </div>
@@ -86,7 +86,7 @@
86
86
  {{#with this.serviceList}}
87
87
  {{#each this}}
88
88
  <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3] {{this.key}}">
89
- <span class="inline-block text-base leading-6 text-black">{{this.value}}</span>
89
+ <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
90
90
  <div class="flex float-right toggleSwitch">
91
91
  {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _isInitiallyHidden=this.isInitiallyHidden }}
92
92
  </div>
package/dist/views_static/components/footer/page_footer_column.hbs CHANGED
@@ -11,11 +11,9 @@
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-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
14
+ <ul class="flex flex-col text-primary md:text-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
15
15
  {{#each this.links}}
16
-
17
16
  {{> components/footer/page_footer_item _css="hover:underline" _iconName="extern" }}
18
-
19
17
  {{/each}}
20
18
  </ul>
21
19
  {{/each}}
package/dist/views_static/components/footer/page_footer_nav_link.hbs CHANGED
@@ -6,7 +6,7 @@
6
6
  </span>
7
7
  {{~/if~}}
8
8
  {{~#if _link.isTargetBlank}}
9
- <span class="inline-flex md:mt-0.5 md:ml-1">
9
+ <span class="inline-flex mt-0.5 ml-1">
10
10
  {{> components/base/image/icon _icon=_iconName _iconmap="icons" _addClass="w-4 h-4 fill-current"}}
11
11
  </span>
12
12
  {{/if~}}
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.35.0",
9
+ "version": "1.35.2",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/assets/fixtures/teaser/accordion.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
- "title": "Akkordeon Titel",
3
2
  "copytext": {
3
+ "title": "Akkordeon Titel",
4
4
  "copytextParagraph": [
5
5
  {
6
6
  "isHeadline": true,
@@ -33,7 +33,7 @@
33
33
  },
34
34
  {
35
35
  "isOl": true,
36
- "text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt,<li>sucht oder wünscht,</li><li>nur, weil er Schmerz ist</li>"
36
+ "text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
37
37
  }
38
38
  ]
39
39
  }
package/src/assets/icons/icons/svgmap/minus.svg ADDED
@@ -0,0 +1,9 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 27.7.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="minus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 320 320" style="enable-background:new 0 0 320 320;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill-rule:evenodd;clip-rule:evenodd;}
7
+ </style>
8
+ <path class="st0" d="M250,150H70c-5.5,0-10,4.5-10,10s4.5,10,10,10h180c5.5,0,10-4.5,10-10S255.5,150,250,150z"/>
9
+ </svg>
package/src/assets/icons/icons/svgmap/plus.svg ADDED
@@ -0,0 +1,11 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg id="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
3
+ <defs>
4
+ <style>
5
+ .cls-1 {
6
+ fill-rule: evenodd;
7
+ }
8
+ </style>
9
+ </defs>
10
+ <path class="cls-1" d="m250,150h-80v-80c0-5.52-4.48-10-10-10s-10,4.48-10,10v80h-80c-5.52,0-10,4.48-10,10s4.48,10,10,10h80v80c0,5.52,4.48,10,10,10s10-4.48,10-10v-80h80c5.52,0,10-4.48,10-10s-4.48-10-10-10Z"/>
11
+ </svg>