hr-design-system-handlebars 1.59.11 → 1.59.13

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.59.13 (Wed Feb 28 2024)
+
+#### ⚠️ Pushed to `main`
+
+- 🐛 DPE-2928 ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.59.12 (Tue Feb 27 2024)
+
+#### 🐛 Bug Fix
+
+- add comments [#864](https://github.com/mumprod/hr-design-system-handlebars/pull/864) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.59.11 (Tue Feb 27 2024)
 
 #### ⚠️ Pushed to `main`

package/dist/assets/index.css

@@ -1165,6 +1165,9 @@ article.indexText ul {
 .m-4 {
   margin: 1rem;
 }
+.m-8 {
+  margin: 2rem;
+}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1209,6 +1212,10 @@ article.indexText ul {
   margin-top: 3rem;
   margin-bottom: 3rem;
 }
+.my-14 {
+  margin-top: 3.5rem;
+  margin-bottom: 3.5rem;
+}
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1522,6 +1529,9 @@ article.indexText ul {
 .h-8 {
   height: 2rem;
 }
+.h-96 {
+  height: 24rem;
+}
 .h-\[19px\] {
   height: 19px;
 }
@@ -3265,7 +3275,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1709051505711;
+  counter-reset: cnt1709114546592;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3308,7 +3318,7 @@ article.indexText ul {
 @supports not (aspect-ratio: 16 / 9) {
         .ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -3324,7 +3334,7 @@ article.indexText ul {
 @supports not (aspect-ratio: 4 / 3) {
         .ar-4-3::before {
             float: left;
-            padding-top: calc(4 / 3 * 100%);
+            padding-top: calc(3 / 4 * 100%);
             content: '';
         }
 
@@ -3350,23 +3360,6 @@ 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 */
 /*! ********************************/
@@ -3588,7 +3581,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1709051505711 1;
+  counter-increment: cnt1709114546592 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3604,7 +3597,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1709051505711);
+  content: counter(cnt1709114546592);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5389,36 +5382,6 @@ article.indexText ul {
             clear: both;
         }
     }
-    .print\:ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .print\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-        .print\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
 }
 @media (min-width: 360px) {
 
@@ -5568,7 +5531,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 16 / 7) {
         .sm480\:ar-16-7::before {
             float: left;
-            padding-top: 43.75%;
+            padding-top: calc(7 / 16 * 100%);
             content: '';
         }
 
@@ -5579,35 +5542,7 @@ article.indexText ul {
         }
         .sm480\:ar-16-7::before {
             float: left;
-            padding-top: 43.75%;
-            content: '';
-        }
-
-        .sm480\:ar-16-7::after {
-            display: block;
-            content: '';
-            clear: both;
-        }
-    }
-    .sm480\:ar-16-7 {
-        aspect-ratio: 16 / 7;
-    }
-
-    @supports not (aspect-ratio: 16 / 7) {
-        .sm480\:ar-16-7::before {
-            float: left;
-            padding-top: calc(16 / 7 * 100%);
-            content: '';
-        }
-
-        .sm480\:ar-16-7::after {
-            display: block;
-            content: '';
-            clear: both;
-        }
-        .sm480\:ar-16-7::before {
-            float: left;
-            padding-top: calc(16 / 7 * 100%);
+            padding-top: calc(7 / 16 * 100%);
             content: '';
         }
 
@@ -5649,36 +5584,6 @@ article.indexText ul {
             clear: both;
         }
     }
-    .print\:sm480\:ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .print\:sm480\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:sm480\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-        .print\:sm480\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:sm480\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
   }
 }
 @media (min-width: 640px) {
@@ -5964,7 +5869,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 16 / 9) {
         .sm\:ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -5975,7 +5880,7 @@ article.indexText ul {
         }
         .sm\:ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -5985,36 +5890,6 @@ article.indexText ul {
             clear: both;
         }
     }
-    .sm\:ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .sm\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .sm\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-        .sm\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .sm\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
 
     .sm\:col-main {
         grid-column: main;
@@ -6541,7 +6416,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 16 / 9) {
         .md\:ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -6552,7 +6427,7 @@ article.indexText ul {
         }
         .md\:ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -6598,7 +6473,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 100 / 27.1) {
         .md\:ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -6609,7 +6484,7 @@ article.indexText ul {
         }
         .md\:ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -6691,36 +6566,6 @@ article.indexText ul {
             clear: both;
         }
     }
-    .print\:md\:ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .print\:md\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:md\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-        .print\:md\:ar-auto::before {
-            float: none;
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .print\:md\:ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
   }
 }
 @media (min-width: 1024px) {
@@ -7195,7 +7040,7 @@ article.indexText ul {
     @supports not (aspect-ratio: 100 / 27.1) {
         .lg\:ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -7206,7 +7051,7 @@ article.indexText ul {
         }
         .lg\:ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -7311,36 +7156,6 @@ article.indexText ul {
             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) {

package/dist/views/components/page/components/comments.hbs

@@ -0,0 +1,12 @@
+{{~#if (isStorybook)~}}
+    <div id="commentList" class="my-14 bg-highlight-1 h-96">
+        <h2 class="m-8">
+            {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 fill-current"}}
+            <span class="text-base font-headingSerif">Ihre Kommentare</span>
+            <span class="block clear-both mt-3 text-2xl sm480:text-3xl sm480:leading-9 font-headingSerif dark:text-text-dark">Kommentar-Dummy</span>
+        </h2>
+        <p class="mx-8 my-6">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
+    </div>
+{{~else~}}
+    {{> content/comments/components/comments ~}}
+{{~/if~}}

package/dist/views/components/page/story/story_article.hbs

@@ -23,4 +23,6 @@
 
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
+    {{> components/page/components/comments }}
+
 {{/components/page/base/page_wrapper}}

package/dist/views_static/components/page/components/comments.hbs

@@ -0,0 +1,12 @@
+{{~#if (isStorybook)~}}
+    <div id="commentList" class="my-14 bg-highlight-1 h-96">
+        <h2 class="m-8">
+            {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 fill-current"}}
+            <span class="text-base font-headingSerif">Ihre Kommentare</span>
+            <span class="block clear-both mt-3 text-2xl sm480:text-3xl sm480:leading-9 font-headingSerif dark:text-text-dark">Kommentar-Dummy</span>
+        </h2>
+        <p class="mx-8 my-6">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
+    </div>
+{{~else~}}
+    {{> content/comments/components/comments ~}}
+{{~/if~}}

package/dist/views_static/components/page/story/story_article.hbs

@@ -23,4 +23,6 @@
 
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
+    {{> components/page/components/comments }}
+
 {{/components/page/base/page_wrapper}}

package/package.json

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

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

@@ -32,7 +32,7 @@
     @supports not (aspect-ratio: 16 / 9) {
         .ar-16-9::before {
             float: left;
-            padding-top: 56.25%;
+            padding-top: calc(9 / 16 * 100%);
             content: '';
         }
 
@@ -50,7 +50,7 @@
     @supports not (aspect-ratio: 16 / 7) {
         .ar-16-7::before {
             float: left;
-            padding-top: 43.75%;
+            padding-top: calc(7 / 16 * 100%);
             content: '';
         }
 
@@ -68,7 +68,7 @@
     @supports not (aspect-ratio: 4 / 3) {
         .ar-4-3::before {
             float: left;
-            padding-top: calc(4 / 3 * 100%);
+            padding-top: calc(3 / 4 * 100%);
             content: '';
         }
 
@@ -96,23 +96,6 @@
             clear: both;
         }
     }
-    .ar-16-7 {
-        aspect-ratio: 16 / 7;
-    }
-
-    @supports not (aspect-ratio: 16 / 7) {
-        .ar-16-7::before {
-            float: left;
-            padding-top: calc(16 / 7 * 100%);
-            content: '';
-        }
-
-        .ar-16-7::after {
-            display: block;
-            content: '';
-            clear: both;
-        }
-    }
     .ar-100-27 {
         aspect-ratio: 100 / 27.1;
     }
@@ -120,7 +103,7 @@
     @supports not (aspect-ratio: 100 / 27.1) {
         .ar-100-27::before {
             float: left;
-            padding-top: calc(100 / 27.1 * 100%);
+            padding-top: calc(27.1 / 100 * 100%);
             content: '';
         }
 
@@ -130,23 +113,6 @@
             clear: both;
         }
     }
-    .ar-auto {
-        aspect-ratio: auto;
-    }
-
-    @supports not (aspect-ratio: auto) {
-        .ar-auto::before {
-            float: initial;
-            padding-top: 0;
-            content: '';
-        }
-
-        .ar-auto::after {
-            display: inline;
-            content: '';
-            clear: none;
-        }
-    }
 
     /*! ********************************/
     /*! Aspect Ratio with fallback end */

package/src/stories/views/components/page/components/comments.hbs

@@ -0,0 +1,12 @@
+{{~#if (isStorybook)~}}
+    <div id="commentList" class="my-14 bg-highlight-1 h-96">
+        <h2 class="m-8">
+            {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 fill-current"}}
+            <span class="text-base font-headingSerif">Ihre Kommentare</span>
+            <span class="block clear-both mt-3 text-2xl sm480:text-3xl sm480:leading-9 font-headingSerif dark:text-text-dark">Kommentar-Dummy</span>
+        </h2>
+        <p class="mx-8 my-6">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
+    </div>
+{{~else~}}
+    {{> content/comments/components/comments ~}}
+{{~/if~}}

package/src/stories/views/components/page/story/story_article.hbs

@@ -23,4 +23,6 @@
 
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
+    {{> components/page/components/comments }}
+
 {{/components/page/base/page_wrapper}}