hr-design-system-handlebars 1.61.0 → 1.61.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 CHANGED
@@ -1,3 +1,29 @@
1
+ # v1.61.2 (Wed Apr 03 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - fixes padding in mobile view [#889](https://github.com/mumprod/hr-design-system-handlebars/pull/889) ([@StefanVesper](https://github.com/StefanVesper))
6
+
7
+ #### Authors: 1
8
+
9
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
10
+
11
+ ---
12
+
13
+ # v1.61.1 (Tue Apr 02 2024)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - Dpe 2952 [#888](https://github.com/mumprod/hr-design-system-handlebars/pull/888) (saad.elbaciri@hr.de [@vascoeduardo](https://github.com/vascoeduardo) [@selbaciri](https://github.com/selbaciri))
18
+
19
+ #### Authors: 3
20
+
21
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
22
+ - selbaciri (saad.elbaciri@hr.de)
23
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
24
+
25
+ ---
26
+
1
27
  # v1.61.0 (Mon Mar 25 2024)
2
28
 
3
29
  #### 🚀 Enhancement
@@ -2643,10 +2643,6 @@ article.indexTextDS .indexTextHighlighted .link {
2643
2643
  padding-left: 1.5rem;
2644
2644
  padding-right: 1.5rem;
2645
2645
  }
