hr-design-system-handlebars 0.47.6 → 0.47.9
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 +36 -0
- package/dist/assets/index.css +12 -4
- package/dist/views/components/site_header/header_alpine.js +24 -4
- package/dist/views/components/teaser/components/teaser_heading.hbs +1 -1
- package/dist/views/components/teaser/components/teaser_text.hbs +3 -3
- package/dist/views/components/teaser/components/teaser_title.hbs +3 -13
- package/dist/views/components/teaser/components/teaser_title_classes.hbs +21 -0
- package/dist/views/components/teaser/components/teaser_topline.hbs +1 -1
- package/dist/views/components/teaser/teaser_standard.hbs +3 -2
- package/package.json +1 -1
- package/src/stories/Typography.stories.mdx +7 -7
- package/src/stories/views/components/site_header/header_alpine.js +24 -4
- package/src/stories/views/components/teaser/components/teaser_heading.hbs +1 -1
- package/src/stories/views/components/teaser/components/teaser_heading.stories.mdx +3 -0
- package/src/stories/views/components/teaser/components/teaser_text.hbs +3 -3
- package/src/stories/views/components/teaser/components/teaser_title.hbs +3 -13
- package/src/stories/views/components/teaser/components/teaser_title.stories.mdx +3 -0
- package/src/stories/views/components/teaser/components/teaser_title_classes.hbs +21 -0
- package/src/stories/views/components/teaser/components/teaser_topline.hbs +1 -1
- package/src/stories/views/components/teaser/teaser_standard.hbs +3 -2
- package/tailwind.config.js +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
+
# v0.47.9 (Tue Jun 14 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- - outsourced title class logic to own template [#243](https://github.com/mumprod/hr-design-system-handlebars/pull/243) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.47.8 (Tue Jun 14 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- adds support for detect scroll initiated by user or browser [#241](https://github.com/mumprod/hr-design-system-handlebars/pull/241) ([@StefanVesper](https://github.com/StefanVesper))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v0.47.7 (Mon Jun 13 2022)
|
|
26
|
+
|
|
27
|
+
#### 🐛 Bug Fix
|
|
28
|
+
|
|
29
|
+
- - adjusted teaserText size and Teaser Title Sizes [#242](https://github.com/mumprod/hr-design-system-handlebars/pull/242) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
30
|
+
|
|
31
|
+
#### Authors: 1
|
|
32
|
+
|
|
33
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
1
37
|
# v0.47.6 (Wed Jun 08 2022)
|
|
2
38
|
|
|
3
39
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1451,7 +1451,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1451
1451
|
padding-top: 0.75rem;
|
|
1452
1452
|
padding-bottom: 0.75rem;
|
|
1453
1453
|
font-size: 1rem;
|
|
1454
|
-
line-height: 1.
|
|
1454
|
+
line-height: 1.375rem;
|
|
1455
1455
|
}
|
|
1456
1456
|
.btn--xl {
|
|
1457
1457
|
padding-left: 1.5rem;
|
|
@@ -1896,6 +1896,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1896
1896
|
-moz-column-gap: 1rem;
|
|
1897
1897
|
column-gap: 1rem;
|
|
1898
1898
|
}
|
|
1899
|
+
.gap-y-3 {
|
|
1900
|
+
row-gap: 0.75rem;
|
|
1901
|
+
}
|
|
1899
1902
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
1900
1903
|
--tw-divide-y-reverse: 0;
|
|
1901
1904
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
@@ -2253,7 +2256,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2253
2256
|
}
|
|
2254
2257
|
.text-base {
|
|
2255
2258
|
font-size: 1rem;
|
|
2256
|
-
line-height: 1.
|
|
2259
|
+
line-height: 1.375rem;
|
|
2257
2260
|
}
|
|
2258
2261
|
.text-lg {
|
|
2259
2262
|
font-size: 1.125rem;
|
|
@@ -2261,7 +2264,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2261
2264
|
}
|
|
2262
2265
|
.text-xl {
|
|
2263
2266
|
font-size: 1.25rem;
|
|
2264
|
-
line-height: 1.
|
|
2267
|
+
line-height: 1.675rem;
|
|
2265
2268
|
}
|
|
2266
2269
|
.text-2xl {
|
|
2267
2270
|
font-size: 1.375rem;
|
|
@@ -2817,7 +2820,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2817
2820
|
|
|
2818
2821
|
.md\:text-base {
|
|
2819
2822
|
font-size: 1rem;
|
|
2820
|
-
line-height: 1.
|
|
2823
|
+
line-height: 1.375rem;
|
|
2821
2824
|
}
|
|
2822
2825
|
|
|
2823
2826
|
.md\:text-4xl {
|
|
@@ -2825,6 +2828,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2825
2828
|
line-height: 2.375rem;
|
|
2826
2829
|
}
|
|
2827
2830
|
|
|
2831
|
+
.md\:text-3xl {
|
|
2832
|
+
font-size: 1.875rem;
|
|
2833
|
+
line-height: 2.25rem;
|
|
2834
|
+
}
|
|
2835
|
+
|
|
2828
2836
|
.md\:leading-4 {
|
|
2829
2837
|
line-height: 1rem;
|
|
2830
2838
|
}
|
|
@@ -32,6 +32,15 @@ document.addEventListener('alpine:init', () => {
|
|
|
32
32
|
init(){
|
|
33
33
|
let lastScrollTop = 0
|
|
34
34
|
let height = top.innerHeight
|
|
35
|
+
|
|
36
|
+
let userScroll = false;
|
|
37
|
+
window.userScroll = userScroll;
|
|
38
|
+
|
|
39
|
+
function mouseEvent(e) {
|
|
40
|
+
userScroll = true;
|
|
41
|
+
window.userScroll = true;
|
|
42
|
+
}
|
|
43
|
+
window.addEventListener('wheel', mouseEvent, false);
|
|
35
44
|
|
|
36
45
|
window.addEventListener('scroll', this.debounce( () => {
|
|
37
46
|
let winScroll = document.body.scrollTop || document.documentElement.scrollTop
|
|
@@ -42,8 +51,10 @@ document.addEventListener('alpine:init', () => {
|
|
|
42
51
|
//console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
|
|
43
52
|
this.$store.navIsVisible = !this.isNavHidden()
|
|
44
53
|
this.$store.subNavIsVisible = !this.isSubNavHidden()
|
|
45
|
-
|
|
46
|
-
|
|
54
|
+
|
|
55
|
+
//console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
|
|
56
|
+
|
|
57
|
+
},50), {passive: true})
|
|
47
58
|
},
|
|
48
59
|
percent: 0,
|
|
49
60
|
scrollingDown: true,
|
|
@@ -69,10 +80,19 @@ document.addEventListener('alpine:init', () => {
|
|
|
69
80
|
return this.percent > 0
|
|
70
81
|
},
|
|
71
82
|
shouldSectionNavBeHidden() {
|
|
72
|
-
|
|
83
|
+
if(window.userScroll == true){
|
|
84
|
+
return this.percent > 50 && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
|
|
85
|
+
} else {
|
|
86
|
+
return this.percent > 50 && this.$store.burgeropen == false && this.$screen('lg')
|
|
87
|
+
}
|
|
88
|
+
|
|
73
89
|
},
|
|
74
90
|
shouldServiceNavBeHidden() {
|
|
75
|
-
|
|
91
|
+
if(window.userScroll == true) {
|
|
92
|
+
return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
|
|
93
|
+
} else {
|
|
94
|
+
return (this.percent > 90 && !this.$screen('lg') && this.$store.burgeropen == false)
|
|
95
|
+
}
|
|
76
96
|
},
|
|
77
97
|
shouldServiceIconsBeHidden() {
|
|
78
98
|
return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
{{#if topline}}
|
|
8
8
|
{{> components/teaser/components/teaser_topline text=topline readMore=readMore}}
|
|
9
9
|
{{/if}}
|
|
10
|
-
{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size }}
|
|
10
|
+
{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}
|
|
11
11
|
</{{~ headlineTag ~}}>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<span
|
|
2
2
|
class='{{inline-switch
|
|
3
3
|
size
|
|
4
|
-
'["hero","
|
|
5
|
-
'["block
|
|
4
|
+
'["hero","25"]'
|
|
5
|
+
'["block","hidden","hidden md:block"]'
|
|
6
6
|
}}
|
|
7
|
-
text-
|
|
7
|
+
text-base mt-3 font-copy'
|
|
8
8
|
>{{text}}</span>
|
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
<span
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
size
|
|
5
|
-
'["hero","100","25"]'
|
|
6
|
-
'[" text-2xl md:text-4xl"," text-2xl md:text-4xl"," text-lg"," text-2xl"]'
|
|
7
|
-
}}
|
|
8
|
-
{{inline-switch
|
|
9
|
-
fontVariant
|
|
10
|
-
'["serif", "sans-serif"]'
|
|
11
|
-
'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
|
|
12
|
-
}}'
|
|
13
|
-
>{{text}}</span>
|
|
1
|
+
<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes size=size teaserType=teaserType fontVariant=fontVariant}}'>
|
|
2
|
+
{{~text~}}
|
|
3
|
+
</span>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{{#switch teaserType~}}
|
|
2
|
+
{{~#case "standard"~}}
|
|
3
|
+
{{~inline-switch
|
|
4
|
+
size
|
|
5
|
+
'["hero","100","25"]'
|
|
6
|
+
'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
|
|
7
|
+
~}}
|
|
8
|
+
{{~/case~}}
|
|
9
|
+
{{~#case "alternative"~}}
|
|
10
|
+
{{~inline-switch
|
|
11
|
+
size
|
|
12
|
+
'["hero","100","50"]'
|
|
13
|
+
'["text-2xl md:text-3xl","text-2xl md:text-3xl","text-2xl"]'
|
|
14
|
+
~}}
|
|
15
|
+
{{~/case~}}
|
|
16
|
+
{{~/switch~}}
|
|
17
|
+
{{~inline-switch
|
|
18
|
+
fontVariant
|
|
19
|
+
'["serif", "sans-serif"]'
|
|
20
|
+
'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
|
|
21
|
+
~}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<span
|
|
2
|
-
class="
|
|
2
|
+
class="pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
|
|
3
3
|
aria-label="{{readMore}}: {{text}}"
|
|
4
4
|
>
|
|
5
5
|
{{text}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<article class="col-span-12 flex gap-y-
|
|
1
|
+
<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
2
2
|
<figure class="{{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
|
|
3
3
|
{{#>components/base/link isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
|
|
4
4
|
{{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
readMore=this.link.readMoreText.readMoreScreenreader
|
|
15
15
|
size=this.teaserSize
|
|
16
16
|
title=this.title
|
|
17
|
-
topline=this.topline
|
|
17
|
+
topline=this.topline
|
|
18
|
+
teaserType=this.teaserType}}
|
|
18
19
|
{{/components/base/link}}
|
|
19
20
|
</header>
|
|
20
21
|
<section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">
|
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": "0.47.
|
|
9
|
+
"version": "0.47.9",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -18,9 +18,9 @@ Zur Auszeichnung von Fließtexten stehen die folgenden Utility Klassen zur verf
|
|
|
18
18
|
| `font-copy` | `font-family: DIN, sans-serif` | | Setzt die Eigenschaft `font-family` |
|
|
19
19
|
| `text-xs` | `font-size: 0.75rem` <br /> `line-height: 1rem` | `12px`<br />`16px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
20
20
|
| `text-sm` | `font-size: 0.875rem` <br /> `line-height: 1.88rem` | `14px`<br />`19px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
21
|
-
| `text-base` | `font-size: 1rem` <br /> `line-height: 1.
|
|
22
|
-
| `text-lg` | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`
|
|
23
|
-
| `text-xl` | `font-size: 1.25rem` <br /> `line-height: 1.75rem` | `20px`<br />`
|
|
21
|
+
| `text-base` | `font-size: 1rem` <br /> `line-height: 1.375rem` | `16px`<br />`22px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
22
|
+
| `text-lg` | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
23
|
+
| `text-xl` | `font-size: 1.25rem` <br /> `line-height: 1.75rem` | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
24
24
|
|
|
25
25
|
### Verwendung
|
|
26
26
|
|
|
@@ -90,11 +90,11 @@ Zur Auszeichnung von Überschriften stehen die folgenden Utility Klassen zur ver
|
|
|
90
90
|
| :------------------ | :-------------------------------------------------- | ------------------ | :---------------------------------------------------- |
|
|
91
91
|
| `font-headingSerif` | `font-family: RobotoSlab, serif` | | Setzt die Eigenschaft `font-family` |
|
|
92
92
|
| `font-heading` | `font-family: RobotoCond, sans-serif` | | Setzt die Eigenschaft `font-family` |
|
|
93
|
-
| `text-lg` | `font-size: 1.125rem` <br /> `line-height: 1.
|
|
94
|
-
| `text-xl` | `font-size: 1.25rem` <br /> `line-height: 1.
|
|
95
|
-
| `text-2xl` | `font-size: 1.375rem` <br /> `line-height:
|
|
93
|
+
| `text-lg` | `font-size: 1.125rem` <br /> `line-height: 1.5rem` | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
94
|
+
| `text-xl` | `font-size: 1.25rem` <br /> `line-height: 1.675rem` | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
95
|
+
| `text-2xl` | `font-size: 1.375rem` <br /> `line-height: 1.75rem` | `22px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
96
96
|
| `text-3xl` | `font-size: 1.875rem` <br /> `line-height: 2.25rem` | `30px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
97
|
-
| `text-4xl` | `font-size: 2.125rem` <br /> `line-height: 2.
|
|
97
|
+
| `text-4xl` | `font-size: 2.125rem` <br /> `line-height: 2.375rem`| `34px`<br />`38px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
98
98
|
|
|
99
99
|
### Verwendung RobotoSlab
|
|
100
100
|
|
|
@@ -32,6 +32,15 @@ document.addEventListener('alpine:init', () => {
|
|
|
32
32
|
init(){
|
|
33
33
|
let lastScrollTop = 0
|
|
34
34
|
let height = top.innerHeight
|
|
35
|
+
|
|
36
|
+
let userScroll = false;
|
|
37
|
+
window.userScroll = userScroll;
|
|
38
|
+
|
|
39
|
+
function mouseEvent(e) {
|
|
40
|
+
userScroll = true;
|
|
41
|
+
window.userScroll = true;
|
|
42
|
+
}
|
|
43
|
+
window.addEventListener('wheel', mouseEvent, false);
|
|
35
44
|
|
|
36
45
|
window.addEventListener('scroll', this.debounce( () => {
|
|
37
46
|
let winScroll = document.body.scrollTop || document.documentElement.scrollTop
|
|
@@ -42,8 +51,10 @@ document.addEventListener('alpine:init', () => {
|
|
|
42
51
|
//console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
|
|
43
52
|
this.$store.navIsVisible = !this.isNavHidden()
|
|
44
53
|
this.$store.subNavIsVisible = !this.isSubNavHidden()
|
|
45
|
-
|
|
46
|
-
|
|
54
|
+
|
|
55
|
+
//console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
|
|
56
|
+
|
|
57
|
+
},50), {passive: true})
|
|
47
58
|
},
|
|
48
59
|
percent: 0,
|
|
49
60
|
scrollingDown: true,
|
|
@@ -69,10 +80,19 @@ document.addEventListener('alpine:init', () => {
|
|
|
69
80
|
return this.percent > 0
|
|
70
81
|
},
|
|
71
82
|
shouldSectionNavBeHidden() {
|
|
72
|
-
|
|
83
|
+
if(window.userScroll == true){
|
|
84
|
+
return this.percent > 50 && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
|
|
85
|
+
} else {
|
|
86
|
+
return this.percent > 50 && this.$store.burgeropen == false && this.$screen('lg')
|
|
87
|
+
}
|
|
88
|
+
|
|
73
89
|
},
|
|
74
90
|
shouldServiceNavBeHidden() {
|
|
75
|
-
|
|
91
|
+
if(window.userScroll == true) {
|
|
92
|
+
return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
|
|
93
|
+
} else {
|
|
94
|
+
return (this.percent > 90 && !this.$screen('lg') && this.$store.burgeropen == false)
|
|
95
|
+
}
|
|
76
96
|
},
|
|
77
97
|
shouldServiceIconsBeHidden() {
|
|
78
98
|
return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
{{#if topline}}
|
|
8
8
|
{{> components/teaser/components/teaser_topline text=topline readMore=readMore}}
|
|
9
9
|
{{/if}}
|
|
10
|
-
{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size }}
|
|
10
|
+
{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}
|
|
11
11
|
</{{~ headlineTag ~}}>
|
|
@@ -80,6 +80,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
|
|
|
80
80
|
headlineTag: 'h1',
|
|
81
81
|
fontVariant: 'serif',
|
|
82
82
|
size: 'hero',
|
|
83
|
+
teaserType: 'standard'
|
|
83
84
|
}}
|
|
84
85
|
>
|
|
85
86
|
{Template.bind({})}
|
|
@@ -108,6 +109,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
|
|
|
108
109
|
headlineTag: 'h1',
|
|
109
110
|
fontVariant: 'serif',
|
|
110
111
|
size: '33',
|
|
112
|
+
teaserType: 'standard'
|
|
111
113
|
}}
|
|
112
114
|
>
|
|
113
115
|
{Template.bind({})}
|
|
@@ -134,6 +136,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
|
|
|
134
136
|
headlineTag: 'h1',
|
|
135
137
|
fontVariant: 'serif',
|
|
136
138
|
size: '25',
|
|
139
|
+
teaserType: 'standard'
|
|
137
140
|
}}
|
|
138
141
|
>
|
|
139
142
|
{Template.bind({})}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<span
|
|
2
2
|
class='{{inline-switch
|
|
3
3
|
size
|
|
4
|
-
'["hero","
|
|
5
|
-
'["block
|
|
4
|
+
'["hero","25"]'
|
|
5
|
+
'["block","hidden","hidden md:block"]'
|
|
6
6
|
}}
|
|
7
|
-
text-
|
|
7
|
+
text-base mt-3 font-copy'
|
|
8
8
|
>{{text}}</span>
|
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
<span
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
size
|
|
5
|
-
'["hero","100","25"]'
|
|
6
|
-
'[" text-2xl md:text-4xl"," text-2xl md:text-4xl"," text-lg"," text-2xl"]'
|
|
7
|
-
}}
|
|
8
|
-
{{inline-switch
|
|
9
|
-
fontVariant
|
|
10
|
-
'["serif", "sans-serif"]'
|
|
11
|
-
'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
|
|
12
|
-
}}'
|
|
13
|
-
>{{text}}</span>
|
|
1
|
+
<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes size=size teaserType=teaserType fontVariant=fontVariant}}'>
|
|
2
|
+
{{~text~}}
|
|
3
|
+
</span>
|
|
@@ -51,6 +51,7 @@ Beispiele für die Titel-Komponente:
|
|
|
51
51
|
text: 'Dies ist der Titel eines 100%-Teasers',
|
|
52
52
|
size: 'hero',
|
|
53
53
|
fontVariant: 'serif',
|
|
54
|
+
teaserType: 'standard'
|
|
54
55
|
}}
|
|
55
56
|
>
|
|
56
57
|
{Template.bind({})}
|
|
@@ -61,6 +62,7 @@ Beispiele für die Titel-Komponente:
|
|
|
61
62
|
text: 'Dies ist der Titel eines 66%-, 50%- oder 33%-Teasers',
|
|
62
63
|
size: '33',
|
|
63
64
|
fontVariant: 'serif',
|
|
65
|
+
teaserType: 'standard'
|
|
64
66
|
}}
|
|
65
67
|
>
|
|
66
68
|
{Template.bind({})}
|
|
@@ -71,6 +73,7 @@ Beispiele für die Titel-Komponente:
|
|
|
71
73
|
text: 'Dies ist der Titel eines 25%-Teasers',
|
|
72
74
|
size: '25',
|
|
73
75
|
fontVariant: 'serif',
|
|
76
|
+
teaserType: 'standard'
|
|
74
77
|
}}
|
|
75
78
|
>
|
|
76
79
|
{Template.bind({})}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{{#switch teaserType~}}
|
|
2
|
+
{{~#case "standard"~}}
|
|
3
|
+
{{~inline-switch
|
|
4
|
+
size
|
|
5
|
+
'["hero","100","25"]'
|
|
6
|
+
'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
|
|
7
|
+
~}}
|
|
8
|
+
{{~/case~}}
|
|
9
|
+
{{~#case "alternative"~}}
|
|
10
|
+
{{~inline-switch
|
|
11
|
+
size
|
|
12
|
+
'["hero","100","50"]'
|
|
13
|
+
'["text-2xl md:text-3xl","text-2xl md:text-3xl","text-2xl"]'
|
|
14
|
+
~}}
|
|
15
|
+
{{~/case~}}
|
|
16
|
+
{{~/switch~}}
|
|
17
|
+
{{~inline-switch
|
|
18
|
+
fontVariant
|
|
19
|
+
'["serif", "sans-serif"]'
|
|
20
|
+
'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
|
|
21
|
+
~}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<span
|
|
2
|
-
class="
|
|
2
|
+
class="pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
|
|
3
3
|
aria-label="{{readMore}}: {{text}}"
|
|
4
4
|
>
|
|
5
5
|
{{text}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<article class="col-span-12 flex gap-y-
|
|
1
|
+
<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
2
2
|
<figure class="{{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
|
|
3
3
|
{{#>components/base/link isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
|
|
4
4
|
{{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
readMore=this.link.readMoreText.readMoreScreenreader
|
|
15
15
|
size=this.teaserSize
|
|
16
16
|
title=this.title
|
|
17
|
-
topline=this.topline
|
|
17
|
+
topline=this.topline
|
|
18
|
+
teaserType=this.teaserType}}
|
|
18
19
|
{{/components/base/link}}
|
|
19
20
|
</header>
|
|
20
21
|
<section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">
|
package/tailwind.config.js
CHANGED
|
@@ -40,8 +40,9 @@ module.exports = {
|
|
|
40
40
|
fontSize: {
|
|
41
41
|
'xs':['0.75rem', '1.063rem'],
|
|
42
42
|
'sm':['0.875rem', '1.188rem'],
|
|
43
|
-
'base':['1rem', '1.
|
|
44
|
-
'lg':['1.125rem', '1.5rem'],
|
|
43
|
+
'base':['1rem', '1.375rem'],
|
|
44
|
+
'lg':['1.125rem', '1.5rem'],
|
|
45
|
+
'xl':['1.25rem', '1.675rem'],
|
|
45
46
|
'2xl':['1.375rem', '1.75rem'],
|
|
46
47
|
'4xl':['2.125rem', '2.375rem'],
|
|
47
48
|
},
|