hr-design-system-handlebars 1.18.0 → 1.18.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 +24 -0
- package/dist/assets/index.css +14 -9
- package/dist/views/components/button/utilities/button_variation_classes.hbs +1 -1
- package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/tailwind.css +2 -0
- package/src/stories/views/components/button/utilities/button_variation_classes.hbs +1 -1
- package/src/stories/views/components/site_header/header.mdx +8 -8
- package/src/stories/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +1 -1
- package/tailwind.config.js +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.18.2 (Thu May 04 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- fixes wrong file suffixes in mdx [#624](https://github.com/mumprod/hr-design-system-handlebars/pull/624) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.18.1 (Thu May 04 2023)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Top topics refactoring [#625](https://github.com/mumprod/hr-design-system-handlebars/pull/625) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.18.0 (Thu May 04 2023)
|
|
2
26
|
|
|
3
27
|
#### 🚀 Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -1861,10 +1861,6 @@ video {
|
|
|
1861
1861
|
--tw-bg-opacity: 1;
|
|
1862
1862
|
background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
|
|
1863
1863
|
}
|
|
1864
|
-
.bg-blue-linkWater {
|
|
1865
|
-
--tw-bg-opacity: 1;
|
|
1866
|
-
background-color: rgba(211, 226, 244, var(--tw-bg-opacity));
|
|
1867
|
-
}
|
|
1868
1864
|
.bg-button {
|
|
1869
1865
|
background-color: var(--color-button);
|
|
1870
1866
|
}
|
|
@@ -1989,6 +1985,10 @@ video {
|
|
|
1989
1985
|
background-color: rgba(0, 110, 183, .85);
|
|
1990
1986
|
background-color: rgb(var(--color-stage-text-box) / .85);
|
|
1991
1987
|
}
|
|
1988
|
+
.bg-top-topic-background {
|
|
1989
|
+
background-color: #d3e2f4;
|
|
1990
|
+
background-color: var(--color-top-topic-background);
|
|
1991
|
+
}
|
|
1992
1992
|
.bg-transparent {
|
|
1993
1993
|
background-color: transparent;
|
|
1994
1994
|
}
|
|
@@ -2439,6 +2439,9 @@ video {
|
|
|
2439
2439
|
.text-button {
|
|
2440
2440
|
color: var(--color-button);
|
|
2441
2441
|
}
|
|
2442
|
+
.text-button--dark {
|
|
2443
|
+
color: var(--color-button--dark);
|
|
2444
|
+
}
|
|
2442
2445
|
.text-button-disabled--dark {
|
|
2443
2446
|
color: var(--color-button-disabled--dark);
|
|
2444
2447
|
}
|
|
@@ -2682,7 +2685,7 @@ video {
|
|
|
2682
2685
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2683
2686
|
}
|
|
2684
2687
|
.counter-reset {
|
|
2685
|
-
counter-reset:
|
|
2688
|
+
counter-reset: cnt1683209961496;
|
|
2686
2689
|
}
|
|
2687
2690
|
.hyphens-auto {
|
|
2688
2691
|
-webkit-hyphens: auto;
|
|
@@ -2921,7 +2924,7 @@ video {
|
|
|
2921
2924
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2922
2925
|
}
|
|
2923
2926
|
.-ordered {
|
|
2924
|
-
counter-increment:
|
|
2927
|
+
counter-increment: cnt1683209961496 1;
|
|
2925
2928
|
}
|
|
2926
2929
|
.-ordered::before {
|
|
2927
2930
|
position: absolute;
|
|
@@ -2937,7 +2940,7 @@ video {
|
|
|
2937
2940
|
letter-spacing: .0125em;
|
|
2938
2941
|
--tw-text-opacity: 1;
|
|
2939
2942
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2940
|
-
content: counter(
|
|
2943
|
+
content: counter(cnt1683209961496);
|
|
2941
2944
|
}
|
|
2942
2945
|
/*! ****************************/
|
|
2943
2946
|
/*! text-shadow */
|
|
@@ -2993,6 +2996,8 @@ video {
|
|
|
2993
2996
|
--color-highlight-1: #eaf3fa;
|
|
2994
2997
|
--color-highlight-2: #d34600;
|
|
2995
2998
|
|
|
2999
|
+
/*Hauptmenü*/
|
|
3000
|
+
--color-top-topic-background: #d3e2f4;
|
|
2996
3001
|
/* Medieninhalte, Video, Audio, Bildergalerie */
|
|
2997
3002
|
--color-label-media: #006dc1;
|
|
2998
3003
|
/* Ticker, Live, Livestream */
|
|
@@ -3973,8 +3978,8 @@ video {
|
|
|
3973
3978
|
fill: #276b9e;
|
|
3974
3979
|
fill: var(--color-media-button);
|
|
3975
3980
|
}
|
|
3976
|
-
.hover\:text-button:hover {
|
|
3977
|
-
color: var(--color-button);
|
|
3981
|
+
.hover\:text-button--dark:hover {
|
|
3982
|
+
color: var(--color-button--dark);
|
|
3978
3983
|
}
|
|
3979
3984
|
.hover\:text-toplineColor:hover {
|
|
3980
3985
|
color: #006dc1;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{{inline-switch
|
|
3
3
|
_variant
|
|
4
4
|
'["primary","secondary","tertiary"]'
|
|
5
|
-
'[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","
|
|
5
|
+
'[" border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
|
|
6
6
|
~}}
|
|
7
7
|
{{else if _disabled~}}
|
|
8
8
|
|
package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
-
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-
|
|
2
|
+
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
5
|
{{#> components/button/top_topics_button}}
|
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.18.
|
|
9
|
+
"version": "1.18.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/tailwind.css
CHANGED
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
--color-highlight-1: theme('colors.blue.accented');
|
|
14
14
|
--color-highlight-2: theme('colors.orange.spicyCarrot');
|
|
15
15
|
|
|
16
|
+
/*Hauptmenü*/
|
|
17
|
+
--color-top-topic-background: theme('colors.blue.linkWater');
|
|
16
18
|
/* Medieninhalte, Video, Audio, Bildergalerie */
|
|
17
19
|
--color-label-media: theme('colors.blue.science');
|
|
18
20
|
/* Ticker, Live, Livestream */
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{{inline-switch
|
|
3
3
|
_variant
|
|
4
4
|
'["primary","secondary","tertiary"]'
|
|
5
|
-
'[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","
|
|
5
|
+
'[" border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
|
|
6
6
|
~}}
|
|
7
7
|
{{else if _disabled~}}
|
|
8
8
|
|
|
@@ -62,7 +62,7 @@ Desktop:
|
|
|
62
62
|
|
|
63
63
|
Tablet:
|
|
64
64
|
|
|
65
|
-
<img src="/images/navi_tablet.
|
|
65
|
+
<img src="/images/navi_tablet.png" />
|
|
66
66
|
|
|
67
67
|
<br />
|
|
68
68
|
|
|
@@ -140,13 +140,13 @@ Es gibt 3 Scrollpositionen, die relevant sind: 0%, 50% und 90%. Die Höhe des Vi
|
|
|
140
140
|
|
|
141
141
|
**Tablet > 0% / \< 50%:**
|
|
142
142
|
|
|
143
|
-
<img src="/images/navi_tablet_scroll_1percent.
|
|
143
|
+
<img src="/images/navi_tablet_scroll_1percent.png" />
|
|
144
144
|
|
|
145
145
|
<br />
|
|
146
146
|
|
|
147
147
|
**Tablet > 50% / \< 90%:**
|
|
148
148
|
|
|
149
|
-
<img src="/images/navi_tablet_scroll_50percent.
|
|
149
|
+
<img src="/images/navi_tablet_scroll_50percent.png" />
|
|
150
150
|
|
|
151
151
|
<br />
|
|
152
152
|
|
|
@@ -160,7 +160,7 @@ Es gibt 3 Scrollpositionen, die relevant sind: 0%, 50% und 90%. Die Höhe des Vi
|
|
|
160
160
|
|
|
161
161
|
**Mobil >50% / \< 90%:**
|
|
162
162
|
|
|
163
|
-
<img src="/images/navi_mobil_scroll_50percent.
|
|
163
|
+
<img src="/images/navi_mobil_scroll_50percent.png" />
|
|
164
164
|
|
|
165
165
|
<br />
|
|
166
166
|
|
|
@@ -168,7 +168,7 @@ Es gibt 3 Scrollpositionen, die relevant sind: 0%, 50% und 90%. Die Höhe des Vi
|
|
|
168
168
|
|
|
169
169
|
<br />
|
|
170
170
|
|
|
171
|
-
<a href="#top">Back to top</a>
|
|
171
|
+
<a target="_self" href="#top">Back to top</a>
|
|
172
172
|
|
|
173
173
|
<a name="templates" />
|
|
174
174
|
|
|
@@ -244,7 +244,7 @@ shouldServiceNavBeHidden() {
|
|
|
244
244
|
Weiterhin sind in der Datei **header_alpine.js** weitere Alpine.data-Kontexte für das Overlay, die Dropdown-Menus und die Flyouts hinterlegt.
|
|
245
245
|
Für die Erklärung können die Kommentare direkt in der Datei herangezogen werden.
|
|
246
246
|
|
|
247
|
-
<a href="#top">Back to top</a>
|
|
247
|
+
<a href="#top" target="_self">Back to top</a>
|
|
248
248
|
|
|
249
249
|
<br />
|
|
250
250
|
|
|
@@ -389,7 +389,7 @@ Service-Navigation Flyout Tablet/Mobil:
|
|
|
389
389
|
|
|
390
390
|
<br />
|
|
391
391
|
|
|
392
|
-
<a href="#top">Back to top</a>
|
|
392
|
+
<a href="#top" target="_self">Back to top</a>
|
|
393
393
|
|
|
394
394
|
<br />
|
|
395
395
|
|
|
@@ -445,4 +445,4 @@ dargstellt:
|
|
|
445
445
|
|
|
446
446
|
<br />
|
|
447
447
|
|
|
448
|
-
<a href="#top">Back to top</a>
|
|
448
|
+
<a href="#top" target="_self">Back to top</a>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
-
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-
|
|
2
|
+
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
5
|
{{#> components/button/top_topics_button}}
|
package/tailwind.config.js
CHANGED
|
@@ -317,6 +317,7 @@ module.exports = {
|
|
|
317
317
|
'secondary': 'var(--color-secondary-ds)',
|
|
318
318
|
'highlight-1': 'var(--color-highlight-1)',
|
|
319
319
|
'highlight-2': 'var(--color-highlight-2)',
|
|
320
|
+
'top-topic-background': 'var(--color-top-topic-background)',
|
|
320
321
|
'labelMedia': 'var(--color-label-media)',
|
|
321
322
|
'labelEvent': 'var(--color-label-event)',
|
|
322
323
|
'labelBreakingnews': 'var(--color-label-breakingnews)',
|