hr-design-system-handlebars 0.122.6 โ 0.122.8
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 +30 -0
- package/dist/assets/index.css +33 -11
- package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast_player_ui.hbs +2 -2
- package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs +2 -2
- package/package.json +1 -1
- package/src/assets/css/custom-components.css +10 -2
- package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs +1 -1
- package/src/stories/views/components/teaser/podcast/podcast.stories.mdx +2 -1
- package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs +2 -2
- package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs +2 -2
- package/src/stories/views/components/teaser/teaser_alternativ.stories.mdx +1 -0
- package/src/stories/views/components/teaser/teaser_poster.stories.mdx +3 -0
- package/src/stories/views/components/teaser/teaser_stage.stories.mdx +1 -0
- package/src/stories/views/components/teaser/teaser_standard.stories.mdx +2 -1
- package/src/stories/views/components/teaser/teaser_standard_av.stories.mdx +3 -0
- package/src/stories/views/components/teaser/teaser_standard_event.stories.mdx +3 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,33 @@
|
|
|
1
|
+
# v0.122.8 (Thu Feb 02 2023)
|
|
2
|
+
|
|
3
|
+
#### ๐ Bug Fix
|
|
4
|
+
|
|
5
|
+
- change colors in podcast-teaser [#518](https://github.com/mumprod/hr-design-system-handlebars/pull/518) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.122.7 (Thu Feb 02 2023)
|
|
14
|
+
|
|
15
|
+
#### ๐ Bug Fix
|
|
16
|
+
|
|
17
|
+
- Byline-Label in Schlagzeilenboxen bricht um [#517](https://github.com/mumprod/hr-design-system-handlebars/pull/517) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
|
|
18
|
+
|
|
19
|
+
#### ๐งช Tests
|
|
20
|
+
|
|
21
|
+
- adds threshold for chromatic screenshots [#515](https://github.com/mumprod/hr-design-system-handlebars/pull/515) ([@StefanVesper](https://github.com/StefanVesper))
|
|
22
|
+
|
|
23
|
+
#### Authors: 3
|
|
24
|
+
|
|
25
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
26
|
+
- selbaciri (saad.elbaciri@hr.de)
|
|
27
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
1
31
|
# v0.122.6 (Wed Feb 01 2023)
|
|
2
32
|
|
|
3
33
|
#### ๐ Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -423,7 +423,7 @@ video {
|
|
|
423
423
|
--tw-scale-y: 1;
|
|
424
424
|
}
|
|
425
425
|
|
|
426
|
-
.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
|
|
426
|
+
.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link-clusterTeaser, .ds-link:not(:focus-visible), .ds-link-clusterTeaser:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
|
|
427
427
|
--tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
|
|
428
428
|
--tw-ring-shadow: 0 0 rgba(0,0,0,0);
|
|
429
429
|
--tw-shadow: 0 0 rgba(0,0,0,0);
|
|
@@ -559,7 +559,8 @@ video {
|
|
|
559
559
|
appearance: none;
|
|
560
560
|
width: 16px;
|
|
561
561
|
height: 16px;
|
|
562
|
-
background:
|
|
562
|
+
background: #006eb7;
|
|
563
|
+
background: var(--color-podcast-text);
|
|
563
564
|
border: 2px solid white;
|
|
564
565
|
cursor: pointer;
|
|
565
566
|
border-radius: 50%;
|
|
@@ -570,7 +571,8 @@ video {
|
|
|
570
571
|
appearance: none;
|
|
571
572
|
width: 12px;
|
|
572
573
|
height: 12px;
|
|
573
|
-
background:
|
|
574
|
+
background: #006eb7;
|
|
575
|
+
background: var(--color-podcast-text);
|
|
574
576
|
border: 2px solid white;
|
|
575
577
|
cursor: pointer;
|
|
576
578
|
border-radius: 50%;
|
|
@@ -653,6 +655,21 @@ video {
|
|
|
653
655
|
outline: 2px solid transparent;
|
|
654
656
|
outline-offset: 2px;
|
|
655
657
|
}
|
|
658
|
+
.ds-link-clusterTeaser {
|
|
659
|
+
--tw-text-opacity: 1;
|
|
660
|
+
color: rgba(96, 96, 96, var(--tw-text-opacity));
|
|
661
|
+
}
|
|
662
|
+
.ds-link-clusterTeaser:focus {
|
|
663
|
+
--tw-shadow: 0 0 0 0.25rem;
|
|
664
|
+
--tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
|
|
665
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
666
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
667
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
668
|
+
--tw-shadow-color: var(--color-focus-state);
|
|
669
|
+
--tw-shadow: var(--tw-shadow-colored);
|
|
670
|
+
outline: 2px solid transparent;
|
|
671
|
+
outline-offset: 2px;
|
|
672
|
+
}
|
|
656
673
|
.ds-link:focus:not(:focus-visible) {
|
|
657
674
|
--tw-shadow: 0 0 rgba(0,0,0,0);
|
|
658
675
|
--tw-shadow-colored: 0 0 rgba(0,0,0,0);
|
|
@@ -660,6 +677,13 @@ video {
|
|
|
660
677
|
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
661
678
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
662
679
|
}
|
|
680
|
+
.ds-link-clusterTeaser:focus:not(:focus-visible) {
|
|
681
|
+
--tw-shadow: 0 0 rgba(0,0,0,0);
|
|
682
|
+
--tw-shadow-colored: 0 0 rgba(0,0,0,0);
|
|
683
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
684
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
685
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
686
|
+
}
|
|
663
687
|
.ds-link-inset {
|
|
664
688
|
display: block;
|
|
665
689
|
}
|
|
@@ -1843,8 +1867,9 @@ video {
|
|
|
1843
1867
|
background-color: #006dc1;
|
|
1844
1868
|
background-color: var(--color-podcast);
|
|
1845
1869
|
}
|
|
1846
|
-
.bg-podcast-
|
|
1847
|
-
background-color:
|
|
1870
|
+
.bg-podcast-text {
|
|
1871
|
+
background-color: #006eb7;
|
|
1872
|
+
background-color: var(--color-podcast-text);
|
|
1848
1873
|
}
|
|
1849
1874
|
.bg-stageTextBox {
|
|
1850
1875
|
background-color: #006eb7;
|
|
@@ -2308,9 +2333,6 @@ video {
|
|
|
2308
2333
|
color: #006eb7;
|
|
2309
2334
|
color: var(--color-podcast-text);
|
|
2310
2335
|
}
|
|
2311
|
-
.text-podcast-highlight {
|
|
2312
|
-
color: var(--color-podcast-highlight);
|
|
2313
|
-
}
|
|
2314
2336
|
.\!text-stageText {
|
|
2315
2337
|
color: #ffffff !important;
|
|
2316
2338
|
color: var(--color-stage-text) !important;
|
|
@@ -2483,7 +2505,7 @@ video {
|
|
|
2483
2505
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2484
2506
|
}
|
|
2485
2507
|
.counter-reset {
|
|
2486
|
-
counter-reset:
|
|
2508
|
+
counter-reset: cnt1675354781412;
|
|
2487
2509
|
}
|
|
2488
2510
|
.line-clamp-4 {
|
|
2489
2511
|
overflow: hidden;
|
|
@@ -2701,7 +2723,7 @@ video {
|
|
|
2701
2723
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2702
2724
|
}
|
|
2703
2725
|
.-ordered {
|
|
2704
|
-
counter-increment:
|
|
2726
|
+
counter-increment: cnt1675354781412 1;
|
|
2705
2727
|
}
|
|
2706
2728
|
.-ordered::before {
|
|
2707
2729
|
position: absolute;
|
|
@@ -2717,7 +2739,7 @@ video {
|
|
|
2717
2739
|
letter-spacing: .0125em;
|
|
2718
2740
|
--tw-text-opacity: 1;
|
|
2719
2741
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2720
|
-
content: counter(
|
|
2742
|
+
content: counter(cnt1675354781412);
|
|
2721
2743
|
}
|
|
2722
2744
|
/*! ****************************/
|
|
2723
2745
|
/*! text-shadow */
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
{{> components/teaser/podcast/podcast_timedisplay
|
|
60
60
|
_id=_id
|
|
61
61
|
_duration=duration
|
|
62
|
-
_currentTimeClasses="font-bold text-podcast-
|
|
62
|
+
_currentTimeClasses="font-bold text-podcast-text"
|
|
63
63
|
_durationClasses="text-podcast-text"
|
|
64
64
|
_containerCss="flex text-sm grow font-heading" }}
|
|
65
65
|
</div>
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
{{> components/teaser/podcast/podcast_timedisplay
|
|
74
74
|
_id=_id
|
|
75
75
|
_duration=duration
|
|
76
|
-
_currentTimeClasses="font-bold text-podcast-
|
|
76
|
+
_currentTimeClasses="font-bold text-podcast-text"
|
|
77
77
|
_durationClasses="text-podcast-text"
|
|
78
78
|
_containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}
|
|
79
79
|
</div>
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
:aria-controls="$id('dropdown-button')"
|
|
28
28
|
type="button"
|
|
29
29
|
:class="open ? 'drop-shadow' : ''"
|
|
30
|
-
class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-
|
|
30
|
+
class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-text js-load"
|
|
31
31
|
data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'>Abonnieren
|
|
32
32
|
<div x-cloak x-show="open" class="w-3 h-3">
|
|
33
33
|
{{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
x-on:click.outside="close($refs.button)"
|
|
46
46
|
:id="$id('dropdown-button')"
|
|
47
47
|
style="display: none;"
|
|
48
|
-
class="left-0 w-full text-sm text-white font-heading grow bg-podcast-
|
|
48
|
+
class="left-0 w-full text-sm text-white font-heading grow bg-podcast-text"
|
|
49
49
|
>
|
|
50
50
|
{{~#with this.podcastHoster~}}
|
|
51
51
|
<ul>
|
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.122.
|
|
9
|
+
"version": "0.122.8",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
appearance: none;
|
|
54
54
|
width: 16px;
|
|
55
55
|
height: 16px;
|
|
56
|
-
background: var(--color-podcast-
|
|
56
|
+
background: var(--color-podcast-text);
|
|
57
57
|
border: 2px solid white;
|
|
58
58
|
cursor: pointer;
|
|
59
59
|
border-radius: 50%;
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
appearance: none;
|
|
65
65
|
width: 12px;
|
|
66
66
|
height: 12px;
|
|
67
|
-
background: var(--color-podcast-
|
|
67
|
+
background: var(--color-podcast-text);
|
|
68
68
|
border: 2px solid white;
|
|
69
69
|
cursor: pointer;
|
|
70
70
|
border-radius: 50%;
|
|
@@ -101,9 +101,17 @@
|
|
|
101
101
|
@apply block focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
+
.ds-link-clusterTeaser {
|
|
105
|
+
@apply text-grey-scorpion focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
|
|
106
|
+
}
|
|
107
|
+
|
|
104
108
|
.ds-link:focus:not(:focus-visible) {
|
|
105
109
|
@apply shadow-none;
|
|
106
110
|
}
|
|
111
|
+
|
|
112
|
+
.ds-link-clusterTeaser:focus:not(:focus-visible) {
|
|
113
|
+
@apply shadow-none;
|
|
114
|
+
}
|
|
107
115
|
|
|
108
116
|
.ds-link-inset {
|
|
109
117
|
@apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-focus-state ;
|
|
@@ -10,7 +10,8 @@ import playlistJson50 from '../fixtures/teaser_podcast_playlist_50.json'
|
|
|
10
10
|
<Meta title="Komponenten/Teaser/Podcast"
|
|
11
11
|
parameters={{
|
|
12
12
|
chromatic: {
|
|
13
|
-
viewports: [360, 768, 1024]
|
|
13
|
+
viewports: [360, 768, 1024],
|
|
14
|
+
diffThreshold: 0.5
|
|
14
15
|
},
|
|
15
16
|
layout: 'fullscreen',
|
|
16
17
|
}}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
{{> components/teaser/podcast/podcast_timedisplay
|
|
60
60
|
_id=_id
|
|
61
61
|
_duration=duration
|
|
62
|
-
_currentTimeClasses="font-bold text-podcast-
|
|
62
|
+
_currentTimeClasses="font-bold text-podcast-text"
|
|
63
63
|
_durationClasses="text-podcast-text"
|
|
64
64
|
_containerCss="flex text-sm grow font-heading" }}
|
|
65
65
|
</div>
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
{{> components/teaser/podcast/podcast_timedisplay
|
|
74
74
|
_id=_id
|
|
75
75
|
_duration=duration
|
|
76
|
-
_currentTimeClasses="font-bold text-podcast-
|
|
76
|
+
_currentTimeClasses="font-bold text-podcast-text"
|
|
77
77
|
_durationClasses="text-podcast-text"
|
|
78
78
|
_containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}
|
|
79
79
|
</div>
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
:aria-controls="$id('dropdown-button')"
|
|
28
28
|
type="button"
|
|
29
29
|
:class="open ? 'drop-shadow' : ''"
|
|
30
|
-
class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-
|
|
30
|
+
class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-text js-load"
|
|
31
31
|
data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'>Abonnieren
|
|
32
32
|
<div x-cloak x-show="open" class="w-3 h-3">
|
|
33
33
|
{{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
x-on:click.outside="close($refs.button)"
|
|
46
46
|
:id="$id('dropdown-button')"
|
|
47
47
|
style="display: none;"
|
|
48
|
-
class="left-0 w-full text-sm text-white font-heading grow bg-podcast-
|
|
48
|
+
class="left-0 w-full text-sm text-white font-heading grow bg-podcast-text"
|
|
49
49
|
>
|
|
50
50
|
{{~#with this.podcastHoster~}}
|
|
51
51
|
<ul>
|