hr-design-system-handlebars 0.50.3 → 0.50.6

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.50.6 (Tue Jul 19 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1688 b [#281](https://github.com/mumprod/hr-design-system-handlebars/pull/281) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.50.5 (Mon Jul 18 2022)
+
+#### 🐛 Bug Fix
+
+- fix anchor-bug, add pseudo-button [#282](https://github.com/mumprod/hr-design-system-handlebars/pull/282) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.50.4 (Fri Jul 15 2022)
+
+#### 🐛 Bug Fix
+
+- Changed alternative 100% and 50% teaser to 1to1 in mobile [#280](https://github.com/mumprod/hr-design-system-handlebars/pull/280) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.50.3 (Fri Jul 15 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -818,15 +818,15 @@ video {
 .h-5 {
   height: 1.25rem;
 }
+.h-auto {
+  height: auto;
+}
 .h-3\.5 {
   height: 0.875rem;
 }
 .h-3 {
   height: 0.75rem;
 }
-.h-auto {
-  height: auto;
-}
 .h-4 {
   height: 1rem;
 }
@@ -914,6 +914,10 @@ video {
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
+.basis-2\/3 {
+  -ms-flex-preferred-size: 66.666667%;
+      flex-basis: 66.666667%;
+}
 .basis-2\/5 {
   -ms-flex-preferred-size: 40%;
       flex-basis: 40%;
@@ -922,10 +926,6 @@ video {
   -ms-flex-preferred-size: 33.333333%;
       flex-basis: 33.333333%;
 }
-.basis-2\/3 {
-  -ms-flex-preferred-size: 66.666667%;
-      flex-basis: 66.666667%;
-}
 .basis-3\/5 {
   -ms-flex-preferred-size: 60%;
       flex-basis: 60%;
@@ -1153,6 +1153,10 @@ video {
 .border-r {
   border-right-width: 1px;
 }
+.border-toplineColor {
+  border-color: #006dc1;
+  border-color: var(--color-topline);
+}
 .border-white {
   --tw-border-opacity: 1;
   border-color: rgba(255, 255, 255, var(--tw-border-opacity));
@@ -1305,6 +1309,10 @@ video {
 .p-5 {
   padding: 1.25rem;
 }
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .py-3\.5 {
   padding-top: 0.875rem;
   padding-bottom: 0.875rem;
@@ -1345,10 +1353,6 @@ video {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1529,6 +1533,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(39, 107, 158, var(--tw-text-opacity));
 }
+.text-toplineColor {
+  color: #006dc1;
+  color: var(--color-topline);
+}
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgba(29, 78, 216, var(--tw-text-opacity));
@@ -1545,10 +1553,6 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
 }
-.text-toplineColor {
-  color: #006dc1;
-  color: var(--color-topline);
-}
 .text-orange-spicyCarrot {
   --tw-text-opacity: 1;
   color: rgba(211, 70, 0, var(--tw-text-opacity));
@@ -2682,6 +2686,11 @@ video {
         flex-basis: 33.333333%;
   }
 
+  .md\:basis-1\/2 {
+    -ms-flex-preferred-size: 50%;
+        flex-basis: 50%;
+  }
+
   .md\:basis-2\/3 {
     -ms-flex-preferred-size: 66.666667%;
         flex-basis: 66.666667%;

package/dist/views/components/button/button_pseudo.hbs

@@ -0,0 +1,3 @@
+{{#>components/base/link css="px-2 border text-toplineColor border-toplineColor font-heading hover:underline" }}
+    {{_linkTitle}}
+{{/components/base/link}}

package/dist/views/components/teaser/components/teaser_title_classes.hbs

@@ -30,7 +30,7 @@ the 4 parameters are:
         {{~inline-switch
             size
             '["hero","100","50"]'
-            '["text-2xl md:text-3xl","text-2xl md:text-3xl","text-2xl"]'
+            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'poster-ds'~}}

package/dist/views/components/teaser/tabbox/group_tabbox.hbs

@@ -19,10 +19,8 @@
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
     </div>
     {{~#if this.link~}}
-        <div class="flex justify-center">
-            <a class="text-base pt-7 font-heading text-toplineColor hover:underline" href="{{this.link.url}}">
-                {{~loca "group_tabbed_more" this.title~}}
-            </a>
+        <div class="flex justify-center pt-7">
+            {{~> components/button/button_pseudo _linkTitle=(loca "group_tabbed_more" this.title) ~}}
         </div>
     {{~/if~}}
 </section>

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -7,6 +7,7 @@
       {{~#each this.tabbedGroup~}}
         <button  onclick="window.location.href='#tgp{{@index}}';"
                  :class="tab === '{{this.title}}' ? 'text-white bg-blue-congress' : 'bg-white text-blue-congress'" 
+                 x-effect="$el.removeAttribute('onclick')"
                  x-on:click.prevent="tab = '{{this.title}}'"  
                  class="text-base font-heading py-1 px-2 m-1.5" 
                  type="button" 

package/dist/views/components/teaser/teaser_alternativ.hbs

@@ -1,9 +1,14 @@
-<article class="col-span-12 flex flex-col md:flex-row gap-y-3 gap-x-4 md:px-0 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"]'}} ">
-    <figure class="ar-16-9 {{inline-switch this.teaserSize '["50","100","hero"]' '["basis-2/5 md:basis-1/3", "basis-1/3" , "basis-2/3"]'}} ">
-        {{> components/teaser/components/teaser_lead }} 
+<article class="col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}"
+    x-data="{ avStart: false }"
+    {{#if this.isMobile1to1}}
+            :class="avStart ? 'flex-col' : 'flex-row'"
+    {{/if}} 
+    >
+    <figure class="relative ar-16-9{{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-2/3"," basis-2/5 md:basis-1/3"," basis-2/5 md:basis-1/2"]'~}}">
+        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }} 
     </figure>
-    <div class="{{inline-switch this.teaserSize '["50","100","hero"]' '["basis-3/5 md:basis-2/3","basis-2/3","basis-1/3"]'}} ">
-        <header class="px-5 md:px-0">
+    <div class="{{~inline-switch this.teaserSize '["hero","100","50"]' '["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]'~}}">
+        <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
             {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }}
                 {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
                     headlineTag=this.headlineTag 
@@ -14,7 +19,7 @@
                     topline=this.topline}} 
             {{/components/base/link}}               
         </header>
-        <section class="px-5 md:px-0">
+        <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
             {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>

package/dist/views/components/video/livestream/video_livestream.hbs

@@ -1,4 +1,4 @@
-<div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-hr-mediaplayer-loader-ds='{
+<div x-show="avStart" id="{{nextRandom}}" class="h-auto ar-16-9 js-load" data-hr-mediaplayer-loader-ds='{
     "type": "live",
     "position": "{{if _isTeaser 'teaser' 'page'}}",
     "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",

package/dist/views/components/video/video_element.hbs

@@ -1,4 +1,4 @@
-<div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-hr-mediaplayer-loader-ds='{
+<div x-show="avStart" id="{{nextRandom}}" class="h-auto ar-16-9 js-load" data-hr-mediaplayer-loader-ds='{
     "type": "ondemand",
     "position": "{{if _isTeaser 'teaser' 'page'}}",
     "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.50.3",
+    "version": "0.50.6",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/assets/fixtures/teaser/teaser_alternative_100_serif.json

@@ -13,6 +13,21 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_1_tab"
+            }
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_alternative_100_serif_audio.json

@@ -0,0 +1,44 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_1_tab"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "audio"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_alternative_100_serif_live.json

@@ -0,0 +1,44 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_1_tab"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "live"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_alternative_100_serif_video.json

@@ -0,0 +1,44 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_1_tab"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "video"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_alternative_50_serif.json

@@ -13,6 +13,21 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_2_tab"
+            }
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_alternative_50_serif_audio.json

@@ -0,0 +1,44 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_2_tab"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "audio"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_alternative_50_serif_live.json

@@ -0,0 +1,44 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_2_tab"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "live"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_alternative_50_serif_video.json

@@ -0,0 +1,44 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_2_tab"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "video"
+            }
+        }
+    ]
+}

package/src/assets/fixtures/teaser/{teaser_alternative_25_serif.json → teaser_alternative_hero_serif_audio.json}

@@ -6,19 +6,19 @@
             "@->contentpath": "logicItem.includePath",
             "@->value": "components/teaser/teaser_alternative"
         },
-        {
-            "@->contentpath": "logicItem.includeModel.teaserSize",
-            "@->value": "25"
-        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"
         },
         {
-            "@->contentpath": "logicItem.includeModel.link.content.teaserImage",
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
             "@->value": {
-                "@->jsoninclude": "teaser/teaser_images.inc.json",
-                "@->contentpath": "sm_4"
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "audio"
             }
         }
     ]

package/src/assets/fixtures/teaser/{teaser_alternative_33_serif.json → teaser_alternative_hero_serif_live.json}

@@ -6,19 +6,19 @@
             "@->contentpath": "logicItem.includePath",
             "@->value": "components/teaser/teaser_alternative"
         },
-        {
-            "@->contentpath": "logicItem.includeModel.teaserSize",
-            "@->value": "33"
-        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"
         },
         {
-            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
             "@->value": {
-                "@->jsoninclude": "teaser/teaser_images.inc.json",
-                "@->contentpath": "md_2"
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "live"
             }
         }
     ]

package/src/assets/fixtures/teaser/teaser_alternative_hero_serif_video.json

@@ -0,0 +1,25 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.allowAVConsumption",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserLead",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_lead.inc.json",
+                "@->contentpath": "video"
+            }
+        }
+    ]
+}

package/src/stories/views/components/button/button_pseudo.hbs

@@ -0,0 +1,3 @@
+{{#>components/base/link css="px-2 border text-toplineColor border-toplineColor font-heading hover:underline" }}
+    {{_linkTitle}}
+{{/components/base/link}}

package/src/stories/views/components/teaser/components/teaser_title_classes.hbs

@@ -30,7 +30,7 @@ the 4 parameters are:
         {{~inline-switch
             size
             '["hero","100","50"]'
-            '["text-2xl md:text-3xl","text-2xl md:text-3xl","text-2xl"]'
+            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'poster-ds'~}}