hr-design-system-handlebars 1.28.2 → 1.28.3

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/assets/index.css +6 -3
  3. package/dist/views/components/teaser/components/teaser_image.hbs +26 -24
  4. package/dist/views/components/teaser/components/teaser_lead.hbs +1 -1
  5. package/dist/views/components/teaser/ticker/teaser_ticker_alternativ.hbs +6 -6
  6. package/dist/views/components/teaser/ticker/teaser_ticker_standard.hbs +7 -7
  7. package/package.json +1 -1
  8. package/src/stories/views/components/teaser/components/teaser_image.hbs +26 -24
  9. package/src/stories/views/components/teaser/components/teaser_lead.hbs +1 -1
  10. package/src/stories/views/components/teaser/ticker/teaser_ticker_alternativ.hbs +6 -6
  11. package/src/stories/views/components/teaser/ticker/teaser_ticker_standard.hbs +7 -7
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ # v1.28.3 (Fri Jun 23 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - some fixes 2 [#656](https://github.com/mumprod/hr-design-system-handlebars/pull/656) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
6
+
7
+ #### Authors: 2
8
+
9
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
10
+ - selbaciri (saad.elbaciri@hr.de)
11
+
12
+ ---
13
+
1
14
  # v1.28.2 (Fri Jun 23 2023)
2
15
 
