hr-design-system-handlebars 1.34.1 → 1.34.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.
- package/CHANGELOG.md +12 -0
- package/dist/assets/index.css +51 -3
- package/dist/views/components/article/components/accordion/accordion.hbs +46 -0
- package/dist/views_static/components/article/components/accordion/accordion.hbs +46 -0
- package/package.json +1 -1
- package/src/assets/css/custom-components.css +4 -0
- package/src/assets/fixtures/teaser/accordion.json +90 -0
- package/src/stories/views/components/article/components/accordion/accordion.hbs +46 -0
- package/src/stories/views/components/article/components/accordion/accordion.mdx +26 -0
- package/src/stories/views/components/article/components/accordion/accordion.stories.js +18 -0
- package/src/stories/views/components/teaser/fixtures/accordion.json +1 -0
- package/tailwind.config.js +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.34.2 (Wed Jul 26 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- add accordion-component [#689](https://github.com/mumprod/hr-design-system-handlebars/pull/689) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.34.1 (Tue Jul 25 2023)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -578,6 +578,9 @@ video {
|
|
|
578
578
|
.justifyLine.headline-barrier:after {
|
|
579
579
|
padding-top: 0.875rem;
|
|
580
580
|
}
|
|
581
|
+
.max-h-0 {
|
|
582
|
+
max-height: 0;
|
|
583
|
+
}
|
|
581
584
|
/* PODCAST SEEK SLIDER*/
|
|
582
585
|
.seek_slider::-webkit-slider-thumb {
|
|
583
586
|
-webkit-appearance: none;
|
|
@@ -1270,6 +1273,9 @@ video {
|
|
|
1270
1273
|
.ml-4 {
|
|
1271
1274
|
margin-left: 1rem;
|
|
1272
1275
|
}
|
|
1276
|
+
.ml-5 {
|
|
1277
|
+
margin-left: 1.25rem;
|
|
1278
|
+
}
|
|
1273
1279
|
.ml-auto {
|
|
1274
1280
|
margin-left: auto;
|
|
1275
1281
|
}
|
|
@@ -1399,6 +1405,9 @@ video {
|
|
|
1399
1405
|
.h-3\.5 {
|
|
1400
1406
|
height: 0.875rem;
|
|
1401
1407
|
}
|
|
1408
|
+
.h-36 {
|
|
1409
|
+
height: 9rem;
|
|
1410
|
+
}
|
|
1402
1411
|
.h-4 {
|
|
1403
1412
|
height: 1rem;
|
|
1404
1413
|
}
|
|
@@ -1487,6 +1496,9 @@ video {
|
|
|
1487
1496
|
.w-3\/5 {
|
|
1488
1497
|
width: 60%;
|
|
1489
1498
|
}
|
|
1499
|
+
.w-36 {
|
|
1500
|
+
width: 9rem;
|
|
1501
|
+
}
|
|
1490
1502
|
.w-4 {
|
|
1491
1503
|
width: 1rem;
|
|
1492
1504
|
}
|
|
@@ -1663,6 +1675,12 @@ video {
|
|
|
1663
1675
|
.resize {
|
|
1664
1676
|
resize: both;
|
|
1665
1677
|
}
|
|
1678
|
+
.list-decimal {
|
|
1679
|
+
list-style-type: decimal;
|
|
1680
|
+
}
|
|
1681
|
+
.list-disc {
|
|
1682
|
+
list-style-type: disc;
|
|
1683
|
+
}
|
|
1666
1684
|
.list-none {
|
|
1667
1685
|
list-style-type: none;
|
|
1668
1686
|
}
|
|
@@ -1692,6 +1710,9 @@ video {
|
|
|
1692
1710
|
.content-start {
|
|
1693
1711
|
align-content: flex-start;
|
|
1694
1712
|
}
|
|
1713
|
+
.content-evenly {
|
|
1714
|
+
align-content: space-evenly;
|
|
1715
|
+
}
|
|
1695
1716
|
.items-start {
|
|
1696
1717
|
align-items: flex-start;
|
|
1697
1718
|
}
|
|
@@ -1781,6 +1802,9 @@ video {
|
|
|
1781
1802
|
.self-baseline {
|
|
1782
1803
|
align-self: baseline;
|
|
1783
1804
|
}
|
|
1805
|
+
.justify-self-end {
|
|
1806
|
+
justify-self: end;
|
|
1807
|
+
}
|
|
1784
1808
|
.overflow-hidden {
|
|
1785
1809
|
overflow: hidden;
|
|
1786
1810
|
}
|
|
@@ -1804,6 +1828,9 @@ video {
|
|
|
1804
1828
|
text-overflow: ellipsis;
|
|
1805
1829
|
white-space: nowrap;
|
|
1806
1830
|
}
|
|
1831
|
+
.text-ellipsis {
|
|
1832
|
+
text-overflow: ellipsis;
|
|
1833
|
+
}
|
|
1807
1834
|
.hyphens-auto {
|
|
1808
1835
|
-webkit-hyphens: auto;
|
|
1809
1836
|
hyphens: auto;
|
|
@@ -1944,6 +1971,10 @@ video {
|
|
|
1944
1971
|
--tw-border-opacity: 1;
|
|
1945
1972
|
border-color: rgba(156, 163, 175, var(--tw-border-opacity));
|
|
1946
1973
|
}
|
|
1974
|
+
.border-gray-alto {
|
|
1975
|
+
--tw-border-opacity: 1;
|
|
1976
|
+
border-color: rgba(224, 224, 224, var(--tw-border-opacity));
|
|
1977
|
+
}
|
|
1947
1978
|
.border-navigation-border-color {
|
|
1948
1979
|
border-color: #fff;
|
|
1949
1980
|
border-color: var(--color-navigation-border-color);
|
|
@@ -2485,6 +2516,9 @@ video {
|
|
|
2485
2516
|
font-size: 3rem;
|
|
2486
2517
|
line-height: 1;
|
|
2487
2518
|
}
|
|
2519
|
+
.text-\[40px\] {
|
|
2520
|
+
font-size: 40px;
|
|
2521
|
+
}
|
|
2488
2522
|
.text-base {
|
|
2489
2523
|
font-size: 1rem;
|
|
2490
2524
|
line-height: 1.375rem;
|
|
@@ -2517,6 +2551,9 @@ video {
|
|
|
2517
2551
|
.font-semibold {
|
|
2518
2552
|
font-weight: 600;
|
|
2519
2553
|
}
|
|
2554
|
+
.font-thin {
|
|
2555
|
+
font-weight: 100;
|
|
2556
|
+
}
|
|
2520
2557
|
.font-title {
|
|
2521
2558
|
font-weight: 700;
|
|
2522
2559
|
font-weight: var(--font-weight-title);
|
|
@@ -2890,6 +2927,9 @@ video {
|
|
|
2890
2927
|
.duration-500 {
|
|
2891
2928
|
transition-duration: 500ms;
|
|
2892
2929
|
}
|
|
2930
|
+
.duration-700 {
|
|
2931
|
+
transition-duration: 700ms;
|
|
2932
|
+
}
|
|
2893
2933
|
.ease-in {
|
|
2894
2934
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2895
2935
|
}
|
|
@@ -2904,7 +2944,7 @@ video {
|
|
|
2904
2944
|
border-bottom-color: var(--color-secondary-ds);
|
|
2905
2945
|
}
|
|
2906
2946
|
.counter-reset {
|
|
2907
|
-
counter-reset:
|
|
2947
|
+
counter-reset: cnt1690365962927;
|
|
2908
2948
|
}
|
|
2909
2949
|
.hyphens-auto {
|
|
2910
2950
|
-webkit-hyphens: auto;
|
|
@@ -3139,7 +3179,7 @@ video {
|
|
|
3139
3179
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3140
3180
|
}
|
|
3141
3181
|
.-ordered {
|
|
3142
|
-
counter-increment:
|
|
3182
|
+
counter-increment: cnt1690365962927 1;
|
|
3143
3183
|
}
|
|
3144
3184
|
.-ordered::before {
|
|
3145
3185
|
position: absolute;
|
|
@@ -3155,7 +3195,7 @@ video {
|
|
|
3155
3195
|
letter-spacing: .0125em;
|
|
3156
3196
|
--tw-text-opacity: 1;
|
|
3157
3197
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3158
|
-
content: counter(
|
|
3198
|
+
content: counter(cnt1690365962927);
|
|
3159
3199
|
}
|
|
3160
3200
|
/*! ****************************/
|
|
3161
3201
|
/*! text-shadow */
|
|
@@ -5086,6 +5126,10 @@ video {
|
|
|
5086
5126
|
height: 2rem;
|
|
5087
5127
|
}
|
|
5088
5128
|
|
|
5129
|
+
.md\:h-88 {
|
|
5130
|
+
height: 22rem;
|
|
5131
|
+
}
|
|
5132
|
+
|
|
5089
5133
|
.md\:h-auto {
|
|
5090
5134
|
height: auto;
|
|
5091
5135
|
}
|
|
@@ -5131,6 +5175,10 @@ video {
|
|
|
5131
5175
|
width: 20rem;
|
|
5132
5176
|
}
|
|
5133
5177
|
|
|
5178
|
+
.md\:w-88 {
|
|
5179
|
+
width: 22rem;
|
|
5180
|
+
}
|
|
5181
|
+
|
|
5134
5182
|
.md\:w-auto {
|
|
5135
5183
|
width: auto;
|
|
5136
5184
|
}
|
|
@@ -0,0 +1,46 @@
|
|
|
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>
|
|
42
|
+
</div>
|
|
43
|
+
{{/if}}
|
|
44
|
+
{{/each}}
|
|
45
|
+
{{/with}}
|
|
46
|
+
</div>
|
|
@@ -0,0 +1,46 @@
|
|
|
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>
|
|
42
|
+
</div>
|
|
43
|
+
{{/if}}
|
|
44
|
+
{{/each}}
|
|
45
|
+
{{/with}}
|
|
46
|
+
</div>
|
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.34.
|
|
9
|
+
"version": "1.34.2",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "Akkordeon Titel",
|
|
3
|
+
"copytext": {
|
|
4
|
+
"copytextParagraph": [
|
|
5
|
+
{
|
|
6
|
+
"isHeadline": true,
|
|
7
|
+
"text": "Das ist der erste Eintrag (mit einer ziemlich langen Headline, die so lang ist, dass sie umbricht)"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"paragraphBoxItem": {
|
|
11
|
+
"isImage": true,
|
|
12
|
+
"Image": {
|
|
13
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
14
|
+
"@->contentpath": "teaser_poster_50",
|
|
15
|
+
"@->replaceToken": [
|
|
16
|
+
{
|
|
17
|
+
"@->token": "image",
|
|
18
|
+
"@->value": "hasebe-kane-102"
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"isParagraph": true,
|
|
24
|
+
"text": {
|
|
25
|
+
"split": [
|
|
26
|
+
{
|
|
27
|
+
"isText": true,
|
|
28
|
+
"text": "Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"isUl": true,
|
|
32
|
+
"text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
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>"
|
|
37
|
+
}
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"isHeadline": true,
|
|
43
|
+
"text": "Das ist der zweite Eintrag"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"paragraphBoxItem": {
|
|
47
|
+
"isImage": true,
|
|
48
|
+
"Image": {
|
|
49
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
50
|
+
"@->contentpath": "teaser_poster_50",
|
|
51
|
+
"@->replaceToken": [
|
|
52
|
+
{
|
|
53
|
+
"@->token": "image",
|
|
54
|
+
"@->value": "buchmesse-fahnen-102"
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"isParagraph": true,
|
|
60
|
+
"text": {
|
|
61
|
+
"split": [
|
|
62
|
+
{
|
|
63
|
+
"isText": true,
|
|
64
|
+
"text": "Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"isHeadline": true,
|
|
71
|
+
"text": "Das ist der dritte Eintrag"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"isParagraph": true,
|
|
75
|
+
"text": {
|
|
76
|
+
"split": [
|
|
77
|
+
{
|
|
78
|
+
"isText": true,
|
|
79
|
+
"text": "Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"isUl": true,
|
|
83
|
+
"text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
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>
|
|
42
|
+
</div>
|
|
43
|
+
{{/if}}
|
|
44
|
+
{{/each}}
|
|
45
|
+
{{/with}}
|
|
46
|
+
</div>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
|
+
import * as AccordionStories from './accordion.stories'
|
|
3
|
+
|
|
4
|
+
<Meta of={AccordionStories} />
|
|
5
|
+
|
|
6
|
+
# Akkordeon
|
|
7
|
+
|
|
8
|
+
## Beschreibung
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## Parameter
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<ArgsTable story="default" />
|
|
15
|
+
|
|
16
|
+
## Verwendung
|
|
17
|
+
|
|
18
|
+
Die Akkordeon-Komponente wird in handlebars wie folgt eingebaut:
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
{{> components/article/components/accordion/accordion }}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
<Canvas withToolbar>
|
|
25
|
+
<Story of={AccordionStories.Default} />
|
|
26
|
+
</Canvas>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import accordion from './accordion.hbs'
|
|
2
|
+
import accordionJson from '../../../teaser/fixtures/accordion.json'
|
|
3
|
+
|
|
4
|
+
const Template = ({ ...args }) => {
|
|
5
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
6
|
+
// return `<span>${topline}</span>`;
|
|
7
|
+
return accordion({ ...args })
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
title: 'Komponenten/Artikel/Komponenten/Akkordeon',
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const Default = {
|
|
15
|
+
render: Template.bind({}),
|
|
16
|
+
name: 'default',
|
|
17
|
+
args: accordionJson,
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"title":"Akkordeon Titel","copytext":{"copytextParagraph":[{"isHeadline":true,"text":"Das ist der erste Eintrag (mit einer ziemlich langen Headline, die so lang ist, dass sie umbricht)"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hasebe-kane-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/hasebe-kane-102_v-1to1__small.jpg 380w, images/hasebe-kane-102_v-1to1__medium.jpg 480w, images/hasebe-kane-102_v-1to1.jpg 720w, images/hasebe-kane-102_v-1to1__large.jpg 960w"}]}}},"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"},{"isUl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"},{"isOl":true,"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>"}]}},{"isHeadline":true,"text":"Das ist der zweite Eintrag"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/buchmesse-fahnen-102_v-1to1__small.jpg 380w, images/buchmesse-fahnen-102_v-1to1__medium.jpg 480w, images/buchmesse-fahnen-102_v-1to1.jpg 720w, images/buchmesse-fahnen-102_v-1to1__large.jpg 960w"}]}}},"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"}]}},{"isHeadline":true,"text":"Das ist der dritte Eintrag"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"},{"isUl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"}]}}]}}
|