hr-design-system-handlebars 0.42.5 → 0.42.6

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.42.6 (Wed Apr 13 2022)
+
+#### 🐛 Bug Fix
+
+- - added aspect ratio classes with fallback to tailwind.css [#215](https://github.com/mumprod/hr-design-system-handlebars/pull/215) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.42.5 (Wed Apr 13 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -796,6 +796,54 @@ Ensure the default browser behavior of the `hidden` attribute.
         grid-column: full;
     }
 
+/*! ****************************/
+
+/*! Aspect Ratio with fallback */
+
+/*! ****************************/
+
+.ar-16-9 {
+        aspect-ratio: 16 / 9    
+    }
+
+@supports not (aspect-ratio: 16 / 9) {
+        .ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .ar-16-19::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+.ar-1-1 {
+        aspect-ratio: 1 / 1    
+    }
+
+@supports not (aspect-ratio: 1 / 1) {
+        .ar-1-1::before {
+            float: left;
+            padding-top: 100%;
+            content: '';
+        }
+
+        .ar-1-1::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+/*! ********************************/
+
+/*! Aspect Ratio with fallback end */
+
+/*! ********************************/
+
 .headline--barrier {
         display: -webkit-box;
         display: -ms-flexbox;
@@ -2478,155 +2526,216 @@ Ensure the default browser behavior of the `hidden` attribute.
     }
 }
 @media (min-width: 768px) {
+    .md\:ar-16-9 {
+        aspect-ratio: 16 / 9    
+    }
+
+    @supports not (aspect-ratio: 16 / 9) {
+        .md\:ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .ar-16-19::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
     .md\:static {
         position: static;
     }
+
     .md\:top-auto {
         top: auto;
     }
+
     .md\:left-auto {
         left: auto;
     }
+
     .md\:top-12 {
         top: 3rem;
     }
+
     .md\:left-0 {
         left: 0px;
     }
+
     .md\:z-101 {
         z-index: 101;
     }
+
     .md\:order-2 {
         -webkit-box-ordinal-group: 3;
             -ms-flex-order: 2;
                 order: 2;
     }
+
     .md\:order-4 {
         -webkit-box-ordinal-group: 5;
             -ms-flex-order: 4;
                 order: 4;
     }
+
     .md\:col-span-8 {
         grid-column: span 8 / span 8;
     }
+
     .md\:col-span-6 {
         grid-column: span 6 / span 6;
     }
+
     .md\:col-span-4 {
         grid-column: span 4 / span 4;
     }
+
     .md\:col-span-3 {
         grid-column: span 3 / span 3;
     }
+
     .md\:mt-0 {
         margin-top: 0px;
     }
+
     .md\:-mt-40 {
         margin-top: -10rem;
     }
+
     .md\:block {
         display: block;
     }
+
     .md\:flex {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
     }
+
     .md\:hidden {
         display: none;
     }
+
     .md\:h-header-md {
         height: 5.5625rem;
     }
+
     .md\:h-12 {
         height: 3rem;
     }
+
     .md\:h-7 {
         height: 1.75rem;
     }
+
     .md\:h-full {
         height: 100%;
     }
+
     .md\:h-8 {
         height: 2rem;
     }
+
     .md\:w-1\/2 {
         width: 50%;
     }
+
     .md\:w-40 {
         width: 10rem;
     }
+
     .md\:w-80 {
         width: 20rem;
     }
+
     .md\:w-auto {
         width: auto;
     }
+
     .md\:w-8 {
         width: 2rem;
     }
+
     .md\:max-w-1\/2 {
         max-width: 50%;
     }
+
     .md\:flex-auto {
         -webkit-box-flex: 1;
             -ms-flex: 1 1 auto;
                 flex: 1 1 auto;
     }
+
     .md\:flex-col {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
             -ms-flex-direction: column;
                 flex-direction: column;
     }
+
     .md\:justify-end {
         -webkit-box-pack: end;
             -ms-flex-pack: end;
                 justify-content: flex-end;
     }
+
     .md\:rounded-none {
         border-radius: 0px;
     }
+
     .md\:border-0 {
         border-width: 0px;
     }
+
     .md\:border-r {
         border-right-width: 1px;
     }
+
     .md\:border-l {
         border-left-width: 1px;
     }
+
     .md\:border-white {
         --tw-border-opacity: 1;
         border-color: rgba(255, 255, 255, var(--tw-border-opacity));
     }
+
     .md\:px-0 {
         padding-left: 0px;
         padding-right: 0px;
     }
+
     .md\:px-5 {
         padding-left: 1.25rem;
         padding-right: 1.25rem;
     }
+
     .md\:px-4 {
         padding-left: 1rem;
         padding-right: 1rem;
     }
+
     .md\:pt-4 {
         padding-top: 1rem;
     }
+
     .md\:pl-0 {
         padding-left: 0px;
     }
+
     .md\:text-4xl {
         font-size: 2.125rem;
         line-height: 2.25rem;
     }
+
     .md\:drop-shadow-md {
         --tw-drop-shadow: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.07));
         -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
                 filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
     }
+
     .md\:filter {
         -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
                 filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

package/dist/views/components/Teaser/Teaser-standard.hbs

@@ -1,5 +1,5 @@
 <article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
-    <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full"]'}} ">
+    <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
         {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
             {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
         {{/components/base/link}}  

package/package.json

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

package/src/assets/tailwind.css

@@ -411,6 +411,50 @@
             grid-column: main;
         }
     }
+    /*! ****************************/
+    /*! Aspect Ratio with fallback */
+    /*! ****************************/
+    .ar-16-9 {
+        aspect-ratio: 16 / 9    
+    }
+
+    @supports not (aspect-ratio: 16 / 9) {
+        .ar-16-9::before {
+            float: left;
+            padding-top: 56.25%;
+            content: '';
+        }
+
+        .ar-16-19::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+    
+    .ar-1-1 {
+        aspect-ratio: 1 / 1    
+    }
+
+    @supports not (aspect-ratio: 1 / 1) {
+        .ar-1-1::before {
+            float: left;
+            padding-top: 100%;
+            content: '';
+        }
+
+        .ar-1-1::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
+
+    /*! ********************************/
+    /*! Aspect Ratio with fallback end */
+    /*! ********************************/
+
     .headline--barrier {
         display: flex;
         width: 100%;

package/src/stories/views/components/Teaser/Teaser-standard.hbs

@@ -1,5 +1,5 @@
 <article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
-    <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full"]'}} ">
+    <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
         {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
             {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
         {{/components/base/link}}