3
16
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -2360,6 +2360,9 @@ video {
2360
2360
  .pt-2\.5 {
2361
2361
  padding-top: 0.625rem;
2362
2362
  }
2363
+ .pt-3 {
2364
+ padding-top: 0.75rem;
2365
+ }
2363
2366
  .pt-4 {
2364
2367
  padding-top: 1rem;
2365
2368
  }
@@ -2816,7 +2819,7 @@ video {
2816
2819
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2817
2820
  }
2818
2821
  .counter-reset {
2819
- counter-reset: cnt1687524773004;
2822
+ counter-reset: cnt1687527946984;
2820
2823
  }
2821
2824
  .hyphens-auto {
2822
2825
  -webkit-hyphens: auto;
@@ -3051,7 +3054,7 @@ video {
3051
3054
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3052
3055
  }
3053
3056
  .-ordered {
3054
- counter-increment: cnt1687524773004 1;
3057
+ counter-increment: cnt1687527946984 1;
3055
3058
  }
3056
3059
  .-ordered::before {
3057
3060
  position: absolute;
@@ -3067,7 +3070,7 @@ video {
3067
3070
  letter-spacing: .0125em;
3068
3071
  --tw-text-opacity: 1;
3069
3072
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3070
- content: counter(cnt1687524773004);
3073
+ content: counter(cnt1687527946984);
3071
3074
  }
3072
3075
  /*! ****************************/
3073
3076
  /*! text-shadow */
package/dist/views/components/teaser/components/teaser_image.hbs CHANGED
@@ -1,26 +1,28 @@
1
- {{#unless this.hideGeotag}}
2
- {{~#with this.geotag}}
3
- {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
4
- {{/with~}}
5
- {{/unless}}
6
- {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg=_addClassImg ~}}
7
- {{#if this.isProgram}}
8
- {{#if this.showMediatheksLink}}
9
- {{#with this}}
10
- {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
11
- {{#*inline "css"~}}
12
- {{~> components/button/utilities/button_on_image_classes _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=../../_isMobile1to1-adjust_context}}
13
- {{/inline}}
14
- {{/with}}
1
+ <div class="relative {{_aspectRatio}}">
2
+ {{#unless this.hideGeotag}}
3
+ {{~#with this.geotag}}
4
+ {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
5
+ {{/with~}}
6
+ {{/unless}}
7
+ {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg=_addClassImg ~}}
8
+ {{#if this.isProgram}}
9
+ {{#if this.showMediatheksLink}}
10
+ {{#with this}}
11
+ {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
12
+ {{#*inline "css"~}}
13
+ {{~> components/button/utilities/button_on_image_classes _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=../../_isMobile1to1-adjust_context}}
14
+ {{/inline}}
15
+ {{/with}}
16
+ {{/if}}
15
17
  {{/if}}
16
- {{/if}}
17
18
 
18
- {{#if this.isEvent}}
19
- {{#unless this.displayTeaserBodyAsImageOverlay}}
20
- {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}
21
- <div class="flex flex-col items-center justify-center p-4">
22
- {{> components/event/instant_dates}}
23
- </div>
24
- {{/decorator}}
25
- {{/unless}}
26
- {{/if}}
19
+ {{#if this.isEvent}}
20
+ {{#unless this.displayTeaserBodyAsImageOverlay}}
21
+ {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}
22
+ <div class="flex flex-col items-center justify-center p-4">
23
+ {{> components/event/instant_dates}}
24
+ </div>
25
+ {{/decorator}}
26
+ {{/unless}}
27
+ {{/if}}
28
+ </div>
package/dist/views/components/teaser/components/teaser_lead.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  {{~#if this.allowAVConsumption ~}}
2
2
  {{> components/teaser/components/teaser_av_consumption _aspectRatio=_aspectRatio _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _teaserType=_teaserType _addClassImg=_addClassImg}}
3
3
  {{else}}
4
- {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _addClassImg=_addClassImg}}
4
+ {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _addClassImg=_addClassImg _aspectRatio=_aspectRatio}}
5
5
  {{/if}}
package/dist/views/components/teaser/ticker/teaser_ticker_alternativ.hbs CHANGED
@@ -1,14 +1,14 @@
1
1
  <article class="bg-highlight-3 md:rounded-tl-hr md:rounded-br-hr items-start relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:gap-x-6 md:p-5
2
- {{if this.isHeroTeaser 'mx-0 md:rounded-tl-hr md:rounded-br-hr' 'mx-5 sm:mx-0 rounded-tl-hr rounded-br-hr'}}
2
+ {{~inline-switch this.teaserSize '["hero"]' '[" mx-0 md:rounded-tl-hr md:rounded-br-hr"," mx-5 sm:mx-0 rounded-tl-hr rounded-br-hr"]'}}
3
3
  {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" flex-col"," flex-col"," md:col-span-6 px-5"]'~}}"
4
4
  x-data="{ avStart: false }"
5
5
  >
6
6
  {{#if this.teaserImage}}
7
- {{#>components/base/link _link=this.link _css=(inline-switch this.realTeaserSize '["hero","100"]' '[" basis-full w-full md:basis-1/2-gap-6 ar-16-9"," basis-full w-full md:basis-1/3-gap-6 ar-16-9"]') }}
8
- <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}} relative">
9
- {{> components/teaser/components/teaser_lead _addClassImg=(if this.isHeroTeaser 'md:rounded-tl-hr' 'rounded-tl-hr') _teaserSize=this.realTeaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.realTeaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }}
10
- </figure>
11
- {{/components/base/link}}
7
+ <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}} relative w-full ar-16-9 {{~inline-switch this.realTeaserSize '["hero","100"]' '[" md:basis-1/2-gap-6 "," md:basis-1/3-gap-6"]'~}}">
8
+ {{#>components/base/link _link=this.link }}
9
+ {{> components/teaser/components/teaser_lead _addClassImg=(inline-switch this.teaserSize '["hero"]' '[" md:rounded-tl-hr", "rounded-tl-hr"]') _teaserSize=this.realTeaserSize _teaserType=this.teaserType _aspectRatio="ar-16-9 md:ar-1-1" }}
10
+ {{/components/base/link}}
11
+ </figure>
12
12
  {{> components/teaser/ticker/teaser_ticker_body _teaserType=this.teaserType _outerCssClasses=(inline-switch this.realTeaserSize '["hero","100"]' '[" gap-y-5 md:basis-1/2-gap-6"," gap-y-5 md:basis-2/3-gap-6"]') }}
13
13
  {{else}}
14
14
  {{> components/teaser/ticker/teaser_ticker_body _outerCssClasses="basis-full h-full gap-y-5 pt-5 md:pt-0" }}
package/dist/views/components/teaser/ticker/teaser_ticker_standard.hbs CHANGED
@@ -1,16 +1,16 @@
1
- <article class="bg-highlight-3 items-start relative col-span-12 flex flex-col gap-y-3 gap-x-4
2
- {{if this.isHeroTeaser 'mx-0 md:rounded-tl-hr md:rounded-br-hr' 'mx-5 sm:mx-0 rounded-tl-hr rounded-br-hr'}}
1
+ <article class="bg-highlight-3 items-start relative col-span-12 flex flex-col gap-y-3 gap-x-4
2
+ {{~inline-switch this.teaserSize '["hero"]' '[" mx-0 md:rounded-tl-hr md:rounded-br-hr"," mx-5 sm:mx-0 rounded-tl-hr rounded-br-hr"]'}}
3
3
  {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}"
4
4
  x-data="{ avStart: false }"
5
5
  >
6
6
  {{#if this.teaserImage}}
7
- {{#>components/base/link _link=this.link }}
8
7
  <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative ar-16-9 w-full {{inline-switch this.teaserSize '["25"]' '[" hidden"]'~}}">
9
- {{> components/teaser/components/teaser_lead _addClassImg=(if this.isHeroTeaser 'md:rounded-tl-hr' 'rounded-tl-hr') _teaserSize=this.teaserSize _teaserType=this.teaserType }}
8
+ {{#>components/base/link _link=this.link }}
9
+ {{> components/teaser/components/teaser_lead _addClassImg=(inline-switch this.teaserSize '["hero"]' '[" md:rounded-tl-hr", "rounded-tl-hr"]') _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio="ar-16-9" }}
10
+ {{/components/base/link}}
10
11
  </figure>
11
- {{/components/base/link}}
12
- {{> components/teaser/ticker/teaser_ticker_body _teaserSize=this.teaserSize _outerCssClasses=(inline-switch this.realTeaserSize '["25"]' '[" gap-y-3", "gap-y-5"]')}}
12
+ {{> components/teaser/ticker/teaser_ticker_body _teaserSize=this.teaserSize _outerCssClasses=(inline-switch this.realTeaserSize '["25"]' '[" pt-3 gap-y-3", "gap-y-5"]')}}
13
13
  {{else}}
14
- {{> components/teaser/ticker/teaser_ticker_body _teaserSize=this.teaserSize _outerCssClasses=(inline-switch this.realTeaserSize '["25"]' '[" gap-y-3", " pt-5 gap-y-5"]')}}
14
+ {{> components/teaser/ticker/teaser_ticker_body _teaserSize=this.teaserSize _outerCssClasses=(inline-switch this.realTeaserSize '["25"]' '[" pt-3 gap-y-3", " pt-5 gap-y-5"]')}}
15
15
  {{/if}}
16
16
  </article>
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.28.2",
9
+ "version": "1.28.3",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/stories/views/components/teaser/components/teaser_image.hbs CHANGED
@@ -1,26 +1,28 @@
1
- {{#unless this.hideGeotag}}
2
- {{~#with this.geotag}}
3
- {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
4
- {{/with~}}
5
- {{/unless}}
6
- {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg=_addClassImg ~}}
7
- {{#if this.isProgram}}
8
- {{#if this.showMediatheksLink}}
9
- {{#with this}}
10
- {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
11
- {{#*inline "css"~}}
12
- {{~> components/button/utilities/button_on_image_classes _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=_isMobile1to1-adjust_context}}
13
- {{/inline}}
14
- {{/with}}
1
+ <div class="relative {{_aspectRatio}}">
2
+ {{#unless this.hideGeotag}}
3
+ {{~#with this.geotag}}
4
+ {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
5
+ {{/with~}}
6
+ {{/unless}}
7
+ {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg=_addClassImg ~}}
8
+ {{#if this.isProgram}}
9
+ {{#if this.showMediatheksLink}}
10
+ {{#with this}}
11
+ {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
12
+ {{#*inline "css"~}}
13
+ {{~> components/button/utilities/button_on_image_classes _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=_isMobile1to1-adjust_context}}
14
+ {{/inline}}
15
+ {{/with}}
16
+ {{/if}}
15
17
  {{/if}}
16
- {{/if}}
17
18
 
18
- {{#if this.isEvent}}
19
- {{#unless this.displayTeaserBodyAsImageOverlay}}
20
- {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}
21
- <div class="flex flex-col items-center justify-center p-4">
22
- {{> components/event/instant_dates}}
23
- </div>
24
- {{/decorator}}
25
- {{/unless}}
26
- {{/if}}
19
+ {{#if this.isEvent}}
20
+ {{#unless this.displayTeaserBodyAsImageOverlay}}
21
+ {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}
22
+ <div class="flex flex-col items-center justify-center p-4">
23
+ {{> components/event/instant_dates}}
24
+ </div>
25
+ {{/decorator}}
26
+ {{/unless}}
27
+ {{/if}}
28
+ </div>
package/src/stories/views/components/teaser/components/teaser_lead.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  {{~#if this.allowAVConsumption ~}}
2
2
  {{> components/teaser/components/teaser_av_consumption _aspectRatio=_aspectRatio _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _teaserType=_teaserType _addClassImg=_addClassImg}}
3
3
  {{else}}
4
- {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _addClassImg=_addClassImg}}
4
+ {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _addClassImg=_addClassImg _aspectRatio=_aspectRatio}}
5
5
  {{/if}}
package/src/stories/views/components/teaser/ticker/teaser_ticker_alternativ.hbs CHANGED
@@ -1,14 +1,14 @@
1
1
  <article class="bg-highlight-3 md:rounded-tl-hr md:rounded-br-hr items-start relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:gap-x-6 md:p-5
2
- {{if this.isHeroTeaser 'mx-0 md:rounded-tl-hr md:rounded-br-hr' 'mx-5 sm:mx-0 rounded-tl-hr rounded-br-hr'}}
2
+ {{~inline-switch this.teaserSize '["hero"]' '[" mx-0 md:rounded-tl-hr md:rounded-br-hr"," mx-5 sm:mx-0 rounded-tl-hr rounded-br-hr"]'}}
3
3
  {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" flex-col"," flex-col"," md:col-span-6 px-5"]'~}}"
4
4
  x-data="{ avStart: false }"
5
5
  >
6
6
  {{#if this.teaserImage}}
7
- {{#>components/base/link _link=this.link _css=(inline-switch this.realTeaserSize '["hero","100"]' '[" basis-full w-full md:basis-1/2-gap-6 ar-16-9"," basis-full w-full md:basis-1/3-gap-6 ar-16-9"]') }}
8
- <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}} relative">
9
- {{> components/teaser/components/teaser_lead _addClassImg=(if this.isHeroTeaser 'md:rounded-tl-hr' 'rounded-tl-hr') _teaserSize=this.realTeaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.realTeaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }}
10
- </figure>
11
- {{/components/base/link}}
7
+ <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}} relative w-full ar-16-9 {{~inline-switch this.realTeaserSize '["hero","100"]' '[" md:basis-1/2-gap-6 "," md:basis-1/3-gap-6"]'~}}">
8
+ {{#>components/base/link _link=this.link }}
9
+ {{> components/teaser/components/teaser_lead _addClassImg=(inline-switch this.teaserSize '["hero"]' '[" md:rounded-tl-hr", "rounded-tl-hr"]') _teaserSize=this.realTeaserSize _teaserType=this.teaserType _aspectRatio="ar-16-9 md:ar-1-1" }}
10
+ {{/components/base/link}}
11
+ </figure>
12
12
  {{> components/teaser/ticker/teaser_ticker_body _teaserType=this.teaserType _outerCssClasses=(inline-switch this.realTeaserSize '["hero","100"]' '[" gap-y-5 md:basis-1/2-gap-6"," gap-y-5 md:basis-2/3-gap-6"]') }}
13
13
  {{else}}
14
14
  {{> components/teaser/ticker/teaser_ticker_body _outerCssClasses="basis-full h-full gap-y-5 pt-5 md:pt-0" }}
package/src/stories/views/components/teaser/ticker/teaser_ticker_standard.hbs CHANGED
@@ -1,16 +1,16 @@
1
- <article class="bg-highlight-3 items-start relative col-span-12 flex flex-col gap-y-3 gap-x-4
2
- {{if this.isHeroTeaser 'mx-0 md:rounded-tl-hr md:rounded-br-hr' 'mx-5 sm:mx-0 rounded-tl-hr rounded-br-hr'}}
1
+ <article class="bg-highlight-3 items-start relative col-span-12 flex flex-col gap-y-3 gap-x-4
2
+ {{~inline-switch this.teaserSize '["hero"]' '[" mx-0 md:rounded-tl-hr md:rounded-br-hr"," mx-5 sm:mx-0 rounded-tl-hr rounded-br-hr"]'}}
3
3
  {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}"
4
4
  x-data="{ avStart: false }"
5
5
  >
6
6
  {{#if this.teaserImage}}
7
- {{#>components/base/link _link=this.link }}
8
7
  <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative ar-16-9 w-full {{inline-switch this.teaserSize '["25"]' '[" hidden"]'~}}">
9
- {{> components/teaser/components/teaser_lead _addClassImg=(if this.isHeroTeaser 'md:rounded-tl-hr' 'rounded-tl-hr') _teaserSize=this.teaserSize _teaserType=this.teaserType }}
8
+ {{#>components/base/link _link=this.link }}
9
+ {{> components/teaser/components/teaser_lead _addClassImg=(inline-switch this.teaserSize '["hero"]' '[" md:rounded-tl-hr", "rounded-tl-hr"]') _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio="ar-16-9" }}
10
+ {{/components/base/link}}
10
11
  </figure>
11
- {{/components/base/link}}
12
- {{> components/teaser/ticker/teaser_ticker_body _teaserSize=this.teaserSize _outerCssClasses=(inline-switch this.realTeaserSize '["25"]' '[" gap-y-3", "gap-y-5"]')}}
12
+ {{> components/teaser/ticker/teaser_ticker_body _teaserSize=this.teaserSize _outerCssClasses=(inline-switch this.realTeaserSize '["25"]' '[" pt-3 gap-y-3", "gap-y-5"]')}}
13
13
  {{else}}
14
- {{> components/teaser/ticker/teaser_ticker_body _teaserSize=this.teaserSize _outerCssClasses=(inline-switch this.realTeaserSize '["25"]' '[" gap-y-3", " pt-5 gap-y-5"]')}}
14
+ {{> components/teaser/ticker/teaser_ticker_body _teaserSize=this.teaserSize _outerCssClasses=(inline-switch this.realTeaserSize '["25"]' '[" pt-3 gap-y-3", " pt-5 gap-y-5"]')}}
15
15
  {{/if}}
16
16
  </article>