hr-design-system-handlebars 1.35.3 → 1.35.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.35.4 (Fri Aug 04 2023)
+
+#### 🐛 Bug Fix
+
+- add breakpoint 480px [#699](https://github.com/mumprod/hr-design-system-handlebars/pull/699) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.35.3 (Thu Aug 03 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -477,6 +477,12 @@ video {
     max-width: 360px;
   }
 }
+@media (min-width: 480px) {
+
+  .container {
+    max-width: 480px;
+  }
+}
 @media (min-width: 640px) {
 
   .container {
@@ -2589,6 +2595,9 @@ video {
   font-size: 3rem;
   line-height: 1;
 }
+.text-\[1\.1875rem\] {
+  font-size: 1.1875rem;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.375rem;
@@ -2662,6 +2671,9 @@ video {
 .leading-6 {
   line-height: 1.5rem;
 }
+.leading-\[1\.625rem\] {
+  line-height: 1.625rem;
+}
 .leading-\[34px\] {
   line-height: 34px;
 }
@@ -3015,7 +3027,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1691077591782;
+  counter-reset: cnt1691153880575;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3250,7 +3262,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1691077591782 1;
+  counter-increment: cnt1691153880575 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3266,7 +3278,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1691077591782);
+  content: counter(cnt1691153880575);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4558,6 +4570,13 @@ video {
     }
   }
 
+  @media (min-width: 480px) {
+
+    .lg\:container {
+      max-width: 480px;
+    }
+  }
+
   @media (min-width: 640px) {
 
     .lg\:container {
@@ -4929,6 +4948,27 @@ video {
     -webkit-line-clamp: 6;
   }
 }
+@media (min-width: 480px) {
+
+  .sm480\:my-5 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .sm480\:mt-4 {
+    margin-top: 1rem;
+  }
+
+  .sm480\:text-2xl {
+    font-size: 1.375rem;
+    line-height: 1.75rem;
+  }
+
+  .sm480\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:not-sr-only {
@@ -5223,11 +5263,6 @@ video {
     margin-right: 1.25rem;
   }
 
-  .md\:my-5 {
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
-  }
-
   .md\:-mt-40 {
     margin-top: -10rem;
   }

package/dist/views/components/article/components/accordion/accordion.hbs

@@ -1,4 +1,4 @@
-<h2 class="mb-5 text-lg font-normal mt-11 md:text-2xl font-headingSerif">{{this.title}}</h2>
+<h2 class="mb-5 text-[1.1875rem] leading-[1.625rem] font-normal mt-11 sm480:text-2xl font-headingSerif">{{this.title}}</h2>
 <div x-cloak x-data="{selected:0}" class="pb-11">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
@@ -8,12 +8,12 @@
                     @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal md:my-5 md:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 md:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
                     </span>
                     <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 md:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
                     </span>
                 </div>
             </button>

package/dist/views/components/article/components/accordion/accordion_item.hbs

@@ -1,13 +1,13 @@
 {{#if this.isParagraph}}
     {{#each this.text.split}}
         {{#if this.isText}}
-            <p class="mb-5">{{{this.text}}}</p>
+            <p class="mb-5 text-base sm480:text-lg">{{{this.text}}}</p>
         {{/if}}
         {{#if this.isUl}}
-            <ul class="mb-5 ml-5 list-disc">{{{this.text}}}</ul>
+            <ul class="mb-5 ml-5 text-base list-disc sm480:text-lg">{{{this.text}}}</ul>
         {{/if}}
         {{#if this.isOl}}
-            <ol class="mb-5 ml-5 list-decimal">{{{this.text}}}</ol>
+            <ol class="mb-5 ml-5 text-base list-decimal sm480:text-lg">{{{this.text}}}</ol>
         {{/if}}
     {{/each}}
 {{/if}}

package/dist/views_static/components/article/components/accordion/accordion.hbs

@@ -1,4 +1,4 @@
-<h2 class="mb-5 text-lg font-normal mt-11 md:text-2xl font-headingSerif">{{this.title}}</h2>
+<h2 class="mb-5 text-[1.1875rem] leading-[1.625rem] font-normal mt-11 sm480:text-2xl font-headingSerif">{{this.title}}</h2>
 <div x-cloak x-data="{selected:0}" class="pb-11">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
@@ -8,12 +8,12 @@
                     @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal md:my-5 md:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 md:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
                     </span>
                     <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 md:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
                     </span>
                 </div>
             </button>

package/dist/views_static/components/article/components/accordion/accordion_item.hbs

@@ -1,13 +1,13 @@
 {{#if this.isParagraph}}
     {{#each this.text.split}}
         {{#if this.isText}}
-            <p class="mb-5">{{{this.text}}}</p>
+            <p class="mb-5 text-base sm480:text-lg">{{{this.text}}}</p>
         {{/if}}
         {{#if this.isUl}}
-            <ul class="mb-5 ml-5 list-disc">{{{this.text}}}</ul>
+            <ul class="mb-5 ml-5 text-base list-disc sm480:text-lg">{{{this.text}}}</ul>
         {{/if}}
         {{#if this.isOl}}
-            <ol class="mb-5 ml-5 list-decimal">{{{this.text}}}</ol>
+            <ol class="mb-5 ml-5 text-base list-decimal sm480:text-lg">{{{this.text}}}</ol>
         {{/if}}
     {{/each}}
 {{/if}}

package/package.json

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

package/src/stories/views/components/article/components/accordion/accordion.hbs

@@ -1,4 +1,4 @@
-<h2 class="mb-5 text-lg font-normal mt-11 md:text-2xl font-headingSerif">{{this.title}}</h2>
+<h2 class="mb-5 text-[1.1875rem] leading-[1.625rem] font-normal mt-11 sm480:text-2xl font-headingSerif">{{this.title}}</h2>
 <div x-cloak x-data="{selected:0}" class="pb-11">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
@@ -8,12 +8,12 @@
                     @click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
             >
                 <div class="flex flex-row justify-between border-t basis-10/12 content-evenly border-gray-alto">
-                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal md:my-5 md:text-lg font-headingSerif">{{{this.text}}}</h3>
+                    <h3 :class="selected !== {{getRandom}} ? 'line-clamp-2' : ''" class="hover:text-toplineColor self-center my-3.5 text-base font-normal sm480:my-5 sm480:text-lg font-headingSerif">{{{this.text}}}</h3>
                     <span :class="selected == {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 md:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="plus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
                     </span>
                     <span :class="selected !== {{getRandom}} ? 'hidden' : ''">
-                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 md:mt-4 w-8 h-8 fill-current"}}
+                        {{> components/base/image/icon _icon="minus"  _addClass="hover:text-toplineColor mx-5 mt-2 sm480:mt-4 w-8 h-8 fill-current"}}
                     </span>
                 </div>
             </button>

package/src/stories/views/components/article/components/accordion/accordion_item.hbs

@@ -1,13 +1,13 @@
 {{#if this.isParagraph}}
     {{#each this.text.split}}
         {{#if this.isText}}
-            <p class="mb-5">{{{this.text}}}</p>
+            <p class="mb-5 text-base sm480:text-lg">{{{this.text}}}</p>
         {{/if}}
         {{#if this.isUl}}
-            <ul class="mb-5 ml-5 list-disc">{{{this.text}}}</ul>
+            <ul class="mb-5 ml-5 text-base list-disc sm480:text-lg">{{{this.text}}}</ul>
         {{/if}}
         {{#if this.isOl}}
-            <ol class="mb-5 ml-5 list-decimal">{{{this.text}}}</ol>
+            <ol class="mb-5 ml-5 text-base list-decimal sm480:text-lg">{{{this.text}}}</ol>
         {{/if}}
     {{/each}}
 {{/if}}

package/tailwind.config.js

@@ -16,6 +16,7 @@ module.exports = {
         screens: {
             print: { raw: 'print' },
             xs: '360px',
+            sm480: '480px',
             sm: '640px',
             // => @media (min-width: 640px) { ... }
             md: '768px',