2646
- .px-8 {
2647
- padding-left: 2rem;
2648
- padding-right: 2rem;
2649
- }
2650
2646
  .px-9 {
2651
2647
  padding-left: 2.25rem;
2652
2648
  padding-right: 2.25rem;
@@ -3326,7 +3322,7 @@ article.indexTextDS .indexTextHighlighted .link {
3326
3322
  border-bottom-color: var(--color-secondary-ds);
3327
3323
  }
3328
3324
  .counter-reset {
3329
- counter-reset: cnt1711384053639;
3325
+ counter-reset: cnt1712150013485;
3330
3326
  }
3331
3327
  .hyphens-auto {
3332
3328
  -webkit-hyphens: auto;
@@ -3449,6 +3445,9 @@ article.indexTextDS .indexTextHighlighted .link {
3449
3445
  .article-full-width {
3450
3446
  grid-column: full-width;
3451
3447
  }
3448
+ .copytextWrapper > :not(.article-breakout):not(.article-full-width){
3449
+ grid-column: narrow;
3450
+ }
3452
3451
  .grid-content {
3453
3452
  grid-template-areas:
3454
3453
  "head"
@@ -3632,7 +3631,7 @@ article.indexTextDS .indexTextHighlighted .link {
3632
3631
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3633
3632
  }
3634
3633
  .-ordered {
3635
- counter-increment: cnt1711384053639 1;
3634
+ counter-increment: cnt1712150013485 1;
3636
3635
  }
3637
3636
  .-ordered::before {
3638
3637
  position: absolute;
@@ -3648,7 +3647,7 @@ article.indexTextDS .indexTextHighlighted .link {
3648
3647
  letter-spacing: .0125em;
3649
3648
  --tw-text-opacity: 1;
3650
3649
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3651
- content: counter(cnt1711384053639);
3650
+ content: counter(cnt1712150013485);
3652
3651
  }
3653
3652
  /*! ****************************/
3654
3653
  /*! DataPolicy stuff */
@@ -5432,10 +5431,6 @@ article.indexTextDS .indexTextHighlighted .link {
5432
5431
  }
5433
5432
  @media (min-width: 480px) {
5434
5433
 
5435
- .sm480\:float-left {
5436
- float: left;
5437
- }
5438
-
5439
5434
  .sm480\:mx-10 {
5440
5435
  margin-left: 2.5rem;
5441
5436
  margin-right: 2.5rem;
@@ -5487,10 +5482,6 @@ article.indexTextDS .indexTextHighlighted .link {
5487
5482
  height: 2rem;
5488
5483
  }
5489
5484
 
5490
- .sm480\:w-1\/2 {
5491
- width: 50%;
5492
- }
5493
-
5494
5485
  .sm480\:w-2\/3 {
5495
5486
  width: 66.666667%;
5496
5487
  }
@@ -5919,6 +5910,9 @@ article.indexTextDS .indexTextHighlighted .link {
5919
5910
  clear: both;
5920
5911
  }
5921
5912
  }
5913
+ .sm\:article-narrow {
5914
+ grid-column: narrow;
5915
+ }
5922
5916
 
5923
5917
  .sm\:col-main {
5924
5918
  grid-column: main;
@@ -1,16 +1,16 @@
1
1
  {{#if this.showPortrait.isTrue }}
2
2
  {{#if this.showFullSize.isTrue }}
3
3
  {{> components/content/copytext/components/image/figure
4
- _cssClass="my-6 sm480:my-7 clear-both"
5
- _cssClassCaption="mx-5 md:mx-0"
4
+ _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
5
+ _cssClassCaption="mx-5 sm:mx-0"
6
6
  _type="story"
7
7
  _variant="100-copytext-portrait"
8
8
  _noAr="true"
9
9
  _isWebview=../../_isWebview}}
10
10
  {{else}}
11
11
  {{> components/content/copytext/components/image/figure
12
- _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
13
- _cssClassCaption="mx-5 md:mx-0"
12
+ _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
13
+ _cssClassCaption="mx-5 sm:mx-0"
14
14
  _type="story"
15
15
  _variant="copytext-portrait"
16
16
  _noAr="true"
@@ -19,16 +19,16 @@
19
19
  {{else}}
20
20
  {{#if this.showFullSize.isTrue}}
21
21
  {{> components/content/copytext/components/image/figure
22
- _cssClass="my-6 sm480:my-7 clear-both"
23
- _cssClassCaption="mx-5 md:mx-0"
22
+ _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
23
+ _cssClassCaption="mx-5 sm:mx-0"
24
24
  _type="story"
25
25
  _variant="100-copytext"
26
26
  _pictureAddClass="ar-16-9"
27
27
  _isWebview=../../_isWebview}}
28
28
  {{else}}
29
29
  {{> components/content/copytext/components/image/figure
30
- _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
31
- _cssClassCaption="mx-5 md:mx-0"
30
+ _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
31
+ _cssClassCaption="mx-5 sm:mx-0"
32
32
  _type="story"
33
33
  _variant="copytext"
34
34
  _pictureAddClass="ar-16-9"
@@ -1,4 +1,4 @@
1
- <div>
1
+ <div class="contents sm:block copytextWrapper">
2
2
  {{#each this.copytextParagraph }}
3
3
  {{#if this.isHeadline}}
4
4
  {{> components/content/copytext/components/headline }}
@@ -1,5 +1,5 @@
1
1
  <nav x-data="{dropped:false}" class="w-full md:mt-4 md:mb-8">
2
- <div @click="dropped = !dropped" class="flex justify-between w-full px-2 py-2 border-b border-footer-heading md:px-0 md:py-0 lg:m-0">
2
+ <div @click="dropped = !dropped" class="flex justify-between w-full px-5 py-2 border-b border-footer-heading md:px-0 md:py-0 lg:m-0">
3
3
 
4
4
  <span class="flex justify-start text-lg font-bold text-footer-heading " title="{{_title}}" onclick="">{{_title}} </span>
5
5
 
@@ -1,14 +1,14 @@
1
1
  {{#if this.extern}}
2
- <li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
2
+ <li class="flex items-center w-full h-10 pl-5 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
3
3
  {{> components/footer/page_footer_nav_link _css="flex hover:underline" _link=this _iconName="extern" }}
4
4
  </li>
5
5
  {{else}}
6
6
  {{#if this.paragraphed}}
7
- <li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:bg-transparent md:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
7
+ <li class="flex items-center w-full h-10 pl-5 bg-white border-b whitespace-nowrap md:bg-transparent md:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
8
8
  {{> components/footer/page_footer_nav_link _site=this.site _css="hover:underline" _link=this}}
9
9
  </li>
10
10
  {{else}}
11
- <li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
11
+ <li class="flex items-center w-full h-10 pl-5 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
12
12
  {{> components/footer/page_footer_nav_link _link=this _site=this.site _css="flex hover:underline" }}
13
13
  </li>
14
14
  {{/if}}
@@ -1,5 +1,5 @@
1
1
  <div class="relative mx-auto ">
2
- <div class="flex px-8 pt-4 md:pt-0 md:px-0">
2
+ <div class="flex px-5 pt-4 md:pt-0 md:px-0">
3
3
  {{> components/site_header/navigation_search/quick_search_form _footer=true }}
4
4
  </div>
5
5
 
@@ -1,16 +1,16 @@
1
1
  {{#if this.showPortrait.isTrue }}
2
2
  {{#if this.showFullSize.isTrue }}
3
3
  {{> components/content/copytext/components/image/figure
4
- _cssClass="my-6 sm480:my-7 clear-both"
5
- _cssClassCaption="mx-5 md:mx-0"
4
+ _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
5
+ _cssClassCaption="mx-5 sm:mx-0"
6
6
  _type="story"
7
7
  _variant="100-copytext-portrait"
8
8
  _noAr="true"
9
9
  _isWebview=../../_isWebview}}
10
10
  {{else}}
11
11
  {{> components/content/copytext/components/image/figure
12
- _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
13
- _cssClassCaption="mx-5 md:mx-0"
12
+ _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
13
+ _cssClassCaption="mx-5 sm:mx-0"
14
14
  _type="story"
15
15
  _variant="copytext-portrait"
16
16
  _noAr="true"
@@ -19,16 +19,16 @@
19
19
  {{else}}
20
20
  {{#if this.showFullSize.isTrue}}
21
21
  {{> components/content/copytext/components/image/figure
22
- _cssClass="my-6 sm480:my-7 clear-both"
23
- _cssClassCaption="mx-5 md:mx-0"
22
+ _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
23
+ _cssClassCaption="mx-5 sm:mx-0"
24
24
  _type="story"
25
25
  _variant="100-copytext"
26
26
  _pictureAddClass="ar-16-9"
27
27
  _isWebview=../../_isWebview}}
28
28
  {{else}}
29
29
  {{> components/content/copytext/components/image/figure
30
- _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
31
- _cssClassCaption="mx-5 md:mx-0"
30
+ _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
31
+ _cssClassCaption="mx-5 sm:mx-0"
32
32
  _type="story"
33
33
  _variant="copytext"
34
34
  _pictureAddClass="ar-16-9"
@@ -1,4 +1,4 @@
1
- <div>
1
+ <div class="contents sm:block copytextWrapper">
2
2
  {{#each this.copytextParagraph }}
3
3
  {{#if this.isHeadline}}
4
4
  {{> components/content/copytext/components/headline }}
@@ -1,5 +1,5 @@
1
1
  <nav x-data="{dropped:false}" class="w-full md:mt-4 md:mb-8">
2
- <div @click="dropped = !dropped" class="flex justify-between w-full px-2 py-2 border-b border-footer-heading md:px-0 md:py-0 lg:m-0">
2
+ <div @click="dropped = !dropped" class="flex justify-between w-full px-5 py-2 border-b border-footer-heading md:px-0 md:py-0 lg:m-0">
3
3
 
4
4
  <span class="flex justify-start text-lg font-bold text-footer-heading " title="{{_title}}" onclick="">{{_title}} </span>
5
5
 
@@ -1,14 +1,14 @@
1
1
  {{#if this.extern}}
2
- <li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
2
+ <li class="flex items-center w-full h-10 pl-5 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
3
3
  {{> components/footer/page_footer_nav_link _css="flex hover:underline" _link=this _iconName="extern" }}
4
4
  </li>
5
5
  {{else}}
6
6
  {{#if this.paragraphed}}
7
- <li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:bg-transparent md:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
7
+ <li class="flex items-center w-full h-10 pl-5 bg-white border-b whitespace-nowrap md:bg-transparent md:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
8
8
  {{> components/footer/page_footer_nav_link _site=this.site _css="hover:underline" _link=this}}
9
9
  </li>
10
10
  {{else}}
11
- <li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
11
+ <li class="flex items-center w-full h-10 pl-5 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
12
12
  {{> components/footer/page_footer_nav_link _link=this _site=this.site _css="flex hover:underline" }}
13
13
  </li>
14
14
  {{/if}}
@@ -1,5 +1,5 @@
1
1
  <div class="relative mx-auto ">
2
- <div class="flex px-8 pt-4 md:pt-0 md:px-0">
2
+ <div class="flex px-5 pt-4 md:pt-0 md:px-0">
3
3
  {{> components/site_header/navigation_search/quick_search_form _footer=true }}
4
4
  </div>
5
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": "1.61.0",
9
+ "version": "1.61.2",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
@@ -163,7 +163,12 @@
163
163
  .article-full-width {
164
164
  grid-column: full-width;
165
165
  }
166
-
166
+ .article-narrow {
167
+ grid-column: narrow;
168
+ }
169
+ .copytextWrapper > :not(.article-breakout, .article-full-width){
170
+ grid-column: narrow;
171
+ }
167
172
  .grid-content {
168
173
  grid-template-areas:
169
174
  "head"
@@ -1,16 +1,16 @@
1
1
  {{#if this.showPortrait.isTrue }}
2
2
  {{#if this.showFullSize.isTrue }}
3
3
  {{> components/content/copytext/components/image/figure
4
- _cssClass="my-6 sm480:my-7 clear-both"
5
- _cssClassCaption="mx-5 md:mx-0"
4
+ _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
5
+ _cssClassCaption="mx-5 sm:mx-0"
6
6
  _type="story"
7
7
  _variant="100-copytext-portrait"
8
8
  _noAr="true"
9
9
  _isWebview=../../_isWebview}}
10
10
  {{else}}
11
11
  {{> components/content/copytext/components/image/figure
12
- _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
13
- _cssClassCaption="mx-5 md:mx-0"
12
+ _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
13
+ _cssClassCaption="mx-5 sm:mx-0"
14
14
  _type="story"
15
15
  _variant="copytext-portrait"
16
16
  _noAr="true"
@@ -19,16 +19,16 @@
19
19
  {{else}}
20
20
  {{#if this.showFullSize.isTrue}}
21
21
  {{> components/content/copytext/components/image/figure
22
- _cssClass="my-6 sm480:my-7 clear-both"
23
- _cssClassCaption="mx-5 md:mx-0"
22
+ _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
23
+ _cssClassCaption="mx-5 sm:mx-0"
24
24
  _type="story"
25
25
  _variant="100-copytext"
26
26
  _pictureAddClass="ar-16-9"
27
27
  _isWebview=../../_isWebview}}
28
28
  {{else}}
29
29
  {{> components/content/copytext/components/image/figure
30
- _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
31
- _cssClassCaption="mx-5 md:mx-0"
30
+ _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
31
+ _cssClassCaption="mx-5 sm:mx-0"
32
32
  _type="story"
33
33
  _variant="copytext"
34
34
  _pictureAddClass="ar-16-9"
@@ -1,4 +1,4 @@
1
- <div>
1
+ <div class="contents sm:block copytextWrapper">
2
2
  {{#each this.copytextParagraph }}
3
3
  {{#if this.isHeadline}}
4
4
  {{> components/content/copytext/components/headline }}
@@ -20,11 +20,14 @@ export default {
20
20
  title: 'Komponenten/Content/Copytext',
21
21
  decorators: [
22
22
  (Story) => {
23
- return `<div class="max-w-[724px] mx-auto">
24
- ${Story()}
25
- </div>`
23
+ return `<div class="grid grid-page">
24
+ <div class="grid bg-white grid-article">
25
+ ${Story()}
26
+ </div>
27
+ </div>`
26
28
  },
27
29
  ],
30
+ parameters:{layout:'fullscreen'}
28
31
  }
29
32
 
30
33
  export const Default = {
@@ -1,5 +1,5 @@
1
1
  <nav x-data="{dropped:false}" class="w-full md:mt-4 md:mb-8">
2
- <div @click="dropped = !dropped" class="flex justify-between w-full px-2 py-2 border-b border-footer-heading md:px-0 md:py-0 lg:m-0">
2
+ <div @click="dropped = !dropped" class="flex justify-between w-full px-5 py-2 border-b border-footer-heading md:px-0 md:py-0 lg:m-0">
3
3
 
4
4
  <span class="flex justify-start text-lg font-bold text-footer-heading " title="{{_title}}" onclick="">{{_title}} </span>
5
5
 
@@ -1,14 +1,14 @@
1
1
  {{#if this.extern}}
2
- <li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
2
+ <li class="flex items-center w-full h-10 pl-5 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
3
3
  {{> components/footer/page_footer_nav_link _css="flex hover:underline" _link=this _iconName="extern" }}
4
4
  </li>
5
5
  {{else}}
6
6
  {{#if this.paragraphed}}
7
- <li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:bg-transparent md:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
7
+ <li class="flex items-center w-full h-10 pl-5 bg-white border-b whitespace-nowrap md:bg-transparent md:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
8
8
  {{> components/footer/page_footer_nav_link _site=this.site _css="hover:underline" _link=this}}
9
9
  </li>
10
10
  {{else}}
11
- <li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
11
+ <li class="flex items-center w-full h-10 pl-5 bg-white border-b whitespace-nowrap md:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
12
12
  {{> components/footer/page_footer_nav_link _link=this _site=this.site _css="flex hover:underline" }}
13
13
  </li>
14
14
  {{/if}}
@@ -1,5 +1,5 @@
1
1
  <div class="relative mx-auto ">
2
- <div class="flex px-8 pt-4 md:pt-0 md:px-0">
2
+ <div class="flex px-5 pt-4 md:pt-0 md:px-0">
3
3
  {{> components/site_header/navigation_search/quick_search_form _footer=true }}
4
4
  </div>
5
5