hr-design-system-handlebars 1.51.8 → 1.51.9

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.51.9 (Mon Dec 18 2023)
+
+#### 🐛 Bug Fix
+
+- Banner print view bug [#794](https://github.com/mumprod/hr-design-system-handlebars/pull/794) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.51.8 (Fri Dec 15 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1481,9 +1481,6 @@ article.indexText ul {
 .hidden {
   display: none;
 }
-.aspect-auto {
-  aspect-ratio: auto;
-}
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
@@ -3211,7 +3208,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1702651048764;
+  counter-reset: cnt1702897335124;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3232,6 +3229,22 @@ article.indexText ul {
 /*! ****************************/
 /*! Aspect Ratio with fallback */
 /*! ****************************/
+.ar-auto {
+        aspect-ratio: auto;
+    }
+@supports not (aspect-ratio: auto) {
+        .ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
 .ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -3280,6 +3293,23 @@ article.indexText ul {
             clear: both;
         }
     }
+.ar-auto {
+        aspect-ratio: auto;
+    }
+@supports not (aspect-ratio: auto) {
+        .ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+    }
 /*! ********************************/
 /*! Aspect Ratio with fallback end */
 /*! ********************************/
@@ -3289,6 +3319,14 @@ article.indexText ul {
             [main-start] minmax(0, 63.75rem) [main-end]
             minmax(0, 1fr) [full-end];
     }
+@media print {
+        .grid-page {
+            grid-template-columns:
+                [full-start] minmax(0, 1fr)
+                [main-start] minmax(0, 43.75rem) [main-end]
+                minmax(0, 1fr) [full-end];
+        }
+    }
 .grid-content {
         grid-template-areas:
     "head"
@@ -3472,7 +3510,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1702651048764 1;
+  counter-increment: cnt1702897335124 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3488,7 +3526,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1702651048764);
+  content: counter(cnt1702897335124);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5209,8 +5247,8 @@ article.indexText ul {
 }
 @media print {
 
-  .print\:absolute {
-    position: absolute;
+  .print\:static {
+    position: static;
   }
 
   .print\:flex {
@@ -5220,6 +5258,10 @@ article.indexText ul {
   .print\:hidden {
     display: none;
   }
+
+  .print\:overflow-auto {
+    overflow: auto;
+  }
 }
 @media (min-width: 360px) {
 
@@ -5299,6 +5341,8 @@ article.indexText ul {
     font-size: 1.25rem;
     line-height: 1.6875rem;
   }
+
+
     .sm480\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -5575,6 +5619,36 @@ article.indexText ul {
     font-size: 1.25rem;
     line-height: 1.6875rem;
   }
+    .sm\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .sm\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .sm\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .sm\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .sm\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+
     .sm\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -6159,6 +6233,8 @@ article.indexText ul {
   .md\:transition-none {
     transition-property: none;
   }
+
+
     .md\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -6831,6 +6907,77 @@ article.indexText ul {
     position: relative;
   }
 }
+@media print {
+
+  @media (min-width: 1024px) {
+
+    .print\:lg\:static {
+      position: static;
+    }
+
+    .print\:lg\:hidden {
+      display: none;
+    }
+    .print\:lg\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:lg\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:lg\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+        .print\:lg\:ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:lg\:ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+    .print\:lg\:ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .print\:lg\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:lg\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+        .print\:lg\:ar-auto::before {
+            float: none;
+            float: initial;
+            padding-top: 0;
+            content: '';
+        }
+
+        .print\:lg\:ar-auto::after {
+            display: inline;
+            content: '';
+            clear: none;
+        }
+    }
+  }
+}
 @media (min-width: 768px) and (max-width: 1023px) {
 
   .tablet\:absolute {

package/dist/views/components/banner/header/banner_image.hbs

@@ -3,9 +3,9 @@
         <a href="{{../bannerLink}}">
     {{/if}}
     {{#unless ../_hideOnMobile }}
-        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="print:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{else}}
-        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block print:lg:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{/unless}}
     {{#if ../bannerLink}}
         </a>

package/dist/views/components/banner/header/banner_overlay.hbs

@@ -1,3 +1,3 @@
-{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute print:lg:static lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:static{{/if}}">{{/if}}
     {{> @partial-block }}
 {{#if _hasBackground}}</div>{{/if}}

package/dist/views/components/banner/header/banner_wrapper.hbs

@@ -1,6 +1,6 @@
-<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden print:overflow-auto -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
     <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 bg-white dark:bg-black{{/unless}}">
-        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto lg:ar-100-27 bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
+        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} ar-auto lg:ar-100-27 print:lg:ar-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

package/dist/views/components/banner/header/breadcrumb_wrapper.hbs

@@ -1,4 +1,4 @@
-<div class="grid grid-page{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
+<div class="grid grid-page print:hidden{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
     <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{#unless _hasBannerImage}} bg-white py-2{{/unless}}{{/if}}">
         {{> @partial-block }}
     </div>

package/dist/views/components/banner/structure_nav/structure_nav.hbs

@@ -1,5 +1,5 @@
 {{#with this.contentNav}}
-    <div class="grid order-3 grid-page">       
+    <div class="grid order-3 grid-page print:hidden">       
         <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
             x-data="{ isOpen: false}">
             <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false"> 

package/dist/views_static/components/banner/header/banner_image.hbs

@@ -3,9 +3,9 @@
         <a href="{{../bannerLink}}">
     {{/if}}
     {{#unless ../_hideOnMobile }}
-        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="print:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{else}}
-        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block print:lg:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{/unless}}
     {{#if ../bannerLink}}
         </a>

package/dist/views_static/components/banner/header/banner_overlay.hbs

@@ -1,3 +1,3 @@
-{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute print:lg:static lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:static{{/if}}">{{/if}}
     {{> @partial-block }}
 {{#if _hasBackground}}</div>{{/if}}

package/dist/views_static/components/banner/header/banner_wrapper.hbs

@@ -1,6 +1,6 @@
-<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden print:overflow-auto -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
     <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 bg-white dark:bg-black{{/unless}}">
-        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto lg:ar-100-27 bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
+        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} ar-auto lg:ar-100-27 print:lg:ar-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

package/dist/views_static/components/banner/header/breadcrumb_wrapper.hbs

@@ -1,4 +1,4 @@
-<div class="grid grid-page{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
+<div class="grid grid-page print:hidden{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
     <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{#unless _hasBannerImage}} bg-white py-2{{/unless}}{{/if}}">
         {{> @partial-block }}
     </div>

package/dist/views_static/components/banner/structure_nav/structure_nav.hbs

@@ -1,5 +1,5 @@
 {{#with this.contentNav}}
-    <div class="grid order-3 grid-page">       
+    <div class="grid order-3 grid-page print:hidden">       
         <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
             x-data="{ isOpen: false}">
             <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false"> 

package/package.json

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

package/src/assets/css/custom-utilities.css

@@ -6,6 +6,25 @@
     /*! ****************************/
     /*! Aspect Ratio with fallback */
     /*! ****************************/
+    .ar-auto {
+        aspect-ratio: auto;
+    }
+
+    @supports not (aspect-ratio: auto) {
+        .ar-auto::before {
+            float: left;
+            padding-top: 0;
+            content: '';
+        }
+
+        .ar-auto::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+
     .ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -146,6 +165,14 @@
             [main-start] minmax(0, 63.75rem) [main-end]
             minmax(0, 1fr) [full-end];
     }
+    @media print {
+        .grid-page {
+            grid-template-columns:
+                [full-start] minmax(0, 1fr)
+                [main-start] minmax(0, 43.75rem) [main-end]
+                minmax(0, 1fr) [full-end];
+        }
+    }
 
     .grid-content {
         grid-template-areas:
@@ -230,7 +257,7 @@
     }
 
     .toggleSwitch-checkbox:focus+.toggleSwitch-label { 
-        @apply shadow-teaser-focus shadow-focus-state outline-none;
+        @apply outline-none shadow-teaser-focus shadow-focus-state;
     }
     
     .toggleSwitch-label {

package/src/stories/views/components/banner/header/banner_image.hbs

@@ -3,9 +3,9 @@
         <a href="{{../bannerLink}}">
     {{/if}}
     {{#unless ../_hideOnMobile }}
-        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="print:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{else}}
-        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block print:lg:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
     {{/unless}}
     {{#if ../bannerLink}}
         </a>

package/src/stories/views/components/banner/header/banner_overlay.hbs

@@ -1,3 +1,3 @@
-{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute print:lg:static lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:static{{/if}}">{{/if}}
     {{> @partial-block }}
 {{#if _hasBackground}}</div>{{/if}}

package/src/stories/views/components/banner/header/banner_wrapper.hbs

@@ -1,6 +1,6 @@
-<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+<div class="grid grid-page w-full order-2{{#if _hasBannerImage}} overflow-hidden print:overflow-auto -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
     <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasBannerImage}} px-4 md:px-5 lg:px-10 bg-white dark:bg-black{{/unless}}">
-        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto lg:ar-100-27 bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
+        <div class="relative {{#if _hasBannerImage}}-hasImage{{~#if _hideOnMobile}} ar-auto lg:ar-100-27 print:lg:ar-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{else}}pb-4 border-b border-gray-boulder{{/if}}">
             {{> @partial-block }}
         </div>
     </div>

package/src/stories/views/components/banner/header/breadcrumb_wrapper.hbs

@@ -1,4 +1,4 @@
-<div class="grid grid-page{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
+<div class="grid grid-page print:hidden{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
     <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{#unless _hasBannerImage}} bg-white py-2{{/unless}}{{/if}}">
         {{> @partial-block }}
     </div>

package/src/stories/views/components/banner/structure_nav/structure_nav.hbs

@@ -1,5 +1,5 @@
 {{#with this.contentNav}}
-    <div class="grid order-3 grid-page">       
+    <div class="grid order-3 grid-page print:hidden">       
         <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
             x-data="{ isOpen: false}">
             <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false">